Color Converter

About Color Converter

The Four Colour Formats

Format	Structure	Example (blue)	Range
HEX	#RRGGBB	#3B82F6	00-FF per channel (0-255)
RGB	rgb(R, G, B)	rgb(59, 130, 246)	0-255 per channel
HSL	hsl(H, S%, L%)	hsl(217, 91%, 60%)	H: 0-360, S: 0-100%, L: 0-100%
CMYK	C M Y K %	C:76 M:47 Y:0 K:4	0-100% per channel

HEX, RGB, and HSL all describe the same sRGB colour in different notation. CMYK is a subtractive model used for print, where values represent ink coverage percentages rather than light emission. Converting from RGB to CMYK is an approximation - the actual output depends on the printer profile, paper, and ink set, so most print shops expect files in a specific CMYK profile like US Web Coated SWOP v2 or FOGRA39 rather than a generic RGB-to-CMYK guess.

When to Use Each Format

Format	Best For	Advantage	Disadvantage
HEX	CSS stylesheets, design tokens	Compact, widely recognised, easy to copy/paste	Hard to mentally adjust colours
RGB	Precise channel control, image processing	Maps directly to how screens display colour	Adjusting brightness means changing all 3 values
HSL	Creating palettes, tints, shades	Hue is separate from brightness - easy to create variations	Less common in older codebases

HSL is particularly useful when you need a lighter or darker version of a colour. To make #3B82F6 lighter, you would need to figure out the right RGB values. In HSL, just increase the L (lightness) value: hsl(217, 91%, 60%) becomes hsl(217, 91%, 80%) for a pale version.

How Colour Conversion Works

HEX and RGB are the same information in different notation - hex is just the RGB values written in base-16. Converting between them is straightforward: hex 3B = decimal 59, hex 82 = decimal 130, hex F6 = decimal 246.

Conversion	Method
HEX to RGB	Convert each pair of hex digits to decimal (0-255)
RGB to HEX	Convert each decimal value (0-255) to two-digit hex
RGB to HSL	Find min/max channels, compute hue angle, saturation, and lightness
HSL to RGB	Apply the HSL-to-RGB algorithm (involves chroma and hue sector calculation)
RGB to CMYK	Normalise each channel to 0-1, compute K = 1 - max(R,G,B), then C = (1-R-K)/(1-K), M = (1-G-K)/(1-K), Y = (1-B-K)/(1-K)

Worked example - #3B82F6 to HSL: First convert hex to RGB: 3B = 59, 82 = 130, F6 = 246. Normalise to 0-1: R = 0.231, G = 0.510, B = 0.965. The max is B (0.965), the min is R (0.231), so lightness L = (0.965 + 0.231) / 2 = 0.598, which is 59.8% (rounds to 60%). Since L > 0.5, saturation S = (max - min) / (2 - max - min) = 0.734 / 0.804 = 0.913, or 91%. Hue falls in the "blue is max" sector, so H = ((R - G) / (max - min) + 4) / 6 = (-0.380 + 4) / 6 = 0.603, which is 217 degrees on the colour wheel. The final HSL: hsl(217, 91%, 60%). Running #3B82F6 through the converter above produces the same values.

Worked example - RGB(59, 130, 246) to CMYK: Normalise: R = 0.231, G = 0.510, B = 0.965. K = 1 - 0.965 = 0.035, which is 4%. C = (1 - 0.231 - 0.035) / (1 - 0.035) = 0.761, so 76%. M = (1 - 0.510 - 0.035) / 0.965 = 0.472, so 47%. Y = (1 - 0.965 - 0.035) / 0.965 = 0, so 0%. CMYK ends up C:76 M:47 Y:0 K:4 - a blue with very little yellow ink, which matches the screen colour.

CSS Colour Format Reference

CSS Syntax	Example	Browser Support
#RRGGBB	#3B82F6	All browsers
#RGB (shorthand)	#38F (expands to #3388FF)	All browsers
#RRGGBBAA	#3B82F680 (50% opacity)	All modern browsers
rgb(R, G, B)	rgb(59, 130, 246)	All browsers
rgb(R G B / A)	rgb(59 130 246 / 0.5)	All modern browsers
hsl(H, S%, L%)	hsl(217, 91%, 60%)	All browsers
hsl(H S% L% / A)	hsl(217 91% 60% / 0.5)	All modern browsers
Named colours	cornflowerblue	All browsers (148 named colours)
oklch(L C H)	oklch(0.65 0.2 250)	Chrome 111+, Safari 15.4+, Firefox 113+

Common Colour Values

Colour	HEX	RGB	HSL
White	#FFFFFF	rgb(255, 255, 255)	hsl(0, 0%, 100%)
Black	#000000	rgb(0, 0, 0)	hsl(0, 0%, 0%)
Red	#FF0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)
Green	#00FF00	rgb(0, 255, 0)	hsl(120, 100%, 50%)
Blue	#0000FF	rgb(0, 0, 255)	hsl(240, 100%, 50%)
Tailwind blue-500	#3B82F6	rgb(59, 130, 246)	hsl(217, 91%, 60%)
Tailwind red-500	#EF4444	rgb(239, 68, 68)	hsl(0, 84%, 60%)

