カラーピッカー

カラーフォーマットの説明

HEX vs RGB vs HSL

デザイナーと開発者へのヒント

画面上のすべての色はHEX、RGB、HSLなど複数のフォーマットで表現できます。ツールやワークフローによって好みのフォーマットが異なります。FigmaはHEXとRGBを使用し、CSSは3つすべてをサポートし、TailwindはconfigでHEXを使用します。このツールを使えばどの色でも選択して、必要なフォーマットで即座にコピーできます。

わずかに暗いホバー状態を作成するには、ベースのHSL色のL値を10下げます。半透明のオーバーレイを作るにはrgba(r, g, b, 0.15)のRGB値を使用します。一貫したパレットを作るにはHを固定してSとLを変化させます。

デザイナーはスタイルガイドのブランドカラーをCSS実装用の正確なHEXコードに合わせるためにこれを使用します。フロントエンド開発者はテーマ用のCSS変数を書く際にFigmaのHEX値をHSLに素早く変換します。コンテンツクリエイターはCanvaのソーシャルメディアグラフィック用にブランドに合った色を選ぶために使用します。UI/UXチームはHSLモデルを使って単一のブランド色相からティント（高L）とシェード（低L）を体系的に構築し、完全なデザインシステムを作ります。

HEX、RGB、HSLはほとんどのWebとデザインワークフローをカバーしていますが、特定の目的に存在する他のカラースペースもあります。CMYKは印刷デザインで使用され、プリンターは光ではなくシアン、マゼンタ、イエロー、ブラックのインクを使います。HSV（色相・彩度・明度）はHSLに似ていますが、PhotoshopのカラーピッカーなどのImage編集ツールで使われます。OKLCHは知覚的に均一な色のステップを提供する新しいCSSカラースペースで、プログラムで生成されるカラースケールに優れています。ほとんどのWeb作業ではHEXとHSLで十分です。

色を選ぶことは仕事の半分に過ぎません。WCAGコントラスト要件に対して確認することが残り半分です。WCAG AAは通常テキストで最低4.5:1、大きなテキストやUIコンポーネントで3:1のコントラスト比を要求します。色を選んだ後、コントラストチェッカーを使って前景と背景の組み合わせをテストしてください。明るい背景に暗いテキスト、暗い背景に明るいテキストは一般的に合格しますが、白やグレーに対する中間トーンの色は頻繁に失敗します。

• HEX — コンパクトで広くサポートされているが、一見では読みにくい。
• RGB — プログラマーにとって直感的で、alpha（rgba）が必要な場合に最適。
• HSL — 最も人間が読みやすく、Lを変えることで明るい・暗いバリアントを簡単に作れる。