Color Converter
Convert any colour between HEX, RGB, HSL, HSV, CMYK and the 148 CSS colour names. Every field is two-way: edit whichever one you have and the rest follow instantly. Includes alpha support, WCAG contrast against white and black, the nearest named colour, and derived tints, shades and complements. Everything runs in your browser. Free, no signup.
Contrast
Related colours — click to load
How to Use This Tool
- Enter a colour in any format — type a hex code, an rgb() or hsl() string, a CSS name like rebeccapurple, or use the picker.
- Watch every other format update — all six fields stay in sync, so you can paste from a design file and read out whichever format your code needs.
- Check the contrast — see the WCAG ratio against both white and black, with AA, AA large and AAA pass or fail at a glance.
- Copy the format you need — each row has its own copy button, and the related colours below give you tints, shades and the complement.
About Colour Formats
Every colour format on this page describes the same thing in a different language, and each one exists because it is convenient for a particular job. HEX and RGB describe how much red, green and blue light to mix, which is exactly how a screen works. They are compact, universally supported and precise, but they are almost impossible to reason about: nothing in the value #0070E0 tells you what happens if you want that colour slightly lighter, or what its complement is. They are a storage format, not a thinking format.
HSL and HSV are the thinking formats. Both separate hue, an angle from 0 to 360 around the colour wheel, from saturation and a brightness dimension. That makes them enormously more useful for design work: rotating the hue by 180 degrees gives you the complement directly, and adjusting lightness gives you a tint or shade without disturbing the colour identity. The difference between the two is the third channel. HSL lightness runs from black at 0 through the pure hue at 50 to white at 100. HSV value runs from black at 0 to the pure hue at 100 and never reaches white, which is why HSV suits colour pickers and HSL suits CSS.
CMYK is the odd one out because it is subtractive rather than additive. Screens emit light, so mixing full red, green and blue gives white. Print absorbs light, so mixing cyan, magenta and yellow ink gives a muddy near-black, which is why a separate key black plate exists. This matters practically: the conversion shown here is a naive device-independent formula, and it is a starting point rather than an answer. Real print work needs an ICC profile for the specific press, ink and paper. Bright screen colours in the blue-green range simply cannot be reproduced in CMYK at all, which is why a vivid brand colour often looks dull on a printed brochure.
Alpha is supported across three of these formats and is worth understanding. Eight-digit hex appends two characters for opacity, so #0070E080 is the same blue at 50 percent. The functional forms rgba() and hsla() take a fourth value from 0 to 1, and modern CSS also accepts a slash syntax inside plain rgb() and hsl(). Note that transparency is not a property of the colour so much as a compositing instruction: the final appearance depends entirely on what sits behind it, which is why a semi-transparent colour can pass a contrast check on one background and fail badly on another.
The 148 CSS named colours are a historical curiosity that turns out to be genuinely useful. They descend from the X11 window system colour list, which is why the set is so eccentric: it contains four shades of grey spelled two ways, both burlywood and papayawhip, and a colour named rebeccapurple added in 2014 in memory of the daughter of a web standards figure. They are readable in code and fine for prototyping, but they are not a design system. If a name happens to match your brand colour exactly it is a coincidence, so use them for quick work and explicit values for anything that ships.
Pair this with our Color Palette Generator to build a full harmony from one colour, the CSS Gradient Generator to blend between them, and the Box Shadow Generator for matching depth.
Frequently Asked Questions
What is the difference between HEX, RGB and HSL?
They encode the same colour in different ways. HEX and RGB both describe how much red, green and blue light to mix, with HEX writing it as a compact hexadecimal string and RGB writing it as three numbers from 0 to 255. They are identical in what they can express and converting between them loses nothing. HSL is different in kind: it stores hue as an angle on the colour wheel, plus saturation and lightness percentages. That makes HSL far easier to reason about, since you can lighten a colour or find its complement by changing one number, whereas doing the same in HEX means recalculating all three channels.
What is the difference between HSL and HSV?
They share the hue and saturation concepts but differ in the third channel, and the distinction trips people up constantly. In HSL, lightness runs from black at 0 through the fully saturated pure hue at 50 to white at 100, which makes it symmetric and natural for generating tints and shades. In HSV, value runs from black at 0 to the pure hue at 100 and never reaches white at all; to get white in HSV you drop saturation to zero. HSV maps better onto how colour pickers are drawn, which is why design tools use it, while CSS uses HSL because tints and shades are what stylesheets need.
Why do my CMYK values look wrong compared with my print shop?
Because a device-independent formula, which is what this and most online converters use, cannot know anything about your press. Real CMYK conversion depends on an ICC profile describing the specific printing process, ink set and paper stock, and professional tools apply that profile along with black generation and ink limit settings. Treat the values here as an approximate starting point for a conversation, not a specification. There is also a hard physical limit: the CMYK gamut is smaller than the RGB one, so vivid screen colours, especially bright blues, greens and oranges, have no exact printed equivalent and will always shift.
How does an 8-digit hex code work?
The last two characters are the alpha channel, expressed in hexadecimal from 00 for fully transparent to FF for fully opaque. So #0070E0FF is the same as #0070E0, while #0070E080 is that blue at roughly 50 percent opacity, since 0x80 is 128 out of 255. There is also a four-digit shorthand that expands the same way three-digit hex does, so #07E8 becomes #0077EE88. Support is universal in modern browsers. The main caveat is that designers often expect opacity as a percentage, and the hexadecimal mapping is not intuitive: 50 percent is 80, not 50.
Are CSS colour names reliable to use in production?
They are perfectly reliable in the sense that all 148 are precisely defined and render identically everywhere. Whether they are appropriate is a different question. The list is a historical accident inherited from the X11 window system, which is why it contains oddities like papayawhip and burlywood, duplicate spellings for grey and gray, and a colour named rebeccapurple added in 2014 as a memorial. They are readable and convenient for prototyping, debugging and quick demos. For production work, use explicit values from your design system, because a named colour that happens to match your brand is coincidence rather than intent.
How precise are these conversions?
HEX, RGB, HSL and HSV conversions are mathematically exact and fully reversible, so you can round-trip a colour through all of them and get the original back. The only loss comes from display rounding, since HSL hue is shown as a whole number of degrees and saturation and lightness to one decimal place. CMYK is the exception: the conversion is a simple device-independent formula, it is not reversible in a meaningful sense, and it takes no account of ink, paper or press. Round-tripping RGB to CMYK and back will usually return the original value, but that says nothing about what will actually print.
Which format should I use in my CSS?
For most work, use whichever your design system defines and stay consistent. HEX is the most common and the most compact, which makes it a fine default for fixed values. HSL is the better choice when you are generating variations in code, because deriving a hover state or a disabled state is a single-number change rather than a recalculation. Functional rgb() and hsl() are also the only forms that let you interpolate cleanly in custom properties. If you need transparency, rgba() and hsla() are the clearest to read, though 8-digit hex is equally valid and slightly shorter.
What do the contrast ratios mean?
They express how different two colours are in perceived brightness, calculated from relative luminance as defined by WCAG. The scale runs from 1:1 for identical colours to 21:1 for pure black on pure white. The thresholds that matter for text are 4.5:1 for normal body copy at level AA, 3:1 for large text at AA, and 7:1 for normal text at the stricter AAA level. Showing the ratio against both white and black at once is useful because it immediately tells you which direction your colour works in: a mid-tone that fails on white often passes comfortably on black, and vice versa.