Color Converter
Convert any color between HEX, RGB, HSL, HSV, CMYK and CSS color names instantly. Runs entirely in your browser. Nothing is sent to any server.
HEX (#2563eb), rgb(), hsl(), hsv(), cmyk(), oklch(), lab() or a CSS name like rebeccapurple. Alpha is supported.
What is a color converter?
The same color can be written in several notations. HEX and RGB describe it as amounts of red, green and blue light, HSL and HSV describe it by hue, saturation and lightness or value, which is easier to reason about when adjusting a color by hand, OKLCH and Lab describe it in perceptual terms, so equal steps look equally different, and CMYK describes it as the cyan, magenta, yellow and black inks a printer would use. This tool reads a color in any of those formats, or a CSS name, and shows it in all the others at once, along with the closest of the 148 named CSS colors.
Examples
Converting and writing the same color in code:
const hex = "#2563eb";
const [r, g, b] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
// r = 37, g = 99, b = 235color: #2563eb;
color: rgb(37, 99, 235);
color: hsl(221, 83%, 53%);import colorsys
r, g, b = (int("2563eb"[i:i + 2], 16) for i in (0, 2, 4))
h, l, s = colorsys.rgb_to_hls(r / 255, g / 255, b / 255)$brand: #2563eb;
hue($brand) // 221deg
lightness($brand) // 53%UIColor(red: 37 / 255, green: 99 / 255, blue: 235 / 255, alpha: 1)Use Cases
Moving colors between design tools and code
Design tools often show HSB or CMYK while CSS wants HEX, RGB or HSL. Paste the value you have and copy the one you need.
Adjusting a brand color
Read a HEX value as HSL to see its hue, saturation and lightness separately, which makes it obvious how to produce a lighter or less saturated variant.
Preparing colors for print
Get an approximate CMYK breakdown of a screen color as a starting point before matching it in your print workflow.
Naming a color in a stylesheet
Find out whether a color has an exact CSS name, or which named color is closest, when you want a readable placeholder in a prototype.