ローカルで実行
カラーピッカー
デバイス上で処理 · アップロードなし色を選択してHEX・RGB・HSL値をコピー。
#FF0000
RGB 255, 0, 0
HEX
RGB
R
G
B
HSL
hsl(0, 100%, 50%)
カラーピッカーの使い方
- 彩度・明度エリアでクリックまたはドラッグして色を選びます。
- 下部のスライダーで色相（Hue）を調整します。
- HEX、RGB、HSL値を確認してクリックでコピーします。
The color picker lets you choose a color directly on screen and get its HEX, RGB, and HSL values. It's a quick way to grab and copy color codes for web and app design, documents, or coding. Adjust hue, saturation, and brightness to dial in exactly the shade you want.
HEX vs RGB vs HSL
HEX (#RRGGBB) is the most common notation on the web, RGB describes the three primary colors of light, and HSL (hue, saturation, lightness) is the most intuitive to adjust by hand. The same color is shown in all three formats, so copy whichever one you need.
Need a color from a photo?
If you want a color from an image rather than picking one on screen, use the image color picker. Click anywhere in a photo to extract that exact color.
よくある質問
- HEX値を直接入力できますか？
- はい、HEX入力フィールドにカラーコードを入力すると、ピッカーがその色に移動します。
- 画像カラーピッカーとの違いは？
- こちらは色を直接選択するスタンドアロンのカラーピッカーです。画像カラーピッカーは画像から色を抽出するツールです。
- 対応しているカラーモデルは？
- HSV（色相・彩度・明度）ピッカーを使用し、HEX、RGB、HSL形式で値を出力します。
- Can I type in a HEX code?
- Yes. Enter a code in the HEX field and the picker jumps to that color.
- How do I copy a color value?
- Click the displayed HEX, RGB, or HSL value to copy it to your clipboard.