デザイン
パレット生成
基準色からデザインパレットを自動生成
#5B5EF0
プレビュータイトル
このパレットが実際のデザインでどう見えるか確認してください
PrimarySecondaryAccent
このツールについて
パレット生成ツールは、基準色1つを選ぶだけで補色・類似色・三色・単色モードでPrimary・Secondary・Accent・Background・Surface・Textの6色パレットを自動生成する無料ツールです。デザインプレビューとCSS/SCSS/Tailwindコードのコピー機能付き。
使い方
- カラーピッカーまたはHEXコードで基準色を選択します。
- 配色モード（補色/類似色/三色/単色）を選びます。
- 色チップをクリックしてコピーするか、「ソースを見る」でコード全体をコピーします。
よくある質問
補色・類似色・三色の違いは？
補色は色相環で反対側（180°）の色でコントラストが強く、類似色は隣接（±30°）で調和的、三色は120°間隔で活気あるバランスを生みます。
Background・Surface・Textはどう生成しますか？
基準色の色相（H）を維持しつつ彩度と明度を調整します。Backgroundは非常に明るく、Textは非常に暗くして統一感のあるパレットを構成します。
生成コードをそのままプロジェクトで使えますか？
はい。CSS変数、SCSS変数、Tailwind設定形式で提供されるのでコピーしてすぐ使えます。
結果は参考用です。正確な情報は公式機関でご確認ください