OKLCHカラーを使うと異なる色でトーンを合わせたり、単色のシェードも簡単！ UIデザイン用のカラーパレットを生成するツール -ColorPalette Pro

Post on:2026年3月3日

sponsorsr

見た目はDTMツールですが、中身はOKLCHカラーでUIデザイン用のカラーパレットを生成できる無料ツールを紹介します。

ベースカラーを指定するだけで、6色で構成される美しいカラーパレットを瞬時に生成します。色相環を元にしたカラーパレット、ライトモードとダークモードのUIに適したカラーパレット、アルゴリズムで調整したカラーパレットなど、その機能も非常に豊富です。

ColorPalette Pro

UIデザインにOKLCHカラーがなぜ適しているのかは、下記をご覧ください。

CSSで最近よく使うOKLCHカラーについて理解を深めよう

ColorPalette Proは、作者によると既存のカラーパレットジェネレーターに対する不満を解決するために作成したとのことです。

2026年のトレンドカラー「クラウドダンサー」をColorPalette Proで表示

既存のカラーパレットに対する作者の不満点は、

ベースカラーを設定できない（または面倒）
オプションが限られている
オプションが多すぎて使いにくい
UIデザインに適用できない
見た目がシンセサイザーっぽくない

半分ジョークだと思いますが、、、

ColorPalette Pro（Strawberry Cheesecakeを表示）

では、さっそくColorPalette Proの使い方を紹介します。
たとえば、ベースカラーをLincoln Green（明るいグリーン）でやってみます。

ColorPalette Pro（Lincoln Greenを表示）

ColorPalette Proでカラーを表示すると、カラー情報とプログラムによるパレットが生成されます。

カラー情報

シンセサイザーでは、ベースカラーと5-11種類のカラーで構成される6つのパレットが生成されます。

Analogous (ANA): 類似色

ある色のカラーホイールで隣接している3つの色の組み合わせ。
Complementary (COM): 補色

ある色とカラーホイールの反対側の色との組み合わせ。
Split Complementary (SPL): 分裂補色

ある色とその補色の両隣の2つの色との組み合わせ。
Triadic (TRI): 3色配色

カラーホイールを3等分した位置の色の組み合わせ。
Tetradic (TET): 4色配色

カラーホイールを4等分した位置の色の組み合わせ。
Tints & Shades (TAS)

ある色にホワイトとブラックを混ぜて、明度が変化する12色の見本。

6つのパレット

各パレットには、アルゴリズムで色を調整する4種類のバリエーションも用意されています。

正方形

知覚的な調整をほぼ行わず、数学的に処理したパレット。
三角形

目による色の変化の感じ方を補正（ベツォルト・ブリュッケ効果）
円

ホワイト・ブラックに向かってブレンドすることで、滑らかな色の変化を表現
菱形

ニュートラルグレーに向かってブレンドすることで、色調の変化を表現

アルゴリズムで色を調整する4種類のバリエーション

また、シンセサイザーに色を取り込む方法は、6つあります。

テキスト入力

入力欄に色の形式（RGB, OKLCH, HEX値, カラー名）を入力し、再生ボタン（三角）をクリックします。色が解析され、OKLCHが表示され、カラーパレットが生成されます。
スライダー

入力欄の下のスライダーで色を操作することもできます。
スポイト

入力欄の左のスポイトツールで色を取得することもできます。
ヒストリー

巻き戻しボタン（左向き三角）をクリックすると、以前に使用した色（最大240色）がすべて表示されます。
ランダム

ねじれた交差矢印 (🔀) をクリックすると、ランダムに選ばれた色を選択できます。
URL

すべての色はURLに保存されています。リンクボタンをクリックしてURLをコピーして、選択した色とお気に入りのカラーパレットを共有したり、保存することができます。

HEX値を入力

シンセサイザーにはカラーパレットとしてさらに便利な機能も揃っています。
まずは、情報ボタン（i）をクリックすると、パレットのカラー値と名前が表示されます。各カラー値をクリックすると、クリップボードにコピーされます。

情報ボタン（i）

ウインドウボタン（ブラウザの枠みたいなやつ）をクリックすると、UIモードが有効になり、ベースカラーとパレットタイプに基づいてUIに適したカラーパレットが生成されます。さらに便利なのは、ダークモードが有効になっている場合はダークモードのパレットが生成され、その逆も同様です。ダークとライトモードの切り替えは、その隣のボタンです。