便利な配色ツールが登場！ OKLCHで知覚的に優れた広色域カラーパレットを生成 -OKLCH Color Palette Generator
Post on:2026年7月7日
sponsorsr
UIデザイン用にカラースケールを作成するとき、数値的に均一にしてしまうと、やや無機質に感じられることがあります。明るさが均一の変化だと、色褪せて見え、特に両端の淡い色合いと濃い色合いの変化が少なくなってしまいます。
また、ライトモードだといい感じだけど、ダークモードで使用するとなんか違う、そんな経験はありませんか？
UIデザインに特化された、ライトモードもダークモードでも機能する、OKLCHで知覚的に優れた広色域カラーパレットを生成できる無料ツールを紹介します。
OKLCH Color Palette Generatorの特徴
OKLCH Color Palette GeneratorはUIデザイン向けに、知覚的に最適化された広色域のカラーパレットを生成するツールです。ベースとなるカラーを指定すると、簡単にUIデザイン用のカラーパレットを生成できます。
カラーパレットは、明るさの範囲、分布、彩度処理、色相シフト、ステップ数、さらにはロックやカーブの制約に対するスケールの反応など、あらゆる項目をカスタマイズできます。すべての計算はOKLCH色空間で行われるため、明度と彩度を個別に考慮しやすく、異なるディスプレイ間で一貫した動作をするスケールを生成できます。
生成されたカラーパレットは、OKLCH, Hex, HSL, RGBのカラー値で、CSS, SCSS, Tailwind CSS, SVG, Figma用にエクスポートできます。
均一なカラースケールが色褪せて見える理由
均一なカラースケールは、各ステップで同じ量だけ変化します。OKLCHでは、その均一性によってあらゆる色相や明度において予測可能なコントラストが得られ、信頼できるカラーパレットが実現されます。しかし、色が明るくなるにつれて彩度を一定に保つと、淡い色合いが白っぽくなってしまいます。また、逆に明度を直線的にすると、スケールは機械的な印象を与えてしまいます。均一なカラースケールは計算上は正しいのですが、期待した表現にはおよびません。
音楽制作の世界ではこのトレードオフはよく知られていますが、完璧なタイミングでドラムパターンをグリッドにクオンタイズすると、すこし機械的になります。しかし、音符をグリッドからすこしずらしてスイング感を加えると、構造を損なうことなく、自然なフィーリングを取り戻すことができます。
知覚的に均一なカラースケールは、いわばグリッドです。信頼性が高く、予測可能で、維持する価値のあるものです。そこに彩度、色相、明度のカーブで形を与えることができます。その違いは実際に目で見てみるのが一番分かりやすいと思います。
上: 一定の量で変化、下: すこし変化を与えたもの
カラースケールを調整するには、明度の範囲、明度のカーブ、彩度、色相の4つの項目があります。最初の要素でグリッドのサイズを決め、残りの3つはグリッドの変化を加える役割を果たします。いずれの要素もOKLCHの値を目測する必要はありません。そのためにチャートがあるからです。しかし、それぞれの要素がどのような役割を持つのか理解しておくと役立ちます。
明度の範囲（lightness range）
形を整える前に、スケールの範囲を決定します。つまり、もっとも明るい色合い（ティント）をどの程度明るくし、もっとも暗い色合い（シェード）をどの程度暗くするか決めます。この段階ではまだ均一な状態です。明度ではグリッドを調整するのではなく、サイズを調整します。しかし、これはカラースケールの印象をもっとも大きく変える要素でもあります。
同じ色でも、明るい範囲では軽やかで繊細な印象を与え、暗い範囲では重厚で安定感のある印象を与えます。これが最初のステップで、場合によってはこのステップだけで十分なことがあります。
上: 90-45％、中: 97-26％、下: 100-0％
明度のカーブ（lightness curve）
両端のカラーが固定されていても、その間の明度がどのように変化するかによって、全体の印象は大きく変わります。暗い側にコントラストを集中させれば、スケール感がしっかりとしてドラマチックな印象を与えます。均等に分散させれば、落ち着いた印象になります。中間調に集中させれば、UIのカラーは力強く際立ち、両端の明暗差は柔らかく感じられ、エネルギッシュな印象を与えます。
両端のカラーが同じでも、明暗の推移によって異なる印象を与えることができます。
ブルー: 中間調に集中、グレー: 均等に分散
彩度（chroma）
明度が上がるにつれて彩度が一定のままだと、淡い色調が（ティント）は本来よりも色が強くなり、白っぽい質感になってしまいます。これを解決するのが、彩度カーブです。ハイライトに向かって彩度を緩やかに下げて色調をクリアに保ちつつ、色が鮮やかに映える中高域で彩度のピークを作ります。
これはかつてHSLで感覚的に彩度を下げていたのと同じ補正効果で、今ではそれを意図的に適用できるようになりました。
グリーン: 彩度カーブ、オレンジ: アウトプット、グレー: 色域上限
色相（hue）
色は全範囲にわたって単一の色相にとどまることは稀で、色をそこに固定してしまうと、そのスケール（色の階調）が人工的で不自然な印象を与えてしまいます。そこでわずかな変化を加えることで、深みが生まれます。
たとえば、ハイライトをすこし寒色寄りにし、シャドウを暖色寄りにすると、光が色調の中を取り抜けていくような感覚が生まれます。ただし、変化の量は控えめにしましょう。わずかに感じ取れる程度にし、一方の端にある青色が青緑に変わってしまうような強い変化は避けてください。
レッド: 色相カーブ、グレー: ベース
優れたカラーシステムがどれも同じ見た目にならない理由
知覚的に均等なスケールであっても、導き出される正解は一つではありません。Tailwind, Material Design, Bootstrap, Open Colorなどではいずれも同じ課題に取り組んでいますが、それぞれ異なる結果にたどり着いています。
それぞれが異なる理由は、単純です。一貫性は、作業の半分に過ぎないからです。デザインシステムにはある種の雰囲気や感覚を作り出すことを目指しています。あるカラーパレットはエネルギッシュな印象を与え、別のカラーパレットは穏やかな印象を与えたいときがあります。鮮やかな中間色を保つものもあれば、暗い色域に強さを集中させるものもあります。これらは具現化された「好み」です。知覚的な色空間は、そうした判断を排除するものではありません。むしろ、好みを反映させるための確固たる基盤を提供するものです。
各デザインシステムで同じベースカラーを使って作成したカラーパレットをご覧ください。
上から、Tailwind, Material Design, Bootstrap, Open Color
OKLCH Color Palette Generatorの使い方
OKLCH Color Palette Generatorの基本的な使い方は簡単ですが、高度なカスタマイズにも対応しています。
さっそく使ってみたので、使い方を簡単に紹介します。
利用にあたって登録などは必要ありませんが、作成したカラーパレットを保存するには登録（無料）が必要です。
まずは、サイドバーの「Primary」にカラーを設定します。任意のカラーで始めたい場合は上部「New Palette」でランダムカラーが設定されます。
今回はグリーン（oklch(82.88% 0.224 143.52)）を設定してみました。
メインには設定したカラーを元にしたカラーパレットが生成され、下部にはUIデザインとタイポグラフィにそのカラースケールを適応したライブプレビューが表示されます。
UIデザインとタイポグラフィのライブプレビュー
上部の「Gamut」から使用するカラーシステム（P3, sRGB）を選択できます。
使用するカラーシステムを選択
上部の「Options」からは、カラースケールのステップ数、彩度のカーブ、テーマ、モード、ロックをカスタマイズできます。
カラースケールのカスタマイズ
上部右のアイコンから、カラーパレットの詳細情報が表示されます。左から順に、彩度、明度、色相です。
彩度、明度、色相のチャート
「Color info」を選択すると、各カラーの詳しい情報が表示されます。
各カラーの詳しい情報
「Contrast grid」を選択すると、WCAG 3とWCAG 2によるコントラスト比を確認できます。
コントラスト比の確認
では、カラーを増やしてみましょう。
サイドバーの「Add Color」をクリックすると、プライマリカラーから導き出されたセカンダリカラーが追加されます。さらにクリックすると、ターシャリーカラー、アクセントカラーと追加できます。
セカンダリカラーとターシャリーカラーの追加
カラーを増やすと、ライブプレビューも各カラーでUIデザインとタイポグラフィに適用したデモが生成されます。
各カラーでUIデザインとタイポグラフィに適用したデモ
上部の「Export All」から生成したカラースケールをエクスポートできます。また、「Save」をクリックすると、カラースケールを保存できます（要登録）。
生成したカラースケールのエクスポート
sponsors
