HEX カラーピッカー
よく使うプリセット
ブラウザ標準のカラーピッカーで色を選ぶか、3 桁または 6 桁の HEX 値を入力します。RGB、HSL、概算 CMYK に変換し、相対輝度と白・黒に対する正確なコントラスト比を計算します。色の処理はこのブラウザ内で行われ、手順ページの URL には追加されません。
色を選ぶ手順
-
1
プリセットかカラーピッカーから始める
サンプル色を選ぶか、ブラウザ標準のカラーピッカーを開きます。
-
2
正確な HEX 値を入力する
#F60 のような 3 桁、または #FF6600 のような 6 桁を入力します。短縮形は正しく展開されます。
-
3
計算結果を確認する
HEX、RGB、HSL、概算 CMYK、sRGB 相対輝度をまとめて確認できます。
-
4
コントラストを確認してコピーする
白・黒との比を比較し、必要な HEX、RGB、HSL をコピーします。
実務で使う色表記
色モデルごとに、答えている問いが少しずつ異なります。
表記リファレンス
| 表記 | 要素 | 主な用途 |
|---|---|---|
| HEX | #RRGGBB | CSS、デザインツール、ブランドガイド |
| RGB | 赤 0〜255、緑 0〜255、青 0〜255 | CSS rgb()、画像編集ソフト |
| HSL | 色相 0〜360°、彩度 %、明度 % | CSS hsl()、デザインシステム |
| CMYK | シアン %、マゼンタ %、イエロー %、キー/ブラック % | 印刷、プリプレス |
アクセシビリティのコントラスト
WCAG 2.2 では、テキストと背景の最小コントラスト比が定義されています。
- 通常テキストの AA: ≥ 4.5:1
- 大きなテキストの AA（18 pt または 14 pt 太字）: ≥ 3:1
- 通常テキストの AAA: ≥ 7:1
このピッカーは、白と黒に対する比率をリアルタイムで計算します。前景色を個別に指定する必要がある場合は、色の組み合わせごとに専用のコントラストチェッカーで確認してください。
ヒント
- HEX は多くのデザインツールで標準の表記ですが、3 桁の短縮形 (
#F60) は#FF6600と同じで、#F06060ではありません。 - HSL はパレット作成に向いています。色相を固定し、明度を変えることで明るい色や暗い色を作れます。
- CMYK と RGB は完全には相互変換できません。印刷時の CMYK は印刷プロファイルに左右されます。必ず実際の紙で校正してください。
- モダン CSS 向けに設計するなら、知覚的に均一な明度ステップを作りやすい OKLCH も検討してください。
よくある質問
Photoshop はカラープロファイルを適用します。画面用は通常 sRGB、印刷用は別のプロファイルになることがあります。ブラウザはプロファイル指定のない HEX 値を sRGB として扱います。ドキュメントが Adobe RGB や ProPhoto に設定されている場合、ピクセル値は同じでも見える色が変わります。
はい。どちらも赤が 255、緑と青が 0 の純粋な赤を表します。HEX は、0〜255 の各チャンネル値を 2 桁の 16 進数で書いた表記です。
メインカラーを選び、HSL 値をコピーします。CSS やデザインツールで色相と彩度を固定し、明度を調整してください。前景色と背景色の組み合わせごとにコントラストを確認しましょう。
現在の色は、ガイド手順の間だけこのブラウザタブに最長 30 分保存されます。URL に追加されず、Livewire 経由でも送信されません。最初からやり直す、タブを閉じる、ブラウザデータを削除する、または期限が切れると消去されます。
関連ツール
バイナリからASCIIへの変換ツール
バイナリ（スペース区切りのバイト、または長いビット列）を貼り付けると、それが表すASCIIテキストを取得できます。7ビットと8ビットのエンコードに対応。
Base64 → Hex 変換ツール
Base64文字列を、その背後にあるバイトの16進表現へ変換します。トークン、鍵、証明書、JWTの確認に便利です。
BinaryからHexへのコンバーター
バイナリ入力を大文字の16進数値に変換します。0と1以外は無視され、先頭の0は保持されません。
BBCodeからHTMLへのコンバーター
BBCode（掲示板マークアップ）をきれいなHTMLへ変換します。装飾タグ、リスト、引用、コード、画像、リンク、表に対応。
2進数から10進数へ変換
2進数を瞬時に10進数へ変換します。各ビットがどのように寄与するかが分かる位取り展開を表示します。
2進数から8進数への変換ツール
2進数を3ビットずつまとめて8進数に変換します。Unixのパーミッション、レガシーシステム、コンパクトな数値表示に便利です。