Color Converter

Understanding Color Models

Color on screens works through additive color mixing using red, green, and blue light (RGB). When all three channels are at maximum intensity, the result is white. When all are off, the result is black. This is the opposite of paint mixing, which uses subtractive color (CMYK) where combining pigments absorbs light and trends toward black. Every color you see on a monitor, phone, or TV is created by blending these three light channels at different intensities.

HEX notation is the most common color format on the web. It compresses the three RGB channels into a six-character hexadecimal string prefixed with a hash symbol. Each pair of characters represents one channel: #FF0000 is pure red (FF=255 for red, 00=0 for green, 00=0 for blue). The shorthand #F00 expands to #FF0000. HEX was popularized during the early web era when web-safe colors were limited to 216 combinations using only the values 00, 33, 66, 99, CC, and FF.

HSL: A More Intuitive Model

While RGB and HEX describe colors in terms of hardware channels, HSL describes them the way humans think about color. Hue is the color itself, measured as a position on the color wheel: 0 degrees is red, 120 degrees is green, and 240 degrees is blue. Saturation controls vibrancy from 0% (gray) to 100% (pure color). Lightness ranges from 0% (black) through 50% (the pure hue) to 100% (white).

HSL makes it trivial to create color variations. To lighten a color, increase the L value. To create a pastel, reduce the S value. To find complementary colors, add 180 to the H value. Design systems often define their color palettes using HSL because it allows systematic generation of shade scales, tints, and tones from a single base hue. CSS supports HSL natively with the hsl() function.

WCAG Contrast and Accessibility

The Web Content Accessibility Guidelines establish minimum contrast ratios to ensure text remains readable for people with visual impairments. Level AA requires a contrast ratio of at least 4.5:1 between normal text and its background, and 3:1 for large text (18pt or 14pt bold). Level AAA raises these to 7:1 and 4.5:1 respectively. Roughly 300 million people worldwide have color vision deficiency, making contrast compliance critical for inclusive design.

Contrast ratio is computed from relative luminance, a measure of the perceived brightness of a color. The formula accounts for the fact that human eyes are most sensitive to green light (weighted 0.7152) and least sensitive to blue (weighted 0.0722). A ratio of 21:1 represents maximum contrast (black on white), while 1:1 means no contrast at all. This tool calculates the contrast ratio of your chosen color against both white and black backgrounds, showing exactly which WCAG levels it passes.

Choosing Accessible Color Combinations

Start with your brand color and check its contrast ratio against white and black text. If neither passes AA for normal text, adjust the lightness. Darker versions of your color will gain contrast against white; lighter versions gain contrast against black. Many design systems define a "500" shade as the brand color and generate accessible text-on-background combinations from the "50" through "900" scale. Tools like this converter help you verify each combination before shipping.

CSS Color Functions

Modern CSS supports multiple color formats beyond HEX. The rgb() function accepts comma-separated or space-separated values. The hsl() function makes color manipulation intuitive. CSS Color Level 4 introduced oklch() and oklab() for perceptually uniform color spaces, where equal numeric steps produce equal perceived differences. As browser support grows, these newer formats will become the standard for design tokens and theming.

Frequently Asked Questions

What is the difference between HEX, RGB, and HSL?

HEX uses hexadecimal notation (#RRGGBB), RGB uses decimal values (0-255) per channel, and HSL uses Hue (0-360), Saturation (0-100%), and Lightness (0-100%). All represent the same colors differently.

What are WCAG contrast requirements?

AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.

How is contrast ratio calculated?

Using relative luminance: (L1 + 0.05) / (L2 + 0.05) where L1 is lighter. Ranges from 1:1 (no contrast) to 21:1 (maximum).

What is the HSL color model?

HSL describes color by Hue (color wheel position), Saturation (vibrancy), and Lightness (brightness). More intuitive than RGB for creating color variations.

What are web-safe colors?

A 216-color palette from the 1990s using HEX values 00, 33, 66, 99, CC, FF per channel. Obsolete on modern displays that support 16.7 million colors.