About the Color Converter
Colours on screens and in print are described in several different systems. Web designers write HEX codes such as #1E90FF, programmers use RGB values, designers often think in HSL or HSV because they match how we describe colours — hue, how vivid, how light — and printers work in CMYK inks. Moving between them by hand means base-16 arithmetic and formulas nobody remembers.
This color converter takes a colour as HEX, RGB or HSL and gives it in every common format: HEX, RGB, HSL, HSV/HSB and CMYK. It also shows the colour's relative luminance and whether white or black text reads better on it, with the contrast ratio.
How to Use the Color Converter
Enter a colour in any of these forms:
HEX, with or without #, in six or three digits: #1E90FF or #1EF.
RGB: rgb(30, 144, 255).
HSL: hsl(210, 100%, 56%).
How Colours Are Converted
HEX → RGB each pair of hex digits is a number from 0 to 255 (base 16)
RGB → HSL lightness = (max + min) ÷ 2
saturation = (max − min) ÷ (1 − |2 × lightness − 1|)
hue from which channel is largest
RGB → HSV value = max, saturation = (max − min) ÷ max
RGB → CMYK K = 1 − max; C = (1 − R − K) ÷ (1 − K), and the same for M and YStep-by-Step Example
#1E90FF (dodger blue)
RGB: 1E = 30, 90 = 144, FF = 255 → rgb(30, 144, 255)
HSL: hue 210°, saturation 100%, lightness 56%
HSV: hue 210°, saturation 88%, value 100%
CMYK: 88% cyan, 44% magenta, 0% yellow, 0% black
Text: black text, contrast 6.49:1 (white would be 3.24:1)Understanding the Colour Models
HEX and RGB describe how much red, green and blue light a screen emits, each from 0 to 255. HEX is simply RGB written in base 16, two digits per channel, which is why it is compact and popular in web code.
HSL — hue, saturation, lightness — describes colour the way people talk about it. Hue is the position on the colour wheel in degrees (0 red, 120 green, 240 blue), saturation how vivid it is, and lightness how close to black or white. It makes it easy to create lighter or darker shades of the same colour by changing just lightness.
HSV, also called HSB, uses value or brightness instead of lightness. Many design tools' colour pickers use HSV.
CMYK describes the cyan, magenta, yellow and black inks used in printing. Because screens add light and printing subtracts it, some bright screen colours cannot be printed exactly.
Short Hex Codes
A three-digit hex code is shorthand where each digit is doubled: #1EF is #11EEFF and #FFF is white. It only works when both digits of each pair are the same. Eight-digit hex codes add transparency; this converter works with the colour part.
Text on Coloured Backgrounds
A colour's relative luminance shows how bright it looks to the eye, from 0 for black to 1 for white. Green light looks much brighter than blue, so the calculation weights green most heavily. Comparing luminance with white and with black shows which gives more readable text. Many designs put white text on medium blues and greens that are actually more readable with black text; the contrast ratio calculator checks this against accessibility standards.
Colours in Print
The CMYK figures here are a simple mathematical conversion. Real printing uses colour profiles that depend on the printer, inks and paper, so the same CMYK values can look different from one print shop to another. For important print work, ask for the printer's profile and check a physical proof.
Colour Names in CSS
Web browsers understand 148 named colours, such as dodgerblue, tomato, rebeccapurple and slategray, which map to exact hex values: dodgerblue is #1E90FF. Named colours are handy for quick prototypes, but most design systems use hex or HSL values for precise control. Modern CSS also supports newer colour spaces such as OKLCH, which spread colours more evenly for the human eye and are useful for building consistent palettes.
Building a Palette From One Colour
HSL makes it easy to build a set of related colours. Keep the hue and saturation, and change the lightness in steps — for example 95%, 85%, 70%, 56% and 40% — to create light backgrounds, borders, the main colour and dark text shades that all belong together. Rotating the hue by 180 degrees gives the complementary colour, and by 120 degrees gives a triadic scheme.
Colour Blindness
About one in twelve men and one in two hundred women have some form of colour vision deficiency, most often difficulty telling red from green. When choosing colours for charts and status messages, check that they differ in lightness as well as hue, so they remain distinguishable for everyone.
Transparency
Colours can also carry an alpha value for transparency, written as rgba(30, 144, 255, 0.5) or an eight-digit hex code such as #1E90FF80. Semi-transparent colours blend with whatever is behind them, so their final appearance, and their contrast with text, depends on the background they sit on as well as their own values.
Understanding Your Result
HEX gives the colour as a six-digit hex code.
RGB gives the red, green and blue values.
HSL gives hue, saturation and lightness.
HSV / HSB gives hue, saturation and value.
CMYK gives an approximate ink mix for print.
Text colour shows whether white or black text reads better, with the contrast.
When Should You Use This Calculator?
Web design and CSS.
Matching brand colours across tools.
Creating shades of a colour with HSL.
Preparing artwork for print.
Choosing text colours for buttons and banners.
Common Mistakes
Mixing up HSL and HSV.
Expecting printed colours to match the screen exactly.
Using three-digit hex for colours that cannot be shortened.
Forgetting the # sign in CSS.
Putting white text on light or medium colours.