OKLCHとは？
OKLCHは、2020年にBjörn Ottossonによって設計されたOKLAB色空間の円筒形表現です。OK明度、彩度、色相を表し、従来のRGBやHSLシステムと比較して、より直感的な色の操作方法を提供します。
デバイス指向のRGBや知覚的欠陥があるHSLとは異なり、OKLCHは人間の視覚原理に基づいています。同じ数値変化が同じ知覚変化を生み出すことを保証します。
OKLCHカラーピッカー＆コンバーター
OKLCHを理解する：ウェブカラーの未来
ウェブデザインを革新する知覚的に均一な色空間の包括的ガイド
なぜRGBやHSLではなくOKLCHを選ぶのか？
RGBの制限
- • デバイス依存の値
- • 直感的でない色の混合
- • バリエーションの作成が困難
- • アクセシビリティ計算に不向き
HSLの欠点
- • 偽の知覚的均一性
- • 色相によって明度が変化
- • 彩度が予測不能に動作
- • sRGBガマットに限定
OKLCHの利点
- • 真の知覚的均一性
- • 色相間で一貫した明度
- • 予測可能な色の関係
- • 広色域サポート（P3、Rec2020）
知覚的均一性の力
知覚的均一性とは、同じ数値量の変化が開始色に関係なく同様の知覚変化を生み出すことを意味します。これは以下の点で重要です：
デザインの一貫性
ホバー状態、無効状態、テーマのバリエーションに不可欠な、同じ知覚的明るさを維持する色のバリエーションを作成します。
アクセシビリティ
真の知覚的明度値を使用して、コントラスト比を正確に予測し、WCAG準拠を確保します。
sRGBを超えて：広色域カラー
現代のディスプレイは、従来のsRGBをはるかに超える色域をサポートしています。OKLCHはこれらの拡張色空間をシームレスに処理します：
sRGB
すべてのディスプレイでサポートされる標準色域
P3
25％多い色、Apple デバイスで一般的
Rec2020
HDRディスプレイ向けの将来性のある色域
OKLCHを使用すると、現代のディスプレイを最大限に活用する色を指定しながら、標準画面用の自動フォールバックを提供できます。
実践的なOKLCH
カラーパレットの作成
/* ベースカラー */
--primary: oklch(0.6 0.2 250);
/* 明るいバリアント - Lを増やすだけ */
--primary-light: oklch(0.8 0.2 250);
/* 暗いバリアント - Lを減らすだけ */
--primary-dark: oklch(0.4 0.2 250);
/* 補色 - 色相に180を追加 */
--secondary: oklch(0.6 0.2 70);アクセシビリティファーストデザイン
/* WCAG AAコントラストを確保 */
--text-on-light: oklch(0.3 0 0); /* L=0.3 暗いテキスト用 */
--text-on-dark: oklch(0.9 0 0); /* L=0.9 明るいテキスト用 */
/* 一貫した知覚的明るさ */
--success: oklch(0.7 0.15 140); /* 緑 */
--warning: oklch(0.7 0.15 90); /* 黄 */
--error: oklch(0.7 0.15 30); /* 赤 */ブラウザサポートと移行
現在のサポート
OKLCHはすべての現代的なブラウザでサポートされています：
- • Chrome 111+（2023年3月）
- • Firefox 113+（2023年5月）
- • Safari 15.4+（2022年3月）
- • Edge 111+（2023年3月）
移行戦略
/* 古いブラウザ用のフォールバックを提供 */
.element {
/* 古いブラウザ用のフォールバック */
background-color: rgb(0, 128, 255);
/* 現代のブラウザはこれを使用 */
background-color: oklch(0.65 0.2 240);
}
/* または@supportsを使用 */
@supports (color: oklch(0 0 0)) {
.element {
color: oklch(0.7 0.15 180);
}
}未来は知覚的に均一
OKLCHは、ウェブ上の色について私たちが考える方法のパラダイムシフトを表しています。デバイスの能力ではなく人間の知覚に合わせることで、以下を可能にします：
- ✓ より直感的な色の選択と操作
- ✓ 予測可能な明度によるより良いアクセシビリティ
- ✓ ディスプレイ技術と共に拡張する将来性のあるデザイン
- ✓ 異なる色相間での一貫した色の関係
上記のカラーピッカーで今日からOKLCHを使い始めて、知覚的均一性があなたのデザインにもたらす違いを体験してください。
よくある質問
OKLCH：よくある質問
OKLCHとこのカラーピッカーの効果的な使い方についてもっと学びましょう。
1
OKLCHとは何ですか、なぜ使うべきですか？
OKLCHは調和のとれたカラーパレットの作成を容易にする知覚的に均一な色空間です。RGBやHSLとは異なり、OKLCHで明度を調整しても、すべての色相で知覚的な明るさが一貫して保たれます。
2
P3とRec2020色空間とは何ですか？
P3とRec2020は、標準的なsRGBよりも鮮やかな色を表示できる広色域色空間です。P3は最新のAppleデバイスとハイエンドディスプレイで一般的にサポートされています。
3
なぜ一部の色が「利用不可」と表示されるのですか？
高彩度の色を選択すると、ディスプレイが表示できる色の範囲外になる可能性があります。ピッカーは、ディスプレイの能力内で意図した色を近似するフォールバック色を表示します。
4
CSSでOKLCH色をどのように使用しますか？
モダンブラウザでは、CSS構文で直接OKLCH色を使用できます：color: oklch(0.7 0.1 180)。古いブラウザのサポートのために、常にRGBまたはHEX形式のフォールバック色を提供してください。
5
彩度と飽和度の違いは何ですか？
OKLCHの彩度は、知覚的に均一な方法で色の豊かさや強度を表します。HSLの飽和度とは異なり、彩度の値は異なる明度レベルでも一貫しています。
6
特定の色を保存またはブックマークできますか？
はい！色を選択するたびに自動的にURLハッシュが更新されます。任意の色をブックマークしたり、URLを他の人と共有して同じ色設定を読み込むことができます。
7
「フォールバック」ボタンは何をしますか？
ディスプレイの能力を超えた色を選択すると、ピッカーは意図した色と表示可能なフォールバックバージョンの両方を表示します。
8
なぜ時々2つの色のプレビューブロックがあるのですか？
sRGB色空間外の色を選択すると、ピッカーは2つのプレビューを表示します：左側は実際の色（ディスプレイがサポートしている場合）、右側はsRGBフォールバックを表示します。
9
透明な色をどのように扱いますか？
アルファスライダーを使用して透明度を制御します。アルファチャンネルはチェッカーボードの背景パターン上に表示されます。
10
スライダーの代わりに色の値を直接入力できますか？
もちろん！任意の形式（OKLCH、HEX、RGB、またはHSL）の色をフォーマット入力フィールドに入力または貼り付けることができます。
11
私のディスプレイがP3またはRec2020をサポートしているかどうかをどのように知ることができますか？
ピッカーは自動的にディスプレイの能力を検出します。「このモニターではP3は利用できません」などのメッセージが表示される場合、ディスプレイはこれらの広い色域をサポートしていません。
12
アクセシブルなカラーパレットを作成するための最良のワークフローは何ですか？
希望する色相を設定してから、WCAGコントラスト要件を満たすように明度を調整します。