カラーコード変換ツール
どのCSS形式の色を貼り付けても、他のすべての形式とコントラストがわかります。
HEX、rgb()、hsl()、hwb()、CSSの色名を貼り付けるか、色を選んでください
明るい色と暗い色
値
- HEX
- #3a5bd9
- RGB
- rgb(58, 91, 217)
- HSL
- hsl(227.5, 67.7%, 53.9%)
- HSV / HSB
- hsv(227.5, 73.3%, 85.1%)
- HWB
- hwb(227.5 22.7% 14.9%)
- CMYK
- cmyk(73%, 58%, 0%, 15%)
- 近似値です。印刷の色はインクや用紙によって変わるので、正確な値は印刷会社に確認してください。
- OKLCH
- oklch(52.35% 0.1965 267.75)
- 最も近いCSS色名
- royalblue
コントラスト（WCAG）
この色の文字を各背景に置いた場合です。通常の文字はAAで4.5:1、AAAで7:1、大きな文字（18pt、または太字14pt）は3:1と4.5:1が必要です。
白の上
大きな文字
いろはにほへと ちりぬるを わかよたれそ つねならむ
5.71:1
- AA 通常 合格
- AAA 通常 不合格
- AA 大 合格
- AAA 大 合格
黒の上
大きな文字
いろはにほへと ちりぬるを わかよたれそ つねならむ
3.68:1
- AA 通常 不合格
- AAA 通常 不合格
- AA 大 合格
- AAA 大 不合格
#ffffffの上
大きな文字
いろはにほへと ちりぬるを わかよたれそ つねならむ
5.71:1
- AA 通常 合格
- AAA 通常 不合格
- AA 大 合格
- AAA 大 合格
カラーコード変換の使い方
色を入力
HEXコード、rgb()、hsl()、hwb()、tomatoのような色名を貼り付けるか、カラーピッカーで選びます。
必要な形式をコピー
入力に合わせてすべての形式が更新されます。各ボタンでコピーするか、よく使う形式を大きなコピーボタンに設定します。
コントラストを確認
白、黒、好きな背景でのWCAGコントラスト比を、通常の文字と大きな文字のAA・AAA判定付きで確認できます。
Utils365が選ばれる理由
どのCSSの色も読み取り
3・4・6・8桁のHEX、従来のカンマ区切りと新しいスペース区切りのrgb()とhsl()、hwb()、パーセント、色相の単位、148の色名すべてに対応。
最新の形式も
デザインシステムや広色域CSS向けのOKLCH、カラーピッカー向けのHWBとHSV、半透明の色向けのアルファ付きHEXも得られます。
アクセシビリティも確認
コントラスト比はWCAG 2に厳密に従い、合格側に切り上げることはないので、4.49:1が4.5:1として合格になることはありません。
明るい色と暗い色
見本の下に5段階の明るい色と5段階の暗い色が並びます。クリックするとその色が現在の色になります。
よくある質問
HEXとRGBの違いは何ですか？
色そのものに違いはありません。どちらも赤・緑・青を0〜255で表します。HEXはそれぞれを16進数2桁で書くので、rgb(58, 91, 217)は#3a5bd9になります。HEXは短く、rgb()は読みやすく手で調整しやすい形式です。
HSLとは何ですか？
色相（Hue）、彩度（Saturation）、明度（Lightness）です。色相は色相環上の位置を度で表し（0が赤、120が緑、240が青）、彩度は鮮やかさ、明度は0%の黒から100%の白までを表します。色を明るく、暗く、くすませた版を簡単に書けます。
CMYKが印刷した色と合わないのはなぜ？
画面は光を混ぜ、プリンターはインクを混ぜるので、結果はインク、用紙、プリンターのプロファイルによって変わります。表示されるCMYKは標準的な簡易式によるものなので、出発点として使い、正確な値は印刷会社に確認してください。
WCAGのコントラスト比とは？
2つの色の明るさがどれだけ離れているかを表す値で、1:1（同じ）から21:1（白地に黒）まであります。WCAG AAは通常の文字で4.5:1以上、大きな文字で3:1以上、AAAは7:1と4.5:1を求めています。
OKLCHとは何ですか？
人の色の見え方に基づき、明度、彩度（クロマ）、色相で色を書くCSSの新しい方法です。明度を変えても色相が同じに見えるため、デザインシステムやカラースケールでよく使われます。
色名はどのように決まりますか？
148のCSS色名のどれかと完全に一致すればその名前を表示します。一致しなければ見た目が最も近い色名を表示するので、色を言葉で説明するときに便利です。