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.
Color Format Conversion Reference
Common colors and their representations across all formats. Use the picker above to convert any color instantly.
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Green | #3FB950 | rgb(63, 185, 80) | hsl(128, 49%, 49%) |
| Blue | #58A6FF | rgb(88, 166, 255) | hsl(212, 100%, 67%) |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Purple | #A78BFA | rgb(167, 139, 250) | hsl(255, 93%, 76%) |
CSS Color Functions: A Developer's Guide
Modern CSS supports multiple color functions, each with different strengths. Understanding when to use each format saves time and makes your stylesheets more maintainable.
HEX: The Compact Default
HEX codes (#3fb950) are the most widely used format in CSS. They're compact, universally supported, and what most design tools export by default. Use 3-digit shorthand (#fff) when all channels double (ff→f). For transparency, use 8-digit HEX (#3fb95080) — the last two digits are alpha. Supported in all modern browsers.
HSL: Best for Variations
HSL (Hue, Saturation, Lightness) is the most intuitive format for creating color variations. Need a lighter version of your brand color? Increase the lightness value. Need a muted version? Decrease saturation. HSL makes it trivial to create hover states, disabled states, and color scales without a color picker. Design systems and CSS custom properties pair especially well with HSL.
CMYK: Print Only
CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used in printing. CSS doesn't support CMYK natively, but it's useful when you need to provide color specifications for print materials. The conversion from RGB to CMYK is lossy — print colors never exactly match screen colors due to fundamentally different color models (additive vs subtractive).
oklch(): The Future of CSS Color
CSS Color Level 4 introduces oklch(), a perceptually uniform color space. Unlike HSL where "50% lightness" looks different for different hues, oklch ensures consistent perceived brightness. It's supported in all modern browsers and is increasingly recommended for design systems where perceptual consistency matters.
Color Accessibility & WCAG Contrast
The Web Content Accessibility Guidelines (WCAG) 2.1 require minimum contrast ratios between text and background colors. Level AA requires 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold). Level AAA requires 7:1 and 4.5:1 respectively. Meeting these requirements ensures your content is readable by users with low vision or color blindness.
When designing dark themes (like DevPop), contrast is often easier to achieve but can create eye strain if contrast is too high. Pure white (#FFFFFF) text on pure black (#000000) has a ratio of 21:1 — technically compliant but harsh on the eyes in dark mode. Most dark themes use off-white text (#c9d1d9 or similar) on dark gray backgrounds (#0d1117) for a comfortable reading experience that still passes WCAG AA.
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.