カテゴリー: 開発ツール
カラーパレットジェネレーター
1色から配色を組み立てる
基準色を選ぶと、色相環の関係にもとづくパレットが得られます。補色、類似色、トライアド、テトラード、単色、濃淡のいずれかを選び、HEX・RGB・HSL でコピーできます。
色数
- 1
#0f7b63 - 2
#7b0f26 - 3
#073b30 - 4
#3b0712 - 5
#17ba97
すべての値
#0f7b63 #7b0f26 #073b30 #3b0712 #17ba97
パレットは入力した色から計算されます。何もアップロードされません。
このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
配色の関係は色相環上の幾何です。補色は基準の反対側にあり、類似色は両隣にあり、トライアドは等間隔の3点です。手作業でやるなら HSL に変換して度数を足し、また戻す必要があり、たいていはそこで試行をやめてしまいます。ここでは色相の回転を代わりに行い、指定した色数より色相の数が少ない配色では、色を繰り返す代わりに明度を段階的にずらします。そのため補色2色から5つ作っても、5つとも使える色になります。各色見本は読みやすいラベル付きで、スタイルシートで使う記法のままコピーできます。
使い方
- 土台となる基準色を選ぶか入力します。
- 配色の種類と必要な色数を選びます。
- 個別の値を、あるいはパレット全体をまとめてコピーします。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- どの配色から始めればよいですか。
- 落ち着いたまとまりなら類似色、目立つアクセントが必要なら補色、画面を静かに保って内容を主役にしたいなら単色です。
- このパレットはアクセシブルですか。
- 自動的にそうなるわけではありません。配色は調和の話であって、コントラストの話ではありません。公開前に文字色と背景色の組み合わせをコントラストチェッカーで確認してください。
- 入力した色はどこかに送られますか。
- いいえ。パレットは入力された色からページ内で計算され、アップロードも保存もされません。