Palette

Color Palette Generator

OKLCH ベースのブランドパレット。ベースカラーを選ぶだけで、すべてのクラシック配色に加え 50–950 のトーナルスケールが手に入ります。ロック、再生成、CSS / Tailwind v4 / SCSS / JSON としてエクスポート。

Color Palette Generator — TL;DR

OKLCH ベースのブランドパレット。ベースカラーを選ぶだけで、すべてのクラシック配色に加え 50–950 のトーナルスケールが手に入ります。ロック、再生成、CSS / Tailwind v4 / SCSS / JSON としてエクスポート。

Color Picker & Converter は 1 色ずつ扱うためのもので — 選ぶ / 変換する / コピーするためのツールです。本ツールはパレットのためのもの:ベースカラーを入れれば、ブランドにすぐ使えるシステム一式(配色 + トーナルスケール)を一度に得られます。シャツを 1 枚買うのと、ワードローブを丸ごと手に入れるのとの違いです。

HSL は色相を不均一に配置します(60° の黄色は同じ明度値でも 240° の青よりずっと明るく感じます)。HSL のトライアドパレットでは、1 つのスウォッチが他より明らかに明るかったり鈍かったりします。OKLCH は知覚的に均一で、同じ OKLCH 明度の 3 つのスウォッチは見た目に同じ明るさです。だからこそモダンなデザインシステム(Apple HI、Tailwind v4、IBM Carbon)はすべて配色とスケールに OKLCH を採用しているのです。

ブランドカラーが端末から出ることはありません。DevTools → Network を開けば、どの操作でも外向きリクエストがゼロであることが分かります。

ヒント:Space キーを押すとロックされていないスウォッチを再生成できます。

トーナルスケール (50 → 950)
CSS
Tailwind v4
SCSS
JSON

見栄えだけでなく、デザインシステムのために作られています

OKLCH 配色、トーナルスケール、ロック & 再生成、デザイントークンのエクスポート — そして使うのが楽しくなる小さな工夫の数々。

6 種類の OKLCH 配色

補色、類似色、トライアド、テトラード、分裂補色、モノクロマティック — すべて OKLCH で計算するため、彩度の高い 3 色のトライアドパレットでも明るさが揃ったままです。HSL 特有のくすみはありません。

50 → 950 トーナルスケール

ブランドカラーを入れるだけで、OKLCH カーブに沿って明度を変化させた Tailwind 形式の 50, 100, 200, … 900, 950 トーナルスケールが生成されます。両端では彩度が圧縮され、色は sRGB 色域内に保たれます。

ロック & 再生成 (Coolors スタイル)

気に入ったスウォッチをピン留め(ロックアイコン)し、再生成を押す(または Space を押す)だけで、選択した配色の中で残りのスウォッチが変化します。素早く反復し、気に入ったものを残せます。

本番品質の 4 種類のエクスポート

CSS カスタムプロパティ (--brand-500)、Tailwind v4 @theme ブロック、SCSS マップ、Style Dictionary / Figma Tokens にすぐ使える JSON デザイントークン。さらに 1200×200 の PNG スウォッチストリップも。

WCAG コントラストを一目で

各スウォッチは黒または白のうちコントラストが高い方に対する WCAG コントラスト比を表示し、AA / AAA / 不合格のバッジを付けます。リリース前にアクセシビリティの問題を発見できます。

プライバシー設計

すべてのバイトはあなたの端末に留まります。OKLCH の計算、配色生成、スケール導出、PNG エクスポートはすべてローカルの JavaScript で実行されます。DevTools → Network を開けば、外向きのリクエストがゼロであることを確認できます。

ブランドパレットの作り方

1 つのベースカラーから、デザイントークンにすぐ使える完成パレットまで 4 ステップ。

  1. 1

    ブランドのベースカラーを入れる

    カラーボックスをクリックするか、HEX を貼り付けるか、ランダムベースを押してインスピレーションを得ましょう。ツールはこの色を中心に、配色スウォッチと 11 段階のトーナルスケールの両方を含むパレット全体を組み立てます。

  2. 2

    配色を選ぶ

    デフォルトは類似色 — ベースから 30° 以内の 3 色で、落ち着いたブランドパレットに最適です。コントラストを効かせたアクセントには補色。エディトリアルや遊びのあるブランドにはトライアド / テトラード。1 色相のトーナルシステムにはモノクロマティック。すべて OKLCH で計算されるため、明るさは均一に保たれます。

  3. 3

    ロック & 再生成で気に入るまで

    残したいスウォッチのロックアイコンをクリックし、Space(または再生成)を押せば、配色の中で残りが変化します。素早く反復しましょう。正確な値を指定したいときは、HEX フィールドをクリックすればスウォッチを直接編集できます。

  4. 4

    デザイントークンとしてエクスポート

    CSS 出力(カスタムプロパティ)、Tailwind v4(@theme ブロック)、SCSS マップ、JSON デザイントークンをコピーできます。またはPNG をダウンロードを押せば、デザインブリーフに貼り付けられる 1200×200 のスウォッチストリップが手に入ります。

