Color Picker/Converter
Shades (click to use as base)
Hue palette (click to use as base)
Contrast checker
Convert colors between HEX, RGB, HSL, HSV, and CMYK: hex to RGB, RGB to hex, RGB to HSL and more. Pick a color by dragging in the saturation square and hue slider, or type a value into any field and every other format updates instantly. Use your OS's eyedropper to sample a color from anywhere on screen (Chrome/Edge), generate a palette of shades and hues from your base color, and use the contrast checker to test it against another color for WCAG accessibility compliance.
Frequently asked questions
Why isn't the eyedropper button showing up?
The eyedropper uses the browser's native EyeDropper API, which is currently only supported in Chromium-based browsers like Chrome and Edge. It's hidden automatically in browsers that don't support it.
What do the WCAG contrast badges mean?
They show whether your foreground/background pair meets the WCAG 2.1 contrast thresholds: 4.5:1 for AA-level normal text, 3:1 for AA-level large text, and 7:1 for the stricter AAA level — the minimums recommended for readable, accessible text.
Can I type a color value instead of using the picker?
Yes — every field is editable. Type or paste a HEX code (3 or 6 digits, with or without the #), or values like 66, 135, 245 or rgb(66, 135, 245) for RGB, and the picker and all other formats update as you type. A red border means the value isn't valid (for example an RGB channel above 255), and the last valid color stays in place.
What's the difference between HSV and HSL?
Both describe a color by hue, saturation, and a lightness-like value, but they differ in what the last number means. In HSV (also called HSB), value is the brightness of the color — 100% is the most vivid version of the hue, which is how the picker square works. In HSL, lightness runs from black through the pure color at 50% up to white, which is what CSS hsl() uses.
Why might CMYK values look slightly different from what my printer software shows?
This conversion uses the simple, device-independent RGB→CMYK formula, which is a reasonable approximation for screen colors. Professional print workflows use ICC color profiles calibrated to specific inks and paper, which can shift values further.
How do I convert HEX to RGB?
Type or paste the HEX code, for example #4287f5, into the HEX field and the RGB values (66, 135, 245) appear straight away, along with HSL, HSV and CMYK. To go the other way, enter RGB values and the HEX code updates.
How do I convert RGB to HSL or CMYK?
Enter the RGB values, or a HEX code, and the HSL and CMYK rows update as you type. Copy whichever format you need, such as a CSS hsl() value.