BrowserTools
Advertisement
Home / Converters / Color Converter & Contrast Checker

Color Converter & Contrast Checker

Convert colors between HEX, RGB, HSL and HSV, plus WCAG contrast ratio checker.

Loading Color Converter & Contrast Checker… If nothing happens, please enable JavaScript.

Frequently asked questions

Is any data sent to a server when I use this tool?
No. All color conversions and contrast calculations happen entirely in your browser using JavaScript. No color values, hex codes, or any other data are transmitted to any server. You can safely use this tool with proprietary brand colors.
How does the hexadecimal color format work?
The #RRGGBB format encodes three color channels — red, green, and blue — each as a two-digit hexadecimal number ranging from 00 (0 in decimal, no intensity) to FF (255 in decimal, full intensity). This gives 256 possible values per channel and 256^3 = 16,777,216 possible colors. The shorthand form #RGB doubles each digit, so #abc expands to #aabbcc.
When should I use HSL instead of RGB in my CSS?
HSL is far more intuitive for systematic color work. If you want a lighter version of a color, simply increase the lightness value. To create a muted version, lower the saturation. This makes HSL ideal for generating design tokens, theming systems, and accessible color palettes programmatically, whereas RGB requires knowing the exact numeric relationships between channels to achieve the same effect.
What WCAG contrast ratio do I need for my website?
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal-sized text and 3:1 for large text (18pt or 14pt bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. Most legal accessibility requirements — including the EU Web Accessibility Directive and US Section 508 — reference the AA standard as a minimum.
Why do the same HSL values sometimes look different in different browsers?
Traditional HSL operates in the sRGB color space. Modern browsers increasingly support wider color gamuts (Display P3, Rec. 2020) through the CSS Color Level 4 specification. Colors defined with oklch() or color(display-p3 ...) can appear more vivid than sRGB equivalents on wide-gamut screens, which is why the same numeric HSL values in sRGB may look subtly different on an iPhone versus a standard monitor.
What is the history of web colors?
The first 16 named HTML colors (like red, blue, lime) came from the CGA palette of the original IBM PC. Netscape Navigator 1.1 in 1994 introduced the #RRGGBB hex format as an extension, and Internet Explorer quickly adopted it. The W3C standardized the full set of 140 named colors and the hex notation in CSS1 in 1996. The modern CSS Color specification now supports thousands of named colors and multiple color spaces.
Can I convert colors with transparency?
Yes. Enter a hex color with an alpha channel using the eight-digit #RRGGBBAA format, or use RGBA notation when typing an RGB value. The tool preserves and converts the alpha channel across all formats. Note that HSL and HSV natively have no alpha channel, so alpha is displayed as a separate value when you convert to those formats.
How is this tool different from browser DevTools?
Browser DevTools color pickers are excellent but limited to colors already present in your CSS. This tool lets you freely enter any color value regardless of where it came from — a design file, a screenshot color picker, a printed brand guide — and instantly see all equivalent formats plus the contrast ratio against any background color you specify.
Which color values should a developer know by heart?
A few are universally useful: #000000 is black, #ffffff is white, #ff0000 is pure red, #00ff00 is pure green, #0000ff is pure blue, and #808080 is medium grey. In WCAG terms, black text on a white background has a contrast ratio of 21:1, which is the theoretical maximum.
What is a common beginner mistake with hex colors?
A very common mistake is confusing #RGB shorthand expansion. #fff expands to #ffffff (white), not #f0f0f0. Another frequent error is mixing up RGB additive mixing with the subtractive mixing of paint — in RGB, combining red (#ff0000) and green (#00ff00) produces yellow (#ffff00), not brown, because digital screens emit light rather than absorbing it.

About Color Converter & Contrast Checker

Digital color representation has evolved through several competing systems, each optimised for a different purpose. The hexadecimal #RRGGBB format emerged in the early days of HTML in the 1990s, when Tim Berners-Lee's web needed a concise way to specify the 16 million colors that 24-bit displays could show. The format encodes the red, green, and blue channel intensities as two-digit hexadecimal numbers, making it compact for markup while still being human-parseable. RGB (Red, Green, Blue) is the additive color model used by all digital displays — mixing light at full intensity produces white, which is the opposite of how ink behaves. HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) are cylindrical transformations of RGB that align more closely with how humans perceive color, making them indispensable for building systematic design palettes.

Designers use hex codes when writing CSS stylesheets and picking brand colors in tools like Figma or Sketch. Front-end developers switch to RGB or RGBA when they need to apply opacity or perform programmatic color blending in canvas or WebGL. HSL is favoured for generating color scales algorithmically — for example, keeping the hue fixed while stepping the lightness to create a consistent shade ramp. HSV is the native format of most color picker widgets because its value axis maps intuitively to the brightness slider. Accessibility engineers rely on contrast ratio calculations to ensure text remains readable for users with low vision or color blindness, a requirement mandated by WCAG 2.1 and enforced in public sector websites across the EU and US.

This tool converts any color you enter across all four notations simultaneously and also computes the WCAG contrast ratio between your color and any background you specify. Everything runs in your browser with no server requests. You can paste a hex code, type in RGB values, or enter HSL coordinates, and the tool instantly shows you all equivalent representations. The contrast checker gives you a pass or fail result against both the AA and AAA WCAG thresholds.

A common pitfall is confusing HSL and HSV — both use hue and saturation, but their third axis differs in important ways. In HSL, a lightness of 100% always produces white regardless of hue or saturation. In HSV, a value of 100% produces the pure hue (full brightness), not white. Another common mistake is forgetting that hex shorthand #RGB expands to #RRGGBB by doubling digits, so #f09 means #ff0099, not #f00009. When working with opacity, note that CSS accepts both eight-digit hex (#RRGGBBAA) and the rgba() function — but some older browsers and design tools only support the rgba() form.

How 16 Million Colors Ended Up in a Six-Character Code

Before the web, color on computer screens was a matter of severe constraint. The original CGA graphics card from 1981 offered just 16 colors, carefully chosen to be distinguishable on the monitors of the day. The EGA standard expanded this to 64, and VGA eventually offered 256 colors from a fixed palette. It was not until 24-bit true color displays became affordable in the early 1990s that the full 16,777,216-color spectrum became accessible to consumer hardware — and the web needed a notation to describe them all.

Netscape Navigator's engineers chose hexadecimal because it mapped perfectly to the underlying hardware: each of the three 8-bit color channels (0–255) can be expressed as exactly two hex digits (00–FF), giving a compact and unambiguous six-character code. The format appeared in Netscape 1.1 around 1994 and was rapidly copied by Internet Explorer. The W3C formalized it in the CSS1 specification in 1996, cementing its place as the universal shorthand for web color. The named color keywords — red, blue, aqua — were inherited directly from the 16 standard VGA colors, with additional colors drawn from the X11 windowing system used on Unix workstations.

The shift toward perceptually uniform color spaces is the next chapter in web color history. Traditional RGB and HSL are mathematically simple but perceptually non-uniform — a step of ten lightness units in HSL looks very different depending on the hue, which makes reliable accessibility calculations difficult. The CSS Color Level 4 specification introduces OKLCH and OKLAB, color spaces designed so that equal numeric differences correspond to equal perceived differences. These spaces are already supported in modern browsers and represent the most significant evolution in how developers specify color since the original hex format was introduced thirty years ago.

Related tools

Unit Converter

Convert between common units of length, mass, temperature, time and digital storage.
Advertisement