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

5つの方法でカラーパレットを生成

このカラーパレットジェネレーターは、複数の独立したツールを1つに置き換えます。「生成」をクリックしてランダムカラーパレットを作成、ベースカラーからカラーハーモニーを選択、画像や写真から色を抽出、単一のHEXコードをフルカラースキームに展開、または色の名前や単語を再現可能なパレットに変換できます。3〜10色で設定し、気に入った色をロックして残りを再生成——アカウント不要、ブラウザ外にデータは出ません。

スウォッチをクリックして値をコピーし、HEX・RGB・HSLを切り替え、ドラッグして順番を変更できます。スペースキーで即座に新しいパレットを生成——Coolorsが広めたワークフローを、ここでは無料で利用できます。

画像・HEXコード・色名から色を抽出

画像から：写真をドロップすると、ツールが非表示のHTML5 Canvasでメジアンカットアルゴリズムを使用して主要な色を抽出します——商品写真、ブランド画像、ムードボードに合わせたパレット作成に最適です。画像はデバイス上に留まり、サーバーにアップロードされることは一切ありません。CoolorsはProプランでのみこの機能を提供しますが、ここでは無料です。

HEXコードから：ブランドカラーを貼り付けてアンカーとして維持しながら、ジェネレーターが類似色・補色・明暗バリエーションを自動生成します。色名から：任意のワードを入力すると、決定論的ハッシュでパレットが生成されます。同じ単語は常に同じ色を生成——毎回異なる結果を出すAIベースのパレットジェネレーターよりも安定したオフライン代替手段です。

本物のカラー理論に基づくカラーハーモニー

ハーモニーモードは、カラーホイール上で色相を回転させてカラー理論を適用します。補色は180°離れた位置でメリハリのあるコントラストを作り、類似色は±30°以内で穏やかで統一感のある印象に、トライアドは120°間隔の3色でバランスの取れた配色に、テトラードは90°間隔の4色、スプリット補色は150°/210°でコントラストを和らげ、モノクロマティックは1つの色相を保ちつつ明度を変化させます。

生成される各色には、50〜900の完全なティント・シェードスケールが付属——実際のUIデザインシステムでのホバー状態、ボーダーカラー、背景バリエーションに必要な明暗のステップです。

Coolors・Adobe Color・PalettonとUtiloKitの比較

Coolorsは最も人気のあるパレットツールで、優れたロック・再生成ワークフローと大きなコミュニティを持っています。Coolors Pro（月額4ドル）は、画像抽出・高度なエクスポート・パレット履歴をペイウォールの後ろに置いています。ネイティブのTailwindエクスポートは無料プランにはありません。Adobe ColorはWCAGアクセシビリティチェックとカラーハーモニーの可視化が優秀ですが、パレットの保存には無料のAdobeアカウントが必要で、エクスポートまでクリック数が多くなります。

Palettonはカラー理論に強いですが、4種類のハーモニーしか表示せず、画像抽出機能もありません。UtiloKitは3つのツールの核心的な強みを組み合わせています——Coolorsスタイルのロック、Adobe ColorのWCAGパネル、画像抽出、Tailwind/SCSSエクスポート——アカウント不要、ペイウォールなし、ツール上に広告なし。

お気に入りをロックして繰り返し調整

良いパレットは一度の生成ではなく、繰り返しの試行から生まれます。スウォッチをロックすれば固定されます。「生成」を押すかスペースキーを押すと、ロックされていないスウォッチだけが変わります。気に入ったドミナントカラーを保持し、アクセントを変えながら、全体のパレットが決まるまで調整——その後すぐにエクスポートへ。

複数の色を同時にロックできます。ブランドのプライマリカラーとニュートラルな背景色をロックして、ツールにアクセントカラーを提案させましょう。合うアクセントが見つかったらロックし、サポートカラーを再生成します。これはデザイナーが手動でパレットを作る方法を模倣していますが、はるかに速く行えます。

CSS・Tailwind・SCSS・JSON・PNG・共有リンクにエクスポート

パレットができあがったら、プロジェクトに必要なフォーマットでエクスポートします。CSSはカスタムプロパティの:rootブロックを生成します。Tailwindはtailwind.config.jsに貼り付け可能なtheme.extend.colorsオブジェクトを生成します。SCSSはSass対応の$変数宣言を生成します。JSONはJavaScriptまたはデザイントークンパイプライン用に各色をHEX・RGB・HSLで出力します。ブランドドキュメントや資料用にPNGのスウォッチシートをダウンロードできます。パレットをURLにエンコードした共有リンクをコピーして、チームメンバーに全く同じ状態を見せましょう。

WCAGコントラストチェック内蔵

テキストが読みやすくなるまでパレットは完成しません。コントラストパネルは各色のWCAGコントラスト比を白・黒テキストに対して表示し、AA・AAAの合格/不合格バッジを付けます。WCAG 2.1 AAは通常テキストに4.5:1、大きなテキストに3:1を要求します。AAAは通常テキストに7:1を要求します。ほとんどのパレットツールはこのステップを省略するかプレミアム機能として隠しています——ここでは内蔵され、スウォッチを生成・変更するたびにリアルタイムで動作します。

サインアップ不要、アップロード不要、ブラウザ外にデータは出ません。ランダム生成・画像抽出・ハーモニー計算・コントラストチェック・エクスポートのすべての操作がローカルのJavaScriptで実行されます。Webデザイン・ブランドアイデンティティ・イラスト・スライド・季節や結婚式のパレットに、この無料カラーパレットジェネレーターをブックマークしてお使いください。