カラーピッカーとは？
色を視覚的に選んで、hex・RGB・HSL値を取得できます。クリックまたはドラッグで好みの色合いを見つけて、コードをコピーしてください。
彩度・明度の四角形内をドラッグして色調を変え、色相バーをスライドさせて色系を切り替えます。hex・RGB・HSLの三種類の値が常に表示され、ワンクリックでコピーできます。入力欄にhexを直接入れれば四角形が正確な位置にジャンプするので、すでに決まったブランドカラーを微調整するのに便利です。
使い方
- カラーエリアをクリックするか、セレクターをドラッグして色を選択
- 色相スライダーと透明度コントロールで微調整
- ワンクリックで16進数、RGB、またはHSL値をコピー
使用するタイミング
- WebサイトのCSSで使うアクセントカラーを、デザインソフトを開かずに決めたいとき。
- ブランドガイドラインのhexをデザインシステム向けにHSLへ変換したいとき。
- 色相スライダーを少しずつ動かして、近い色を集めた小さなパレットを作りたいとき。
結果
温かいオレンジを選択：#E67E22、rgb(230, 126, 34)、hsl(28, 80%, 52%)。
よくある質問
- HSLとHSB(HSV)の違いは何ですか?
- HSLは明度50%でもっとも純色になり、そこから黒や白へ対称に変化します。ハイライトとシャドウを対称的に作りたいときに便利です。Photoshop採用のHSBは明度100%で純色になる方式で、絵の具を混ぜる感覚に近い操作になります。
- 画面上の色と印刷物の色が違って見えるのはなぜですか?
- ディスプレイは加法混色のRGB、印刷は減法混色のCMYKを使うためです。鮮やかな緑や蛍光ブルーはCMYKに正確な対応色が存在しないことが多いので、印刷前に必ず実物の校正で確認してください。
- 出力されたhexはそのままWCAGに準拠していますか?
- いいえ。アクセシビリティは前景と背景の組み合わせで決まるため、単色ではWCAGの可否を判断できません。前景と背景のhexをペアでコントラスト比に通し、本文4.5:1、大見出し3:1以上を確保してください。
- 画面上にあるピクセルの色をどうやって取りますか?
- 「画面から取得」を押すと、スポイトで画面上のどのピクセルでも吸い取れます。正確な hex がそのままピッカーに読み込まれるので、彩度・明度・透明度を後から微調整できます。（スポイトのボタンは対応環境でのみ表示されます。非対応の場合は、OS のカラーメーター（macOS のデジタルカラーメータ、Windows PowerToys、Chrome DevTools）で hex を読み取り、入力欄に貼り付けてください。）
- このピッカーは透明度に対応していますか?
- 対応しています。色相バーの下にある不透明度スライダーで、アルファを 0〜100% の任意の値に設定できます。プレビュー部の背後にはチェッカー柄が表示され、透け具合がひと目で分かります。アルファが 100% を下回ると、RGB と HSL のコピー文字列は自動的に rgba() と hsla() に切り替わります。