色を選択
見た目で選ぶか、HEX値を入力するか、画面から色を取得します。
すぐに使える値
値をクリックするとCSS関数ごとコピーできます。
コントラストチェッカー
現在の色をテキスト色として、下の背景色との組み合わせを確認します。
コントラスト対応カラー
黒または白に近づけながら、各基準を満たす最小限の変更を見つけます。
ハーモニーパレット
現在の色からバランスのよい配色を作成します。色をクリックすると使用できます。
色覚プレビュー
一般的な色覚特性で現在の色がどのように見えるかを簡易表示します。
このプレビューは近似です。実際の利用者やアクセシビリティツールによる画面全体の検証にも取り組んでください。
パレット履歴
最近選んだ色はこのブラウザ内にのみ保存されます。
色を選ぶとローカル履歴が始まります。
WCAGコントラスト・アクセシビリティガイド
Webの読みやすさの基本基準：本文テキストで4.5:1以上、大きなテキスト（18ptまたは太字14pt以上）で3:1以上が必要です。
より高度なコントラスト水準：本文テキストで7:1以上、大きなテキストで4.5:1以上が必要で、長文や重要な画面におすすめです。
色相を変えずに黒または白方向へ最小限の輝度調整を行い、目標のコントラスト比を満たす色を計算します。
数値はあくまで客観的な指標です。細いウェイト、小さなサイズ、画面の反射などを実際の利用者視点で確認してください。
WCAGコントラスト基準を満たすことで、さまざまな端末や明るさの環境でもコンテンツを快適に読めるようになります。
Color Pickerの使い方
色の選択・サンプリング
パレットから直感的に選ぶか、3桁・6桁のHEX値を入力するか、スポイトで画面上のピクセルを抽出します。
コントラストと配色の確認
明暗の背景に対するテキストの読みやすさを確認し、UIアクセントに最適なバランスの良い配色を作成します。
CSSと色形式のコピー
カラーコードをクリックしてHEX、RGB、HSL、HWB、OKLCHの各値をコピーしたり、そのまま使えるCSS変数を取得できます。
モダンな色形式について
HEXとRGBはデジタルデザインの標準形式であり、HSLとHWBは色相・彩度・明度を直感的に調整するのに適しています。
OKLCHは人間の視覚に合わせた均一な調整が可能で、色相が変わっても明るさの感覚が一定に保たれ、Display P3などの広色域カラーも活用できます。
プライベートな端末内処理
すべての変換、コントラスト計算、色覚プレビュー、パレット保存はお使いのブラウザ内で完結し、サーバーに色情報が送信されることはありません。
最近のパレット履歴はブラウザのローカルストレージに安全に保存されるため、アカウント登録なしでいつでも再利用できます。