Color Picker
Pick any color and instantly get its HEX, RGB, and HSL values. Edit any format and all others update in sync.
#F0C040
Color values
HEX#F0C040
RGBrgb(240, 192, 64)
HSLhsl(44, 85%, 60%)
Edit manually
R
G
B
H
S
L
Color formats explained
- #RRGGBB — HEX: the web standard. Used in CSS, design tools, and HTML.
- rgb(r, g, b) — Red, Green, Blue. Each channel from 0 to 255.
- hsl(h, s%, l%) — Hue (0-360°), Saturation, Lightness. Great for tweaking colors intuitively.
How the Color Picker Works
Pick any color to instantly get its HEX, RGB, and HSL values. Copy any format with one click.
You can also edit any format manually — type a HEX code, adjust an RGB channel, or tweak an HSL value — and all other fields update automatically.
Tips for Working with Colors
- Use HSL for harmonious palettes. Keep the hue fixed and vary saturation and lightness. A primary blue at
hsl(210, 70%, 50%)pairs naturally withhsl(210, 30%, 90%)as a background. - Check contrast for accessibility. WCAG AA requires at least 4.5:1 contrast between text and background. Use a dedicated contrast checker after picking your colors.
- Use CSS custom properties. Save values as
--color-primary: #3b82f6to prevent color drift across a project. - Use HEX for CSS, RGB for programmatic manipulation, HSL for palette design. Each format suits a different workflow.
Frequently Asked Questions
How do I check color contrast for accessibility?
Copy your foreground and background HEX values and paste them into a WCAG contrast checker. Aim for 4.5:1 for normal text, 3:1 for large text (WCAG AA). A ratio of 7:1 meets the stricter AAA standard.
Can I enter a color code manually?
Yes. Use the Edit manually section to type into any HEX, RGB, or HSL field. All other fields update automatically. HEX works with or without the leading
#.What is HSL?
Hue (0–360°), Saturation (0–100%), Lightness (0–100%). HSL is the most intuitive format for building palettes — adjust lightness to get tints and shades, adjust saturation to go from grey to vivid.
You might also need
Complementary tools based on what you're doing