# カラー変換

色を HEX・RGB・HSL・HWB・OKLCH 間で変換し、背景とのWCAGコントラストを確認し、Material 3のトーナルパレットも作れます。

https://codeknife.dev/ja/kara-henkan/

## できること

色を HEX・RGB・HSL・HWB・OKLCH 間で変換し、背景とのWCAGコントラスト比を確認し、Material 3のトーナルパレットを作ります。すべてブラウザ内で動作します。

## 使い方

1. 色を hex（`#36c`、`#3366cc`）または `rgb()`、`hsl()`、`hwb()`、`oklch()` で入力します。
2. **変換**、**コントラスト**、**パレット**のいずれかを選びます。コントラストでは背景色の入力欄が表示されます。
3. 結果をコピー・ダウンロードするか、別のツールに送ります。

## 例

`#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段階のトーンを並べます。背後のカラーライブラリは、このモードを選んだときだけ読み込まれます。