Color Converter

Most color converters answer exactly one question — hex to rgb — and make you open a second page for hsl. This one parses your input once and prints eight CSS-ready strings side by side: HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV and CMYK, each with its own copy button. Copy All drops every format plus the matched color name onto the clipboard as a labeled block, which is what you actually want when filling in a design token file or a theme config. Alpha survives the whole trip: enter rgba(255, 107, 107, 0.5) and you get #ff6b6b80 and hsla(0, 100%, 71%, 0.5) back without doing the 0.5 × 255 arithmetic in your head.

There is no "convert from" dropdown. Paste anything and the parser identifies it, then shows a Detected badge naming the format it used — useful when you are not sure whether a value lifted from a stylesheet is 4-digit hex with alpha or plain 3-digit shorthand. Legacy comma syntax and the modern space-separated CSS Color 4 syntax both parse, including the slash-alpha form and non-degree hue units. If you have raw channel numbers with no wrapper, three space- or comma-separated values are read as RGB and a fourth as alpha, which saves reformatting figures pasted out of a spreadsheet or a debugger.

Converting a brand hex is rarely the end of the job — the next question is whether text can sit on it. Every conversion also reports the WCAG contrast ratio against pure white and pure black, so you know immediately whether a swatch needs white or dark type and how much headroom you have above the 4.5:1 AA threshold. Below that, an 11-step ramp holds hue and saturation constant and walks lightness from 95% to 5%, giving you a token scale you can lift straight into a palette. Every shade is clickable: load it, read its exact values, check its own contrast, repeat.

The harmony buttons are plain HSL hue rotations, and knowing the numbers makes them predictable: complementary is +180°, analogous +30°, triadic +120°, split-complementary +150°. Lighter and Darker hold hue and shift lightness by 15 points. Each click replaces the active color with one derived value rather than showing a pair, so results chain — apply Triadic twice and you reach the 240° point of the same triad. The limitation is worth knowing: HSL hue is not perceptually uniform, so a 30° rotation through the yellows changes apparent color far more than the same rotation through the blues. Treat the output as a starting palette to nudge, not a finished one.

The parser, all eight conversions, the luminance math and the palette generation are ordinary JavaScript functions running in your browser. There is no API call, no upload, no account and no stored history — nothing is written to localStorage, so reloading the page empties it. That is a practical concern rather than a slogan: hex values from an unannounced rebrand or a client's style guide are exactly the kind of thing that should not end up in someone else's request logs, and plenty of free color tools are ad-funded pages carrying third-party scripts. Load this once and it keeps converting with the network disconnected.

Input: 3-, 4-, 6- and 8-digit HEX with or without the leading #; rgb() and rgba() in legacy comma or modern space syntax, including percentage channels like rgb(100%, 42%, 42%) and slash alpha; hsl() and hsla() with deg, rad or turn hue units; hsv() and hsb(); cmyk() and device-cmyk(), comma or space separated; all 148 CSS named colors plus transparent; and bare number triplets such as 255 107 107. Output is always the same eight formats at once — HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK — plus the exact or nearest CSS color name.

No. This converter works entirely in sRGB and its direct derivatives: HEX, RGB, HSL, HSV/HSB and CMYK. It does not implement the CIE spaces (XYZ, LAB, LCH) or the CSS Color 4 perceptual spaces OKLAB and OKLCH, because those need a linear-light transform plus a perceptual model rather than the algebraic conversions used here. If you need OKLCH for a modern CSS palette, use a dedicated perceptual tool. If you need hex, rgb, hsl, hsv and cmyk side by side with contrast ratios and a shade ramp, this is faster.

