カラーパレット生成ツール — 調和の取れた配色を一から、または写真から

スペースキーで新しいパレットを生成し、気に入った色をロックし、配色の調和を選び、写真からパレットを抽出できます。CSS、Tailwind、SCSS、JSON、PNG で書き出し。

またはスペースキーを押す

配色ルール色数

(38, 70, 83)
(197, 37%, 24%)

(42, 157, 143)
(173, 58%, 39%)

(233, 196, 106)
(43, 74%, 66%)

(244, 162, 97)
(27, 87%, 67%)

(231, 111, 81)
(12, 76%, 61%)

スウォッチをクリックすると選択、南京錠で生成時もその色を維持、鉛筆で新しい色を選択、カラーコードをクリックするとコピーできます。

色 1（HEX）

rgb(38, 70, 83)
hsl(197, 37%, 24%)
文字色：白

すべての値

HEX	RGB	HSL
#264653	rgb(38, 70, 83)	hsl(197, 37%, 24%)
#2a9d8f	rgb(42, 157, 143)	hsl(173, 58%, 39%)
#e9c46a	rgb(233, 196, 106)	hsl(43, 74%, 66%)
#f4a261	rgb(244, 162, 97)	hsl(27, 87%, 67%)
#e76f51	rgb(231, 111, 81)	hsl(12, 76%, 61%)

エクスポート

:root {
  --color-1: #264653;
  --color-2: #2a9d8f;
  --color-3: #e9c46a;
  --color-4: #f4a261;
  --color-5: #e76f51;
}

画像からパレットを作成

写真をアップロードすると、主要な色がロックされていないスウォッチに取り込まれます。さらに画像の任意の場所をクリックすると、そのピクセルの色を選択中のスウォッチ（色 1）に取り込めます。画像はデバイスの外に出ません。

画像を選択…

パレットはブラウザ内で生成され、アップロードした画像がデバイスの外に出ることはありません。すべての無料ツールを見る.

不具合や改善できそうな点を見つけましたか？いただいたメッセージはすべて読み、すぐに対応します。

この無料のカラーパレット生成ツールは、互いに調和する 2〜10 色のセットを作ります。スペースキー（または「生成」）で新しいパレットを作り、残したいスウォッチをロックして、残りがしっくりくるまで生成を繰り返します。類似色、補色、トライアドなどの配色ルールを選ぶことも、写真をアップロードしてその主要な色をそのままパレットに取り込むこともできます。各スウォッチには HEX、RGB、HSL の値と、その上で読みやすさを保てる文字色（黒または白）が表示されます。

ほとんどの生成ツールは HSL で色相を回転させるため、黄色はまぶしく青は沈んだパレットになります。HSL の明度は、色が実際にどれだけ明るく見えるかとは無関係だからです。このツールは、同じ明度なら同じ明るさに見える知覚的な色空間 OKLCH で配色を計算し、さらに明度を分散させるので、どのパレットにも文字、背景、アクセントに実際に使える暗い色・中間色・明るい色が含まれます。パレットがあなたのブランドに合うかどうかまでは判断できません。それは引き続きあなたが決めることで、どの組み合わせが読みやすいかは下にリンクしたコントラストチェッカーで確認できます。

使い方

スペースキーまたは「生成」ボタンを押してパレットを作ります。− と + で 2〜10 色の間で色数を選びます。
メニューから配色ルールを選びます。「ランダム」は変化に富みつつバランスの取れたセットになり、ほかは色相環の古典的なルールに従います。
気に入ったスウォッチの南京錠をクリックし、生成を続けます。ロックした色は残り、最初にロックした色を基準に配色が組み直されます。
鉛筆アイコンをクリックすると手動で色を選べます。帯の下のエディターに HEX 値を入力することもできます。写真から始めるには、「画像からパレットを作成」で写真をアップロードし、画像をクリックして正確なピクセルの色を取得します。
パレットを CSS 変数、Tailwind の設定、SCSS、JSON で書き出すか、PNG をダウンロードするか、共有リンクをコピーします。

よくある質問

カラーパレットはどうやって作りますか？

このページでスペースキーを押します。押すたびに、選んだ配色ルールで新しいパレットが作られます。良いと思った色は南京錠でロックし、さらに押し続けます。ロックしていないスウォッチだけが変わり、新しい色はロックした色と調和するように選ばれます。Web サイトなら 5 色がちょうどよい基本です。文字用の暗い色、背景用の明るい色、プライマリ、セカンダリ、アクセントの 5 つです。

補色、類似色、トライアドとは何ですか？

色相環上の位置関係のことです。補色は互いに反対側（180 度離れた位置）にあり、最も強いコントラストを生みます。類似色は約 30 度離れた隣同士の色で、落ち着いたまとまりのある印象になります。トライアドは 120 度ずつ離れた 3 つの色相です。分裂補色は基準の色相と、その補色の両隣にある 2 つの色相（150 度と 210 度）を使い、テトラード（スクエア）は 90 度ずつ離れた 4 つの色相を使います。単色（モノクロマティック）は 1 つの色相のまま明度と彩度を変えます。

画像からカラーパレットを作れますか？

はい。「画像からパレットを作成」で写真をアップロードします。ツールは画像を最大 200 ピクセルに縮小してノイズを平均化し、OKLab 色空間で k-means クラスタリングによってピクセルをグループ化するので、生のピクセル数ではなく、目に見える色が結果に反映されます。大きいクラスターから順にロックしていないスウォッチに入り、各色が画像のどれだけを占めるかも表示されます。画像のどこかをクリックすると、その正確な 1 ピクセルの色を選択中のスウォッチに取り込めます。画像がブラウザの外に出ることはありません。

