小さな配色実験室

今日の3色パレット

3色に絞ると、アイデアが動き出す。気になる色を並べて、あなたの制作へ。

固定した色は、新しい配色でもそのまま残ります。

3色を並べてみる

異なる面積で並べた3色の印象を確認できます。

HEX一覧やCSSカスタムプロパティを、そのままコピー。

準備できました。3色を自由に試してみてください。

CSSカスタムプロパティ

:root {
  --color-1: #E57B65;
  --color-2: #F1D8A5;
  --color-3: #376B61;
}

この欄は直接選択できます。Ctrl+C／⌘C、または端末のコピー操作を使えます。

使い方: カラーピッカーか6桁のHEXで3色を選びます。残したい色を固定し、「新しい配色をつくる」で固定していない色だけを更新できます。
できること: 3色の組み合わせをその場で確認し、HEX一覧とCSSカスタムプロパティをコピーできます。
大切にしたこと: 選ぶ色を3色に絞り、組み合わせを比べながら配色の候補を考えられます。
こんなときに: 色の候補が多すぎて決めづらいときや、色コードを一つずつ書き写す手間を減らしたいときに使えます。
このあと: コピーした色コードを制作中のCSSやデザインツールに貼り付けて試せます。文字と背景のコントラストは測定していないため、使う場面に合わせて別途確認してください。
プライバシー: 色の処理はブラウザ内だけで行います。ログイン、AI処理、解析、外部APIは使いません。入力した色をサーバーへ送信せず、保存もしません。コピー操作時だけクリップボードへの書き込みを試みます。再読み込みで色と表示言語は初期状態に戻ります。