—
—
—
—
Contrast (WCAG 2.1)
Tints & shades (click to use)
Edit any field — HEX, RGB, HSL or the colour picker — and all other formats update instantly, with ready-to-paste CSS values.
How to use the Color Code Converter
- 1 Pick a colour, or type/paste any HEX, RGB or HSL value.
- 2 All formats and the swatch update live.
- 3 Check text contrast and click a tint or shade to explore variations.
Formula
HEX #RRGGBB = R, G, B in base 16 L = (max + min) ÷ 2, S = Δ ÷ (1 − |2L − 1|) Contrast = (L₁ + 0.05) ÷ (L₂ + 0.05)
Worked examples
Input: #6366F1
Result: rgb(99, 102, 241) · hsl(239, 84%, 67%)
HEX, RGB and HSL
- HEX is compact and the most common format in design tools and CSS.
- RGB describes how much red, green and blue light to mix (0–255 each).
- HSL — hue, saturation, lightness — is the most intuitive for creating variations: change only the lightness to get tints and shades.
- CMYK approximates print inks. Exact print colours depend on the printer's colour profile.
WCAG contrast requirements
| Level | Normal text | Large text |
|---|---|---|
| AA | 4.5 : 1 | 3 : 1 |
| AAA | 7 : 1 | 4.5 : 1 |
Frequently asked questions
How do I convert HEX to RGB?
Split the six digits into pairs and convert each from hexadecimal: #6366F1 → 63, 66, F1 → 99, 102, 241.
What does 3-digit HEX mean?
Shorthand where each digit is doubled: #F80 = #FF8800.
Is CMYK conversion exact?
No. It is a device-independent approximation; professional print work uses ICC colour profiles.
Related tools
JSON Formatter & Validator
Format, beautify, minify and validate JSON with syntax highlighting, key sorting and precise error locations.
Base64 Encoder
Encode text to Base64 (UTF-8 safe), with URL-safe and MIME line-wrapping options.
Base64 Decoder
Decode Base64 and URL-safe Base64 back to UTF-8 text, with clear errors for invalid input.
URL Encoder / Decoder
Percent-encode or decode URLs and query parameters, as a component or a full URI.
HTML Entity Encoder / Decoder
HTML entity encoder and decoder: escape special characters to entities, or decode named and numeric entities back to text.
Regex Tester
Regex tester for JavaScript regular expressions: live match highlighting, capture groups and replace preview.