Tints (toward white)
Shades (toward black)
Harmonies
Click any swatch to load it as the current color.
Color formats explained
The same color can be written many ways. Each format is a different set of coordinates pointing at the same visible color - so converting between them never changes the color, only how it is described.
| Format | Looks like | Best for |
|---|---|---|
| HEX | #2563EB | Compact CSS and design handoff |
| RGB | rgb(37, 99, 235) | Screens, canvas, image data |
| HSL | hsl(221, 83%, 53%) | Tweaking hue, saturation, lightness |
| HSV / HSB | hsv(221, 84%, 92%) | Color pickers in design tools |
| OKLCH | oklch(0.546 0.215 263) | Perceptual palettes, modern CSS |
Frequently asked questions
How do I convert a HEX color to RGB?
A HEX color like #2563EB is just RGB written in base 16. Split it into three pairs - 25, 63, EB - and convert each from hexadecimal to decimal to get red 37, green 99, blue 235, or rgb(37, 99, 235). This tool does it instantly the moment you type or pick a color, and shows the reverse too.
What is the difference between HSL and HSV?
Both describe a color by hue, but HSL uses saturation and lightness while HSV (also called HSB) uses saturation and value/brightness. In HSL, 100% lightness is always white; in HSV, 100% value is the most vivid version of the hue. HSL is common in CSS; HSV appears in many design tools' color pickers.
What is OKLCH and why use it?
OKLCH is a modern color space - lightness, chroma, and hue - built to be perceptually uniform, meaning equal numeric steps look like equal visual steps. That makes it far better than HSL for building palettes and adjusting brightness without unexpected hue shifts. It is supported in modern CSS as the oklch() function.
What are tints and shades?
A tint is your color mixed with white, making it lighter; a shade is your color mixed with black, making it darker. The palette here generates a row of each so you can build a consistent light-to-dark scale from a single base color for buttons, backgrounds, and states.
What is a complementary color?
A complementary color sits directly opposite your color on the hue wheel - 180 degrees away - and gives the strongest contrast. Analogous colors sit right next to it for a harmonious look, and triadic colors are evenly spaced by 120 degrees for a balanced, vibrant scheme. The harmonies section shows all three.
Is the color tool private?
Yes. All conversion and palette generation happens in your browser with plain JavaScript. Nothing is uploaded or tracked, and the page works offline once loaded.