カラー変換
色を HEX・RGB・HSL・HWB・OKLCH 間で変換し、背景とのWCAGコントラストを確認し、Material 3のトーナルパレットも作れます。
コード例
自分のプロジェクトにコピーして使えます。どの例も言語の標準ライブラリだけを使うので、インストールするものはありません。
const foreground = '#3366cc'
const background = '#ffffff'
const luminance = (hex) => {
const [r, g, b] = [1, 3, 5].map((start) => {
const channel = parseInt(hex.slice(start, start + 2), 16) / 255
return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4
})
return 0.2126 * r + 0.7152 * g + 0.0722 * b
}
const [lighter, darker] = [luminance(foreground), luminance(background)].sort((a, b) => b - a)
const ratio = (lighter + 0.05) / (darker + 0.05)
// Truncated, not rounded: 4.499 must not pass as 4.5.
console.log((Math.floor(ratio * 100) / 100).toFixed(2))できること
色を HEX・RGB・HSL・HWB・OKLCH 間で変換し、背景とのWCAGコントラスト比を確認し、Material 3のトーナルパレットを作ります。すべてブラウザ内で動作します。
使い方
- 色を hex（
#36c、#3366cc）またはrgb()、hsl()、hwb()、oklch()で入力します。 - 変換、コントラスト、パレットのいずれかを選びます。コントラストでは背景色の入力欄が表示されます。
- 結果をコピー・ダウンロードするか、別のツールに送ります。
例
#3366cc は rgb(51 102 204)、hsl(220 60% 50%)、hwb(220 20% 20%)、oklch(0.5325 0.1679 262.29) です。白に対するコントラストは 5.36:1 で、通常の文字ではAAを満たしますがAAAは満たしません。
知っておくと便利なこと
- 比率はWCAG 2に従い、線形sRGBから相対輝度を求め、（明るい方 + 0.05）/（暗い方 + 0.05）で計算します。小数第2位で切り捨て、切り上げて合格にすることはありません。
- AAは通常の文字に4.5:1、大きな文字に3:1、AAAは7:1と4.5:1を求めます。
- 値はまず8ビットの整数チャンネルに丸めるので、どの行も同じhex色を表します。sRGBの範囲外のOKLCH色は、表示できる最も近い色に収められます。
- パレットは基準色の色相と彩度を保ち、Material 3と同じく 0、10、20 … 90、95、99、100 のトーンを並べます。
- 色名とアルファチャンネルには対応していません。
どの色の表記を読めますか？
hex（#36c や #3366cc）と、CSS関数の rgb()、hsl()、hwb()、oklch() です。値の区切りは空白またはカンマです。色名と透明度には対応していません。結果は同じ色を各表記で示し、sRGBの整数チャンネルに丸めます。
よくある質問
WCAGが求めるコントラスト比は？
AAは通常の文字に4.5:1、大きな文字とUI部品に3:1を求めます。AAAは7:1と4.5:1です。比率は切り捨てで、切り上げません。そのため4.49は合格になりません。
OKLCHとは何で、なぜ使うのですか？
OKLCHは、等しい差が等しく見えるよう設計された色空間で、明度・彩度・色相によって色を表します。色のスケール作りや、色相をずらさずに明度を調整するのに向いています。
パレットモードとは？
Material 3のトーナルパレットを作ります。基準色の色相と彩度を保ち、0（黒）から100（白）までの13段階のトーンを並べます。背後のカラーライブラリは、このモードを選んだときだけ読み込まれます。