HEXカラーピッカー

HEXカラーピッカー：HEX、RGB、HSL、OKLCH、明度 | We.Inc

色を選ぶか貼り付けると、HEX、RGB、HSL、OKLCH値、明るい色と暗い色の段階、白と黒に対するコントラストを確認できる無料ツール。

色を選択するか、HEX、RGB、HSL値を貼り付けると、デザインやコードに必要な形式（HEX、RGB、HSL、OKLCH）を確認できます。明るい色と暗い色の段階を表示し、白または黒の文字を重ねたときの読みやすさも確認できます。

画面上の色を表す6桁のコードです。#の後に赤、緑、青を示す16進数が2桁ずつ続きます。#FF0000は純粋な赤、#000000は黒、#FFFFFFは白です。

同じ色を異なる方法で表現します。HEXとRGBは赤、緑、青の量を示します。HSLは色相（色相環上の角度）、彩度、明度を示すため、手動で調整しやすい形式です。

人間の色の知覚に基づく新しいCSSカラー形式です。同じL値の色は同じ程度の明るさに見えるため、まとまりのある配色を作りやすくなります。現在の主要ブラウザーはすべて対応しています。

WCAG 2の計算式を使います。明るい色の相対輝度に0.05を加えた値を、暗い色の相対輝度に0.05を加えた値で割ります。2色の組み合わせを詳しく確認するには、We.Incのカラーコントラストチェッカーを使ってください。

ブランドカラーには複数の役割があります。ボタンで目立ち、白い文字の背景でも読みやすく、ページ全体に使っても目が疲れないことが必要です。中間的な青や緑、深い赤は、通常この3つを満たしやすい色です。黄色やパステルピンクなどの非常に明るい色はロゴには映えますが、調整しないと白文字も黒文字も読みづらく、ボタンには向きません。
コントラスト表示ですぐに確認できます。白文字の比率が4.5:1未満なら、黒文字を使うか、色の段階からより暗い色を選んでボタンに使いましょう。

明るい色は元の色に白を混ぜたもの、暗い色は黒を混ぜたものです。実用的なWeb配色には、セクション背景用のとても明るい色、ボタンやリンク用のメインカラー、ホバー状態用の暗い色があれば十分です。文字や境界線に中間色のグレーを足せば、統一感のある配色が完成します。
特定の文字色と背景色の組み合わせ（例：色付き背景の上のグレー文字）を確認するには、WCAG AAとAAAの両方を判定するカラーコントラストチェッカーを使いましょう。

無料で始める · クレジットカード不要