Formula
HEX #RRGGBB → R, G, B = each pair read as a base-16 number (00–FF → 0–255)HSL from RGB: hue by dominant channel, lightness = (max + min) ÷ 2
- Contrast = (L₁ + 0.05) ÷ (L₂ + 0.05), L = WCAG relative luminance
A colour is three channel values; HEX writes them in base 16.
Worked example
A blue
- Colour
- #3b82f6
HEX
#3B82F6
RGB: rgb(59, 130, 246)
HSL: hsl(217, 91%, 60%)
HSV / HSB: 217°, 76%, 96%
How it works
#3B82F6 splits into three pairs: 3B, 82 and F6, which are 59, 130 and 246 in decimal, so the colour is rgb(59, 130, 246). HSL describes the same colour as a hue angle (217°), saturation (91%) and lightness (60%), which is easier to adjust by hand. Short HEX (#f80) and eight-digit HEX with transparency (#3b82f680) are accepted.
The contrast ratios apply the WCAG 2.x formula: text needs at least 4.5:1 against its background for level AA (3:1 for large text, 7:1 for AAA). Check how your colour reads on white and on black before using it for text. For styling code see the CSS Formatter and HTML Formatter.
Assumptions and limits
- sRGB colours only. HEX, RGB and HSL are rounded to whole numbers for display.
Related tools
CSS FormatterFormat CSS with consistent indentation, or minify it, with errors that give the line number.HTML FormatterIndent and tidy HTML without changing its tags, attributes or text.QR Code GeneratorMake a QR code for a link, text, contact, email, phone or SMS, as PNG or SVG.Base64 Encode and DecodeEncode text to Base64 or decode Base64 to text, with URL-safe output and full Unicode support.Case ConverterConvert text to UPPER, lower, Title, Sentence, camel, Pascal, snake, kebab and CONSTANT case.Contrast CheckerCheck the contrast ratio of text and background colours against WCAG AA and AAA.