カラーパレット生成
ベースカラーから配色スキームに基づいたカラーパレットを自動生成します。
#3b82f6
#8fb4f0
#f6af3c
#f0cb8f
#0950c3
rgb(59, 130, 246)
rgb(143, 180, 240)
rgb(246, 175, 60)
rgb(240, 203, 143)
rgb(9, 80, 195)
カラーパレット生成ツールの使い方
ベースカラーを選択し、配色スキーム（補色・類似色・トライアド・スプリット補色）を選ぶと、 5色のカラーパレットが自動生成されます。各色をクリックするとHEXコードがクリップボードにコピーされます。 Webデザイン、UIデザイン、ブランディングの配色選定にご活用ください。
❓ よくある質問
補色とは何ですか？
補色は色相環で正反対に位置する色のことです。コントラストが強く、互いを引き立てる効果があります。アクセントカラーとして使うと目を引くデザインになります。
トライアドとスプリット補色の違いは？
トライアドは色相環を3等分した位置の3色を使う配色です。スプリット補色は補色の両隣の色を使う配色で、補色よりも柔らかい印象になります。
生成された色をそのまま使っても大丈夫ですか？
配色の出発点として最適です。実際のデザインでは、コントラスト比やアクセシビリティ（WCAG基準）も考慮して微調整することをお勧めします。
入力データはサーバーに送信されますか？
いいえ。すべての計算はブラウザ上で行われるため、データがサーバーに送信されることはありません。
🔧 関連ツール
C
カラーコード変換
HEX・RGB・HSLを相互変換。カラーピッカーで直感的に色を選択。
⊞
アスペクト比計算
画像・動画のアスペクト比を計算。SNSや動画サイトの推奨サイズも一覧表示。
🎨
CSSグラデーション生成
CSSグラデーションを視覚的に作成。線形・放射状対応。プリセット付き。
🔲
CSSボックスシャドウ生成
box-shadowをスライダーで直感操作。複数レイヤー・プリセット対応。
🖼
画像Base64変換
画像ファイルをBase64に変換。Data URI形式でHTML・CSSに埋め込み可能。
⬜
CSS Flexbox生成
Flexboxレイアウトを視覚的に作成。direction・justify・align等を直感操作。