無料オンラインカラーパレット生成ツール

使い方

• ハーモニーモード（類似色、補色、トライアドなど）を選択するか、ランダムのままにしてください。
• 新しいパレットを生成するには 生成 をクリックするか スペース キーを押してください。
• ロックアイコンをクリックして色をロックすると、再生成時にその色が維持されます。
• HEXコードをクリックするとクリップボードにコピーされます。
• CSSカスタムプロパティを取得したり画像としてダウンロードしたりするには CSSをコピー を使用してください。

色彩理論とハーモニーモード

この生成ツールは色彩理論に基づく7つのハーモニーモードに対応しています。 類似色 パレットはカラーホイール上で互いに30°以内の色を使用します · 落ち着いた統一感があります。 補色 パレットは180°離れた色を組み合わせて最大のコントラストを生み出します。 トライアド パレットは等間隔に配置された3つの色相（120°ずつ）を使用し、鮮やかな多様性を演出します。 スプリットコンプリメンタリー はベースカラーと、その補色に隣接する2色を組み合わせます · 大胆でありながら繊細な表現が可能です。 モノクロマティック パレットは1つの色相の明度と彩度のみを変化させます · 上品でミニマルな印象です。 スクエア は90°間隔の4色を使用し、バランスの取れたカラフルなパレットを作成します。

よくある質問

これらの色をプロジェクトでどのように使えますか？

"CSSをコピー" をクリックすると、貼り付けてすぐ使えるCSSカスタムプロパティが取得できます。個別のHEXコードをクリックしてコピーしたり、パレット全体をPNG画像としてエクスポートしてFigmaやCanvaなどのデザインツールで参照することもできます。

パレットには何色使うのが良いですか？

ほとんどのデザインは3〜5色が最適です：プライマリカラー、セカンダリカラー、アクセント、そして1〜2色のニュートラルです。"+ 色を追加" ボタンでパレットを拡張したり、少ない色数で生成して色を減らすこともできます。

気に入った色をロックできますか？

はい！任意のカラースウォッチのロックアイコンをクリックしてください。新しいパレットを生成すると、ロックされた色はそのままで、ロックされていない色だけがランダムに変わります。特定のブランドカラーを軸にパレットを構築するのに最適です。

ハーモニーモードとは何ですか？

ハーモニーモードは色彩理論の関係性に基づいてパレットを生成します。類似色は近接した色相を使い、落ち着いたパレットを作ります。補色は反対の色相を使い、強いコントラストを生み出します。トライアド、スプリットコンプリメンタリー、スクエアはカラーホイール上で色相を均等に配置します。モノクロマティックは1つの色相を保ち明度を変化させます · クリーンでミニマルなデザインに最適です。

カラーパレットジェネレーターとは?

カラーパレットジェネレーターは、色彩理論のルールに基づいて視覚的に調和する色のセットを選択します。出発点となるヒント (ベースカラー、ハーモニーモード、または純粋にランダム) を与えると、カラーホイール上の意図的な位置にある3〜5個の16進コードが返されます。出力はCSS変数、Figmaファイル、ブランドガイドライン、またはスライドデッキにすぐに投入できます。

