無料カラーパレットジェネレーター

実例

ページを開くと、「ベースカラー」ボックスにはすでに #14b8a6 が入り、「ブランドパレット」が選択されています。「ブランドパレット · 7色」の下に7つのスウォッチが現れます。#14B8A6(ベース)、#EE66BA(アクセント)、#E5FAF8(明るいティント)、#14524A(暗いシェード)と、同じ色相で色づけされた3つのニュートラル #F3F6F6、#63837F、#1A2322 です。ベースのカードには「白背景 2.5」と「不合格」、「黒背景 8.4」と「AAA」が表示されます。「補色」を押すと、ストリップは #14B8A6 と #EF7381 の2色になります。「コピー形式」で RGB を選び、「すべてコピー」を押します。トーストに「2色をコピーしました」と表示され、クリップボードには rgb(20, 184, 166), rgb(239, 115, 129) が入ります。「文字色と背景色のチェック」では、文字色は #000000、背景は #14B8A6 で始まり、8.44:1、「通常の文字 AAA」、「大きい文字 AAA」と表示されます。

使用する設定と制限事項

• 手元にある形式のまま、色を入力しましょう。 「ベースカラー」ボックスには、# の有無を問わず3桁または6桁の16進コード、teal や tomato のような CSS の色名、rgb() や hsl() の値(アルファ値は無視されます)、20 184 166 のような数字だけの形式を入力できます。名前の中のスペースは無視されるため、「rebecca purple」も使えます。6桁の16進コードは、入力と同時に適用されます。それ以外は、Enter キーを押すか、ボックスから離れたときに適用されます。8桁の16進コードと oklch() は読み取れません。丸い点は8つの開始色から1つを設定し、四角はシステムの色選択を開きます。
• 用途に合ったパレットの種類を選びましょう。 「ブランドパレット」は、ベース、アクセント、明るいティント、暗いシェードと3つのニュートラルという役割付きの7色です。「補色」は2色、「類似色」は4色、「トライアディック」は3色、「分割補色」は3色、「テトラディック」は4色、「単色」は5色、「シェード」は7色です。「単色」は選んだ色を保ち、明度を段階的に変えます。「シェード」は、選んだ色相と彩度で明度 10〜90% までの固定のはしごで、選んだ色そのものは含まれません。色相を回転させる種類(補色、類似色、トライアディック、分割補色、テトラディック)は、知覚される明度を同程度に揃え、中間の範囲にとどめるようにします。
• 気に入った色をロックして、シャッフルしましょう。 スウォッチの「この色をロック」を押してから、「シャッフル」を押すか、新しいベースを選びます。ロックしたスウォッチは色が保たれ、残りが変わります。「シャッフル」は、HSL の彩度 50〜84、明度 40〜57 のランダムなベースを選ぶので、中間トーンになります。ロックは色ではなくスウォッチの位置に結び付くため、スウォッチ 1 をロックしてベースを変えても、スウォッチ 1 は古い色のままです。「この色を編集」は1つのスウォッチの色選択を開き、見出しに「(編集済み)」を加えます。ロックしていない編集済みのスウォッチは、次にパレットが再生成されたときに置き換えられます。
• 公開する前に、コントラストを確認しましょう。 各カードには「白背景」と「黒背景」の比率がバッジ付きで表示されます。7:1 以上は「AAA」、4.5:1 以上は「AA」、3:1 以上は「AA(大きい文字)」、それ未満は「不合格」です。比率は WCAG の相対輝度の式を使います。「文字色と背景色のチェック」では、パレットの色と白、黒の中から、文字色と背景を選びます。「通常の文字」の行は 7 で AAA、4.5 で AA と評価します。「大きい文字」の行は 4.5 で AAA、3 で AA と評価します。使う予定の組み合わせそのものをテストしてください。各色が読みやすくても、パレットが読みやすいとは限らないからです。
• コピー形式を選び、次に書き出しを選びましょう。 「コピー形式」は、スウォッチ、ティントやシェードのチップをクリックしたときと、「すべてコピー」でコピーされる内容を決めます。16進、rgb、hsl、oklch から選べます。ベースの場合は #14B8A6、rgb(20, 184, 166)、hsl(173, 80%, 40%)、oklch(70.4% 0.123 182.5) となります。「エクスポート:」の下のボタンは、palette.css、palette.scss、tailwind-colors.js、tailwind-scales.js(「Tailwind 50-950」)、palette.json、palette.png、palette.svg、palette.gpl、palette.ase、palette.aco を保存します。テキストファイルには16進値が入り、JSON には rgb、hsl、oklch の文字列も加わります。PNG は1スウォッチあたり幅 200 px、SVG は 160 px です。「PNG/SVGに16進ラベルを表示」は、初期状態でオンです。
• リンクを共有するか、プリセットから始めましょう。 「結果を共有」は、アドレスの # の後ろに、ベースカラー、種類、編集、ロックを保持したリンクを作ります。対応しているタッチデバイスでは共有シートが開きます。共有されるパレットは、1〜12色を保持できます。「おすすめを試す」の下の「パステル」「アースカラー」「ネオン」「ブランド向け(AA)」は、それぞれ5色を「カスタム」パレットとして読み込み、その後ベースを変更すると「ブランドパレット」に戻ります。「画面から選択」は、スポイト機能のあるブラウザー(主に Chromium 系)にだけ表示されます。

