カラーパレット生成ツール
ベースカラーを選ぶだけで、色彩理論に基づく配色（補色・類似色・トライアド・テトラード・分裂補色・モノクロマティック）をライブのスウォッチとして即座に生成。HEX・RGB・HSL・CSS変数・Tailwind設定としてコピーできます。
補色
ベースカラーと色相環上の反対色（色相 + 180°）— 最もコントラストの強い組み合わせ。
類似色
色相環上でベースカラーを両隣の色が挟む配色（色相 ± 30°）— 落ち着いてまとまりのある配色。
トライアド（三色配色）
120°ずつ均等に離れた3色（色相、+120°、+240°）— 鮮やかでありながらバランスが取れています。
テトラード（四色配色・長方形）
色相環上で長方形を描く4色（色相、+90°、+180°、+270°）— 2組の補色ペア。
分裂補色
ベースカラーに、その補色の両隣にある2色を加えたもの（色相 +150° と +210°）— 強いコントラストながらバランスを取りやすい配色。
モノクロマティック（単色）
1つの色相を明るいものから暗いものへと明度で段階づけたもの— 自然に調和するスケール。
パレットをエクスポート
選んだ配色を、そのまま貼り付けられるCSSカスタムプロパティ、またはTailwindのカラー設定としてコピーします。
:root {
--color-1: #3498DB;
--color-2: #DB7633;
}カラーパレット生成ツールについて
カラーパレット生成ツールは、色相環の幾何学を使って、1つのベースカラーを互いに調和する色のセットに変換します。色彩理論の配色（ハーモニー）とは、色相どうしの定義された関係にすぎません。すなわち、互いに向かい合う色、隣り合う色、あるいは色相環上に均等に配置された色のことです。このツールはベースカラーを受け取り、その色相・彩度・明度（HSL）を読み取り、色相を一定の角度だけ回転させて6つの定番配色を作ります — 補色（色相 + 180°）、類似色（色相 ± 30°）、トライアド（120°間隔）、テトラードまたは長方形（90°間隔）、分裂補色（補色の両側）、モノクロマティック（1色相・明度違い）です。各パレットはライブのスウォッチとして表示されるため、数値を読むだけでなく関係を目で見て確認でき、どの色にもコピーできるHEX・RGB・HSLの値が付いています。気に入った配色ができたら、CSSカスタムプロパティまたはTailwindのカラー設定としてエクスポートし、そのままプロジェクトに取り込めます。デザイナー、開発者、イラストレーター、そしてウェブサイト・ブランド・グラフ・スライド・インテリアなどの色を選ぶすべての人のために作られており、気に入った1色から、バランスの取れたパレット全体へと素早く進める手段です。
この生成ツールの使い方
- 1 スウォッチのピッカーでベースカラーを選ぶか、任意のhex値（例: #3498DB や #39F）をフィールドに入力します。
- 2 6つの配色セクション — 補色・類似色・トライアド・テトラード・分裂補色・モノクロマティック — をそれぞれライブのカラースウォッチで見ていきます。
- 3 各スウォッチのボタンで、どの色も1色ずつHEXとしてコピーできます。各スウォッチには対応するRGBとHSLの値も表示されます。
- 4 エクスポートボックスでパレットと形式を選び、CSSカスタムプロパティまたはTailwindのカラー設定をコピーして、プロジェクトに貼り付けます。
色の配色の仕組み（色相環）
どの配色も、彩度と明度はそのままに、ベースカラーの色相を360°の色相環上で回転させたものです。HSL（色相・彩度・明度）で扱うと簡単で、変わるのは色相だけです。 補色 — 色相 + 180°。2色は真向かいに位置し、最も強いコントラストを生みます。 類似色 — 色相 − 30°、色相、色相 + 30°。滑らかに溶け合い、調和して感じられる隣り合った色。 トライアド — 色相、色相 + 120°、色相 + 240°。正三角形の頂点にある3色で、鮮やかながらバランスが取れています。 テトラード（長方形） — 色相、色相 + 90°、色相 + 180°、色相 + 270°。2組の補色ペアによる、豊かな4色配色。 分裂補色 — 色相、色相 + 150°、色相 + 210°。補色の両隣にある2つの色相を加えたベースカラー — 補色にほぼ近いコントラストながら、より穏やかです。 モノクロマティック — 1つの色相を、明るいティントから暗いシェードまで複数の明度で展開したもの。 たとえばベースカラー #3498DB の色相は約204°です。その補色は 204° + 180° = 24°（オレンジ）、トライアドの相手は 324° と 84°、分裂補色は 354° と 54° になります。計算はHSLで行い、各スウォッチごとにHEXへ戻して変換します。
よくある質問
補色とは何ですか？
補色とは、色相環上で別の色のちょうど反対側にある色、つまり色相を180°回転させた色です。青とオレンジ、赤と緑、黄と紫は補色のペアです。並べて置くと可能なかぎり強いコントラストが生まれ、それぞれの色がより鮮やかに見えるため、補色のペアはコール・トゥ・アクションやアクセント、目立たせたいものによく使われます。この生成ツールは、ベースカラーの色相に180°を足すことで補色を求めます。
カラーパレットはどう作るのですか？
気に入った1つのベースカラーから始め、当てずっぽうではなく色彩理論の関係を使って残りを導きます。雰囲気に合った配色を選びましょう。類似色やモノクロマティックの配色は落ち着いてまとまって見え、補色・トライアド・分裂補色の配色はコントラストと活気を加えます。彩度と明度を一定に保って色がひとつのセットに見えるようにし、色は少数に絞ってニュートラルを添えます。このツールはその過程を自動化します — ベースカラーを入力すると、HEX・RGB・HSL・CSS変数・Tailwind設定としてコピーできる6つの既製パレットを生成します。
トライアド配色とは何ですか？
トライアド配色は、色相環上に均等に120°ずつ離して配置した3色を使います — 例えば赤・青・黄です。3つの色相が互いに等距離にあるため、トライアドのパレットは鮮やかでコントラストに富みながらも、バランスの取れた印象になります。よくある手法は、1色を主役にして残り2色をアクセントとして使うことです。この生成ツールでは、トライアドのパレットはベースカラーに +120° と +240° の色相を加えたものです。
類似色配色とは何ですか？
類似色配色は、色相環上で隣り合う色、通常はベース色相からおよそ30°以内の色を使います — 例えば青、青緑、緑です。色相が非常に近いため、類似色のパレットは滑らかで自然、調和して見え、それゆえ自然界（夕焼け、木々の葉、海）に頻繁に現れます。補色の配色よりコントラストが弱いので、1色を主役に選ぶとうまくまとまります。このツールは、−30°、ベースカラー、+30° の色相から類似色パレットを組み立てます。
関連するデザイン・カラーツール
パレット生成ツールは、任意のスウォッチをHEX・RGB・HSL・HSV・CMYK間で変換するカラーコード変換、選んだ色が読みやすくWCAGに適合しているかを確認するコントラストチェッカー、パレットの色を滑らかな背景に混ぜ合わせるCSSグラデーション生成ツール、そしてデザイン作業の残りを支えるアスペクト比計算機と自然に組み合わせて使えます。