パレットを CSS や Tailwind で使うには？

CSS 変数の書き出しを選び、:root ブロックをスタイルシートに貼り付けて、var(--color-1) のように色を使います。Tailwind の書き出しは palette-1〜palette-N を追加する theme.extend.colors ブロックなので、bg-palette-1 や text-palette-3 のように書けます。各色の用途が決まったら、変数名を役割（primary、surface、text）に変えましょう。color-3 のような名前はデザインの刷新に耐えられません。

このツールが HSL ではなく OKLCH を使うのはなぜですか？

HSL の明度は知覚上の明るさと一致しないからです。HSL では純粋な黄色も純粋な青も明度 50% ですが、黄色は明るいグレーと同じくらい明るく見え、青はほとんど黒に見えます。そのため HSL で色相を回転させると、明るさのバランスが崩れたセットになります。CSS Color Level 4 で定義され、現行のすべてのブラウザが対応している OKLCH は、明度、彩度（クロマ）、色相を分けて扱うので、色相を回転させても見た目の明るさが保たれます。sRGB の範囲外になった色は、色相と明度を保ったままクロマを下げて範囲内に戻します。

パレットを共有・保存できますか？

共有リンクをコピーしてください。アドレスに色が含まれているので（例：?colors=264653-2a9d8f-e9c46a）、開いた人は誰でも同じパレットを見られ、ブックマークもできます。サーバーには何も保存されません。ムードボードやクライアントへのメール用に、HEX と RGB の値付きのスウォッチを PNG でダウンロードすることもできます。

パレットを実用的な UI のカラーシステムにする

きれいな 5 色のパレットは、まだデザインシステムではありません。サイトに必要なのは役割です。背景に対して少なくとも 4.5:1 のコントラストを持つ文字色、背景と、カード用にわずかに異なるサーフェス、ボタンやリンク用のプライマリカラーを 1 色、控えめに使うアクセントを 1 色。インテリアデザインの 60-30-10 ルールが手頃な出発点です。約 60% をニュートラルな背景、30% をセカンダリカラー、10% をアクセントにします。

• 文字：最も暗い色、またはプライマリの色相を帯びた黒に近い色。純粋な #000 に純粋な #fff は必要以上にきつく見えます。

• 背景とサーフェス：最も明るい 1〜2 色。生成されたパレットの多くには 1 色含まれています。なければ、プライマリをロックして「モノクロマティック」に切り替えると、その明るい色調が得られます。

• プライマリ：「クリックしてください」と伝える色。その上の白または黒の文字が 4.5:1 を満たすか確認します（各スウォッチの読みやすい文字色が手早い一次チェック、コントラストチェッカーが本番のチェックです）。

• アクセント：最も彩度の高い色。ハイライトやバッジに使い、広い面積には使いません。

そのうえで、新しい色相を加えるのではなく、プライマリの明るい色調と暗い色調（ホバー時の背景には明るく、押下状態には暗く）を作ります。プライマリをロックして「モノクロマティック」に切り替え、7〜10 色にすればそのグラデーションが得られます。

配色ルールとそれぞれが合う場面

• 類似色：隣り合う色相。落ち着いていて自然で、失敗しにくい配色です。コンテンツサイト、ウェルネスや食品のブランドに向いています。文字用に対照的なニュートラルカラーが必要です。

• モノクロマティック：1 つの色相を何段階もの明度で。色がデータと張り合うのではなく、データを引き立てるべきダッシュボードやアプリに最も安全な選択です。

• 補色：反対側にある 2 つの色相。コントラストとエネルギーが最大になります。一方をメインカラーにし、もう一方は行動喚起（CTA）だけに使いましょう。そうしないとスポーツのユニフォームのように見えます。

• 分裂補色：1 つの色相と、その反対側の両隣にある 2 つの色相。補色とほぼ同じくらい生き生きしつつ、緊張感は抑えられます。マーケティングサイトの基本に適しています。

• トライアドとテトラード：等間隔に並ぶ 3 つまたは 4 つの色相。遊び心があって明るく、子ども向けの商品、ゲーム、イラストに向いています。1 つの色相を主役にし、ほかは小さく使いましょう。

• ランダム（調和のとれた配色）：スウォッチごとに色相が 20〜70 度ずつずれ、明度はセット全体に分散します。ルールを決める前に探るのに向いています。

画像からの色の抽出のしくみ

アップロードした画像は、長辺が 200 ピクセル以下の canvas に描画されます。縮小すると隣接するピクセルが平均化され、JPEG のノイズや細かいテクスチャが取り除かれます。そうしないと、ほぼ同じ色が何十個も出てきてしまいます。完全に透明なピクセルは無視されます。

残ったピクセルは OKLab に変換され、k をスウォッチの数とした k-means クラスタリングでグループ化されます。初期の中心は固定のルール（画像の平均色に最も近いピクセル、続いてそれまでのどの中心からも最も遠いピクセルを繰り返し選ぶ）で決めるので、同じ画像からは常に同じパレットが得られ、緑の風景の中の赤い上着のように小さくても目立つ部分が失われません。各クラスターの平均色がスウォッチになり、画像に占める割合の大きい順に並びます。

抽出で見つかるのは画像に実際にある色であって、必ずしもデザインに使いたい色ではありません。写真はくすんだ中間色が大半を占めるので、画像の印象を捉えた 1〜2 色をロックして残りを生成するか、画像をクリックして特定のハイライトの色を取得しましょう。