Color Converter: HEX, RGB, HSL, CMYK, OKLCH and More

Type or paste a colour in the box above and this color converter shows it in sixteen formats at once, each with its own Copy button. You can write it almost any way you like: #2563EB, rgb(37 99 235), hsl(221 83% 53%), cmyk(84%, 58%, 0%, 8%), oklch(54.6% 0.215 262.9) or a name such as tomato. The swatch next to the box opens your system colour picker if you would rather choose by eye.

Under the list you also get the nearest CSS colour name, the nearest Tailwind class, a WCAG contrast check against any background, a scale of tints and shades from 50 to 950, and a box for converting many colours at once. Everything is worked out in your browser, so it is instant and nothing is sent anywhere.

A HEX code is just three numbers written in base 16. In #2563EB, the pairs 25, 63 and EB are red, green and blue. 25 in hexadecimal is 2 × 16 + 5 = 37, 63 is 6 × 16 + 3 = 99, and EB is 14 × 16 + 11 = 235. So #2563EB = rgb(37 99 235). A hex to rgb converter does nothing more than this, but it saves you the arithmetic and the typos.

Short codes are expanded first: #F80 becomes #FF8800, and a four-digit code such as #F808 also carries transparency. The # is optional, so 2563eb works too, and upper or lower case makes no difference.

Going the other way, each of the three numbers from 0 to 255 is written as two hexadecimal digits and the three pairs are joined. 37 becomes 25, 99 becomes 63 and 235 becomes EB, giving #2563EB. Numbers below 16 get a leading zero, so 5 becomes 05.

This rgb to hex converter accepts the modern space syntax rgb(37 99 235), the older comma syntax rgb(37, 99, 235), rgba() with a fourth value, percentages such as rgb(100% 0% 0%), and plain triples like 37 99 235 or 37,99,235 with no function name at all. Values with decimals are rounded for the HEX code.

This color converter online reads nearly every way of writing a colour that you meet in CSS, design tools and code: HEX with 3, 4, 6 or 8 digits; rgb() and rgba(); hsl() and hsla(); hsv() or hsb(); hwb(); cmyk() or four plain numbers; lab(), lch(), oklab() and oklch(); 0xAARRGGBB values from Android and Flutter; common CSS names such as steelblue or rebeccapurple; and plain number triples.

Hue angles can be given in degrees, turns or radians, and a trailing semicolon copied from a stylesheet is ignored. Transparency can be written after a slash, as in rgb(37 99 235 / 0.5), or as the fourth value of rgba() and hsla().

The output list has sixteen rows: HEX, RGB, RGB (comma), HSL, HSV / HSB, HWB, CMYK, Lab, LCH, OKLab, OKLCH, RGB 0–1, Android / Flutter, Swift (UIColor), .NET and Decimal. Swift, .NET, RGB 0–1 and Decimal are outputs only; they cannot be typed in.

CMYK describes a colour as cyan, magenta, yellow and black ink, so it is the format printers and print shops ask for. When you use this color converter to CMYK, keep one thing in mind: the result is a plain screen conversion from RGB, not a conversion through an ICC print profile.

Real print colour depends on the paper, the inks and the press, and a print profile such as one for coated or uncoated paper changes the numbers quite a lot. Bright screen colours like pure blue or neon green often cannot be printed at all. Use the CMYK row as a starting point, and for important print jobs let your design program or printer convert with the right profile and check a proof.

Pantone and paint brand colours are licensed and are not converted here. If a brand guide gives you a Pantone number, use the HEX or RGB value it lists next to it.

The rgb to cmyk formula used here is simple. First each channel is divided by 255, so it runs from 0 to 1. Black is K = 1 − the largest of the three. Then cyan is (1 − R − K) ÷ (1 − K), magenta is (1 − G − K) ÷ (1 − K) and yellow is (1 − B − K) ÷ (1 − K), all shown as percentages.

For #FF0000 the largest channel is 1, so K is 0, cyan is 0 and magenta and yellow are 100%: cmyk(0%, 100%, 100%, 0%). For #2563EB the largest channel is 235 ÷ 255 = 0.922, so K is 7.8% and the result is cmyk(84.3%, 57.9%, 0%, 7.8%). Pure black is always cmyk(0%, 0%, 0%, 100%). You can also type CMYK in, as cmyk(84%, 58%, 0%, 8%) or just 84 58 0 8, and get the screen colour back.

OKLab and OKLCH are newer colour spaces built so that equal steps look like equal changes to the eye. OKLCH gives lightness as a percentage, chroma (how colourful) as a small number, and hue as an angle. Modern CSS supports it directly, and Tailwind CSS v4 defines its whole palette with it. That is why a color converter OKLCH output is now one of the most useful rows for front-end work.

#2563EB comes out as about oklch(54.6% 0.215 262.9). To make a lighter or darker version with the same feel, change only the first number; to make it calmer, lower the second. OKLab shows the same colour as lightness plus two axes, a and b.

Lab and LCH are the older CIE versions. Here they use the D50 white point, the same way CSS lab() and lch() do, so the values match what browsers expect. Pure red, for example, is about lab(54.3 80.8 69.9).

Lab, LCH, OKLab and OKLCH can describe colours that no normal screen can show. If you type one, the hint says it is outside the sRGB range and it is shown as the closest screen colour, with each channel clipped to 0–255. All other formats are then worked out from that screen colour.

HSL means hue, saturation and lightness. Hue is the position on the colour wheel from 0 to 360 degrees: 0 is red, 120 green and 240 blue. Saturation is how strong the colour is, and lightness runs from black at 0% through the pure colour at 50% to white at 100%. Going from hex to hsl lets you make hover and pressed states by changing one number instead of guessing a new code.

