Color Explorer
Enter a color — or search 31,914 colour names — to see every value, variation, harmony, contrast check and palette built from it.
By value or picker
By name
Popular colors
Named colors
A sample from 31,914 named colours — search above to find any of them.
About this color explorer
A free color encyclopedia that runs in your browser. Enter any HEX, RGB or CSS color name and get every value you need — RGB, HSL, HSV, CMYK, LAB and OKLCH — plus tints and shades, complementary and triadic harmonies, WCAG contrast checks, a Tailwind-style palette and copy-paste CSS.
How it works
- 1Enter a color
Type a hex like #2424A4, paste an rgb() string, use a CSS name, or pick one visually with the color picker.
- 2Read the values
Every notation is listed side by side — HEX, RGB, HSL, HSV, CMYK, LAB and OKLCH — with one click to copy each.
- 3Check accessibility
See the exact contrast ratio against white and black text, whether it passes WCAG AA and AAA, and the closest accessible alternative if it doesn't.
- 4Build a palette
Take the generated 50–950 ramp, a harmony, or a gradient, and copy it straight out as CSS variables.
Privacy
Every value on the page is computed from the color itself — there is no lookup, no account, and no analytics on what you search. The math runs in your browser and on the page render, and nothing about your colors is stored.
Want to use this color in a QR code? Open the QR Code Generator.
Frequently asked questions
- What is the difference between HEX, RGB and HSL?
- They describe the same color three ways. HEX and RGB both give red, green and blue amounts — hex in base 16, RGB in 0–255. HSL instead gives hue, saturation and lightness, which is easier when you want the same color a bit lighter or less vivid.
- What is OKLCH and why use it?
- OKLCH is a perceptual color space: equal changes in its lightness look equally different to the eye, unlike HSL. That makes it much better for generating palette steps that feel evenly spaced, which is how the 50–950 ramp here is built.
- How do I know if white or black text is readable on a color?
- Check the contrast ratio. WCAG level AA needs at least 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1. Both ratios are shown for every color, so you can pick the text color that passes.
- What does ΔE mean in the nearest-colors list?
- ΔE measures how different two colors look to a human. Around 1 is almost indistinguishable, and around 10 is clearly different — so a low ΔE means the named color is a very close match.