What is the Color Tool?

The Color Tool is a comprehensive color utility that supports HEX, RGB, HSL, and OKLCH color models with a visual picker, conversions, and contrast checking.

What is OKLCH color space?

OKLCH is a perceptually uniform color space that better matches human vision than HSL or RGB. It produces more consistent lightness gradients and accessible palettes.

Color Converter & Picker - HEX, RGB, HSL, OKLCH

All processing happens locally in your browser — nothing is sent to any server

Vision:

HEX

RGB

HSL

HSV

CMYK

LAB

OKLCH

HSV is for reference. CSS has no hsv() function — use HSL.

CSS Variable

--color-primary: #06d6a0;

Tailwind utility

bg-[#06d6a0]

Tailwind v4 @theme

@theme {
  --color-primary: oklch(78% 0.16 167);
}

Color Converter is a free online tool for converting between HEX, RGB, HSL, OKLCH and other color spaces. Includes a visual picker, image palette extraction, WCAG contrast checker, and color-blindness preview. Runs entirely in your browser.

About Color Conversion

This color tool converts between 7 color spaces, generates harmonies, checks contrast ratios (WCAG and APCA), simulates color blindness, and extracts palettes from images. See [Number Base converter](/numbase) for hex calculations, or [Image compressor](/image) for image processing.

Color Spaces

HEX — compact 6/8-digit RGB notation. The default for CSS.

RGB — additive primaries 0–255. Maps directly to display pixels.

HSL — hue/saturation/lightness. Easier for humans to reason about than RGB.

HSV — hue/saturation/value. Common in design tools but not a CSS function.

CMYK — subtractive primaries used in print. Approximate when converted from RGB.

LAB — perceptually uniform; equal numeric distance ≈ equal visual distance.

OKLCH — modern perceptual space; preferred by Tailwind v4 and CSS Color Module Level 4.

Contrast (WCAG vs APCA)

WCAG 2.1 uses a luminance ratio (1:1 to 21:1) with thresholds for AA/AAA. It is widely supported but doesn't fully account for perception of small text or dark mode.

APCA is a candidate for WCAG 3 with a polarity-aware Lc score. It correlates better with readability for thin or small text.

Tips

Use the eyedropper to pick a color from any pixel on your screen (Chromium browsers).
Drop an image into the Palette tab to extract its 6 dominant colors via median-cut quantization.
Tailwind v4 emits colors in OKLCH for perceptual smoothness — copy the @theme block to align with that workflow.

Can I extract colors from an image?

Yes. Drag and drop any image onto the palette extraction area to get the dominant colors. You can also simulate color vision deficiencies (protanopia, deuteranopia, tritanopia).

Related Tools

Image Compressor Number Base Converter