配色ジェネレーター

基準色から類似色・補色・トライアド・単色のカラーパレットを作成。HEXコードのコピーとCSS変数の保存ができます。

値を設定

ブラウザー内で処理し、データはアップロードしません。

基準色と配色方法を選択してください。文字と背景の読みやすさは別途コントラストチェッカーで確認してください。

結果

データを入力して実行してください。


        
        

入力値やファイル内容を統計に含めず、どのツールが使われたかを集計します。 プライバシー

ツールの使い方

  1. 基準色 / 配色を設定します。
  2. 「実行」を押し、結果を確認してコピーボタンまたは保存ボタンを使ってください。

方法と制限

基準色と配色方法を選択してください。文字と背景の読みやすさは別途コントラストチェッカーで確認してください。

例

#336699 → #339966, #339999, #336699, #333399, #663399

具体的な使用例

入力
基準色: #336699; 補色
結果
#336699 #6699CC #4D331A #996633 #CC9966

お気に入り