カラーピッカー
色を選択してHEX・RGB・HSL値を即座に取得。Webデザインや開発に最適。
Quick Palette
関連キーワード
How to Use Color Picker
Colors are fundamental to design, and working with them across different color models is a daily task for web developers, UI/UX designers, and graphic artists. Our Color Picker lets you visually select any color and instantly see its values in three formats: HEX (e.g., #6366F1), RGB (e.g., rgb(99, 102, 241)), and HSL (e.g., hsl(239, 84%, 67%)). You can use the native color picker for visual selection, type a HEX code directly for precision, or click any color in the quick palette for common swatches. Click any value card to copy it to your clipboard with a single click. This tool saves time when translating design specifications into code.
- 1
Pick a color
Click the color swatch to open the native color picker, or type a HEX code directly in the input field.
- 2
View all color values
HEX, RGB, HSL, and individual R, G, B channel values are displayed instantly.
- 3
Copy any value
Click any value card to copy that color format to your clipboard.
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL?
HEX is a compact hexadecimal representation used in CSS. RGB specifies red, green, and blue channels (0–255). HSL (Hue, Saturation, Lightness) is more intuitive for adjusting colors — you can shift hue, increase saturation, or change brightness independently.
Can I enter any HEX color code directly?
Yes. Type any valid 6-digit HEX code (with or without the # prefix) into the text field to see its conversions.
Is the color picker useful for accessibility checks?
Knowing exact color values helps when checking contrast ratios using tools like the WCAG contrast checker. You can copy the HEX value directly into such tools.