カラーピッカー

色を選ぶ手順

1. ピッカーを開く。色のバーをクリックすると、お使いの端末のカラー選択画面が開きます。
2. 色を選ぶ。選ぶと上の大きな見本がその色に変わります。小さな四角ではなく、実際に使えるサイズで色味を確認できます。
3. コードを確認する。選んだ色のHEX・RGB・HSLの値が下に並びます。
4. 必要な形式をコピーする。各行のコピーボタンを押すと、その形式のコードがクリップボードに入ります。

このツールでできること

色を選ぶこと自体は簡単ですが、使いたい形式のカラーコードに直すのは案外面倒です。このツールは同じ色の3種類の表記をまとめて表示するので、CSSに書くHEX、スクリプトで使うRGB、濃淡を作るためのHSLを、手作業で変換することなくそのまま取り出せます。

処理はすべてブラウザ内で完結します。会員登録もアップロードも必要ありません。

HEX・RGB・HSLの使い分け

HEXは、CSSやデザインツールで最もよく見かける表記です。赤・緑・青をどれだけ混ぜるかを6文字で表したもので、短く書けて広く通用するため、多くの場面で標準的な選択肢になります。RGBは同じ3色を0〜255の数値で表す書き方です。rgba()の形にすると不透明度を指定できるため、透明度が必要なときはこちらが向いています。

HSLは考え方が違い、色相・彩度・明度で色を表します。そのため色同士の関係を扱いやすいのが特長です。色相と彩度をそのままに明度だけを変えれば、同じ色の明るい版・暗い版が作れます。デザインシステムのように、ある色を基準に濃淡のパレットを組む場面ではHSLが圧倒的に便利です。3つはいずれも同じ色を指しているので、用途に合うものを選んでください。

よくある質問