しくみ
四角の中をドラッグして彩度と明度を決め、虹色のスライダーで色相を選びます。コードを直接入力したり、システムのカラーピッカーを使ったり、(対応ブラウザでは)画面上の好きなピクセルを取得したり、手持ちの写真の一点をタップしたりすることもできます。選んだ色はHEX、RGB、HSL、HSV、CMYKですべて表示され、最近選んだ色は一列に残るのですぐに比較できます。
#2459e0 = rgb(36, 89, 224) = hsl(223, 75%, 51%)
どの形式を使うか
- HEX: Webサイトやデザインツールで最もよく使われるコードです。
- RGB: 赤・緑・青の光を0〜255で表し、画面表示に使います。
- HSLとHSV: 色相・彩度と輝度または明度で表します。色を明るく、暗く、やわらかくするのに最も便利です。
- CMYK: 印刷用のおおまかな目安です。印刷会社のプロファイルで確認してください。
活用のヒント
- 画面からの色取得はパソコンのChromeとEdgeで使えます。スマートフォンでは画像から取得してください。
- 写真は端末内で読み込まれ、アップロードされることはありません。
- 値をクリックするとコピーできます。
計算の基準と出典
- 色の値はCSS Color Module Level 4(sRGB)に準拠
- 画面からの色取得は、ブラウザが対応している場合にEyeDropper APIを使用
最終確認 2026年10月7日
よくある質問
画像から色を抽出するには?
「画像から色を取得」で画像を選び、好きな場所をタップしてください。指やカーソルの下の色が選ばれます。
画面上のどこからでも色を取得できますか?
はい、パソコンのChromeとEdgeで使えます。「画面から色を取得」をタップし、ブラウザの外でも好きなピクセルをクリックしてください。
HSLとHSVの違いは?
どちらも色相と彩度を使います。HSLは輝度を使い100%が白、HSVは明度を使い100%が最も鮮やかな元の色です。
写真はアップロードされますか?
いいえ。画像はブラウザ内で描画・読み取りされ、端末の外に出ることはありません。
カラーコードをコピーするには?
HEX・RGB・HSL・HSV・CMYKの値をクリックするか、コピーボタンで主なコードをまとめてコピーしてください。