🖌️
カラーパレット生成
ベースカラーから補色・類似色・トライアドなど5種類の配色パターンを自動生成。CSS変数でまとめてコピー可能。
隣り合う色で統一感
1
#66EAD2-60°2
#66C0EA-30°3
#667EEAベース4
#9066EA+30°5
#D266EA+60°CSS変数としてコピー
--color-1: #66EAD2; --color-2: #66C0EA; --color-3: #667EEA; --color-4: #9066EA; --color-5: #D266EA;
💡 活用ヒント：上のCSS変数をCSSの :root {} に貼り付けると、プロジェクト全体でカラーを一元管理できます。
カラーパレット生成ツールの使い方
ベースカラーをカラーピッカーまたはHEXコードで入力し、配色パターンを選ぶだけでパレットが自動生成されます。 生成された各色はワンクリックでコピー可能。CSS変数としてまとめてコピーもできます。
5種類の配色パターン
補色は対角線上の色でメリハリある配色に。類似色は統一感のある柔らかい印象。トライアドは3色で豊かな表現。分裂補色は補色より穏やかな対比。モノクロは明度5段階でシックな配色に。
関連ツール：HEX・RGB変換・コントラストチェッカー