カラーピッカーの使い方
写真、スクリーンショット、ロゴをアップロードして、好きな場所をクリックします。ツールは クリックした1ピクセル を読み取り、その色をHEX(例:#1e88e5)とRGB(rgb(30, 136, 229))で表示します。コピー ボタンでHEXコードをクリップボードに保存できます。画像を読み込んだ時点で中央のピクセルが自動的に読み取られるので、すぐに値が表示されます。
クリックした色は最近の色として最大8つまで並ぶため、ボタン、背景、見出しなど何か所か試して比べてから決められます。画像はブラウザ内のcanvasで読み取られるだけで、アップロードされることはありません。
HEX・RGB・HSLをやさしく解説
どれも画面上の同じ色を表しており、書き方が違うだけです。
- HEX ―
#RRGGBB。赤・緑・青をそれぞれ00〜ffの16進数2桁で表します。CSS、Figma、Canva、WordPressのテーマ、「ブランドカラー」の入力欄などはたいていこれを使います。 - RGB ― 同じ3つのチャンネルを0〜255の10進数で表したもの。
#1e88e5とrgb(30, 136, 229)はまったく同じ色です。プログラムやOffice、スライダーで色を決めるソフトで便利です。 - HSL ― 色相(色相環上の0〜360°)、彩度、明度(%)で表します。このツールはHSLを表示しませんが、デザインツールやCSSならHEXからすぐ変換できます。選んだ色の明るい版・暗い版を作りたいときに便利で、色相はそのままに明度だけを変えればOKです。
スクリーンショットから色を拾う
アプリやWebサイト、動画の一場面の色を使いたいときは、スクリーンショットを撮って(Windows:Win + Shift + S、Mac:Cmd + Shift + 4、スマホ:電源+音量下、iPhoneはサイドボタン+音量上)ここにドロップします。
正確に拾うためのコツ:
- ベタ塗りの部分をクリック。 ボタンの端ではなく中央を狙いましょう。端は背景となじませる処理(アンチエイリアス)がかかっていて、中間色になります。
- 写真にはノイズがある。 写真の隣り合うピクセルは少しずつ色が違います。何か所か試し、いちばん代表的な色を選びましょう。
- スクリーンショットで色が変わることも。 ナイトモード、Night Shift、HDR、カラーマネジメントされたディスプレイは撮影結果に色かぶりを起こすことがあります。正確なブランドカラーが必要なら、撮影前にオフにしてください。
- 圧縮しすぎたJPGはずれる。 何度も保存し直したJPGは輪郭の周りにノイズが出ます。ロゴの元のPNGやSVGがあればそちらを使いましょう。
- 透明な部分 には実際の色がなく、クリックすると黒(
#000000)になります。ロゴの見えている部分をクリックしてください。
使う前にコントラストを確認
見た目のよい色でも、文字色にすると読みにくいことがあります。アクセシビリティのガイドライン(WCAG)では、通常の文字と背景のコントラスト比は 4.5:1 以上、大きな文字やアイコンは 3:1 以上が求められます。白地に薄いグレー、濃い青地に中くらいの青などは基準を満たさないことが多い組み合わせです。
文字色と背景色を拾ったら、2つのHEXコードをコントラストチェッカーに貼り付けてみましょう。比率が足りなければ文字を暗くするか背景を明るくします。HSLで明度を調整するのが、ブランドの雰囲気を崩さずに直すいちばんの近道です。
よくある使い道
- 画像で送られてきたロゴからブランドカラーを調べる。
- Webサイトのボタンや背景の色を自分のデザインで再現する。
- 写真からスライド、SNS投稿、インテリアのムードボード用の配色を作る。
- ファビコン生成 でApple touchアイコンの背景色を決める。
関連ツール
- 先に被写体を切り抜いて、背景なしで色を拾うなら 背景削除。
- 小さな部分を切り出して正確にクリックしたいなら 画像トリミング。
- 画像そのものをCSS用のコードにしたいなら 画像をBase64に。