Color Converter
Convert between HEX, RGB, HSL, HSV, CMYK and OKLCH instantly, with a real WCAG contrast checker and five color harmony palettes generated from any color. Runs entirely in your browser.
Before You Copy a Value Into Production
- Paste directly into the universal input rather than manually converting a format in your head first — hex, rgb(), hsl(), oklch(), and named colors are all recognized automatically.
- Check contrast against both white and black text, not just whichever one looks obviously right — a color can pass comfortably against one and fail against the other.
- Reach for Analogous or Split-Complementary for a calm UI, and Triadic or Tetradic when a palette needs to feel more energetic — the harmony type itself sets the mood before any specific colors are chosen.
- Turn on Show Alpha Channel before copying a value into a context that needs transparency — RGB/HSL/HEX otherwise all default to fully opaque.
Features
The Format Most Converters Still Skip
HEX, RGB, and HSL cover the overwhelming majority of real-world CSS, which is exactly why most color converters stop there. OKLCH is newer, part of the CSS Color 4 specification and natively supported across every modern browser, and it solves a problem HSL never really could: perceptual consistency. Ask HSL to darken a color by reducing lightness 15%, and the visual result varies wildly depending on the starting hue — yellows and blues don't darken at the same apparent rate at all. OKLCH is built specifically so that equal numeric steps produce equal-looking visual steps, which is why design systems generating programmatic color scales — Tailwind CSS v4's default palette among them — have moved to it.
It shows up as three numbers — Lightness as a percentage, Chroma as a small decimal usually under 0.4, and Hue in degrees — which reads less immediately familiar than a hex code at first glance. A shade or tint generated by adjusting Lightness in OKLCH keeps looking like the same color family the whole way through, where the equivalent HSL adjustment can visibly drift in apparent hue or saturation partway through the range.
The conversion here uses the same published sRGB-to-OKLab matrices the CSS specification itself references, not an approximation.
A Contrast Ratio Is Not a Vibe Check
"That text looks readable enough" is exactly the judgment WCAG's contrast requirements exist to replace with an actual number. The relative luminance formula weighs red, green, and blue differently — green contributes far more to perceived brightness than blue does — and the resulting contrast ratio is what accessibility guidelines and most legal accessibility standards actually reference, not a rough sense of light-versus-dark. This tool runs that exact formula against your current color, checked against both white and black text at once, and shows the real ratio alongside AA (4.5:1) and AAA (7:1) pass/fail badges — the same thresholds an automated accessibility audit tool would apply. The two checks aren't redundant, either: a mid-tone color can pass comfortably against black text while failing outright against white, so it's worth reading both before either one goes anywhere near a button label or a heading.
Five Ways to Build a Palette From One Color
Picking a second, third, and fourth color that actually works with the first is the part of color selection that has the least obvious right answer — which is exactly what color harmony rules exist to shortcut. Each of the five types generated here is just a specific pattern of hue rotation around the color wheel, computed the moment a color is loaded: complementary sits directly opposite for maximum contrast, analogous stays close for a calm, cohesive feel, triadic and tetradic space colors evenly around the wheel for more energetic combinations, and split-complementary softens a complementary pairing slightly. None of these guarantee a good palette on their own — that still takes an eye for the specific colors involved — but they guarantee a mathematically sound starting point instead of a guess, which is most of the actual difficulty. Building the actual gradients and component states that use whichever colors get chosen is a separate, deliberate step this tool leaves to whatever tool is shaping that specific output.
When HSV Earns Its Keep Over HSL
Both describe a color as a hue plus two other numbers, and it's easy to assume they're interchangeable — they aren't. HSL's Lightness runs symmetrically from black through the full color to white; HSV's Value only measures distance from black, so full Value with full Saturation is the most vivid version of a hue, not a lighter one. Most software color pickers — Photoshop's among them — are built around HSV specifically because that mapping matches how a person intuitively separates "how vivid" from "how light," which is exactly why both are shown here rather than just one.
One Input, Every Common Format In or Out
Manually figuring out which format a pasted value is in before converting it wastes time a parser can just handle. The universal input recognizes hex in any of its four common lengths, both comma-separated and modern rgb()/hsl() syntax, oklch(), and the standard CSS named colors — paste a value copied from anywhere and it resolves immediately, or the field says clearly that it didn't recognize the format rather than silently doing nothing.
The same recognition runs in reverse, too: when a color exactly matches one of the standard named colors, that name appears in the preview automatically — a fast way to confirm a value is actually "tomato" and not just close to it, whether it was picked here or copied straight out of an existing page's stylesheet.
From a Single Swatch to a Finished Token Set
The typical path starts with one brand or accent color, picked directly or pulled from a design file. From there, the harmony palettes suggest supporting colors, the shade strip generates a full lightness range for hover and disabled states, and the contrast checker confirms which of those shades are actually safe to use behind white or black text before anything ships — the same values that, once written into an actual stylesheet, eventually pass through the CSS Minifier on the way to production. Copying the finished values in OKLCH — rather than hex — into a design-token file keeps future programmatic adjustments, like an automatically generated dark-mode variant, visually consistent in a way hex or HSL math alone doesn't reliably guarantee. Nothing here locks a single format in either: switch between hex for quick sharing, RGB for a teammate more comfortable thinking in raw channel values, or OKLCH for anything headed toward programmatic adjustment, and every other format stays in sync automatically as the underlying color changes.