カラーピッカー

カラーピッカーは、ブラウザ上で色を選び、必要な形式の値を取得できる無料ツールです。

カラーピッカーでは何が取得できますか？

カラーピッカーでは、カラーホイールで選んだ色が数値として表示されます。同じ見た目の色でも複数の形式で表現でき、一般的には16進数、RGB、RGBA、HSL、HSLAが使われます。

形式によって色の表し方が異なります。16進数とRGBは、赤、緑、青の各チャンネル値を指定します。HSLは色相、彩度、明度を使うため、規則的な調整がしやすくなります。アルファチャンネルを含む形式では、不透明度も指定できます。

• 16進数では、#に続けて16進数字を記述します。例は#336699です。
• RGBでは通常、各チャンネルを0から255までの数値で表します。例はrgb(51, 102, 153)です。
• HSLでは、色相を角度、彩度と明度をパーセント値で表します。例はhsl(210, 50%, 40%)です。
• RGBAとHSLAでは透明度を追加できます。アルファ値が0なら完全に透明、1なら完全に不透明です。

CSSでは色名も使えますが、利用できる名前は決まっており、厳密なデザイントークンにはあまり向きません。生成された数値は通常、デザインシステム、スタイルシート、アプリケーションコードの間で扱いやすくなります。

カラーピッカーの使い方は？

Colorフィールドを選択し、カラーホイール上で目的の位置を指定します。あとは、アプリケーションに必要な形式で表示された値を使ってください。処理はすべてブラウザ内で行われ、入力した色がサーバーへアップロードされることはありません。

既存のインターフェースで使う場合は、まずコードベースですでに採用されている形式を選びましょう。不要な色変換を避けられ、プルリクエストも確認しやすくなります。外部データを調べる際は、見た目が同じような色に置き換える前に、元の値に不透明度が含まれているか確認してください。

デプロイ前には、目的の色を選ぶか再現し、適切な表記をコピーして、実際のコンポーネントの各状態で確認します。通常、ホバー、フォーカス、無効の状態はそれぞれ個別にテストしてください。不透明度や継承されたスタイルによって、最終的な表示結果が変わることがあります。

結果の見方

結果はカラーモデルに応じて読み取り、コードへコピーする前にアルファ成分の有無も確認してください。RGBでは、各チャンネル値が赤、緑、青それぞれの強さを制御します。HSLでは、色相がカラーホイール上の位置を表し、彩度が色の鮮やかさ、明度が黒と白のバランスを制御します。

CSSや構造化データで使う色の構文には、厳密な決まりがあります。手作業で編集するときによくある間違いは次のとおりです。

• CSSの16進数カラー値の先頭に#を付け忘れる。
• 標準の16進数表記として無効な5桁または7桁を使う。
• RGBの実装がチャンネルの数値を求めている箇所にパーセント値を指定する。
• 従来のRGB構文でカンマを入れ忘れる、または互換性のない旧構文と新構文を混在させる。
• 6桁の16進数しか受け付けないソフトウェアに、アルファ値を含む値をコピーする。
• CSSで小数点が必要な箇所に、0.5ではなく0,5のような小数点カンマを使う。

カラーピッカーは色の値を生成するツールであり、CSS全般を検証するものではありません。周囲の宣言、JSONドキュメント、テーマファイルが正しいことまでは保証しないため、色の値以外にある構文エラーは、対応するパーサーや開発ツールで確認する必要があります。

色変換の具体例

6桁の16進数カラーでは、2桁ずつを赤、緑、青に対応させます。たとえば、次の表記はすべて同じ不透明な色を表します。

16進数値 #336699

RGBでの表記 rgb(51, 102, 153)

HSLでの表記 hsl(210, 50%, 40%)

3桁の16進数は短縮表記です。各桁を繰り返すと6桁の値になります。

短縮16進数値 #fff

展開後の16進数値 #ffffff

RGBでの表記 rgb(255, 255, 255)

8桁の16進数では、赤、緑、青の各ペアの後にアルファ値が続きます。チャンネルの順序が異なるシステムや、8桁表記を受け付けないシステムには注意してください。また、同じように見える単色でも、別の背景上で不透明度が適用されると異なる結果になることがあります。

