Color input
Pick or type a color
Valid color.
Web design tool
Color Picker
Pick a color, copy HEX/RGB/HSL values, generate palette ideas, inspect tints and shades, and choose readable text colors for UI design.
Color values
Copy color codes
HEX#16735F
RGBrgb(22, 115, 95)
HSLhsl(167, 68%, 27%)
HSVhsv(167, 81%, 45%)
CMYK estimatecmyk(81%, 0%, 17%, 55%)
CSS variable--color: #16735F;
Text contrast
Sample text on selected color
White text5.48:1 - AA normal text
Black text3.83:1 - AA large text
Suggested text colorUse white text.
Relative luminance0.142
Generated palette
Tints and shades
Color picker notes
HEXBest for CSS, design tokens, and compact color sharing.
RGBUseful when working with browser APIs, canvas, and computed CSS values.
HSLUseful for adjusting hue, saturation, or lightness while keeping a color family consistent.
ContrastWCAG contrast ratios help choose readable foreground text on the selected color.
FAQ
Can I use this as a HEX color picker?
Yes. Pick a color or type a HEX value, then copy HEX, RGB, HSL, HSV, CMYK estimate, or a CSS variable.
Does the eyedropper work everywhere?
The eyedropper button uses the browser EyeDropper API when available. Unsupported browsers will show a status message.
Are the palette colors generated locally?
Yes. Complementary, analogous, triadic, tints, and shades are generated in your browser from the selected color.