AnyTool
Your files never leave your device. All processing happens locally in your browser.

How do I convert a color between HEX, RGB, HSL and other formats?

Type a color into AnyTool Color Converter — a hex like #3B82F6, an rgb()/rgba(), an hsl()/hsla(), an hsv/hsb, a modern oklch()/lab()/lch(), or a CSS name like “tomato” — or pick one with the color picker, and it instantly shows that color in every common format at once, each with a one-click copy button: HEX and HEX8 (with alpha), RGB/RGBA, HSL/HSLA, HSV/HSB, CMYK, LAB, LCH, OKLCH, OKLAB, the nearest CSS keyword and the 0xAARRGGBB integer. A built-in WCAG contrast panel scores the color against any background with AA/AAA pass-fail for normal text, large text and UI, and a tints-and-shades strip gives you a quick palette. Everything runs in your browser.

  • Shows one color in 13 formats at once, each copyable
  • Parses hex, rgb(), hsl(), hsv, oklch/lab/lch and CSS color names
  • Color picker plus RGB / HSL / alpha sliders, all live
  • WCAG AA/AAA contrast checker against any background
  • 100% in your browser — no upload, no signup, works offline

What is

Color Conversion

Color conversion expresses the same color in different color models. HEX and RGB describe a color by its red, green and blue components; HSL and HSV/HSB describe it by hue, saturation and lightness or value; CMYK is a subtractive model used in print; LAB, LCH, OKLAB and OKLCH are perceptual, device-independent spaces. Converting between them keeps the visual color the same while changing how its numbers are written — useful for moving a color from a design tool to CSS, to print, or to code. An alpha channel adds transparency (e.g. HEX8 or rgba()).

Converters

Related terms

HEXRGBHSLCMYKOKLCHWCAG contrastAlpha channel

Frequently Asked Questions

#3B82F6 is rgb(59, 130, 246) — red 59, green 130, blue 246 — which is also hsl(217, 91%, 60%).

The hex color #3B82F6 splits into three byte pairs: 3B is 59 (red), 82 is 130 (green) and F6 is 246 (blue), giving rgb(59, 130, 246). In other models it is hsl(217, 91%, 60%), hsv(217, 76%, 96%) and oklch(0.62 0.19 256). AnyTool shows all of these at once and lets you copy any of them with one click.

Enter the RGB color and read off the CMYK line — AnyTool derives cyan, magenta, yellow and key percentages from the RGB value instantly.

CMYK is a subtractive print model, so it is computed from RGB by finding the key (black) as 1 minus the largest channel, then deriving cyan, magenta and yellow relative to that. AnyTool does this for you: type any color and the CMYK line shows percentages like cmyk(76%, 47%, 0%, 4%). Note that exact print color also depends on the printer’s ICC profile, so treat CMYK from any sRGB tool as a close starting point.

WCAG AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1. AnyTool checks your color against any background live.

For readable text, WCAG 2 requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text (18pt, or 14pt bold) to meet level AA; the stricter AAA level requires 7:1 and 4.5:1. User-interface components and graphics need 3:1. AnyTool’s contrast panel computes the exact ratio between your foreground color and a chosen background and shows pass or fail for each of these thresholds.

OKLCH is a modern, perceptually uniform color space (lightness, chroma, hue) where equal number changes look equally different — unlike HSL.

OKLCH expresses a color as lightness, chroma and hue like HSL’s lightness-saturation-hue, but it is built on the OKLab perceptual model, so a given change in lightness or hue looks consistent across the whole space. That makes OKLCH far better for generating accessible palettes and smooth gradients than HSL, where the same numeric change can look very different at different hues. AnyTool outputs ready-to-use oklch() CSS alongside the classic formats.

Detailed Explanation

Methodology

How the Color Converter Works

AnyTool Color Converter parses a color typed in any common notation — hex (#rgb, #rrggbb, #rrggbbaa), rgb()/rgba(), hsl()/hsla(), hsv/hsb, the modern oklch()/lab()/lch() functions, or a CSS color keyword such as “tomato” — using the culori color library, then converts it into every other format with accurate, device-independent color-space math. It renders HEX, HEX8, RGB(A), HSL(A), HSV/HSB, CMYK, LAB, LCH, OKLCH and OKLAB simultaneously, plus the nearest CSS keyword (matched by perceptual ΔE in OKLab) and the 32-bit 0xAARRGGBB integer. CMYK and HSV strings, which the library does not format, are derived locally from the RGB and HSV values with consistent rounding. Every conversion is deterministic and runs entirely in the browser.

  • Parses hex, rgb, hsl, hsv, oklch, lab, lch and CSS color names
  • Emits 13 formats at once via the culori color library
  • Nearest CSS keyword matched by perceptual ΔE in OKLab
  • CMYK and integer 0xAARRGGBB derived locally with stable rounding
  • Fully client-side JavaScript — no server round-trip
How It Works

WCAG Contrast and Accessibility

Beyond conversion, the tool includes a WCAG 2.x contrast checker. You pick a background color (white, black or any custom color) and it computes the contrast ratio between that background and the parsed foreground color, then reports pass or fail for each threshold: normal text AA (4.5:1) and AAA (7:1), large text AA (3:1) and AAA (4.5:1), and non-text UI components (3:1). The ratio and luminances come from the standard WCAG relative-luminance formula. A live sample of body text drawn in the color over the chosen background makes the result tangible, helping designers and developers catch inaccessible color pairings before they ship.

  • WCAG 2.x contrast ratio between foreground and background
  • AA/AAA pass-fail for normal text, large text and UI components
  • Thresholds 4.5:1, 7:1, 3:1 and 4.5:1 evaluated live
  • Live preview of text in the color over the chosen background
  • Background can be white, black or any custom color
Privacy & Security

Pickers, Palettes and Privacy

The interface offers a native color picker, draggable RGB, HSL and alpha sliders, clickable sample swatches and a randomize button, all of which feed the same single source of truth so the input field, sliders, picker and every output stay in sync. A tints-and-shades strip mixes the color toward black and white for a quick palette, with each swatch copyable. Because all parsing, conversion and contrast math run on the standard culori library in the browser, no color value is ever uploaded, there is no tracking, and the page works offline after first load.

Color conversion: in-browser (AnyTool) vs typical online converters
CapabilityAnyToolTypical online converters
ProcessingRuns in your browserOften server-side
Formats shown13 at once (incl. OKLCH, OKLAB, LAB, LCH)Usually HEX, RGB, HSL only
Input notationshex, rgb, hsl, hsv, oklch, lab, lch, CSS namesFrequently hex/RGB only
Alpha / transparencyHEX8 and rgba with an alpha sliderRarely supported
WCAG contrastAA/AAA for normal, large and UISeldom built in
Nearest CSS namePerceptual ΔE matchRarely offered
Works offlineYes (PWA)No
Cost / signupFree, no signupOften ad-heavy or gated

AnyTool converts colors locally with the culori library and uploads nothing; CMYK is an sRGB-based approximation, not a profiled print value.