色空間の説明

HEX、RGB、HSL、HSV、CMYK、LAB、XYZ の実践的なガイド - Web、印刷、デザインのワークフローで各スペースをいつ使用するか。

FAQ

CSS にはどの色空間を使用すればよいですか?: HEX と RGB が標準です。最新の CSS は、知覚的に優れたグラデーションとテーマを実現するために oklch() と lab() もサポートしています。

異なる色空間は、同じ知覚される色を異なる方法で表します。適切なスペースの選択は、補間、アクセシビリティチェック、CSS、印刷、またはデザインツールへのエクスポートに影響します。

Web 開発者は通常、sRGB (HEX/RGB/HSL) で作業しますが、印刷ワークフローでは CMYK が必要な場合があり、高度なデザインツールでは知覚的に均一な調整を行うために LAB を使用する場合があります。

HEX はコンパクトで CSS (#RRGGBB) でおなじみです。 RGB は画面チャンネルに直接マッピングされます。 HSL は色相、彩度、明度を分離します。テーマの微調整や色合いや色合いの生成に役立ちます。

API とデザイントークンには HEX/RGB を使用します。色相を安定させながらブランドカラーを明るくしたり暗くしたりする必要がある場合は、HSL を使用します。

CMYK は減法印刷インクをモデル化します。スクリーンとプリンターの色域は異なるため、RGB から CMYK への変換はおおよその値になります。

LAB と XYZ はデバイスに依存しません。 LAB は、知覚的に均一な勾配やアクセシビリティ関連の輝度計算に特に役立ちます。

HEX、RGB、HSL、HSV、CMYK、LAB、XYZ の実践的なガイド - Web、印刷、デザインのワークフローで各スペースをいつ使用するか。

CSS にはどの色空間を使用すればよいですか?: HEX と RGB が標準です。最新の CSS は、知覚的に優れたグラデーションとテーマを実現するために oklch() と lab() もサポートしています。

CMYK は減法印刷インクをモデル化します。スクリーンとプリンターの色域は異なるため、RGB から CMYK への変換はおおよその値になります。

LAB と XYZ はデバイスに依存しません。 LAB は、知覚的に均一な勾配やアクセシビリティ関連の輝度計算に特に役立ちます。