~/tools/color-converter

Color Converter

Convert between HEX, RGB, HSL, and OKLCH instantly. Includes WCAG contrast checker, CSS variable output, and color palette generator. Runs entirely in your browser.

// How to use

1. Click swatch to open color picker
2. Or type any format to convert
3. HEX / RGB / HSL / OKLCH all editable
4. Copy any format with one click
5. Click palette swatches to apply
* WCAG contrast ratios auto-calculated

100% client-side — no data leaves your browser

color — converter

#00FF88

H 152° S 100% L 50%lum 73.3%

$pick-color

#00ff88

open ↓

›

supports:#hexrgb()hsl()oklch()css name

HEX

RGB

HSL

OKLCH

// WCAG Contrast

vs White (#fff)1.34:1Faillg:Fail

vs Black (#000)15.66:1AAAlg:AAA

// CSS Variable

:root {
  --color: #00ff88;
  --color-rgb: 0, 255, 136;
}

// Color Palette — click to apply

Base#00FF88

Complement#FF0077

Lighter#66FFB8

Darker#009952

Muted#40BF84

Triadic 1#8800FF

Triadic 2#FF8800

What is a Color Converter?

A color converter translates a color value from one representation into equivalent values in other formats. Since different systems and tools use different color models — CSS might expect HEX, a design tool might use HSL, and modern browsers increasingly support OKLCH — a converter lets you move between them without manual calculation.

This tool converts between four formats: HEX (the classic web standard), RGB (the screen model), HSL (human-friendly hue/saturation/lightness), and OKLCH (the modern perceptually uniform CSS Color Level 4 format). All conversions happen instantly in your browser.

Color Formats Explained

HEX (#RRGGBB)

The oldest and most common web color format. A 6-character hexadecimal string encoding red, green, and blue channels (00–FF each). Supported universally in CSS, HTML, and design tools. 3-digit shorthand (#RGB) is also valid.

RGB (red, green, blue)

Defines color as a mix of red, green, and blue light (0–255 each). Maps directly to how screens work. rgba() extends this with an alpha channel for transparency. Widely used in canvas APIs, image processing, and CSS.

HSL (hue, saturation, lightness)

A human-intuitive model where hue is the color angle (0–360°), saturation is color intensity (0–100%), and lightness is the brightness from black to white (0–100%). Easier to reason about when adjusting colors programmatically.

OKLCH (lightness, chroma, hue)

CSS Color Level 4's perceptually uniform color space. Unlike HSL, equal numeric changes produce visually equal perceptual changes. L is perceptual lightness (0–1), C is chroma (color intensity, 0–0.4+), H is hue angle. Recommended for modern design systems and CSS custom properties.

WCAG Contrast Explained

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable by people with low vision. Contrast ratio is calculated from relative luminance: (lighter + 0.05) / (darker + 0.05).

AA (Normal text)

Minimum ratio of 4.5:1 for body text under 18pt (or 14pt bold). Required for basic accessibility compliance in most public-facing web content.

AAA (Normal text)

Enhanced ratio of 7:1 for normal text. Recommended for body text in high-accessibility contexts such as legal, medical, or government sites.

AA (Large text)

Minimum ratio of 3:1 for large text (18pt or 14pt bold). Also applies to UI components, icons, and graphical elements.

AAA (Large text)

Enhanced ratio of 4.5:1 for large text. The gold standard for headings and prominent UI elements in accessible design systems.

Common Use Cases

Design System Tokens

Convert brand colors from HEX (provided by designers) into OKLCH CSS custom properties for modern design token systems.

Accessibility Audit

Check foreground/background color pairs for WCAG AA or AAA compliance before shipping UI components.

CSS Color Level 4 Migration

Convert legacy HEX and RGB values to OKLCH for perceptually uniform color manipulation in modern CSS.

Palette Generation

Use the built-in complement, triadic, lighter, darker, and muted swatches to build cohesive color palettes from a single seed color.

Cross-tool Color Sync

Figma exports HEX, Tailwind uses HEX, SVGs use RGB, and WebGL shaders use normalized 0–1 floats. Convert once to use everywhere.

Theme Development

Generate both light and dark variants of a hue by adjusting the lightness channel in HSL or OKLCH without losing hue consistency.