Color Calculator

A color calculator converts color values, checks accessibility contrast, compares color differences, generates palettes, mixes colors and builds CSS gradients from one interface.

Designers and developers often work with several color models at once. A useful calculator must explain each conversion, preserve alpha transparency and show where mathematical output stops guaranteeing visual appearance.

What this color calculator can do

• convert between HEX, RGB, HSL, HSV, HWB and CMYK;
• calculate CIE XYZ, Lab and LCh values using a D65 white point;
• convert to and from OKLab and OKLCh;
• show alpha transparency and a live color preview;
• check whether a converted color remains inside the sRGB gamut;
• compare two colors with Delta E 76 and Delta E 2000;
• calculate WCAG contrast for normal and large text;
• recommend black or white text and suggest accessible alternatives;
• generate complementary, analogous, triadic and other palettes;
• mix colors in sRGB, linear RGB or OKLab;
• create linear, radial and conic CSS gradients;
• export results to CSV.

HEX and RGB describe sRGB channel values

HEX notation stores red, green and blue as hexadecimal channel values. The color #5869FF contains red 88, green 105 and blue 255. Each two-character pair ranges from 00 to FF, which corresponds to 0 through 255.

RGB expresses the same channels as numbers:

#5869FF = rgb(88, 105, 255).

An eight-digit HEX value or RGBA value adds alpha transparency. For example, the final pair in #5869FF80 represents roughly 50% opacity. Alpha does not create a new visible color by itself; the browser composites the foreground with the background.

HSL, HSV and HWB offer different controls

HSL separates hue, saturation and lightness. It helps people rotate a hue or create quick variations, but equal HSL lightness does not guarantee equal perceived brightness. Highly saturated yellow can look much lighter than blue at the same HSL lightness.

HSV, also called HSB, uses hue, saturation and value. Many color pickers use it because the model maps naturally to a square for saturation and brightness. HWB describes hue plus the amount of white and black mixed into a fully saturated hue.

CMYK conversion is only an approximation without a profile

CMYK describes cyan, magenta, yellow and black ink components. A simple RGB-to-CMYK formula can provide a useful estimate, but it cannot predict a specific press, paper, ink set or rendering intent.

Professional color management uses ICC profiles to describe input, display and output devices. Use the calculator’s CMYK result for planning, not as a substitute for the printer’s profile or a proof.

CIE XYZ provides a conversion reference

CIE XYZ acts as a device-independent reference for many color conversions. The calculator first decodes sRGB gamma into linear-light RGB and then applies the standard sRGB-to-XYZ matrix. It uses the D65 reference white that sRGB employs.

The Y component relates to luminance, while X and Z help describe chromaticity. The calculator displays XYZ on a 0–100 style scale.

Lab and LCh support color-difference calculations

CIE Lab represents lightness with L and uses a and b axes for opponent color directions. LCh expresses the same Lab color with lightness, chroma and hue angle:

Chroma = √(a² + b²).

Hue = atan2(b, a).

The W3C CSS Color specification defines Lab and LCh color functions and documents the conversion between rectangular and polar coordinates. Lab aims to make numerical differences more closely reflect visual differences than raw RGB distance, although it is not perfectly uniform.

OKLab and OKLCh help create smoother digital palettes

OKLab is a newer perceptual model designed for operations such as interpolation and lightness adjustment. OKLCh expresses OKLab through lightness, chroma and hue. The W3C CSS Color specification includes both models and their conversion algorithms.

Changing OKLCh lightness often feels more consistent than changing HSL lightness. High-chroma combinations can fall outside sRGB, so the calculator detects and clips the preview.

What an sRGB gamut warning means

A color gamut defines the range of colors a space can represent. Lab and OKLCh can describe colors that sRGB cannot display. When conversion produces a negative linear RGB channel or a channel above one, the exact color lies outside sRGB.

Clipping avoids invalid channel values but can change hue, chroma or lightness. Production workflows may prefer deliberate gamut mapping.

Compare colors with Delta E 76 and Delta E 2000

Delta E measures numerical color difference. Delta E 76 calculates Euclidean distance in Lab:

ΔE76 = √((ΔL)² + (Δa)² + (Δb)²).

Delta E 2000 adds corrections for lightness, chroma and hue interactions. It usually aligns better with perceived differences, especially in regions where Lab distance behaves unevenly.

No universal threshold works for every industry or viewing condition. Screen design and manufacturing may use very different tolerances.

WCAG contrast uses relative luminance

The accessibility mode calculates the contrast ratio from relative luminance:

Contrast ratio = (Lighter luminance + 0.05) ÷ (Darker luminance + 0.05).

WCAG 2.2 requires at least 4.5:1 for normal text at level AA and 3:1 for large text. Level AAA raises those values to 7:1 and 4.5:1. WCAG defines large text as at least 18 point or at least 14 point when bold; common web approximations use 24 CSS pixels or about 18.66 pixels bold.

The calculator composites transparent foreground colors onto the selected background before measuring contrast. It also compares black and white text and can adjust the foreground lightness toward an AA or AAA target.

Color alone should not carry essential meaning

Contrast does not solve every accessibility problem. WCAG also warns against using color as the only visual method for communicating information. Error states, chart series and status indicators should include text, icons, patterns or another distinction.

A green success message and a red error message may both pass contrast against white yet remain difficult to distinguish for some users. Add labels and structural cues instead of relying only on hue.

How palette harmonies are generated

Harmony generators rotate hue angles or adjust lightness and saturation according to a mathematical pattern:

• Complementary: two hues about 180 degrees apart;
• Analogous: nearby hues around the base color;
• Triadic: three hues spaced about 120 degrees apart;
• Split complementary: the base plus two hues around its complement;
• Tetradic and square: four hue positions;
• Monochromatic: one hue with varied lightness or saturation;
• Shades, tints and tones: mixes with black, white or grey.

These rules provide starting points. A finished palette still needs hierarchy, contrast tests and state colours.

Why mixing space changes the result

Direct sRGB mixing averages gamma-encoded channel values. Linear RGB mixing first converts channels to linear light, averages them and converts the result back. Linear mixing therefore behaves more like light-energy interpolation and often produces a brighter midpoint.

OKLab mixing interpolates perceptual coordinates. It can create smoother-looking transitions when the goal is a visually balanced digital gradient rather than a physical model of light or pigment.

Build CSS gradients with controlled stops

The gradient mode creates linear, radial and conic gradients. Every stop contains a color and a position from 0% to 100%. Linear and conic gradients also accept an angle.

The tool shows a live preview and complete CSS declaration. Subtle gradients may still show banding on limited displays or compressed images.

Common mistakes

• treating HSL lightness as perceived brightness;
• measuring RGB distance instead of using an appropriate Delta E formula;
• checking text contrast without its real background;
• ignoring alpha compositing;
• assuming every Lab or OKLCh color fits inside sRGB;
• using generic CMYK values as press-ready separations;
• building a palette without testing interactive states;
• relying on hue alone to communicate status;
• assuming two monitors display the same color identically.

How to verify a result

For web work, inspect the final CSS in the target browsers, test actual foreground and background combinations, and review focus, hover, disabled and error states. Check normal and large text separately.

For brand or print work, use calibrated displays, the required ICC profiles and a proof. Always include the color space and white point with Lab or XYZ values.

Frequently asked questions

Official technical references

• W3C CSS Color Module Level 4
• W3C Web Content Accessibility Guidelines 2.2
• W3C Technique G18 for text contrast
• W3C guidance on non-text contrast
• W3C guidance on use of color
• International Color Consortium: ICC profile format

Sources reviewed: 21 June 2026.