--color-primary: #06d6a0;bg-[#06d6a0]@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.
What is the Color Tool?
A comprehensive color utility that converts between 7 color spaces (HEX, RGB, HSL, HSV, CMYK, LAB, OKLCH), generates color harmonies, checks contrast ratios for accessibility, simulates color vision deficiencies, and extracts palettes from images.
Common Use Cases
Picking and converting colors for web development — get the exact HEX, RGB, HSL, or OKLCH value you need for CSS or Tailwind.
Checking text contrast against a background color to meet WCAG accessibility guidelines (AA/AAA) or the newer APCA standard.
Extracting dominant colors from an image to build a cohesive design palette, then generating complementary, analogous, or triadic harmonies.
Color Spaces
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.
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.