Color Palette Generator
使い方
- 1
ハーモニーを選択
類似色や補色など、色のハーモニールールを選択して色間の関係を定義します。
- 2
ムードを選択
ムードセレクターで雰囲気を設定。パステル、ビビッド、ダークモードからブランドに合ったものを。
- 3
生成
生成ボタンをクリックしてユニークなパレットを作成。気に入った色はロックして残りを再生成できます。
- 4
エクスポート
個別のHexコードをコピーするか、エクスポートでTailwind CSS設定全体を取得できます。
カラーセオリーガイド
ハーモニーを理解する
- 類似色
色相環で隣り合う色で構成されます。穏やかで快適なデザインを生み出します。
- 補色
色相環で反対側にある色です。高いコントラストと強いインパクトを生み出します。
- トライアド
色相環で均等に配置された3色です。調和を保ちながら高いコントラストを提供します。
- 分割補色
補色スキームの変形。基本色とその補色に隣接する2色を使用します。
- モノクロマティック
単一色の明度と彩度の変化です。清潔で上品、落ち着いた印象を与えます。
- ランダム
厳格なルールのない完全ランダムな色。予想外のインスピレーションに最適です。
ムードを探る
- スタンダード
バランスの取れた彩度と明度。一般的なWebデザインやUIコンポーネントに適しています。
- パステルドリーム
高明度・低彩度。柔らかく心地よい。ライフスタイルや春のテーマに最適です。
- ネオンビビッド
高彩度・中明度。エネルギッシュで目を引くデザインに。
- ダークモード
低明度の無彩色トーン。深みがあり神秘的で現代的。OLEDの省電力にも効果的です。
- ヴィンテージレトロ
低彩度でわずかに温かみのあるトーン。ノスタルジックでクラシックな印象。
おすすめのツール
役に立つかもしれない厳選されたツール
調和する色の選び方
概要
色彩理論には何世紀もの蓄積がありますが、ウェブデザイナーは数分で「うまく機能する」パレットを必要としています。補色・類似色・三色配色・テトラディックなど確立された配色ルールに基づき、このツールは1つのベース色から数学的に調和するパレットを生成します。アクセシビリティ(WCAG コントラスト)、ダーク/ライト変種、エクスポート(CSS変数、Tailwind config、Figma)もサポートします。
仕組み
ベース色(HEX、RGB、HSL入力可)を選択し、配色ハーモニーを選びます。ツールはHSL色空間で計算してパレットを生成します。各色はWCAG ABコントラスト比とともに表示され、本文・見出し・アクセントへの適合性が分かります。
こんなときに使う
新規ブランド/ロゴデザイン。Webサイトのテーマカラー選定。プレゼン資料・ポスター・SNSグラフィックの色構成。デザインシステム構築初期。「うちのブランドカラーに合う色」を探すマーケター。
よくある質問
実用的には3-5色が標準です。プライマリ・セカンダリ・アクセント・背景・前景。それ以上は使い分けが難しくなります。