Micru Logo

Color Converter

Translate any color into HEX, RGB, HSL, HSV, LAB, and OKLCH formats instantly.

What Is a Color Format?

A color format is a specific notation used to represent a color value as text. Different systems (browsers, design tools, image editors, and printing workflows) each have a preferred format. A color is always the same perceived color regardless of the notation used; the format is simply how that color is encoded as a string.

This converter uses the culori library, which implements the color science behind each space accurately. Conversions pass through a common internal representation, so rounding errors are minimized compared to chained single-step conversions.

Supported Formats

HEX #RRGGBB

The most common format for web development. Each pair of hexadecimal digits represents a red, green, or blue channel from 00 (0) to FF (255). Supported everywhere CSS is used. An optional fourth pair adds alpha transparency.

RGB rgb(R, G, B)

Red, Green, Blue as integers from 0–255 (or percentages). This is the native format of monitors and screens. rgba() extends it with an alpha channel from 0 (transparent) to 1 (opaque). CSS 4 accepts rgb(R G B / A) space syntax.

HSL hsl(H, S%, L%)

Hue (0-360°), Saturation (0-100%), Lightness (0-100%). A cylindrical remapping of RGB designed for human reasoning; easy to create tints (increase L) and shades (decrease L) without touching hue or saturation. Widely supported in CSS.

HSV hsv(H, S%, V%)

Hue, Saturation, Value (brightness). Unlike HSL where full white is at L=100% regardless of saturation, HSV reaches pure white only when V=100% and S=0%. This model maps naturally to the "color picker" UI used in Photoshop, Figma, and this site's own picker.

LAB lab(L, a, b)

CIE L*a*b* is a perceptually uniform color space; equal numerical steps correspond to equal perceived differences. L is lightness (0-100), a is green-red axis, b is blue-yellow axis. Used in print, photography, and anywhere perceptual accuracy matters over display convenience.

OKLCH oklch(L, C, H)

The newest and most perceptually consistent format, designed by Björn Ottosson in 2020. Lightness (0-1), Chroma (0+), and Hue (0-360°) are truly perceptual; rotating hue at fixed lightness and chroma produces equally-bright colors. Native CSS 4 support. Ideal for accessible palette generation.

Which Format Should I Use?

  • CSS / web: Use HEX for static values and HSL for dynamic theming via custom properties. OKLCH is the modern choice for CSS 4 projects.
  • Design tools (Figma, Sketch): HEX and RGB are universally supported. OKLCH support is improving rapidly in Figma.
  • Palette generation: Work in OKLCH or LAB; their perceptual uniformity ensures the resulting steps look evenly spaced to the human eye.
  • Print / prepress: Convert to LAB as an intermediate before converting to CMYK. LAB is device-independent and preserves colorimetric intent.

Accepted Input Formats

You can type any of the following directly into the input field. The parser handles all standard CSS color syntaxes:

#007AFF#007affccrgb(0, 122, 255)hsl(211, 100%, 50%)oklch(0.51 0.22 250)dodgerbluerebeccapurpletransparent