Utilore

カラーコード変換

#1f5fd6、1f5fd6、#1f5、rgb(31, 95, 214) など、よくある書き方で色を入力すると、ほかの表記が一度に表示されます。読みやすい文字色を決めるためのコントラスト比も併せて出ます。

  • #1f5fd6 HEX
  • rgb(31, 95, 214) RGB
  • hsl(219, 75%, 48%) HSL

コントラスト:

使い方

知っておくと便利

同じ色の三つの書き方

HEX は短く、CSS で広く通用します。RGB は各チャンネルを明示するため、手書きではなく計算で値を出すときに役立ちます。HSL は色相・彩度・明度で表すので、「同じ色をもう少し明るく」と考えるときに向いています。三つの数を当てずに、一つだけ動かせばよいからです。

コントラストは飾りではない

WCAG では本文は背景に対して 4.5:1 以上、大きな文字は 3:1 以上が求められます。ここに出る二つの数値を見れば、その色に白い文字が乗るのか、黒い文字が乗るのか、どちらも乗らないのかが、デザインを開発へ渡す前に分かります。

よくある質問

どの形式に対応していますか。

3桁・4桁・6桁・8桁の HEX（先頭の # はあってもなくても可）と、カンマ区切り・空白区切りの rgb()、rgba() です。アルファ値は保持され、HEX 表記にも反映されます。

なぜ HSL では色が少し違って見えることがあるのですか。

読みやすさのため HSL の値は整数に丸めています。そのため往復するとチャンネルが 1 だけずれることがあります。HEX と RGB の値は正確です。

サーバーに何か送られますか。

送られません。すべてページ内で計算するため、未公開のブランドカラーも端末の外に出ません。

関連ツール