パレットジェネレーター
スペースキーを押すと新しいパレットができます。気に入った色を固定し、コントラストを確認して、サイト用のコードを持っていきましょう。
色にカーソルを合わせると、鍵で固定、点でドラッグ、「+」で隣に色を追加できます。カラーコードをクリックすると編集できます。各色にボタンがあります: 固定、コピー、濃淡、削除。カラーコードをタップすると編集できます。
コントラスト
WCAGによるパレットの色の組み合わせ: AAは通常の文字、AAAが最も良い状態です。
書き出し
既成のパレット
クイックチェック: ファビコン · SEOプレビュー · 競合ショップ · パレットジェネレーター
使い方
スペースキーを押すたびに新しいパレットになります。気に入った色は鍵で固定すると、次のパレットはその色に合わせて作られます。カラーコードをクリックすると、明るさ・彩度・色相の調整や独自のHEX入力ができます。縞模様のボタンは色の明るい・暗い濃淡を表示し、背景やホバー時の色を選ぶのに便利です。色はドラッグで並べ替え、隣同士の間に追加、削除ができ、2〜10色まで使えます。
写真からのパレットと書き出し用コード
写真をアップロードするかクリップボードから貼り付けると、主な色を見つけます。完成したパレットはCSS変数、SCSS、Tailwindの設定、JSONとしてコピーしたり、PNGやSVG画像でダウンロードしたり、プロフィールに保存したり、「写真からグラデーション」で開いて背景にしたりできます。ページのアドレスには常に現在のパレットが入っているので、そのまま共有できます。
よくある質問
答えが見つからない場合は、お気軽にお問い合わせください。
スペースキーか「生成」ボタンを押します。気に入った色を鍵で固定すると次の生成でも残り、ほかの色は選んだ配色ルールに沿って合わせられます。
類似色は隣り合う色相で、落ち着いた柔らかい印象。モノクロは1つの色相を明るさ違いで使います。補色は反対側の色で、最も強いコントラスト。分裂補色、トライアド、テトラードは色相環に均等に配置した3〜4色です。「自動」は毎回いずれかを選びます。
この色空間では同じ明るさの値が目にも同じ明るさに見えます。そのためパレットには必ず明るい色と暗い色が入り、HSLのように色相ごとに彩度がばらつきません。
「コントラスト」ではパレットの色の組み合わせとWCAGのコントラスト比を表示します。4.5:1以上は通常の文字 (AA)、7:1以上はAAA、3:1以上は大きな見出しのみに向きます。各列の文字色は自動で選ばれます。
男性の約12人に1人は色の見え方が異なります。1型・2型・3型色覚や白黒の見え方をシミュレーションして、大事な色が見分けにくくならないか確認しましょう。
はい、制限なく使えます。パレットはブラウザ内で作られ、色の組み合わせは著作権の対象ではありません。