どの色形式を選べばよいですか？

明確な変更理由がなければ、出力先ですでに求められている色表記を選んでください。6桁の16進数は簡潔で、CSS変数やデザイントークンのファイルで広く使われています。ソフトウェアがチャンネル値を直接扱う場合はRGBが便利です。明度や彩度を調整して関連色を作る場合にはHSLが適しています。

• 不透明なWebカラーでは、簡潔さと幅広い読みやすさを重視するなら6桁の16進数を使います。
• 8桁の16進数は、対象環境がその表記のアルファ値に明示的に対応している場合にのみ使います。
• 赤、緑、青の各チャンネルを個別に扱う場合はRGBまたはRGBAを使います。
• 色相、彩度、明度を基準にプログラムでテーマのバリエーションを作る場合は、HSLまたはHSLAを使います。
• すでに値があり、新しい色を視覚的に選ぶのではなく別形式へ変換したい場合は、カラーコンバーターを使います。

画面上のRGB値を、そのまま印刷仕様として扱わないでください。商業印刷では、CMYK値、ICCカラープロファイル、色校正、印刷会社との合意が必要になることがあります。数式による変換だけでは、印刷色がバックライト付き画面の色と一致するとは保証できません。

色の選択や変換が不要なのはどんな場合ですか？

既存の値が出力先で必要な形式になっているなら、色を選び直したり変換したりする必要はありません。変換を繰り返すと、丸めによる差、英字の大文字と小文字の不統一、ソースファイルへの不要な変更が生じることがあります。

リテラル値へ置き換えず、テーマ変数などの名前付きデザイントークンを維持したほうがよい場合もあります。トークンを使えばコンポーネント間の関係を保ち、色を一か所でまとめて変更できます。同様に、機械だけが使う色は、人が確認または保守する必要がない限り、読みやすい表記に変える必要はありません。

選んだ色に十分なコントラストがあるか、ブランド仕様に合っているか、色覚特性のある人にも区別できるかを、カラーピッカーだけで判断することはできません。前景色と背景色の組み合わせは専用のコントラスト確認ツールで調べ、実際のインターフェース上でも確認してください。

よくある質問

取得した色をCSS変数で使えますか？

はい。選んだ表記が、対応対象のブラウザとビルドツールで有効なCSSであれば使えます。値全体をカスタムプロパティに保存し、var()関数で参照してください。プロジェクトで各チャンネルを個別に操作する場合は、そのプロジェクトですでに使われている規則に従ってチャンネルを保存するほうが便利なこともあります。

同じ色なのに別の画面では違って見えるのはなぜですか？

ディスプレイごとに、キャリブレーション、明るさ、パネル技術、対応する色域が異なるためです。ブラウザのカラーマネジメントや、OSのディスプレイプロファイルも表示に影響します。そのため、数値が一致していても、すべての端末で実際の見え方まで同一になるとは限りません。

16進数の英字は大文字と小文字で色が変わりますか？

いいえ。16進数字のAからFでは大文字と小文字が区別されないため、#AABBCCと#aabbccは同じ色を表します。表記だけの変更を避けるため、リポジトリで採用されている大文字と小文字の規則に従ってください。

色の値にアクセント付き文字やラテン文字以外を使えますか？

標準の16進数、RGB、HSL表記では、ASCIIの数字、英字、記号を使います。アクセント付き文字やラテン文字以外は、これらの数値による色構文には含まれません。ただし、使用する言語とファイルエンコーディングで許可されていれば、周囲の変数名やメタデータに含めることはできます。

完全に透明な色は、色がない状態と同じですか？

いいえ。完全に透明な色にも、それ自体では見えなくてもチャンネル値があります。こうした見えないチャンネルは、アニメーション、補間、合成、後からの不透明度変更で影響することがあります。アプリケーションがそのような動作を利用している場合は、値を保持してください。

小数のチャンネル値は丸めてもよいですか？

小数のカラーチャンネル値とアルファ値は、出力先が受け付け、かつ一貫した出力に必要な精度に限って丸めてください。精度が高すぎると値を確認しにくくなり、丸めすぎるとわずかな色の違いが生じることがあります。丸めた後は、想定する背景と操作状態に照らして、コンポーネントの表示を確認してください。