ブランドデザイナーとデザインシステムチームのために

Figma で HEX を手作業で調整するより、プライバシーファーストの OKLCH パレットツールが優れる代表的な 4 シナリオ。

新ブランドのアイデンティティスプリント

ブランドカラーは決まっていて、その周りにシステムが必要。HEX を入れて類似色を選び、サポートカラー 2 色がしっくりくるまで再生成し、3 色をすべてロック。トーナルスケールビューに切り替え、Tailwind の @theme ブロックをコピーして、新規プロジェクトの app.css に貼り付ける。所要時間:5 分。

既存 Tailwind プロジェクトにブランドを追加

デフォルトの Tailwind indigo はあなたのブランドではありません。ブランドは #5B3FCD。これを入れれば、Tailwind の刻み方を完全に反映した 11 段階のトーナルスケールが得られます。@theme ブロックをコピーすれば、bg-brand-500 や text-brand-700 がそのまま動きます。

ローンチ前のアクセシビリティチェック

各スウォッチは WCAG コントラスト比と AA/AAA バッジを表示します。brand-500 が白に対して AA を満たすか、brand-100 の背景に brand-900 のテキストが読みやすいかをスポットチェック。問題のあるスウォッチは個別に再生成して修正できます。

マルチブランドのデザインシステム

代理店やマルチブランド企業は、同じ形を持ちながらブランド色相だけが異なる N 個のデザインシステムを並行して維持します。すべてのブランドで同じ配色 + トーナルスケールのワークフローを使い、それぞれを JSON トークンとしてエクスポートして Style Dictionary に投入します。形は一貫し、アイデンティティは異なる。

100% プライベート — ブラウザ内で動作

ブランドカラーが端末から出ることはありません。DevTools → Network を開けば、どの操作でも外向きリクエストがゼロであることが分かります。

  • OKLCH の計算、配色生成、トーナルスケールの導出、WCAG コントラスト計算、PNG エクスポートは、すべてあなたのマシン上の JavaScript で実行されます — サーバーサイドレンダリングなし、サードパーティ API なし。
  • PNG エクスポートはローカルの canvas を使用します。スウォッチ画像はブラウザのメモリ内で完全に生成され、Blob としてダウンロードされます — ネットワークを横断するものはありません。
  • ログイン不要、色情報のテレメトリも一切なし。Cookie は同意状態用に 1 つ、言語設定用に 1 つ使用するのみです。

関連ガイド

OKLCH パレット、ブランドカラーシステム、デザイントークンに関する厳選された読み物。

よくある質問

通常のカラーピッカーとの違いは何ですか?

Color Picker & Converter は 1 色ずつ扱うためのもので — 選ぶ / 変換する / コピーするためのツールです。本ツールはパレットのためのもの:ベースカラーを入れれば、ブランドにすぐ使えるシステム一式(配色 + トーナルスケール)を一度に得られます。シャツを 1 枚買うのと、ワードローブを丸ごと手に入れるのとの違いです。

なぜ HSL ではなく OKLCH なのですか?

HSL は色相を不均一に配置します(60° の黄色は同じ明度値でも 240° の青よりずっと明るく感じます)。HSL のトライアドパレットでは、1 つのスウォッチが他より明らかに明るかったり鈍かったりします。OKLCH は知覚的に均一で、同じ OKLCH 明度の 3 つのスウォッチは見た目に同じ明るさです。だからこそモダンなデザインシステム(Apple HI、Tailwind v4、IBM Carbon)はすべて配色とスケールに OKLCH を採用しているのです。

「トーナルスケール (50 → 950)」とは何ですか?

Tailwind スタイルのブランドカラースケールのことです:indigo-50(最も明るい)、indigo-100、indigo-200、… indigo-900、indigo-950(最も暗い)。ブランドカラーを入れるだけで、ツールが固定カーブに沿って OKLCH 明度を変化させ、11 段階すべてを自動生成します。結果として、Tailwind の任意のパレットトークンをそのまま置き換えられる、ブランド色相のスケールが得られます。

スウォッチをロックして他だけ再生成するにはどうすればいいですか?

スウォッチ左上のロックアイコンをクリックすると、その色は固定されます。あとは再生成を押すか Space を押せば、ロックされていないスウォッチが選択した配色の中で変化します。これが良いパレットを見つけるコツ:すでに決めたブランドカラーをピン留めし、その周りでバリエーションを探るのです。

サーバーに送信されるものはありますか?

ありません。OKLCH の計算、配色生成、トーナルスケールの導出、コントラスト比の計算、PNG エクスポート、すべてのクリップボードコピー — すべてあなたの端末上の JavaScript で実行されます。DevTools → Network を開けば、外向きのリクエストがゼロであることが分かります。ブランドカラー、社内のデザイントークン、NDA で守られたパレットを貼り付けても、何一つラップトップから外へ出ません。