データはサーバーに送信されません — すべての処理はブラウザで実行されます
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);
}カラー変換ツールは、HEX、RGB、HSL、OKLCHなどカラースペース間の変換ができる無料オンラインツールです。ビジュアルピッカー、画像パレット抽出、WCAGコントラストチェッカー、色覚プレビューを備え、ブラウザ上で完全に動作します。
カラー変換について
このカラーツールは、7つのカラースペース間の変換、カラーハーモニーの生成、コントラスト比のチェック（WCAGとAPCA）、色覚シミュレーション、画像からのパレット抽出を行います。
カラースペース
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ブロックをコピーしてそのワークフローに合わせましょう。
画像から色を抽出できますか？
はい。パレット抽出エリアに画像をドラッグ＆ドロップすると主要な色を取得できます。色覚異常のシミュレーション（1型、2型、3型色覚）も可能です。