How Does Shorthand HEX Work?

Three-character HEX expands by doubling each character, so #38F becomes #3388FF rather than #380F00 or #0308F0. This is mandated by the CSS Color Module Level 3 specification from the W3C. The converter above expands shorthand automatically before computing RGB and HSL. Shorthand only works when each channel's two hex digits are identical - #FFF, #0F6, #ABC all work, but #3B82F6 cannot be shortened because no pair of its digits repeats.

Eight-character HEX like #3B82F680 adds an alpha channel for opacity. The last two digits are the alpha byte: 00 is fully transparent, FF is fully opaque, 80 is 50%, 40 is 25%, and C0 is 75%. Four-character shorthand like #38F8 expands to #3388FF88, which is a light blue at 53% opacity.

Colour Spaces Beyond sRGB

Colour Space	CSS Function	Advantage
sRGB	rgb(), hsl()	Universal support, standard for web
Display P3	color(display-p3 R G B)	25% wider gamut - more vivid reds, greens
OKLCH	oklch(L C H)	Perceptually uniform - equal lightness steps look equal to human eyes
OKLAB	oklab(L a b)	Perceptually uniform, good for gradient interpolation

OKLCH reached full cross-browser baseline in 2026, with roughly 93% global support after adoption in Chrome 111 (March 2023), Safari 15.4 (March 2022), Firefox 113 (May 2023), and Edge 111. It is now safe for production use without fallbacks for most audiences. Display P3 covers about 45.5% of the visible colour space against sRGB's 35.9% - roughly 25% more gamut, with most of the gain in vivid greens and reds per ColorFYI measurements.

OKLCH is gaining popularity because adjusting lightness or chroma produces predictable results. In HSL, two colours with the same L value can look very different in perceived brightness - yellow at hsl(60, 100%, 50%) looks far brighter than blue at hsl(240, 100%, 50%) even though both report 50% lightness. OKLCH uses the Oklab perceptual model, so L of 0.7 looks equally bright whether the hue is yellow or blue.

What Are the Common Mistakes?

• Treating CMYK output as print-ready. The generic RGB-to-CMYK formula above ignores the printer's ICC profile. For real print jobs, convert in Photoshop, Illustrator, or Affinity using the specific CMYK profile your printer requires.
• Assuming HSL lightness matches perceived brightness. HSL is a maths transform of RGB, not a perceptual space. Use OKLCH if equal lightness steps need to look equal.
• Dropping the hash from HEX. Most CSS parsers accept #3B82F6 but reject 3B82F6. The converter above tolerates both, but when pasting into a stylesheet always include the hash.
• Using hex alpha (#RRGGBBAA) in legacy environments. Internet Explorer 11 and older Android WebViews don't support hex alpha - use rgba() or rgb() with / alpha instead if you still need to support them.
• Mixing colour spaces in gradients. A gradient from red to green in sRGB passes through a muddy brown midpoint. Use linear-gradient(in oklch, red, green) to avoid the grey band.

What About Named CSS Colours?

CSS currently ships 148 named colours - 16 from the original HTML 4 specification (black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua) plus the extended X11 palette (tomato, cornflowerblue, rebeccapurple, gainsboro, and so on). Named colours map to specific HEX values - tomato is #FF6347, cornflowerblue is #6495ED, rebeccapurple is #663399. The converter above accepts HEX, RGB, and HSL but not named colours directly - if you want to convert a named colour, look up its HEX equivalent first or paste the HEX directly. All 148 names are case-insensitive in CSS, so TOMATO, Tomato, and tomato render identically.

Named colours are handy for prototyping but fall out of favour in production design systems because they cannot be tuned. A team using a design token system will typically define tokens like --color-primary: #3B82F6 in HEX or OKLCH so each shade can be adjusted globally. Named colours also lack alpha channels - there is no way to make "tomato" 50% transparent without switching to rgba() or #FF634780.

Accessibility and Contrast

Colour choice matters for accessibility. WCAG 2.2 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold) against the background. Pure Tailwind blue-500 (#3B82F6) against white scores 3.68:1 - fine for large headings but too low for body text. Drop to blue-600 (#2563EB) for 4.55:1, or blue-700 (#1D4ED8) for 7.1:1 against white.

After picking a colour with this converter, check the pair against background colour in the Colour Contrast Checker before shipping. For designers building a full scheme from a starting colour, the Colour Palette Generator produces complementary, analogous, and triadic schemes automatically. Developers working with a CSS variable or design token system can also pipe the HEX output into the Colour Picker to sample variations.

Sources

• MDN - CSS color value reference
• W3C - CSS Color Module Level 3
• W3C - CSS Color Module Level 4 (oklch, color())
• Can I Use - OKLCH browser support
• W3C WAI - WCAG 2.2 Contrast (Minimum)
• ColorFYI - sRGB vs Display P3 gamut coverage