Convert between HEX, RGB, HSL and HSB instantly
Check if your colour meets accessibility standards against white and black backgrounds.
Digital colours can be expressed in several different formats depending on the context — web CSS, design tools, print, and programming all have preferred representations. Knowing which format to use where saves time switching between tools.
| Format | Example | Where it's used |
|---|---|---|
| HEX | #378ADD | CSS, HTML attributes, design tool colour pickers |
| RGB | rgb(55, 138, 221) | CSS, Canvas API, image processing |
| RGBA | rgba(55, 138, 221, 0.8) | CSS when transparency is needed |
| HSL | hsl(210, 68%, 54%) | CSS, easier for making colour variations |
| HSB / HSV | hsb(210, 75%, 87%) | Photoshop, Illustrator, Figma colour pickers |
| CSS variable | --color: #378ADD; | Design systems, theming, CSS custom properties |
A hex colour code like #378ADD is a 6-digit hexadecimal number representing three colour channels: red, green, and blue. The first two digits (37) define red, the next two (8A) define green, and the last two (DD) define blue.
Each pair of hex digits represents a value from 0 (00) to 255 (FF). #000000 is black (all channels at 0), #FFFFFF is white (all at 255), and #FF0000 is pure red.
3-digit shorthand hex codes like #3AD expand to #33AADD by doubling each digit — only possible when both digits in each pair are identical.
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable for people with low vision or colour blindness. The contrast ratio compares the relative luminance of the foreground and background colours — a ratio of 1:1 means identical colours, 21:1 means black on white (maximum contrast).
AA compliance (the standard for most websites) requires a ratio of at least 4.5:1 for body text and 3:1 for large text (18pt+). AAA compliance requires 7:1 for body text — this is the enhanced standard used for maximum accessibility.
Many design systems and brand colour palettes have contrast problems that only become apparent during an accessibility audit. Checking your primary brand colour against white and black backgrounds while designing — rather than after — saves significant rework.
This colour converter supports six formats — HEX, RGB, RGBA, HSL, HSB/HSV, and CSS custom property syntax. Enter a hex code, use the colour picker, or drag the RGB sliders. All formats update instantly. The WCAG contrast checker shows AA and AAA ratings against white and black backgrounds. Recent colours are saved in your browser.