カラー変換

HEX↔RGB↔HSLとピッカー

読み込み中…

このツールは役に立ちましたか？

このツールについて

HEXカラーコードをRGB、HSL値に変換し、白文字と黒文字のどちらが見やすいかコントラストを計算します。同じ色相・彩度で明度だけ異なる6段階のパレットも表示するので、デザイン案を選ぶ際の参考になります。

使い方

  1. カラーピッカーをクリックするか、HEX値を直接入力します(3桁・6桁どちらも可)。
  2. RGB、HSL、CSS変数用の表記(スペース区切りのR G B)がすぐ下に表示されます。
  3. 同じ色相の明るさバリエーション6色のいずれかをクリックすると、その色に切り替わります。
  4. プレビューボックスの下で、白文字と黒文字のどちらがコントラストが大きいか、コントラスト比はいくつかを確認します。

よくある質問

このツールが対応する色形式は何ですか?
HEX(3桁・6桁)を入力として受け取り、RGB、HSL、そしてスペース区切りの「R G B」表記(rgb(var(--x) / 0.5)のようにCSS変数に入れる形式)に変換します。CMYKなどの印刷用形式には対応していません。
コントラスト比はどのように計算されますか?
WCAG仕様の相対輝度の計算式で各色の明るさを求め、白・黒の背景と組み合わせてコントラスト比を計算します。値が大きいほどコントラストが強く、文字が読みやすくなります。
6段階の明るさバリエーションはどんな基準で作られますか?
入力した色の色相(H)と彩度(S)はそのままに、明度(L)だけを90/75/60/45/30/15%に変えて6段階のパレットを作ります。
入力した色の値はサーバーに送信されますか?
いいえ。すべての変換とコントラスト計算はブラウザ内で行われ、サーバーには送信されません。

似ているツール