カラーパレット作成

基準色から補色・類似色・トライアド・単色の配色を作り、HEX、CSS 変数、JSON で保存できます。

色

モード

補色類似色トライアド同系色の明暗

色をクリックすると HEX をコピーします。文字は黒と白のうち WCAG コントラスト比が高い方を使います。生成色は不透明です。

出力形式

CSS JSON

このブラウザー内で処理します。アップロードや保存は行いません。

このツールについて

主色から配色候補を広げ、選んだ色をスタイルシートに移せます。

デザイン

HEX・RGB・HSL の入力かカラーピッカーで基準色を決め、配色方式を選びます。色見本をクリックすると HEX をコピーでき、全色を CSS 変数や JSON 配列で出力できます。

HSL の色相や明度を変えて作成し、出力は不透明です。見本の文字は WCAG コントラスト比が高い方の黒か白を使います。すべての色同士の読みやすさを保証するものではないため、実際の文字色・背景色はコントラストツールで確認してください。

保証しません。色見本の値は背景と選択された黒字または白字との比率です。実際の前景色と背景色の組み合わせを個別に確認してください。

彩度のないグレーでは、色相を回転しても色の違いが現れません。補色、類似色、トライアドを試す場合は、彩度のある基準色を選んでください。単色モードなら明度が変わるため、グレーでも濃淡を作れます。書き出す色はすべて不透明です。

してディスカッションに参加してください。

コメントはまだありません。