With the WCAG 2.x formula. Each sRGB channel is divided by 255, then linearized: values at or below 0.03928 are divided by 12.92, higher values use ((c + 0.055) / 1.055) ^ 2.4. Relative luminance L is 0.2126R + 0.7152G + 0.0722B. The ratio is (Llighter + 0.05) / (Ldarker + 0.05), giving a range of 1:1 to 21:1. The tool reports your color against pure white (#ffffff) and pure black (#000000), rounded to two decimals. WCAG 2.2 AA requires 4.5:1 for body text, 3:1 for large text and UI components; AAA requires 7:1.

It is the standard naive conversion, not a color-managed one. K = 1 − max(R', G', B') with each channel divided by 255; C = (1 − R' − K) / (1 − K), and M and Y follow the same shape. Pure black short-circuits to cmyk(0%, 0%, 0%, 100%). Reversing it, R = 255 × (1 − C) × (1 − K). No ICC profile, no GRACoL or FOGRA target, no black generation or under-color removal. Use these numbers for web mockups and rough proofs; send a properly profiled file to your printer for an actual press run.

HEX8 is the 8-digit #RRGGBBAA notation from CSS Color Module Level 4, where the final byte is alpha: round(alpha × 255) in hexadecimal. #ff6b6b80 is a coral red at roughly 50% opacity, since 0x80 is 128 and 128/255 ≈ 0.502. The 4-digit #RGBA shorthand expands the same way. Every current browser engine supports it, and it is what Figma and most design tools export, which makes it the shortest way to move a translucent color between a design file and a stylesheet. This tool emits hex and hex8 in lowercase.

Yes to both. ff6b6b converts exactly like #ff6b6b — the leading hash is optional for 3-, 4-, 6- and 8-digit hex. Three bare numbers separated by spaces or commas, such as 255 107 107 or 255, 107, 107, are read as R, G and B, and a fourth number is read as alpha, so values pasted from a debugger, a spreadsheet cell or a Python tuple work without rewrapping them in rgb(). Bare triplets convert normally but do not light the Detected badge, which only appears for hex, a keyword, or a recognized function syntax.

No. Every parse and conversion runs in JavaScript in your own tab — the whole pipeline is a client component with no network calls. Nothing you type is uploaded, logged or stored: there is no account, no localStorage, and no history, so reloading the page empties it. Once the page has loaded you can disconnect and it keeps working. Copying uses the browser's own Clipboard API, navigator.clipboard.writeText, which never leaves the device. That matters when the hex values you are pasting come from an unreleased product or a client's brand guidelines.

148 keywords — the 147 X11-derived names standardized in CSS Color 3 plus rebeccapurple — and transparent, which resolves to rgba(0, 0, 0, 0). The swatch panel lists them alphabetically and renders the first 100 matches, so use its search box to reach anything after moccasin. In the preview, ≈ means no keyword has that exact hex and the label is the nearest name by Euclidean distance in RGB space: sqrt(ΔR² + ΔG² + ΔB²). No ≈ means an exact match. Where two keywords share a hex the later one wins, so #808080 reports grey, #00ffff reports cyan and #ff00ff reports magenta.

By rotating hue in HSL while holding saturation and lightness fixed. Complementary adds 180°, analogous adds 30°, triadic adds 120° and split-complementary adds 150°. Lighter and Darker leave hue alone and move lightness ±15 percentage points, clamped to 0-100. Each button replaces the current color with the single derived value, so harmonies chain: click Triadic twice and you land on the 240° point of the same triad, and clicking Analogous twice reaches +60°. HSL hue is not perceptually uniform, so equal rotations will not look equally spaced — treat the result as a palette to nudge, not a finished one.

Eleven swatches, hue and saturation frozen, lightness stepped linearly from 95% down to 5% in 9-point increments: 95, 86, 77, 68, 59, 50, 41, 32, 23, 14, 5. That maps cleanly onto an 11-stop design-token scale (50 through 950) if you want a starting point for a Tailwind or CSS custom property palette. Click any swatch to make it the active color and read its exact HEX, RGB, HSL and contrast values. Because lightness is linear rather than perceptual, mid-tones of yellows and cyans read lighter than the same step in blues.

Every input is normalized to 8-bit RGB before anything else happens, so hsl(210, 43.7%, 51.2%) is rounded to integer channels 0-255 and then converted back out. That round trip quantizes the value: the 256³ ≈ 16.7 million sRGB points cannot represent every HSL triple. Output hue, saturation, lightness and value are rounded to one decimal and alpha to three. Expect drift under 1% on hue and saturation, and expect near-gray colors to shift most, since a one-step channel change swings hue a long way when saturation is low.