Colour format converter

Convert between hex, RGB, HSL, and named CSS colours. Preview swatches and check WCAG contrast ratios.

Hex#ff6b35
RGBrgb(255, 107, 53)
HSLhsl(16, 100%, 60%)

Contrast ratios (WCAG)

Aa2.84:1 · Failon white
Aa7.41:1 · AAAon black

CSS colour formats explained

Hex is the most common CSS colour format. A six-digit hex code like #ff6b35 defines red, green, and blue channels as two hex digits each (00–ff, or 0–255 in decimal). Three-digit shorthand (#f63) doubles each digit: #ff6633. Eight-digit hex adds an alpha channel: #ff6b3580 is 50% transparent.

RGB functional notation — rgb(255, 107, 53) — specifies the same channels in decimal. Modern CSS also supports rgb(255 107 53 / 0.5) with a slash-separated alpha value. RGB maps directly to how screens produce colour by mixing red, green, and blue light.

HSL — hsl(20, 100%, 60%) — represents colour as Hue (0–360° on the colour wheel), Saturation (0–100%, grey to vivid), and Lightness (0–100%, black to white). HSL is more intuitive for creating colour systems: to make a colour lighter, increase lightness; to desaturate, reduce saturation. Designers often prefer HSL for building palettes.

CSS defines 148 named colours from aliceblue to yellowgreen. These are convenient for quick prototyping but offer limited precision. Most production code uses hex or HSL for exact colour control.

Colour accessibility basics

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and its background to ensure readability. The contrast ratio ranges from 1:1 (no contrast) to 21:1 (black on white). WCAG Level AA requires at least 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text.

This tool calculates the contrast ratio of your colour against both white and black backgrounds using the WCAG relative luminance formula. When designing interfaces, always verify that your text colours meet at least AA standards. Low contrast is one of the most common accessibility issues on the web — and one of the easiest to fix.

Frequently asked questions

What is hex shorthand?
Hex shorthand lets you write three-character hex codes when each pair of digits is identical. #fff is equivalent to #ffffff (white), #f00 equals #ff0000 (red), and #abc equals #aabbcc. Each character is simply doubled to produce the full six-digit code. This only works when the full value has matching pairs — #f06 expands to #ff0066, but there's no shorthand for #f07a3c.
When should I use RGB vs HSL?
RGB (Red, Green, Blue) maps directly to how screens produce colour — it's the native format for displays, canvas APIs, and image manipulation. It's ideal when you need precise control over individual colour channels or when working with design tools that output RGB values. HSL (Hue, Saturation, Lightness) is more intuitive for humans. Need a darker version of a colour? Reduce the lightness. Want a muted tone? Lower the saturation. HSL makes it easy to create harmonious colour palettes by rotating the hue while keeping saturation and lightness constant. In CSS, both are equally valid and performant.

Related tools

Base64 encoder/decoderEncode text to Base64 or decode Base64 to text./converters/base64Slug generatorConvert any text into a URL-friendly slug./generators/slugJSON formatterPrettify, minify, and validate JSON./formatters/jsonCSS formatterPrettify and minify CSS stylesheets./formatters/css