* 入力内容はサーバーに送信されません。すべての計算はブラウザ上で実行されます
HEX
RGB
HSL
HSV
CMYK
LAB
OKLCH
HSVは参考用です。CSSにはhsv()関数がありません。HSLを使ってください。
CSS変数
--color-primary: #06d6a0;Tailwindユーティリティ
bg-[#06d6a0]Tailwind v4 @theme
@theme {
--color-primary: oklch(78% 0.16 167);
}カラー変換について
カラーコンバーターは、Web、印刷、デザインで使われるフォーマット間で同じ色を変換します。CSS用のHEX、調整用のRGB/HSL、印刷用のCMYK、知覚的均一性のためLAB/OKLCHなどです。
色空間
HEX — コンパクトな6/8桁のRGB表記。CSSのデフォルト。
RGB — 加法混色の原色0〜255。ディスプレイピクセルに直接マッピング。
HSL — 色相/彩度/明度。RGBより人間が直感的に扱いやすい。
HSV — 色相/彩度/明るさ。デザインツールで一般的だが、CSS関数ではない。
CMYK — 印刷用の減法混色の原色。RGBからの変換は近似値。
LAB — 知覚的に均一。数値の距離が見た目の距離にほぼ等しい。
OKLCH — モダンな知覚的色空間。Tailwind v4とCSS Color Module Level 4で推奨。
コントラスト（WCAG vs APCA）
WCAG 2.1は輝度比（1:1〜21:1）を使い、AA/AAAの閾値を定めています。広くサポートされていますが、小さなテキストやダークモードの知覚を完全には考慮していません。
APCAはWCAG 3の候補で、極性を考慮したLcスコアを使用します。細いテキストや小さなテキストの可読性と相関が高いです。
ヒント
- スポイトを使って画面上の任意のピクセルから色を取得できます（Chromium系ブラウザ）。
- パレットタブに画像をドロップすると、メディアンカット量子化で6つの主要色を抽出します。
- Tailwind v4は知覚的な滑らかさのためにOKLCHで色を出力します。@themeブロックをコピーしてそのワークフローに合わせられます。