Color Converter
Convert colors between HEX, RGB, HSL, HSV, and OKLCH. Generate tint/shade scales and complementary, analogous, triadic, and tetradic palettes. Free, in your browser.
Pick or paste a color
HEX
#6366f1HEX (8)
#6366f1RGB
rgb(99, 102, 241)HSL
hsl(239, 84%, 67%)HSV
hsv(239, 59%, 95%)OKLCH
oklch(58.5% 0.204 277.1)Tint & shade
Complementary
Analogous
Triadic
Tetradic
Everything runs in your browser.
Colors are parsed and converted client-side. Nothing is sent to a server.
How to use it
- 1Pick a color with the native color picker, or paste any of: HEX (#6366f1, #6366f1ff), RGB (rgb(99 102 241) or rgb(99,102,241)), HSL, or three bare numbers.
- 2Every format updates simultaneously — HEX, HEX with alpha, RGB, HSL, HSV, and OKLCH. Click the copy icon on each row.
- 3Below, a 9-stop tint/shade scale and four harmony palettes (complementary, analogous, triadic, tetradic) are derived from your color. Click any swatch to make it the new source.
Common use cases
- Pull a HEX value out of a Figma file and instantly get the OKLCH equivalent for a modern Tailwind / CSS theme.
- Find triadic or analogous companions for a brand color without leaving the browser.
- Build a tint/shade scale for a design system — copy each step's HEX with one click.
- Convert legacy HSL values to OKLCH so the lightness math behaves the way designers expect.
- Verify alpha-channel output (HEX 8) for designs that mix translucent fills with opaque backgrounds.
Frequently asked questions
- What's OKLCH and why include it?
- OKLCH is a perceptually uniform color space that browsers now support natively. Equal changes in lightness or hue look equal to the human eye — unlike HSL, where 50% lightness yellow and 50% lightness blue look very different. It's becoming the recommended space for design systems and the default in libraries like Tailwind v4.
- Are HEX with alpha (#rrggbbaa) supported?
- Yes. Paste an 8-character HEX and the alpha is read; alphas are shown back on the HEX (8) row. Three- and four-character shorthand (#rgb, #rgba) also work — they're expanded internally.
- Why does my color look slightly different after a round-trip?
- Conversions between color spaces are precise but display is limited to your monitor's gamut. HSL → RGB is exact; OKLCH → sRGB can clip if you've picked a color outside the sRGB gamut. The numbers shown are the unclamped ideal values; what you see on screen is what your display can render.
- Is anything sent to a server?
- No. All parsing, conversion, and palette math happens in your browser. There's no API call.
- Can I copy a single format?
- Yes — each format row has its own copy button. You can also click any swatch in the palettes to make that color your new source.
Try next
CSS Gradient Generator
Build linear, radial, and conic CSS gradients visually with color stops, presets, and one-click copy. Free, in your browser.
Box Shadow Generator
Build CSS box-shadows visually with offset, blur, spread, opacity, and inset across stacked layers. Live preview, copy-ready CSS.
Meta Tag & OG Preview Generator
Generate and preview Open Graph, X Card, and standard HTML meta tags for your web pages — instantly in your browser.