現代のWebツールは色を16進数 (#2b7190) 、RGB (43, 113, 144) 、HSL (199, 54%, 37%) 、またはOKLCH (51.3% 0.066 233.4) で表現します。16進数は最もコピーペーストしやすい; HSLは手で微調整するのが最も直感的 (明度を下げて暗いバリアントを得る) ; OKLCH (CSS Color 4で導入され、2023年以降ブラウザでサポート) は知覚的に均一で、デザイントークンに重要です。このツールはデフォルトで16進数を出力し、変数のためのCSSカスタムプロパティとOKLCH対応の色相ステップをコピーできます。

すべての生成はあなたのブラウザで行われます。ハーモニーモードはベースカラーからHSL色相回転を介して計算され、16進数に変換されて戻ります。ロックボタンはパレットの残りが再シャッフルされる間、お気に入りを保持します。スペースキーはページを離れることなく新しい生成をトリガーし、探索を高速にします。

ジェネレーターの中身

トップバーには生成を変更する3つのつまみがグループ化されています: 新しいパレットを生成するGenerateボタン、7つのハーモニールール (ランダム、類似色、補色、トライアド、スプリット補色、モノクロマティック、スクエア) を備えたModeドロップダウン、および非ランダムモードのシードとなるBaseカラーピッカー。Add Colorボタンはパレットをデフォルトの5つのスウォッチを超えて拡張し、より多くのトーンが必要なデザインシステムに役立ちます。

各スウォッチは、どんな背景にも読みやすい暗い丸薬の上に16進コードを表示します。16進をクリックしてコピーします。ロックをクリックして将来の生成全体でスウォッチを凍結します。これがブランドカラーを中心にパレットを構築する方法です: ブランドをロックし、再生成し、3つの一致するコンパニオンを取得します。各スウォッチ内のアクションバーは、ロック、コピー、削除のアイコンを32ピクセルのタッチターゲット内に保持し、Lighthouseのtarget-sizeルールを満たします。

パレットの下では、CSS Variablesエクスポートブロックが現在の色を:rootカスタムプロパティとしてライブで更新します。Export Imageボタンは隠しキャンバスを介してパレットをPNGにシリアル化し、デザインレビューでの共有やムードボードへのピン留めに便利です。キーボードショートカットのSpaceは、フォーカス変更を必要とせずに即座に再生成します。

歴史と背景

アイザック・ニュートンが白色光を分割 (1666年)

1666年にケンブリッジでのアイザック・ニュートンのプリズム実験は、白色光が連続した色のスペクトルで構成されていることを示しました。Opticks (1704年) で、彼は赤、オレンジ、黄色、緑、青、藍色、紫の七色のホイールを、直径的に反対の色が調和のとれた補色を作るように配置しました。すべての現代の色相環はこの一つの図から派生しています。

ゲーテの色彩論 (1810年)

ヨハン・ヴォルフガング・フォン・ゲーテの色彩論 (1810年) は、ニュートンの物理学を人間の知覚の観点から再構成しました。ゲーテは、残像、同時対比、赤の心理的な暖かさと青の冷たさを体系的に説明した最初の人でした。彼の作品は、ターナー、ショーペンハウアー、そして今日アートスクールが教える色彩心理学の全分野に影響を与えました。

ヨハネス・イッテンがハーモニールールを定式化 (1961年)

バウハウスの教師であったヨハネス・イッテンは、1961年に色彩論 (Kunst der Farbe) を出版しました。彼の12スポークの色相環と7つの対比 (色相、明度、温度、補色、同時、彩度、面積) は、アートとデザインの学校の標準カリキュラムになりました。このツールのハーモニーモード (類似色、補色、トライアド、スプリット補色、スクエア) は、イッテンの章から直接来ています。

Pantoneマッチングシステム (1963年)

M. Harris and Sonsの商業プリンターPantoneのローレンス・ハーバートは、1963年にPantoneマッチングシステムをローンチしました。チップ本はデザイナーと印刷業者に共有の数値リファレンスを与え、ブランドカラーが用紙、画面、布地で再現されても生き残れるようにしました。Color of the Year (2000年に開始) は現在、ファッション、インテリア、ウェブデザインのパレットトレンドを牽引しています。

ウェブセーフパレットと216色 (1996年)

初期のウェブで8ビットディスプレイが支配的だった頃、Lynda Weinmanは1996年に216色のウェブセーフパレットを成文化し、MacとWindows間で一貫したレンダリングを保証しました。24ビットカラーが普及した (2000年頃) 後にパレットは時代遅れになりましたが、それが人気にした16進構文 (#RRGGBB) は、CSS、HTML、デザインツールで色を書く支配的な方法のままです。

OKLCHと知覚的に均一な色 (2020年)

Bjoern Ottossonの2020年のOKLab論文は、HSLの明度の不整合を持たない知覚的に均一な色空間を導入しました。CSS Color Level 4 (Chrome 111、Safari 15.4、Firefox 113からのブラウザ) はoklch()構文を追加しました。デザイントークン、アクセシブルなコントラスト、パレット生成の未来はますますOKLCHに住んでいます。なぜなら知覚的均一性は、同じL値を持つ2つの色が実際に同じ明るさに見えることを意味するからです。

実用的なワークフロー

一つの色からブランドアイデンティティを構築

Baseカラーをあなたのブランド16進数に設定し、最初のスウォッチをロックし、モードを類似色またはスプリット補色に切り替え、4つのコンパニオンカラーが正しく感じるまでGenerateをクリックします。CSS変数をコピーしてデザインシステムトークンに貼り付けます。結果は、理論に裏打ちされたハーモニーであなたのブランドに固定されたパレットです。

ダークモードペアの設計

ダークモードの背景をベースとしたモノクロマティックパレットを選択します。5つのスウォッチは、背景、サーフェス、ディバイダー、セカンダリテキスト、プライマリテキストを段階的な明度で提供します。ライトモードの場合、明るいベースで別のモノクロマティックパレットを生成します。prefers-color-schemeを介してペアになった2つのパレットは、アドホックな調整なしにほとんどのテーマニーズをカバーします。

データ視覚化のための色の選択

カテゴリカルデータ (棒グラフ、円グラフのセグメント) には、トライアドまたはスクエアのパレットが、混雑したチャートで別々に読める3つまたは4つの異なる色相を提供します。順次データ (ヒートマップ、コロプレスマップ) には、モノクロマティックを使用して色相を一定に保ちながら明度を変えます。チャートの背景に対するコントラストをチェックします; Vega-Liteのようなデータビズツールは、隣接するカテゴリ間に少なくとも3:1を期待します。

アクセシビリティファーストのパレット下書き

パレットを生成し、各ペアをコントラストチェッカー (WebAIM、Tanaguru) に貼り付けます。背景に対する本文テキストには少なくとも4.5:1 (WCAG AA) が欲しいです。大きなテキストやUIコンポーネントには、3:1がしきい値です。パレットが失敗した場合、新しいものを生成するか、ブランドスウォッチをロックして他のものを再シャッフルして準拠したセットを見つけます。

ムードボードの探索

スペースを繰り返し押して数十のランダムなパレットをサイクルします。あなたの目を引くものがあれば、最高のスウォッチをロックし、類似色に切り替え、それを基にしたバリエーションを見つけるために生成し続けます。スペースバーのループはクリックよりも速く、フローを破ることなく右脳の探索モードに留まることができます。

印刷から画面への色合わせ

印刷された参照 (Pantoneチップや布地スウォッチ) がある場合、最も近いデジタル相当をスポイトで取り、Baseカラーとして使用します。ハーモニーモードはあなたの参照の周りに広がります。印刷はCMYKで画面はRGBであることに注意してください、したがって正確な一致は不可能です; 目標は同じブランドとして読み取れるほど近いパレットです。

よくある落とし穴

WCAGコントラストは自動ではない

理論的にきれいなパレットでもアクセシビリティに失敗する可能性があります。パステル・オン・パステルのペア (薄い黄色に薄いピンク) は心地よく見えますが、コントラストが2:1未満です。提案されたテキスト・オン・背景のペアを常にWCAGチェッカーでテストしてください。パレットが本文テキストに使えなければならない場合、まずコントラスト要件を中心に構築し、ハーモニーは二番目です。

色覚異常は男性の8%に影響する

赤緑色覚異常は色覚障害の最も一般的な形態で、男性の約8%と女性の0.5%に影響します。赤緑の補色パレットは、色覚異常の視聴者には単一の茶色の汚れになります。カテゴリカルカラー (チャート、ステータスバッジ、信号機) には、色を形、ラベル、またはパターンと組み合わせ、StarkやSim Daltonismのようなシミュレーターでテストします。

HSLは知覚的に均一ではない

HSLでは、50%の明度の黄色が50%の明度の青よりもはるかに明るく見えます。HSLモデルはすべての色相を数値的に等しく扱いますが、人間の目はそうではありません。ジェネレーターは色相回転のために内部的にHSLで動作するため、SとLが似ている2つのスウォッチでも、知覚的な重みが顕著に異なる場合があります。知覚的にバランスのとれたパレットには、OKLCH対応ツール (Leonardo、Open Color) に切り替えてください。

sRGBとDisplay P3の間のガモットの違い

現代のAppleディスプレイ (2015年のiMac、2016年のMacBook Pro、iPhone 7以降のすべて) はDisplay P3を使用しており、sRGBよりも広い色域です。Display P3で鮮やかに見える飽和した赤は、古いsRGBのみのモニターで同じ16進がレンダリングされるとくすんで見える可能性があります。どこでも同じに見える必要があるブランドカラーには、sRGBのより小さなガモット内に留まります。

16進コードはデフォルトでアルファを持たない

3桁 (#abc) と6桁 (#aabbcc) の16進数は不透明です。8桁の16進数 (#aabbcc80、80は50%アルファ) はCSS Color 4と現代のブラウザでサポートされていますが、レガシーツールではサポートされていません。透明性が必要な場合は、代わりにrgba()またはhsla()を使用するか、不透明な色に固執し、親の不透明度がブレンドを処理させます。

カラーピッカーキャリブレーションのドリフト

キャリブレーションされていないモニターは、参照から数Delta-Eユニット離れることがあり、あなたの画面で清潔に見えるパレットが他の人の画面で泥だらけまたは過飽和に見える可能性があることを意味します。ブランドに重要な作業には、Spyderまたはi1Displayデバイスでキャリブレーションします。ほとんどのWebデザインでは、画面の分散は避けられません; 中央値の範囲で機能する色を選択します。

プライバシーとデータ処理

すべてはブラウザで実行されます。ハーモニーの数学はJavaScript、キャンバスのエクスポートはローカル、クリップボードAPIはユーザージェスチャを必要とします。私たちはあなたの16進コードをどこにも送信せず、生成するパレットを追跡せず、Cookieやローカルストレージに何も保存しません。ページをリロードすると、前のパレットは消えます。

ページがロードされると、ジェネレーターはオフラインで動作します。フライトで、企業プロキシ内で、またはエアギャップ環境で使用できます。ネットワークに触れる唯一のアクションはオプションのExport Imageで、これはblob URLを介してダウンロードし、ダウンロード自体はあなたの色をどこにも送信しません。

このジェネレーターを使用しない場合

セマンティックトークンを持つデザインシステムの確立

デザインシステムには、ペアになったライトとダークモードの値、コントラスト保証、名前付きスケールステップを持つ、名前付き、セマンティックトークン (color-primary-500、color-error、color-warning) が必要です。専用ツール (Material Color Tool、Open Color、AdobeのLeonardo) またはトークン管理システム (Style Dictionary、Tokens Studio) を使用します。このジェネレーターは探索用で、システム設計用ではありません。

印刷カラー管理 (CMYK、Pantone)

オフセット印刷用のCMYKカラー分離には、プロフェッショナルツール (Adobe Illustratorのスウォッチパネル、Pantone Connect) が必要です。RGB-to-CMYK変換は損失があり、インクカバレッジの制限が重要です。あなたのパレットが大規模に印刷される場合、画面のみの16進ジェネレーターではなく、最初から印刷業者の色仕様で作業します。

本文テキスト用のアクセシブルなパレットの生成

すべてのペアでWCAG AAまたはAAAコントラストを保証する必要があるパレットには、Tanaguru Contrast-Finder、Adobe Leonardo、またはAPCAベースのツールのようなコントラストファーストツールを使用します。このジェネレーターはハーモニールールに従い、コントラストルールには従わないため、美しい類似色パレットでもアクセシビリティに失敗する1.5:1のテキスト・対・背景ペアを持つ可能性があります。

アニメーションとカラー補間

グラデーションストップやカラーアニメーションには、生のHSLや16進ではなく、OKLCHまたはLCHでの知覚的に均一な補間が必要です。CSSグラデーション補間はデフォルトでsRGBに設定されており、泥だらけの中間点 (黄色と青の有名なグレー中間点) を生成します。アニメーション遷移には、カラー補間ツール (Erin Kissaneのchroma.js、oklch.com) を使用してください。

その他の質問

hex vs RGB vs HSLをいつ使用すべきですか?

Hexは最もコンパクトで最もコピーされ、デザインのハンドオフに最適です。RGBはコードで計算するのが最も簡単です (各チャンネル0-255) 。HSLは手で微調整するのが最も簡単です: 色を変更するには色相、バリアントには明度。現代のCSSでは、OKLCHはデザインシステムにとって最も将来性のあるものです、なぜなら知覚的に均一だからです。

どのハーモニーモードを選ぶべきですか?

落ち着いた、まとまりのあるパレット (インターフェース、ブログ) には類似色から始めます。高コントラストのコール・トゥ・アクションペアには補色を使用します。トライアドとスクエアは、チャートや遊び心のあるブランドのための鮮やかなカテゴリカルパレットを提供します。モノクロマティックは、ダークモードとトーナルデザインシステムに最適です。スプリット補色は最も安全な「大胆だが耳障りでない」選択です。

アクセシビリティをどう確認しますか?

各テキスト・対・背景のペアをWebAIM Contrast Checker、Tanaguru、またはAPCA Contrast Toolに貼り付けます。本文テキストには少なくとも4.5:1 (WCAG AA) 、大きなテキストとUIコンポーネントには3:1、散文重視の読書アプリには7:1 (WCAG AAA) を目指します。カテゴリカル使用にはカラーブラインドシミュレーター (Stark、Sim Daltonism) でテストします。

FigmaやSketchにエクスポートできますか?

Copy CSSは、すぐに貼り付けられるカスタムプロパティを提供します。FigmaとSketchの両方は、カラーピッカーを介して16進コードを直接インポートします。Export Imageボタンはムードボードやスクリーンショットに適したPNGを提供します。トークンに優しいエクスポート (W3C Design Token Community Group形式) には、16進コードをコピーし、Tokens StudioまたはStyle Dictionaryで適応させます。

パレットには何色あるべきですか?

ほとんどのWebサイトとアプリには3〜5色: プライマリブランドカラー、アクセントまたはセカンダリ、テキスト用ニュートラル、1〜2のユーティリティニュートラル (ボーダー、背景) 。大きなデザインシステムは9〜12の名前付きトークン (プライマリ、セカンダリ、サクセス、ワーニング、エラー、インフォ、プラスニュートラル) を使用します。ツールは5から始まりますが、Add Colorで拡張します。

OKLCHとは何ですか、使うべきですか?

OKLCHは2023年にCSSに追加された知覚的に均一な色空間です。HSLとは異なり、同じL値を持つ2つのOKLCH色は実際に同じ明るさに見えます。デザインシステムと一貫したトーナルスケールには、それが新しいベストプラクティスです。ブラウザサポートは現在のバージョン (Chrome 111+、Safari 15.4+、Firefox 113+) で普遍的です。古いブラウザでの優雅なフォールバックには、oklch()と一緒にsRGB16進値を出荷します。

関連ツール