カラーパレット生成無料・登録不要

色の組み合わせを1から考えずに叩き台を出す

Web サイト・スライド・SNS 画像・印刷物のデザインで、調和のとれた配色を作るには色彩理論の知識が要ります。「メインの1色を決めたら、それに合うサブ・アクセントを選ぶ」といった作業は、デザイン未経験者には壁になります。本ツールは、作りたい雰囲気やイメージを文章で入力欄に打ち込むと、メインカラー・サブカラー・アクセントカラーの3色を HEX コードで返します。入力欄はイメージ・雰囲気を書く textarea が1つあるだけで、ベースカラーを指定する欄はありません。返るのは HEX のみで、RGB 値や用途別の使い分け案は出ません。会員登録もログインも不要です。

使いどころは3つです。1つ目はブランドカラー設計で、新規ブランドの配色の当たりを、いくつか出し比べて検討したいとき。2つ目は LP やスライドのデザインで、入力を変えて複数の3色パレットを作り、印象の違いを見比べたいとき。3つ目は SNS 投稿画像のトーン統一で、アカウント全体の世界観をそろえるための起点となる3色を決めたいときです。いずれも、出てきた3色をそのまま最終版にするのではなく、叩き台として使うのが実態に合っています。

4通りの入力を試した実処理結果

実測条件です。本ツールは AI を呼ばず、ブラウザ内だけで処理します。入力欄に雰囲気やイメージの文章を入れ、返ってきた3色（メインカラー・サブカラー・アクセントカラー）をそのまま記録しました。色が入力の意味に沿うか、入力の文字を変えると色がどう動くかを中心に、4通り試しています。

まず「和風の落ち着いたビジネスサイト」と入れると、メイン #3C6AAA、サブ #7D77BB、アクセント #926D3A の3色が返りました。メイン #3C6AAA とサブ #7D77BB は青系で、「和風」という言葉から連想する色ではありませんでした。

次に「真っ赤で情熱的なスポーツブランド」と、赤を明確に指定して入れました。返ってきたのはメイン #973CAA、サブ #BB77A4、アクセント #49923A で、赤系の色は1つも含まれていませんでした（#973CAA は紫寄り、#49923A は緑です）。

最後に、入力の文字そのものを変えて確かめました。「あああああ」ではメイン #3C89AA、サブ #7785BB、アクセント #92543A。ここに1文字だけ足した「あああああい」ではメイン #AA3C55、サブ #BB8977、アクセント #3A927D と、3色ともがらりと変わりました。

同じ入力なら同じ3色・色相の決まり方

今回の4通りで、はっきりした動きがいくつか見えました。

1つ目は、同じ入力なら毎回同じ3色が返ることです。本ツールは乱数を使わず、色は入力した文字から計算で決まります。同じ文章で「パレットを生成」を押せば、何度でも同じ3色になります（「別のパレットを生成」を押すと計算のずらし幅が変わり、別の3色に切り替わります）。

2つ目は、3色の組み方が決まっていることです。メインを基準に、サブは色相を少しずらした近い色、アクセントは反対側の色、という関係で3色が組まれます。だから入力が何であれ、返ってくる3色そのものは配色として一応まとまった組になります。実際、「和風」の結果もメイン（青）に対してアクセント #926D3A が反対側の色相で出ています。

3つ目が、色相の決まり方です。実装には「海」「自然」「クール」「ビジネス」「和風」など特定の語を色相に対応づける辞書があり、入力にこれらの語が含まれると、その語の色相が起点になります。ただし辞書は先に一致した語が優先されるため、「和風の落ち着いたビジネスサイト」では「和風」ではなく、先に並んでいる「ビジネス」の色相（青系）が採用され、結果が青になりました。辞書にない語（「赤」「真っ赤」など）だけの入力は、文字列全体のハッシュから色相を決めるフォールバックに回ります。だから「真っ赤」と書いても赤は出ず、「あ」を1文字足しただけで色が一変したわけです。

まとめると、色の意味を素直に反映するのは辞書にある一部の語だけで、それ以外は色の意味と無関係な計算で決まる、という観測結果です。あくまで今回試した4通りの範囲での結果で、すべての入力を網羅したものではありません。

向いている使い方と、合わないときの進め方

弱点は、入力した言葉の多くが色に結びつかないことです。辞書にある一部の語は色相に効きますが、「赤で情熱的に」のように辞書にない言葉で狙いを伝えても、その意図は色に出ません。この性質から、向かないのは「ブランドの世界観を言葉で伝えれば、そのまま色にしてくれる」という期待の使い方です。今回の範囲では、その期待には応えませんでした。

向いているのは、色の意味は問わず、まず配色としてまとまった3色を叩き台として1セット出したい、という使い方です。返ってくる HEX 値はそのまま使えるので、出た3色を起点に、自分の狙う色相へ手で寄せていくのが現実的です。

手直しの判断はこう考えてください。出てきた色がイメージと合わなくても、それはこのツールの通常の挙動です。入力の言葉を変えて粘るより、出た3色のうち気に入った1色を主役に選び、残りは後述のコントラストの注意点を踏まえつつ、別の配色ツールで整えるほうが早く決まります。狙った色相がどうしても要るなら、色相を数値で直接指定できる配色ツールを併用してください。

Adobe Color など既存ツールとの位置づけ

Adobe Color や Coolors などの本格的なツールもありますが、デザイン知識がないと使いこなしづらい側面があります。本ツールは日本語 UI で、雰囲気やイメージを文章で入れると、メイン・サブ・アクセントの3色を HEX コードで提案します。ベースカラーの指定欄はなく、RGB 値や用途別の使い分け案も出ません。会員登録もログインも不要で、デザイン未経験者でもすぐ試せます。ただし前述のとおり、入力した言葉の意味がそのまま色になるのは辞書にある一部の語だけなので、「まとまった3色をとりあえず1セット手早く出す道具」として、狙った色は自分で寄せていく前提で使うのが実態に合っています。

印刷・コントラスト・商標で気をつける点

1つ目の注意は、画面と印刷物で色味が違うことです。本ツールが返すのは HEX（画面用の RGB 表現）なので、印刷用途では RGB（画面）と CMYK（印刷）で再現できる色域が違う点を踏まえ、別途プリンタプレビューでの確認が必要です。

2つ目は、コントラスト比です。テキストと背景のコントラスト比が低すぎると読めません。WCAG（アクセシビリティ）基準を満たすか、別途チェックしてください。

3つ目は、商標登録された色の扱いです。コカコーラ赤、Tiffany ブルーなど、特定企業のブランドカラーは商標で保護されている場合があります。商用利用の際は注意してください。