Color Picker
hex · rgb · hsl · cmyk · palettes
// complementary
// analogous
// triadic
$ how-to-use
Use the color wheel or sliders to pick a color. Switch between HEX, RGB, and HSL formats. Copy any value with one click. Use the eyedropper to pick colors from the page.
Color Formats for Developers
HEX
The default in CSS. 6 digits like #3fb950. Shorthand #fff for white. Most design handoff tools export HEX.
RGB / RGBA
rgb(63, 185, 80) — values 0-255 per channel. RGBA adds alpha for transparency. Used in CSS and Canvas API.
HSL
hsl(128, 49%, 49%) — Hue/Saturation/Lightness. Best for creating color variations by tweaking one value.
Why Developers Need Color Tools
Converting between HEX, RGB, and HSL by hand is error-prone and slow. When you need to adjust a button's hover state to be 10% lighter, HSL makes it trivial — just increase the lightness value. But your CSS might need the result in HEX.
Accessibility requirements (WCAG) specify minimum contrast ratios between text and background colors. Picking the right shade often means testing multiple values until contrast requirements are met.
FAQ
What color format should I use in CSS?
HEX is the most common and compact. Use RGBA when you need transparency. HSL is great for design systems where you generate color variations programmatically.
Is my data stored?
No. Everything runs client-side in your browser. No data leaves your device.