HEX を OKLCH に変換し、Tailwind v4 デザイントークンに対応します。知覚的に均一なライブ出力に加え、Display P3 色域の警告も表示。無料・ブラウザ完結。
ティント
シェード
トーン
ハーモニー
— — — — — HEX から OKLCH へのコンバーターは、HEX カラーコード（`#3b82f6`）を、OKLCH 空間で同じ色を符号化する知覚的に均一な Lightness / Chroma / Hue の 3 つ組（`oklch(0.629 0.193 263.4)`）に変換する小さなユーティリティです。HEX コードは、デザイナーや開発者が Figma、Sketch、Photoshop、ブランドガイドライン PDF、CSS スタイルシートの間でコピペする簡潔な基数 16 の文字列 — 3 つの 8 bit チャネルを 6 文字の `#RRGGBB` 形式にパックし、IEC 61966-2-1 が 1996 年に定義した sRGB 色空間にアンカーされています。OKLCH は OKLAB の極形式で、Björn Ottosson の 2020 年の知覚的に均一な色空間です。CSS Color 4 で `oklch()` 構文として CSS に追加されました（2022 年以降の W3C Candidate Recommendation）。チャネルは Lightness（0〜1、0〜100% としても記述可能）、Chroma（0 から、最も飽和した sRGB の色で約 0.4 まで、広色域の色では上限なし）、Hue（0〜360°、HSL が使うのと同じ角度軸）です。ブラウザサポートは 2022 年 3 月（Safari 15.4）と 2023 年 5 月（Firefox 113）の間にすべてのエバーグリーンで着地し、その中ほどに Chrome 111（2023 年 3 月）があります — caniuse の合算カバレッジは 94% を超えます。例: Tailwind の blue-500 は `oklch(0.629 0.193 263.4)` です。
**知覚的均一性 — なぜ重要か。** OKLCH（およびその直交形のいとこ OKLAB）では、L チャネルの等しい数値距離が等しい明るさの知覚距離に対応します — あらゆる色相、あらゆる chroma レベル、色空間のあらゆる領域にわたって。HSL では、等しい L 値が色相ごとに不均等に明るく見えます。HSL は sRGB のガンマの癖を継承しているからです: `hsl(120 100% 50%)` の緑は `hsl(240 100% 50%)` の青よりも見た目に明らかに明るく見えますが、両方とも L=50% と報告されます。構造的な原因は、HSL がガンマ符号化された sRGB のチャネル最大値と最小値の平均として L を幾何学的に導出するのに対し、OKLCH は最初に線形化し LMS 錐応答段を経由する知覚にアンカーされたモデルから L を導出するためです。実用上の含意: OKLCH で色相間で L を一定に保つと、視覚的に等価な明るさが得られます — `oklch(0.7 0.2 130)` の緑と `oklch(0.7 0.2 250)` の青は画面上で等しく明るく見えます。これが、Tailwind v4 が 2025 年にデフォルトパレットを OKLCH ベースのランプに移行した理由です — シェードのステップ（50、100、200、…、900、950）が同じ知覚的明度差に当たるため、ブランドカラーは色相ごとの手動チューニングなしに色相間で一貫して感じられます。
**Tailwind v4 とデザイントークン革命。** Tailwind v4（2025 年 1 月リリース）は HSL ベースのカラー生成を OKLCH ベースのシステムに置き換えました。shadcn/ui も間もなく続き、CSS 変数テーマに OKLCH を採用しました。Radix Colors v3 も採用しました。なぜ今か: デザインシステムはパレット全体で均等に間隔の取れたシェードを必要とし、パレットが成長してもその性質が自動的に保たれることを必要とします。HSL では、デザイナーは各色のステップを手動で補正する必要がありました — 青のランプの暗い側で緑のランプの暗い側に合わせるために L を 5% 余分に上げ、ブランドが進化したら再び上げ直す。OKLCH では、単一の公式（L を 0.1 ステップし、C と H を一定に保つ）が一貫したランプを自動的に生成します。実例: Tailwind v3 では、`red-500` と `blue-500` は同じ HSL L% であっても見た目の重みに明らかな違いがありました。v4 では、両方とも同じ OKLCH L に位置するためバランスよく見えます。これはアクセシビリティ（共有背景に対する一貫したコントラストにより、コンポーネントの状態がパレット全体で均一に感じられる）、ブランドの一貫性（パレット間で視覚的階層が保たれる — 同じ L の `primary` ボタンと `accent` ボタンは同じ階層レベルとして感じられる）、開発者の人間工学（デザイントークン仕様に埋もれた数十の手動チューニング例外ではなく、1 つのメンタルモデル）にとって重要です。
**広色域の含意。** OKLCH は無制限です — sRGB の外の色も表現でき、Display P3 と Rec.2020 が再現できるすべてを含みます。これがモダンな広色域ディスプレイにとって自然な選択になります。2017 年以降のほとんどの Apple デバイス（iPhone 7 以降、2016 年以降の MacBook Pro、すべての iPad Pro）は Display P3 をネイティブにレンダリングし、多くのモダンな Android デバイスやノート PC のスクリーンも同様です。トレードオフ: すべての OKLCH の 3 つ組が有効な sRGB の色にマップされるわけではありません。本ツールは 3 つの色域バッジ — sRGB、Display P3、Rec.2020 — を表示するので、現在の OKLCH が特定のターゲットで正しく表示されるかを即座に確認できます。色が sRGB のみのとき、**Snap to sRGB** ボタンは二分 chroma 減縮（CSS Color 4 §13 の情報提供的な色域マッピングアルゴリズムに従う）を使って L と H を保ったまま色を色域内に縮小します — 広色域クライアント向けの元の OKLCH 値と並べて `@supports not (color: oklch(0 0 0))` 経由で出荷できる hex フォールバックを与えます。
**HEX → OKLCH 変換の数学。** パイプラインは明確に定義され、2 つの一次資料に根ざしています: sRGB と XYZ の段には W3C CSS Color 4、OKLAB の段には Ottosson 2020。ステップ 1: `#RRGGBB` をチャネルごとに `parseInt(hex.slice(1, 3), 16)` で 3 つの 8 bit 整数 sRGB チャネルにパース。ステップ 2: 255 で割って各チャネルを 0〜1 に正規化。ステップ 3: CSS Color 4 §11.2 の区分的関数で線形 sRGB にガンマ復号（`v <= 0.04045 ? v/12.92 : ((v+0.055)/1.055)^2.4`）。ステップ 4: §15.1 の 3×3 行列を掛けて CIE XYZ D65 座標を得る。ステップ 5: Ottosson の LMS 行列（2020 年のリファレンス実装より）を掛けて各チャネルの立方根を取る。ステップ 6: Ottosson の OKLAB 行列を掛けて L / a / b を得る。ステップ 7: 直交から極座標へ — `C = sqrt(a² + b²); H = atan2(b, a) * 180 / π`、H を 0〜360° にラップ。フルパイプラインはマイクロ秒で動作します — キー入力ごとに OKLCH 出力をデバウンスなしに即座に再レンダリングします。
このツールの HEX → OKLCH ワークフローは、同じ統合カラーコンバーターを基盤として共有する 5 スポークファミリーの一方向です。専用の 統合カラーコンバーター がハブです — 9 つの形式を同時に編集可能で表示し、HEX と OKLCH 以上のものをワークフローが必要とするときに正しいツールです。単方向のスポークは具体的な Google 検索意図を狙います: canvas とハードウェア方向には HEX から RGB へのコンバーター、逆方向には RGB から HEX へのコンバーター、いまも多くの Tailwind v3 コードベースで使われるレガシーなデザイナー認知の円筒形空間には HEX から HSL へのコンバーター、印刷準備の近似には HEX から CMYK へのコンバーター。5 つのスポークとハブはすべて内部で同じ OKLCH を真実の源と同じ Ottosson 2020 行列を共有するため、ファミリー全体で結果は同一であることが保証されます。すべての変換はブラウザでローカルに動作します — hex コードがアップロードされたりログに記録されたりすることはなく、入力中のネットワークリクエストはゼロです。DevTools で確認してください。 OKLCH が 2024〜2026 年にデザインシステムの標準となった理由を深く知りたい方は、姉妹記事のOKLCH 色空間の解説 — Tailwind v4 が採用した理由もあわせてご覧ください。
// sRGB hex → OKLCH per W3C CSS Color 4 + Ottosson 2020
// References: https://www.w3.org/TR/css-color-4/#color-conversion-code
// https://bottosson.github.io/posts/oklab/
// Worked example: #3b82f6 (Tailwind blue-500) → oklch(0.629 0.193 263.4)
function hexToOklch(hex) {
const h = hex.trim().replace(/^#/, '');
const srgb = [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16) / 255);
// sRGB → linear-sRGB (CSS Color 4 §11.2 piecewise gamma)
const lin = srgb.map(v => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
const [lr, lg, lb] = lin;
// linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
const x = 0.4124564 * lr + 0.3575761 * lg + 0.1804375 * lb;
const y = 0.2126729 * lr + 0.7151522 * lg + 0.0721750 * lb;
const z = 0.0193339 * lr + 0.1191920 * lg + 0.9503041 * lb;
// XYZ D65 → LMS (Ottosson 2020), cube-root, → OKLAB
const l_ = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
const m_ = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
const s_ = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z);
const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
const b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;
// OKLAB → OKLCH (Cartesian to polar)
const C = Math.sqrt(a * a + b * b);
const H = (Math.atan2(b, a) * 180 / Math.PI + 360) % 360;
return `oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`;
}
console.log(hexToOklch('#3b82f6')); // → oklch(0.629 0.193 263.4) OKLCH の L チャネルは OKLAB 知覚モデル（Ottosson 2020）にアンカーされているため、L のすべてのステップがすべての色相にわたって同じ明るさの変化として見えます — `oklch(0.7 0.2 130)` の緑と `oklch(0.7 0.2 250)` の青は画面上で等しく明るく読めます。これは Tailwind v4 が色ごとの手動チューニングなしに視覚的に均等なランプを自動生成できる構造的な性質であり、HSL がそのガンマの癖のせいで保証できない性質と同じものです。
OKLCH 出力は CSS Color 4 のスペース区切り形式（`oklch(0.629 0.193 263.4)`）を使います — Tailwind v4 が `@theme` ブロック内で `--color-primary: oklch(0.629 0.193 263.4);` として期待する厳密な構文です。L の精度は Tailwind の公開パレットの精度（L と C で小数第 3 位、H で度数の小数第 1 位）と一致するため、設定ファイルへの貼り付けワークフローは Tailwind がデフォルトで出荷するのと同じトークンを生成します。完全なトークン行には Copy as code セクションの Tailwind v4 スニペットと組み合わせてください。
3 つのライブバッジ（sRGB、Display P3、Rec.2020）が、現在の OKLCH の 3 つ組がそれぞれの空間の再現可能範囲に収まっているかをフラグします。OKLCH は無制限であるため有用です — 多くの高彩度の色は sRGB を超えますが P3 には収まり、それは 2017 年以降のほとんどの Apple デバイスがネイティブにレンダリングできます。色域外ではバッジが赤になるので、モダンディスプレイ向けに広色域の値を残すか、ユニバーサルな互換性のために sRGB にスナップするかを判断できます。チャネル範囲チェックはキー入力ごとに走ります。
Snap to sRGB ボタンは二分 chroma 減縮（CSS Color 4 §13 情報提供アルゴリズム）を走らせます: L と H を固定し、結果としての sRGB 変換が色域内に留まるまで C を下方向に探索します。探索はサブピクセル精度で約 30 回反復で終了します。L と H を保つことで、スナップ後の色は同じ色相ファミリーとして同じ明るさで読めます — 彩度だけを失う、視覚的に最も衝撃の少ない妥協です。スナップ後の hex は `@supports not (color: oklch(0 0 0))` 経由で元の OKLCH とペアにできる、層状フォールバックです。
Convert ボタンはありません。HEX フィールドに 1 文字入力すると、OKLCH フィールドは同じアニメーションフレームで更新されます。内部の正規表現は OKLCH の 3 つ組そのものなので、OKLCH を直接編集することも同じくらい高速です — カーソルは置いた場所のまま、他の形式フィールドだけが再レンダリングされます。変換の数学（sRGB → 線形 → XYZ → LMS → OKLAB → 極座標）はマイクロ秒で動作します。デバウンスなし、レイテンシなし、目に見えるリフローなし。
code-example セクションは、W3C CSS Color 4 で公開されている厳密な行列とガンマ関数（§11.2 区分的ガンマ、§15.1 線形 sRGB → XYZ D65 行列）と Björn Ottosson の 2020 年 OKLAB リファレンス実装を使って、フルの HEX → OKLCH パイプラインの動作する JavaScript 実装を出荷します。Node REPL に貼り付けて、`#3b82f6` が `oklch(0.629 0.193 263.4)` を返すことを検証してください。すべての行列値は一次資料からコピペされており、再導出も再丸めもしていません。
このスポークは HEX → OKLCH を特に対象としていますが、同じページが他の 8 つの形式フィールドも公開しています — ハードウェア向けの RGB、レガシー CSS 向けの HSL、パレット数学向けの OKLAB、ピッカー UI 向けの HSV/HWB、印刷向けの CMYK、最も近い CSS 名前付きカラー。内部の OKLCH を真実の源とする方式により、すべてのフィールドがラウンドトリップを通してビット安定です: HEX → OKLCH → HSL → HEX は元の hex を復元します。任意のフィールドをクリックして直接編集し、他のフィールドが更新されるのを見ることができます。
本ツールは該当箇所で正規のブラウザサポートデータポイントを表面化します: Chrome および Edge 111（2023 年 3 月）、Safari 15.4（2022 年 3 月 — 最も早い）、Firefox 113（2023 年 5 月）、caniuse の合算カバレッジ 94% 超。古いクライアントには、トークンを `@supports (color: oklch(0 0 0))` でラップし、別ブランチで hex フォールバックを提供します。Snap to sRGB の出力はまさにそのフォールバックで、現在の OKLCH の 3 つ組から自動生成されます — 手動の chroma チューニング不要です。
すべての hex パース、OKLCH 変換、色域検出、コントラストスコアリング、パレット生成はブラウザでローカルに実行されます。hex コードは送信されず、サーバーにログとして記録されることもなく、解析もされません。入力中のネットワークリクエストはゼロ — DevTools で確認してください。未発表のブランドパレット、未公開製品の社内デザイントークン、NDA 下のドラフトモックアップ、その他あらゆる機密性のあるカラー作業に安全です。
Andrey Sitnik（postcss-oklab-function ポリフィルと Autoprefixer の作者）による、美しく構築された OKLCH に焦点を絞ったツール。広色域対応のピッカー、P3 を意識した可視化、パレット生成を備えた、純粋な OKLCH 探索のためのベストインクラスです。HEX/RGB/HSL/CMYK 変換を主要な出力としてはカバーせず、OKLCH 単独に集中しています。深い OKLCH デザイン作業をするときは OKLCH.com に手を伸ばし、クロス空間変換と色域/コントラスト/CVD 機能も必要なときは本ツールに手を伸ばしてください。
Tailwind v4 のドキュメントは hex 等価値と並べて完全なデフォルトパレットを OKLCH で公開します。厳密な Tailwind シェードを調べる（`blue-500` → `oklch(0.629 0.193 263.4)`）か、カスタムカラーを Tailwind シェードの視覚的重みに合わせるのに最適です。インタラクティブではなく、任意の hex コードの変換はしません。本ツールは同じ OKLCH 精度をカバーし、200+ の Tailwind デフォルトだけでなく任意の hex で動作します。
ColorJS.io は Lea Verou と Chris Lilley による権威ある CSS 色ライブラリ。プレイグラウンドはフルの変換グラフ（HEX、RGB、HSL、HWB、LCH、OKLCH、OKLAB、P3、Rec2020、ProPhoto、A98）を公開します。深く正しい数学で、仕様レベルのカラー作業に理想的です。UI は開発者向け（デザイナー向けではない）で、コントラスト / CVD / パレット機能を欠きます。本ツールと組み合わせてください: 他では検証できない数学には ColorJS.io、アクティブなワークフローには本ツール。
Vercel の shadcn テーマジェネレーターは shadcn/ui プロジェクト向けに、すぐ貼り付けられる OKLCH CSS 変数テーマを生成します。納品物が shadcn 設定ファイルである場合のエンドツーエンドのテーマ生成に最適です。任意の hex コードに対する中間の OKLCH 値は表面化せず、フルのテーマワークフローに集中しています。shadcn テーマを構築するときは shadcn ジェネレーターを、個別のあらゆる色の OKLCH が必要なときは本ツールを使ってください。
色ごとの長年運営される SEO ページで、深いメタデータ付き。HEX/RGB/HSL/CMYK と並べて OKLCH サポートを最近追加しました。UI は古め（2010 年代前半）、広色域検出なし、APCA コントラストなし。Google 経由で特定の hex を SEO 的に発見するには強いですが、統合フィールド UX と色域/コントラスト機能が重要なアクティブな変換ワークフローには弱いです。本ツールはすべてのアクティブワークフロー軸で勝ちます。
Chrome、Firefox、Safari の DevTools にはすべて、CSS ペインのカラースウォッチをクリックすると HEX、RGB、HSL、HWB、OKLCH を切り替えるインラインのカラーピッカーが付属します。無料、インストール不要、常に利用可能。色域バッジ、コントラストスコアリング、色覚特性シミュレーション、Web 以外のプラットフォーム（SwiftUI、Compose）向けのコードエクスポートが欠けています。すでに CSS をデバッグしているときは DevTools に手を伸ばし、クロスプラットフォーム出力やより深い検査が必要なときは本ツールに手を伸ばしてください。
Culori は最も網羅的な OKLCH 対応 JavaScript カラーライブラリ。その CLI は HEX → OKLCH 変換をワンライナーで扱います（`culori convert '#3b82f6' --to oklch`）。CI スクリプトとバッチトークン移行に優れます。ビジュアルピッカーや色域バッジはありません。自動化には Culori CLI を、インタラクティブな単一色作業と即時の視覚的フィードバックには本ツールを使ってください。
#3b82f6
OKLCH の出力: `oklch(0.629 0.193 263.4)`。Tailwind v4 の正規の移行ワークフロー: `@theme` ブロックで一度ブランドカラーを `--color-primary: oklch(0.629 0.193 263.4)` として定義し、L を上方向にステップさせてティントを構成（`oklch(0.7 0.193 263.4)`、`oklch(0.8 0.15 263.4)`）、L を下方向にステップさせてシェードを構成します（`oklch(0.5 0.193 263.4)`、`oklch(0.4 0.18 263.4)`）。色相は 263.4° に固定、chroma は 0.19 付近にアンカー、変動するのは知覚的明度だけ — スケール全体で視覚的に均等に読める 1 次元のランプで、これは同等の HSL ランプには保証できません。
#FF5733
OKLCH の出力: 概ね `oklch(0.66 0.18 28)`。このブランドのオレンジから 5 段のシェードランプを構築するには、C = 0.18 と H = 28 を一定に保ち、L を 0.3、0.45、0.6、0.75、0.9 とステップさせます — `oklch(0.3 0.18 28)` から `oklch(0.9 0.18 28)` までを生成します。隣接するペアごとに同じ視覚的な明るさの差として感じられます。OKLCH の L が HSL の幾何学的でガンマがらみの L ではなく、OKLAB 知覚モデル（Ottosson 2020）にアンカーされているためです。両端では chroma が静かに sRGB へとクリップされることがあります。本ツールの色域バッジが、どのステップに注意が必要かを正確にフラグします。
#FF1744
OKLCH の出力: 概ね `oklch(0.62 0.27 26)`。このような高彩度の赤は sRGB のキューブを超えます — **sRGB** の色域バッジが赤く点灯し、**Display P3** バッジは P3 に収まることを確認、Rec.2020 もカバーします。標準の 24 bit モニターでは彩度を落とした近似で描画され、Display P3 ディスプレイ（2017 年以降のほとんどの Apple デバイス）では飽和した状態で描画されます。**Snap to sRGB** をクリックすると二分 chroma 減縮アルゴリズム（CSS Color 4 §13 情報提供）が走ります — L と H を固定したまま、色が収まるまで C を縮小し、いまも 8 bit hex トークンを使う Tailwind v3 コードベースに適した hex フォールバックを生成します。
#0f172a
OKLCH の出力: 概ね `oklch(0.21 0.04 264.7)`。shadcn/ui は Tailwind v4 着地直後に CSS 変数テーマを OKLCH に移行しました。`#0f172a`（Tailwind の slate-900）は正規のダークモード背景です。本ツールは同じ hex に対して shadcn が公開する OKLCH 値を再現するので、コミュニティのテーマ移植がアップストリームの定義と一致するかを検証できます。コントラスト行と組み合わせて、ダークモードの前景（白またはほぼ白）がこの背景に対して WCAG AA を依然クリアすることを確認してください — `oklch(0.21 ...)` 対 `oklch(1 0 0)` は心地よい 16:1 の比率を報告します。
#3b82f6
OKLCH の出力: `oklch(0.629 0.193 263.4)`。テーマ用に揃ったダーク/ライトペアを導くには、C と H を一定に保ち L チャネルだけをピボットします: ライトモードのプライマリは `oklch(0.7 0.15 263)`（やや明るく、白背景での眼精疲労を避けるためにやや彩度を下げる）、ダークモードのプライマリは `oklch(0.5 0.18 263)`（やや暗く、暗い背景で目立たせるためにやや彩度を上げる）となります。色相が固定されているため、どちらのバリアントも同じブランドアイデンティティとして読めます。知覚的な L シフトが、チャネルごとの RGB 手動チューニングなしに、両モード間で可読性のバランスを取ります。
人気の Tailwind v4 デフォルトパレットの中間シェード 10 個とその HEX および OKLCH 等価のリファレンス表。値は Tailwind v4 が公開するパレットの精度（L と C で小数第 3 位、H は整数または小数第 1 位）と一致します。
Tailwind CSS デフォルトの slate-500 — 本文テキスト、セカンダリ表面、控えめな UI 要素に使われる中性的でクールなグレー。低い chroma（0.04）が視覚的に中性に保ちます。
#64748b → oklch(0.55 0.04 257) slate はダークモードに優しいテーマの正規の中性ランプです — すべての slate シェードが非常に低い chroma に位置するため、青みがかったグレーではなくグレーとして読めます。
RGB、HSL、CMYK、色域警告、コードエクスポートを備えたフルのカラーピッカーが必要ですか？ 統合カラーコンバーターを試してください — すべての形式を同時に編集可能です。
Tailwind CSS デフォルトの gray-500 — slate に対する真の中性のカウンターパート。よりアクロマチックな見た目のために slate よりわずかに低い chroma（0.03 対 0.04）。
#6b7280 → oklch(0.55 0.03 258) gray と slate はほぼ同一の L（0.55）に位置します — 知覚的明度は揃っており、わずかな chroma の違いだけが両者を区別します。
RGB、HSL、CMYK、色域警告、コードエクスポートを備えたフルのカラーピッカーが必要ですか？ 統合カラーコンバーターを試してください — すべての形式を同時に編集可能です。
Tailwind CSS デフォルトの red-500 — 破壊的アクション / エラーを示す正規の赤。中性的な背景に対して目立つように高い chroma（0.21）を保ちます。
#ef4444 → oklch(0.64 0.21 25) red-500 は L=0.64 に位置し、blue-500 の L=0.63 と一致します — v4 のランプは v3 の HSL ベースのパレットとは異なり、色相間で知覚的にバランスが取れています。
RGB、HSL、CMYK、色域警告、コードエクスポートを備えたフルのカラーピッカーが必要ですか？ 統合カラーコンバーターを試してください — すべての形式を同時に編集可能です。
Tailwind CSS デフォルトの orange-500 — ウォームアクセントと CTA の色相。色相環の赤とアンバーの間（42°）に位置します。
#f97316 → oklch(0.71 0.19 42) orange-500 のより高い L（0.71）対 red-500 の L（0.64）は意図的です — 黄色やオレンジは赤よりも低い知覚的 L で明るく見えます。
RGB、HSL、CMYK、色域警告、コードエクスポートを備えたフルのカラーピッカーが必要ですか？ 統合カラーコンバーターを試してください — すべての形式を同時に編集可能です。
Tailwind CSS デフォルトの amber-500 — 警告 / 注意の色相、色相環でオレンジと黄色の間。
#f59e0b → oklch(0.76 0.16 70) amber-500 はあらゆる 500 レベルの Tailwind カラーの中で最も高い L（0.76）に達します — 黄色は視覚的に「中間色」として現れるために自然により高い L が必要です。
RGB、HSL、CMYK、色域警告、コードエクスポートを備えたフルのカラーピッカーが必要ですか？ 統合カラーコンバーターを試してください — すべての形式を同時に編集可能です。
Tailwind CSS デフォルトの green-500 — 成功 / 確認の色相。色相環の 149°、シアン-グリーン領域に位置します。
#22c55e → oklch(0.72 0.19 149) L=0.72 の green-500 は L=0.64 の red-500 よりわずかに明るい — これは知覚的な現実（緑は明るく見える）に一致し、パレットにバランスの取れた視覚的重みを与えます。
RGB、HSL、CMYK、色域警告、コードエクスポートを備えたフルのカラーピッカーが必要ですか？ 統合カラーコンバーターを試してください — すべての形式を同時に編集可能です。
Tailwind CSS デフォルトの teal-500 — 緑とシアンの間のクールアクセントの色相。高彩度のティールは sRGB を簡単に超えるため、green-500 より低い chroma。
#14b8a6 → oklch(0.7 0.13 184) teal-500 の H=184° はシアン（180°）のすぐ先に位置します — OKLCH における純粋なシアンは sRGB で chroma クリッピングなしには表現が難しく、teal はその実用的な妥協です。
RGB、HSL、CMYK、色域警告、コードエクスポートを備えたフルのカラーピッカーが必要ですか？ 統合カラーコンバーターを試してください — すべての形式を同時に編集可能です。
Tailwind CSS デフォルトの blue-500 — 2020 年代の正規の「Web ブルー」、v4 パレットと shadcn/ui のデフォルトテーマのためのブランドアンカーカラー。
#3b82f6 → oklch(0.63 0.19 263) blue-500 は Tailwind v4 の OKLCH 移行の起点として最もよく使われるリファレンスカラーです — #3b82f6 をここに貼り付けて、公開された値に対して変換を検証してください。
RGB、HSL、CMYK、色域警告、コードエクスポートを備えたフルのカラーピッカーが必要ですか？ 統合カラーコンバーターを試してください — すべての形式を同時に編集可能です。
Tailwind CSS デフォルトの indigo-500 — 青に対するクールアクセントの相棒、277°（紫寄り）に位置します。高い chroma（0.21）が目立たせます。
#6366f1 → oklch(0.59 0.21 277) indigo-500 は blue-500 より低い L に位置します（0.59 対 0.63） — より深い色相は見た目の明るさをより多く吸収し、v4 のランプはそれを知覚的に説明します。
RGB、HSL、CMYK、色域警告、コードエクスポートを備えたフルのカラーピッカーが必要ですか？ 統合カラーコンバーターを試してください — すべての形式を同時に編集可能です。
Tailwind CSS デフォルトの violet-500 — 295° の紫アクセントの色相。あらゆる Tailwind 500 レベルカラーの中で最も高い chroma（0.24）で、AI / クリエイティブ製品のブランディングによく使われます。
#8b5cf6 → oklch(0.6 0.24 295) violet-500 の高い C=0.24 は sRGB 色域の天井に近づきます — これより大きく押し上げると P3 のみの広色域領域に踏み込みます。
RGB、HSL、CMYK、色域警告、コードエクスポートを備えたフルのカラーピッカーが必要ですか？ 統合カラーコンバーターを試してください — すべての形式を同時に編集可能です。
HEX 入力に任意の hex 値を投入します — 先頭の `#` のあり/なし、3 桁の省略形（`#F73`）、6 桁の標準形（`#3b82f6`）、4 桁のアルファ省略形（`#F738`）、アルファ付き 8 桁の標準形（`#FF573380`）のいずれでも構いません。パーサーはこの 5 つの入力形状を OKLCH を導出する前に同じ内部色に正規化します。大文字小文字は無視されます（`#3b82f6` と `#3B82F6` は同一にパースされます）。不正な文字や桁数違いは静かなインラインエラーを生み、有効な hex は OKLCH を含む他のすべての形式フィールドをリアルタイムで更新します。
OKLCH フィールドは CSS Color 4 のモダンな形式で値を表示します: 不透明な色には `oklch(0.629 0.193 263.4)`、アルファ付きには `oklch(0.629 0.193 263.4 / 0.5)`。L は小数第 3 位まで丸め（Tailwind v4 が公開する精度と一致）、C は小数第 3 位、H は度数の小数第 1 位までです。本ツールの内部 OKLCH を真実の源とする方式により、根底の浮動小数点精度が他のすべてのフィールドにわたって保たれます — hex への往復はビット安定で、ラウンドトリップごとに 1〜2 度漂うレガシーな HSL ピボット型コンバーターとは異なります。
各形式カードの右側に Copy ボタンがあります。1 クリックで値がクリップボードに乗り、ボタンラベルが一瞬「Copied!」に切り替わるのでコピー成功がわかります。コピーされる文字列は正規の CSS Color 4 構文（`oklch(0.629 0.193 263.4)`）で、Tailwind v4 の `@theme` ブロックや shadcn/ui の CSS 変数定義にそのまま投入できる状態です。プラットフォーム固有の出力（CSS カスタムプロパティ、Tailwind v4 トークン、SwiftUI、Compose、Flutter）には、ピッカー下の Copy as code セクションを使ってください — これらのスニペットは各プラットフォームが期待する形式をネイティブに出力します。
3 つの色域バッジ（sRGB、Display P3、Rec.2020）が、現在の色がそれぞれの空間の再現可能範囲に収まっているかを示します。sRGB バッジが赤くなり P3 が緑なら、その色は広色域 OKLCH で、Apple ハードウェア（2017 年以降の iPhone、iPad、MacBook）では飽和して描画されますが、レガシーの 24 bit モニターでは彩度を落とします。**Snap to sRGB** ボタンは二分 chroma 減縮（CSS Color 4 §13 の情報提供アルゴリズム）を使って L と H を保ったまま色を sRGB に縮小し、`@supports not (color: oklch(0 0 0))` 経由で出荷できる hex フォールバックを生成します。
貼り付けた同じ hex が他の 8 つの形式フィールドも点灯させます — canvas 呼び出しやハードウェア向けの RGB、レガシー CSS 変数向けの HSL、パレット数学と色覚特性行列向けの OKLAB、デザイナーのカラーピッカーワークフロー向けの HSV と HWB、印刷見積もり向けの CMYK、ドキュメント本文向けの最も近い CSS 名前付きカラー。hex → OKLCH だけに縛られることはありません。ピッカー（SL の四角 + 色相スライダー + アルファスライダー）が 9 つすべてを同時に駆動し、Chromium 系ブラウザでは EyeDropper ボタンがブラウザ外を含む画面上の任意のピクセルをサンプリングします。
OKLCH Chroma は無制限です（sRGB に収まる色で 0 から約 0.4、広色域ではそれ以上） — HSL の S のように 0〜100% の彩度パーセントでは*ありません*。C=0.3 が「30% の彩度」を意味すると仮定するのはスケールの誤読です: 0.3 は非常に彩度が高く、ある色相では sRGB の天井近く、他の色相ではそれを大きく超えます。最大の C は L と H により異なります — L=0.7 の緑は L=0.3 の青よりずっと高い C をサポートします。C は相対パーセントではなく、グレーからの絶対距離として扱ってください。
OKLCH C = 0.3 を「30% の彩度」と期待して設定: oklch(0.7 0.3 250) → 青に対しては sRGB 色域を超える可能性 広色域の色がレガシーディスプレイでは彩度を落として描画される。
C は絶対 chroma として扱い、色域バッジを確認: oklch(0.7 0.15 250) → この L+H ペアでは sRGB に余裕で収まる バッジを使って、ターゲット色域に収まる最大の C を見つけましょう。
両空間とも明度を 0〜1（または 0〜100%）の軸として報告しますが、測っているものは異なります。HSL の L は幾何学的で — ガンマ符号化された sRGB の RGB 最大/最小の平均から導かれます。OKLCH の L は知覚的で — OKLAB モデルにアンカーされています。HSL ベースのパレットを `oklch(L%, C, H)` として移植してマッチした明るさを期待すると、2 つの空間間の L 関係が非線形であるため不均等な結果になります。中間色では OKLCH L = 0.6 はおおよそ HSL L = 50% ですが、暗い側と明るい側では曲線が漂います。
HSL の L パーセントを OKLCH に直接コピー: hsl(220 50% 30%) を oklch(0.30 0.10 220) として移植 2 つの色は明らかに異なる明るさに見える。
HSL から移植せず、元の hex から OKLCH を再導出: hex のソース → OKLCH 変換 → oklch(0.34 0.08 254) 知覚的な L が正しく保たれ、パレットは均等に感じられる。
OKLCH は無制限です — `oklch(0.7 0.4 30)` と書けば構文は有効ですが、その chroma は sRGB のチャネルあたり 256 のバイト空間で符号化できる範囲を超えます。sRGB モニターではその色は色域内の最も近い近似（通常は彩度を落としたバージョン）にクリップされます。Display P3 モニターでは正しく描画されます。色域バッジを確認せずに広色域 OKLCH を出荷すると、ディスプレイによって見え方が異なる色 — 微妙ですが実在するクロスプラットフォームの一貫性バグ — が生まれます。
sRGB 色域を確認せずに oklch(0.7 0.4 30) を出荷: P3 ディスプレイは飽和した赤を、sRGB ディスプレイは彩度を落とした赤を描画 ブランドカラーがユーザーハードウェア間で一貫しなく見える。
sRGB 色域バッジを確認、必要なら Snap to sRGB、@supports で層状に:
@supports (color: oklch(0 0 0)) { --primary: oklch(0.7 0.4 30); }
@supports not (color: oklch(0 0 0)) { --primary: #ef6b50; }
P3 ハードウェアは広色域の値を、sRGB ハードウェアはスナップ後のフォールバックを受け取ります。 ネイティブの `oklch()` パースは Chrome および Edge 111（2023 年 3 月）、Safari 15.4（2022 年 3 月）、Firefox 113（2023 年 5 月）で着地しました。caniuse の合算カバレッジは 94%+ ですが、残る 6% には IE 11、iOS 15.3 以前の旧 Safari、旧 Android Chrome、組み込み Web ビューが含まれます。そのロングテールに向けてフォールバックなしで `oklch()` を出荷すると、CSS の `inherit` 値としてレンダリングされるか、まったく失敗します。広い視聴者を持つ本番サイトでは、`@supports` で常に機能検出してください。
ブランドカラーを OKLCH のみで定義:
:root { --primary: oklch(0.629 0.193 263.4); }
IE 11 と旧 iOS Safari は色をまったくレンダリングしない。 @supports で層状にして優雅にフォールバック:
:root { --primary: #3b82f6; }
@supports (color: oklch(0 0 0)) { :root { --primary: oklch(0.629 0.193 263.4); } }
モダンブラウザは OKLCH、レガシーブラウザは hex フォールバックを受け取ります。 CSS Color 4 は `oklch()` と `lch()` の両方を出荷します。形は同一に見えます（L / C / H）が、根底の空間は異なります: `lch()` は CIE-LAB（1976）の極形式、`oklch()` は OKLAB（Ottosson 2020）の極形式です。両者は互換性が*ありません* — `lch(60% 50 240)` と `oklch(0.6 0.15 240)` は異なる色を記述します。CIE-LAB の知覚的均一性は飽和した青付近で破綻し、Ottosson が OKLAB を再導出した理由です。新規デザインシステム作業では `lch()` より `oklch()` を優先してください。
同じ結果を期待して oklch() を lch() に置換: lch(60% 50 240) ≠ oklch(0.6 0.15 240) — まったく異なる色 空間をまたいでコピペしても、値は静かに間違っている。
1 つの空間を選んでそこに留まる: モダンなデザインシステムには oklch(0.629 0.193 263.4) または lch(60% 50 240) — しかし再変換なしに関数名を入れ替えないこと
単位変換
無料オンライン進数変換ツール。2進数、8進数、10進数、16進数および任意の基数（2-36）間で数値を瞬時に変換。BigInt対応で桁数制限なし。登録不要・サーバー送信なし、すべての処理がブラウザ内で完結。コピーボタンやコードリテラル出力で開発作業を効率化。
単位変換
HEX を RGB、HSL、OKLCH、OKLAB、CMYK にブラウザで変換できます。任意の形式をワンクリックでコピー。無料・登録不要・色データはページから一切送信されません。
単位変換
HEX カラーを CMYK にブラウザで変換できます。印刷プレビュー向けの sRGB ベースの単純な近似値です。無料・登録不要、色データはローカルから出ません。
単位変換
任意の HEX カラーを HSL にブラウザで変換できます。3 桁・6 桁・アルファ付き 8 桁の HEX すべてに対応。無料・即時・登録不要、色データはページから一切送信されません。
単位変換
任意の HEX カラーコードを RGB にブラウザで変換できます。3 桁・6 桁・アルファ付き 8 桁の HEX すべてに対応。無料・即時・登録不要、色データはページから一切送信されません。
単位変換
無料オンライン画像圧縮ツール。JPEG、PNG、WebP 画像をブラウザ上で最大 80% 縮小。サーバーへのアップロード不要で完全プライベート。最大 20 枚の一括圧縮、品質調整、圧縮前後の比較機能を搭載。登録不要ですぐに使えます。