Color input
Pick or type a color
Valid color.
Web design tool
Color Picker
Pick a color with native, HEX, or precise RGB controls; copy useful formats, explore palette systems, inspect tints and shades, and choose readable text.
Live preview
Color values
Copy color codes
HEX#16735F
RGBrgb(22, 115, 95)
HSLhsl(167.1, 67.9%, 26.9%)
HSVhsv(167.1, 80.9%, 45.1%)
CMYK estimatecmyk(80.9%, 0%, 17.4%, 54.9%)
CSS variable--color: #16735F;
Accessibility
Text contrast
Sample text on the selected color
White text5.48:1
Black text3.83:1
Suggested text colorUse white text.
Relative luminance0.142
Ratios use WCAG relative luminance. Normal text needs 4.5:1 for AA and 7:1 for AAA; large text needs 3:1 for AA.
Color harmony
Generated palette
Choose a harmony mode, then select any swatch to make it the new base color.
Color scale
Tints and shades
Tints
Shades
Tints move toward white and shades move toward black while preserving the selected hue and saturation.
Color picker notes
HEXHEX is compact and works well in CSS, design tokens, and shared specifications.
RGBRGB gives direct red, green, and blue channel control for browser and canvas work.
HSLHSL separates hue, saturation, and lightness, which is useful for building related interface colors.
WCAGWCAG contrast ratios help select readable black or white foreground text for the chosen background.
FAQ
Can I use this as a HEX color picker?
Yes. Use the native picker or enter a strict three- or six-digit HEX value, then copy HEX, RGB, HSL, HSV, CMYK estimate, or a CSS variable.
Does the eyedropper work in every browser?
No. The button uses the browser EyeDropper API when available and shows a clear message when the API is unsupported or the selection is cancelled.
How are the palette colors generated?
Complementary, analogous, triadic, split complementary, tetradic, and monochromatic palettes are calculated locally from the selected color's HSL values.
What contrast ratio should text meet?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text.