* Your content are not transferred to the server. All calculations are performed directly in the browser
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);
}About Color Conversion
A color converter translates the same color across the formats used in web, print, and design — HEX for CSS, RGB/HSL for live tweaking, CMYK for print, LAB/OKLCH for perceptual uniformity.
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.