Color Converter – HEX to RGB, HSL, HSV & CMYK

🎨 Color Converter

Convert any colour between HEX, RGB, HSL, HSV and CMYK, check its contrast for accessibility and build a palette of tints and shades.

Quick answer: #3B82F6 is rgb(59, 130, 246), hsl(217, 91%, 60%) and cmyk(76%, 47%, 0%, 4%); its contrast ratio is 3.68:1 on white (AA for large text only) and 5.71:1 on black (AA).

Updated October 2026 · Free · No sign-up · Works on any device

Colour

#3B82F6

rgb(59, 130, 246)

White text 3.68:1Black text 5.71:1

HEX	#3B82F6
RGB	rgb(59, 130, 246)
HSL	hsl(217, 91%, 60%)
HSV / HSB	hsv(217, 76%, 96%)
CMYK	cmyk(76%, 47%, 0%, 4%)

Contrast with white: 3.68:1 · AA large text only
Contrast with black: 5.71:1 · AA
Best text colour: Black

Tints (mixed with white)

Tint	Colour	RGB	HSL
Base	#3B82F6	rgb(59, 130, 246)	hsl(217, 91%, 60%)
10%	#4F8FF7	rgb(79, 143, 247)	hsl(217, 91%, 64%)
20%	#629BF8	rgb(98, 155, 248)	hsl(217, 91%, 68%)
30%	#76A8F9	rgb(118, 168, 249)	hsl(217, 92%, 72%)
40%	#89B4FA	rgb(137, 180, 250)	hsl(217, 92%, 76%)
50%	#9DC1FB	rgb(157, 193, 251)	hsl(217, 92%, 80%)
60%	#B1CDFB	rgb(177, 205, 251)	hsl(217, 90%, 84%)
70%	#C4DAFC	rgb(196, 218, 252)	hsl(216, 90%, 88%)
80%	#D8E6FD	rgb(216, 230, 253)	hsl(217, 90%, 92%)
90%	#EBF3FE	rgb(235, 243, 254)	hsl(215, 90%, 96%)

Shades (mixed with black)

Shade	Colour	RGB	HSL
Base	#3B82F6	rgb(59, 130, 246)	hsl(217, 91%, 60%)
10%	#3575DD	rgb(53, 117, 221)	hsl(217, 71%, 54%)
20%	#2F68C5	rgb(47, 104, 197)	hsl(217, 61%, 48%)
30%	#295BAC	rgb(41, 91, 172)	hsl(217, 62%, 42%)
40%	#234E94	rgb(35, 78, 148)	hsl(217, 62%, 36%)
50%	#1E417B	rgb(30, 65, 123)	hsl(217, 61%, 30%)
60%	#183462	rgb(24, 52, 98)	hsl(217, 61%, 24%)
70%	#12274A	rgb(18, 39, 74)	hsl(218, 61%, 18%)
80%	#0C1A31	rgb(12, 26, 49)	hsl(217, 61%, 12%)
90%	#060D19	rgb(6, 13, 25)	hsl(218, 61%, 6%)

WCAG contrast requirements

Level	Normal text	Large text (18pt+ or 14pt bold)	On white	On black
AA	4.5:1	3:1	Large only	Pass
AAA	7:1	4.5:1	Fail	Large only

</> Embed this calculator on your website – free, no sign-up, no ads inside

Copy this code into any web page, blog post or CMS (WordPress, Wix, Squarespace, Webflow…). It stays up to date automatically, works on mobile and picks your visitor's currency.

<iframe src="https://calcbright.com/embed/color-converter" title="Color Converter by CalcBright" width="100%" height="620" style="border:0;max-width:760px" loading="lazy"></iframe>
<p style="font:13px/1.4 sans-serif;margin:4px 0 0"><a href="https://calcbright.com/color-converter">Color Converter</a> by <a href="https://calcbright.com">CalcBright</a></p>
<script>addEventListener('message',function(e){if(e.origin==='https://calcbright.com'&&e.data&&e.data.cbHeight){document.querySelectorAll('iframe[src^="https://calcbright.com/embed/"]').forEach(function(f){if(f.contentWindow===e.source)f.style.height=e.data.cbHeight+'px'})}})</script>

Preview

How to use the colour converter

Paste a colour in any common format – #3B82F6, #38F, rgb(59, 130, 246), hsl(217, 91%, 60%), hsv(217, 76%, 96%), cmyk(76%, 47%, 0%, 4%) or a basic name such as teal. You get every other format, a swatch, contrast scores and a tints and shades palette.

Conversion formulas

HEX → RGB: each pair of hex digits is one channel, 00–FF = 0–255

CMYK: K = 1 − max(R′, G′, B′) · C = (1 − R′ − K) ÷ (1 − K), likewise M and Y (R′ = R ÷ 255)

HSL: L = (max + min) ÷ 2 · S = (max − min) ÷ (1 − |2L − 1|) · H from the dominant channel

Contrast = (L1 + 0.05) ÷ (L2 + 0.05), using WCAG relative luminance

Worked example

#3B82F6 splits into 3B, 82 and F6 = rgb(59, 130, 246). Blue is the largest channel (0.965), so K = 3.5% and C = (1 − 0.231 − 0.035) ÷ 0.965 = 76%, giving cmyk(76%, 47%, 0%, 4%). In HSL it is hsl(217, 91%, 60%). Its relative luminance is 0.236, so the contrast is 3.68:1 against white and 5.71:1 against black – use black text on it for small type.

Common colours

Colour	HEX	RGB	HSL
Red	#FF0000	255, 0, 0	0°, 100%, 50%
Green	#008000	0, 128, 0	120°, 100%, 25%
Blue	#0000FF	0, 0, 255	240°, 100%, 50%
Orange	#FFA500	255, 165, 0	39°, 100%, 50%
Teal	#008080	0, 128, 128	180°, 100%, 25%
Grey	#808080	128, 128, 128	0°, 0%, 50%

Tips

CMYK values here are a simple device-independent conversion – for professional print, convert with your printer’s ICC profile.
Check contrast for every text/background pair in a design, not just the brand colour.

Frequently asked questions

How do I convert HEX to RGB?

Split the six hex digits into three pairs and convert each from base 16 to decimal. #3B82F6 → 3B = 59, 82 = 130, F6 = 246, so rgb(59, 130, 246).

What is the difference between RGB and CMYK?

RGB mixes red, green and blue light for screens; CMYK mixes cyan, magenta, yellow and black ink for print. Screen colours that are very bright or saturated may not be reproducible in print.

What is the difference between HSL and HSV?

Both describe hue as an angle (0–360°) plus saturation. HSL’s lightness runs from black through the pure colour to white, while HSV’s value (also called HSB brightness) runs from black to the pure colour.

What contrast ratio do I need for accessible text?

WCAG 2 level AA requires 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). Level AAA requires 7:1 and 4.5:1.

What are tints and shades?

A tint is a colour mixed with white, making it lighter; a shade is mixed with black, making it darker. They are a quick way to build a consistent palette from one brand colour.