Color Converter — HEX, RGB, HSL, OKLCH & CMYK Tool

Popular Web Code tools

• Bundle Size AnalyzerAnalyze and visualize JavaScript bundle sizes with optimization suggestions.
• URL Encoder/DecoderEncode, decode, and parse URLs and query strings instantly.
• SQL FormatterFormat, minify, and validate SQL queries with dialect support.
• HTML FormatterFormat, minify, and validate HTML with attribute sorting and template support.
• cURL to Code ConverterConvert cURL commands to idiomatic code across 14 programming languages instantly.

How to Color Converter Online

1. 1

   Enter a color in any format — HEX (#3b82f6, #fff), RGB/RGBA (rgb(59, 130, 246)), HSL/HSLA, OKLCH (oklch(0.65 0.18 250)), CMYK, CSS named color (rebeccapurple), or Tailwind class (blue-500) — into the input field or use the visual color picker.

2. 2

   The converter automatically parses input syntax, handles alpha transparency channels, and recalculates all 16+ target color models in real time.

3. 3

   Click the Copy button on any format card to copy the normalized CSS string, raw values, Swift UIColor, Android ARGB integer, or CSS custom properties.

4. 4

   Switch to the Palette Harmonies tab to generate complementary (180°), analogous (±30°), triadic (120°), split-complementary, tetradic, or monochromatic color schemes calculated in perceptually uniform OKLCH space.

5. 5

   Open the Contrast Checker tab to evaluate WCAG 2.1 Level AA/AAA compliance (minimum 4.5:1 for normal text, 3:1 for large text) and modern APCA readability scores against custom background colors.

6. 6

   Use the Perceptual Blend mode to mix two colors in OKLab space with adjustable interpolation ratios, preventing muddy gray midtones common in standard sRGB blending.

7. 7

   Generate harmonious UI scales using the Shades & Tints generator with configurable step counts for design system tokens.

Color Converter Features

• ✓

  16+ color format representations: HEX (3, 4, 6, 8 digit), RGB, RGBA, HSL, HSLA, HSB/HSV, HWB, CMYK, OKLCH, OKLab, CIELAB, CIELCh, Display P3 wide gamut, CSS named colors, Android ARGB integers, Swift UIColor constructors, and 32-bit decimal numbers.

• ✓

  Instant format auto-detection: parses standard strings, CSS functional notations, percentage values, hex prefixes, and modern slash-separated alpha syntax (e.g., hsl(210 50% 40% / 0.8)).

• ✓

  Modern CSS Color Module Level 4 support: native OKLCH and OKLab representations for consistent perceptual lightness across all color hues.

• ✓

  Wide-gamut Display P3 profile calculation: inspects and converts wide-gamut colors for high-dynamic-range (HDR) screens and Apple Retina displays.

• ✓

  Tailwind CSS v3 & v4 class mapping: identifies the nearest official Tailwind color token using the CIEDE2000 color difference metric.

• ✓

  Interactive color picker & EyeDropper API: visual 2D saturation/value plane, hue ribbon, alpha channel slider, and native desktop pixel sampling on supported browsers.

• ✓

  WCAG 2.1 & APCA contrast validation: real-time contrast ratio computation with pass/fail indicators for Level AA, Level AAA, graphical UI components, and large typography.

• ✓

  Scientifically modeled color blindness preview: simulates protanopia, protanomaly, deuteranopia, deuteranomaly, tritanopia, tritanomaly, and achromatopsia using standard spectral simulation matrices.

• ✓

  OKLab perceptual color mixing: smooth linear gradient interpolation in perceptual color space without muddy desaturation artifacts.

• ✓

  Systematic shades and tints generator: scales lightness and chroma up/down systematically to construct robust UI component states (hover, active, focus).

• ✓

  CSS custom properties generator: generates complete CSS variable blocks (--color-r, --color-g, --color-b, --color-hex, --color-oklch) ready to paste into stylesheet stylesheets.

• ✓

  Client-side execution: 100% in-browser computation with zero remote API calls, guaranteeing privacy for unreleased brand palettes and design tokens.

Supported Formats & Dialects

The Color Converter supports 5 syntax formats and dialects for accurate parsing and processing.

sRGB Standard Models (HEX, RGB, RGBA)

Traditional 24-bit and 32-bit additive color formats with 8-bit channels (0–255) and optional alpha transparency (3, 4, 6, or 8-digit hexadecimal notations).

Perceptually Uniform Color Spaces (OKLCH, OKLab, CIELAB)

Modern CSS Color Level 4 perceptual spaces where lightness (L) corresponds directly to human perceived brightness regardless of chroma or hue angle.

Cylindrical UI Color Models (HSL, HSV/HSB, HWB)

Intuitive color coordinate systems that parameterize colors into angular hue (0–360°), saturation/whiteness/blackness, and value/lightness percentages.

Wide Gamut & Print Standards (Display P3, CMYK)

Display P3 color space supporting up to 25% broader chromatic spectrum than sRGB on modern displays, alongside 4-color subtractive CMYK ink profiling.

Platform Design Tokens (Tailwind CSS, Swift, Android, CSS Vars)

Code generation for production frameworks, including CIEDE2000 nearest Tailwind class matching, iOS Swift UIColor declarations, Android ARGB hex integers, and CSS variables.

Frequently Asked Questions

What is OKLCH and why does CSS Color Module Level 4 prioritize it over HSL?

OKLCH (Lightness, Chroma, Hue in Oklab space) is a perceptually uniform color space. In legacy HSL, setting lightness to 50% yields vastly different perceived brightness depending on the hue (pure yellow at 50% lightness appears dramatically brighter to human eyes than pure blue at 50%). OKLCH fixes this non-uniformity: any two colors with the same OKLCH lightness value (L) have identical human perceived brightness, making it vastly superior for generating accessible color palettes, UI theme ramps, and predictable contrast ratios.

How does the CIEDE2000 color difference formula map arbitrary colors to Tailwind CSS classes?

Rather than computing simple Euclidean distance in RGB coordinates (which fails to account for non-linear human visual sensitivity), the converter transforms both the input color and all 220+ Tailwind palette colors into the CIELAB color space. It then evaluates the CIEDE2000 color difference metric (ΔE₀₀), accounting for lightness weighting, chroma differences, hue rotation terms, and neutral gray compensation to identify the perceptually closest matching Tailwind token.

How are WCAG 2.1 contrast ratios and WCAG 3.0 APCA values calculated?

WCAG 2.1 contrast ratio is computed as (L1 + 0.05) / (L2 + 0.05), where L1 and L2 represent the relative luminance of the lighter and darker colors calculated from linearized sRGB values (Y = 0.2126*R + 0.7152*G + 0.0722*B). WCAG 2.1 requires 4.5:1 for normal body text and 3:1 for large text (18pt / 14pt bold). The Advanced Perceptual Contrast Algorithm (APCA, candidate for WCAG 3) models human spatial frequency and non-linear photoreceptor response, providing asymmetric Lightness Contrast (Lc) scores.

Why does color blending in OKLab produce cleaner gradients than sRGB blending?

Standard sRGB color interpolation mixes non-linear gamma-encoded RGB values. When blending complementary or opposite colors (like blue #0000ff and yellow #ffff00), sRGB arithmetic creates an unnatural muddy gray or dark dip in the center. In contrast, OKLab operates on linear LMS cone responses and opponent color channels (a and b), producing vibrant, smooth, perceptually uniform transitions that mirror physical light transmission.

What is the difference between Display P3 and standard sRGB color gamuts?

sRGB is the standard color gamut established in 1996 for CRT monitors and web content. Display P3 uses the D65 white point but employs the wider color primaries of the DCI-P3 cinema standard. Display P3 covers approximately 25% larger color volume than sRGB, enabling significantly more saturated greens, reds, and cyans. Modern browsers access these wide-gamut colors via CSS functional notation like color(display-p3 0.9 0.1 0.3).

How does 8-digit hexadecimal color notation handle alpha opacity channels?

An 8-character hex code (#RRGGBBAA) appends a two-character hex byte representing the alpha (opacity) channel ranging from 00 (0% opacity, completely transparent) to FF (100% opacity, completely opaque). For instance, #3B82F680 sets an alpha channel of 0x80 (128 in decimal), which corresponds to 128/255 ≈ 50.2% opacity, matching rgba(59, 130, 246, 0.502).

How does the color blindness simulator model different visual deficiencies?

The color blindness simulator applies 3x3 transformation matrices derived from the Brettel-Viénot-Mollon algorithms. It projects full-spectrum RGB vectors onto the reduced dichromatic color confusion planes experienced by individuals with protanopia (missing long-wavelength red cones), deuteranopia (missing medium-wavelength green cones), tritanopia (missing short-wavelength blue cones), and monochromacy/achromatopsia (absence of all functioning cone receptors).

What are the mathematical formulas for converting sRGB to HSL and CMYK?

To convert sRGB (r, g, b in [0, 1]) to HSL: Max = max(r,g,b), Min = min(r,g,b), Δ = Max - Min. Lightness L = (Max + Min) / 2. If Δ = 0, Saturation S = 0; otherwise S = Δ / (1 - |2L - 1|). Hue H is calculated from the active max channel multiplied by 60°. For CMYK (subtractive ink model): Key Black K = 1 - Max(r, g, b). If K = 1, C = M = Y = 0; otherwise Cyan C = (1 - r - K) / (1 - K), Magenta M = (1 - g - K) / (1 - K), and Yellow Y = (1 - b - K) / (1 - K).

Related Developer Tools

• CSS FormatterFormat, minify, and validate CSS with property sorting and SCSS conversion.
• Accessibility CheckerScan HTML for WCAG accessibility issues with AI-powered fix suggestions.
• CSS Animation GeneratorGenerate CSS keyframe animations with visual preview and easing functions.
• SVG OptimizerOptimize, minify, and clean SVG files with configurable SVGO presets.
• Number Base ConverterConvert numbers between binary, octal, decimal, hexadecimal and custom bases.
• Favicon GeneratorGenerate multi-size ICO, SVG, Apple Touch, and PWA favicons from images, text, or emojis.