HSV, also called HSB, uses value or brightness instead of lightness: 100% brightness is the full colour, not white. Many design apps use HSB in their colour pickers. HWB, also in CSS, describes the same hue with an amount of white and black mixed in. For #FF0000 all three agree on hue 0: hsl(0 100% 50%), hsv(0, 100%, 100%) and hwb(0 0% 0%).

HSL values are shown with one decimal place, such as hsl(221.2 83.2% 53.3%), so a round trip back to HEX lands on the same code. If you round them to whole numbers yourself, the colour can shift by one step in a channel.

The Names card shows the closest colour from the default Tailwind CSS v4 palette, all 286 shades from the 50 to the 950 steps, with ready class names: bg-blue-600, text-blue-600 and border-blue-600, for example. The color converter Tailwind match is measured in OKLab, which follows how different two colours look rather than how different their numbers are.

It says exact when your colour is a palette colour and nearest when it is only close. #2563EB was blue-600 in Tailwind v3, but v4 redefined blue-600 in OKLCH as a slightly more vivid colour, so #2563EB is now shown as nearest blue-600. If you need the exact shade, use an arbitrary value such as bg-[#2563EB] or add your own colour to the theme.

The Tints and shades (50–950) card builds your own scale in the same style: eleven steps from very light to very dark through your colour, kept in the same hue. Click any step to make it the active colour, or press Copy to get all eleven as CSS variables named --color-brand-50 to --color-brand-950, ready to paste into a stylesheet or a Tailwind v4 @theme block.

Transparency, or alpha, says how much of the background shows through: 1 or 100% is solid and 0 is fully see-through. In HEX it is a fourth pair of digits, so #2563EB80 is the same blue at 128 out of 255, about 50%. Converting hex to rgba gives rgba(37, 99, 235, 0.502) in the comma style, or rgb(37 99 235 / 0.502) in the modern style that all current browsers accept.

The Transparency (alpha) slider under the box sets alpha from 0 to 100% and rewrites the colour as an eight-digit HEX code. Every row that supports alpha updates with it: HSL, HWB, Lab, LCH, OKLab and OKLCH get a / value, Android and .NET put alpha first, and Swift sets the alpha argument. HSV and CMYK have no alpha, so they show only the solid colour.

The swatch is drawn over a checkerboard, so you can see how transparent the colour is. Note that Android and Flutter write alpha first (0x802563EB), while CSS writes it last (#2563EB80).

The Contrast check (WCAG) card measures how readable your colour is as text on a background. White is the default background; type any other colour in the background box or pick one with its swatch, and use ⇄ Swap to switch text and background. A sample text shows the pair, and the ratio is shown from 1:1 (no contrast) to 21:1 (black on white).

Five rows show pass or fail: AA normal text needs 4.5:1, AA large text 3:1, AAA normal text 7:1, AAA large text 4.5:1, and UI parts and icons 3:1. Large text means about 24 px, or about 19 px if bold. #2563EB on white scores 5.17:1, so it passes everything except AAA normal text. Pure red #FF0000 on white scores only 4.00:1 and fails AA for normal text.

When the ratio is below 4.5:1, the card suggests the closest shade that passes AA, and the closest that passes AAA when one exists. These keep your hue and only move lightness, darker on light backgrounds and lighter on dark ones. Click a suggestion to load it. Contrast is checked with the solid colour, so transparency is not blended into the background.

Developers often need the same colour in several languages. The Android / Flutter row gives a 32-bit value with alpha first, such as 0xFF2563EB, which works for Color(0xFF2563EB) in Flutter and for colour ints in Android code. You can also paste a 0xAARRGGBB value into the box to convert it back.

The Swift (UIColor) row writes UIColor(red: 0.145, green: 0.388, blue: 0.922, alpha: 1), with each channel from 0 to 1. The .NET row writes Color.FromArgb(255, 37, 99, 235). RGB 0–1 gives the same channels with four decimals for shaders, Unity or game engines, and Decimal gives the colour as one whole number, 2450411 for #2563EB, which some spreadsheets, databases and chat bots expect.

To convert a whole list, open Convert many colours, paste one colour per line on the left and choose the target under Convert to: HEX, RGB, RGB (comma), HSL, CMYK, OKLCH or Lab. The right side updates as you type, in the same order, so you can copy the whole column into a stylesheet, a spreadsheet or a design token file.

Lines can be in mixed formats: a HEX code, an rgb() value and a CSS name can sit next to each other. Empty lines are skipped, and any line that is not understood shows — not a colour, so you can spot typos at once. Up to 2,000 lines are converted at a time.

This color converter free to use needs no account, no email and no app. There is no limit on how many colours you convert and no premium tier with extra formats: everything on this page is available to everyone.

It can be free because your own browser does the maths. Colour conversion is a tiny job for any phone or computer, so there is no server to pay for and nothing to wait for. Once the page has loaded it keeps working even if your connection drops.

Every conversion in this color converter happens in your browser with plain arithmetic. No colour, no list and no background value is sent to our server. Only the page itself loads from our site, and your last colour and background are kept in your browser's own storage, which you can clear at any time.

Whatever you type into the color converter is turned into one sRGB value with alpha, and every format is worked out from that. HSL, HSV and HWB come from simple geometry on the RGB cube. Lab and LCH go through the CIE XYZ space with the D50 white point, as in CSS. OKLab and OKLCH follow Björn Ottosson's published formulas. The nearest CSS name is found by the smallest ΔE distance, and the nearest Tailwind colour by distance in OKLab.

Need more than one colour? Color Palette Generator builds matching palettes from a base colour, and Gradient Generator turns two or more colours into CSS gradients. To grab a colour from a photo or screenshot, use Color Picker, then paste the value here. Invert Colors flips the colours of a whole picture.