できること

基準色を入力すると、HEX、RGB、HSL、CSS変数の形で値を確認できます。日本の色、海外で使いやすい色、Web UI向けの色など、目的別のパレットも用意しています。

画像を読み込んで主色を抽出できるため、写真やサムネイルの雰囲気に合わせた配色を作りたいときにも使えます。

使う流れ

まず基準色を入力し、文字色とのコントラストを確認します。必要に応じてパレットや画像抽出から色を選び、最後にCSSグラデーションやCSS変数をコピーします。

画像の色抽出はブラウザ内で行います。読みやすさの確認はコントラスト比を目安にし、実際の画面でも文字サイズや背景に合わせて見直してください。