カラーフォーマットが重要な理由
色は表面的には単純に見えます。つまり、見て、選び、使用します。しかし、プロのデザイン作業では、常にイライラする問題に遭遇します。同じ色でも、使用する場所によって表現が異なり、間違った形式を選択すると、ワークフローが必要以上に難しくなります。
HEX: ウェブ標準
次のような 16 進数のカラーコード#667eeaWeb 開発で最も一般的な形式です。赤、緑、青の値 (0 ～ 255) を、6 文字の文字列に連結された 2 桁の 16 進数としてエンコードします。この形式はコンパクトで簡単にコピーでき、CSS、HTML、デザイン ツールで広くサポートされています。
3 つのペアがすべて同じ数字の場合、コードを短縮できます。#ffffffになる#fff。この省略表現は、すべての主要なブラウザとプリプロセッサで機能します。
RGB: 透明性とプログラムによる制御
RGB (およびそのバリエーション RGBA) は、透明度が必要な場合、またはプログラムで色を計算する場合に推奨される形式になります。rgba(102, 126, 234, 0.5)カラーの不透明度を 50% にします。HEX で直接表現することは不可能です (ただし、HEX は次のような 8 文字の形式をサポートしています)。#667eea80知っている開発者はほとんどいません)。
HSL: パレットビルダーの秘密兵器
HSL（色相、彩度、明度）が最も高い人間が読めるカラー形式。色相は、カラー ホイール上の角度 (0 ～ 360°) です。彩度は色の鮮やかさです。明度とは、どのくらい明るいか暗いかです。
これにより、パレットの作成が簡単になります。デザイン システムに同じ色合いの 10 個のシェードを作成するには:
- HとSは同じにしておきます
- L を 10、20、30、40、50、60、70、80、90、95 に設定します。
- これで、10 段階のカラー スケールが完成しました。
アクセシビリティ: コントラスト比
WCAG 2.1 AA アクセシビリティ標準では、通常サイズのテキストの場合はテキストとその背景の間のコントラスト比が 4.5:1、大きなテキストの場合は 3:1 が必要です。 UI で色の組み合わせを最終的に決定する前に、コントラスト比をテストしてください。コントラスト比の失敗は、Web デザインにおける最も一般的なアクセシビリティ違反の 1 つです。
| 標準 | 通常のテキスト | 大きなテキスト (18 ポイント以上) |
|---|---|---|
| WCAG AA | 4.5:1 | 3:1 |
| WCAG AAA | 7:1 | 4.5:1 |
印刷と画面では色が異なって見えるのはなぜですか?
画面はRGB（加算光）モデルを採用しています。プリンターはCMYK（減法インク）を使用します。同じ HEX カラーでも、印刷すると著しく異なって見えることがあります。印刷に正確なカラーを使用するには、Adobe Illustrator や InDesign などの専門ツールで CMYK に変換します。
スポイトツールは実際に何をするのでしょうか?
スポイトはブラウザの EyeDropper API を使用して、ブラウザ ウィンドウだけでなく、画面上の任意の場所からピクセル カラーをサンプリングします。任意のピクセルの正確な RGB 値を読み取り、それらを 3 つのフォーマットすべてに即座に変換します。