よくある問題とその解決方法

「認識できない色です。#14b8a6、teal、rgb(20, 184, 166) のように入力してください。」と表示されます。

テキストを色として読み取れず、ボックスは現在のベースに戻ります。よくある原因は、#14b8a680 のような4桁または8桁の16進コード、oklch() の値、CSS にない色名、rgb(300, 0, 0) や hsl(10, 120%, 50%) のような範囲外の数値です。3桁または6桁の16進コード、CSS の色名、範囲内の値の rgb() または hsl() で入力し直し、Enter キーを押してください。

新しいベースカラーを選んだのに、1つのスウォッチが古い色のままです。

そのスウォッチはロックされています。カードのロックボタンは青緑色になり、ツールチップには「この色のロックを解除」と表示されます。ロックされたスウォッチは、新しいベース、新しい種類、「シャッフル」など、パレットが再生成されるたびに保持されます。もう一度ロックを押すと解除されます。ロックはスウォッチの位置に結び付いているため、スウォッチ 1 のロックは、「ブランドパレット」から「トライアディック」に切り替えても有効です。

トーストに「コピーできませんでした」と表示されます。

クリップボードの2つの方法がどちらも失敗しました。ブラウザーのクリップボード API と、非表示のテキストボックスによるコピーコマンドです。クリップボード API は、安全でないページや一部のサンドボックス化されたフレームでは使えず、ページにフォーカスがないとブラウザーが拒否することもあります。ページを一度クリックして、もう一度試すか、通常のブラウザーのタブでページを開いてください。コピーがブロックされたままの場合は、CSS、JSON、Tailwind の書き出しボタンでファイルとして保存してください。

「画面から選択」ボタンがありません。

このボタンが追加されるのは、ブラウザーにスポイト機能がある場合だけで、ページの FAQ によれば、主に Chromium 系のブラウザーです。ない場合は、テキスト欄の隣にある四角い色のボックスを使うか、別のアプリで読み取った16進コードを入力してください。選択中に Esc キーを押すと、静かにキャンセルされ、ほかの理由で選択に失敗した場合は、ページにメッセージが表示されません。

保存した PNG や SVG のスウォッチに、16進コードがありません。

「PNG/SVGに16進ラベルを表示」のボックスのチェックが外れています。ページを開いたときはオンなので、誰かが外したことになります。オンにすると、各スウォッチに大文字の16進コードが、コントラストに合わせて選ばれた濃いまたは薄い文字色で入ります。このボックスが影響するのは PNG と SVG だけです。ほかの書き出しには色の値そのものが入り、ラベルはありません。ボックスをオンにして、もう一度 PNG または SVG を押してください。

比較

このページは、1つの色から、固定された色相環のルールでパレットを作り、WCAG の比率でコントラストを評価し、コードやデザインのファイルに書き出します。写真から色を取り出したり(そのためにページには画像の色抽出ツールへのリンクがあります)、色覚の見え方をプレビューしたり、色に名前を付けたり、アカウントにパレットを保存したりはしません。作業内容は、アドレスバーの # の後ろに保持されるため、再読み込みやブックマークで復元できます。ハーモニーのルールは出発点であり、完成したブランドではありません。役割を決め、実際のレイアウトでパレットをテストするのは、やはりデザインアプリやブランドガイドの役目です。