Convert colors between HEX, RGB, HSL, CMYK, and more formats.
The Color Converter takes a HEX color code and shows the same color as RGB and HSL values, next to a swatch so you can see the exact shade. Type or paste a six-digit HEX code and the RGB and HSL fields fill in at once, each with its own copy button. It is built for the moment a designer hands you a HEX code but your CSS needs HSL so you can adjust lightness, or you need the RGB triplet for a library. Everything runs in your browser.
Made for everyone. Typical uses:
The HEX code #ff5733 gives rgb(255, 87, 51) and hsl(11, 100%, 60%), and #10b981 gives rgb(16, 185, 129) and hsl(160, 84%, 39%). A grey such as #808080 shows hsl(0, 0%, 50%), because a grey has no hue or saturation.
Only the HEX field is editable, and it needs a complete six-digit code: shorthand such as #f53 is not recognised, and the RGB and HSL fields show black until the code is complete. There is no CMYK, transparency or named-color support, values are rounded to whole numbers, and the same value can look slightly different on different screens.
Accuracy: Conversions use well-known methods and are tested with real sample inputs. Check the output before you send or publish it.
Expert Tip
If you're tuning a color's lightness for a hover or focus state, convert to HSL first — nudging just the L value up or down keeps the same hue and saturation, which is much harder to do by eye when editing HEX or RGB directly.
The Color Converter has one input and three views of the same colour. You type a HEX code in the first field, and the RGB and HSL fields fill in at once, next to a swatch that shows the shade. Each of the three values has its own copy button. It starts on #3b82f6, a medium blue, which is rgb(59, 130, 246) and hsl(217, 91%, 60%). Only the HEX field is editable. The RGB and HSL fields are outputs.
A HEX code is three pairs of base-16 digits for the red, green and blue channels. In #3b82f6, 3b is 59, 82 is 130 and f6 is 246, which is where rgb(59, 130, 246) comes from. HSL describes the same colour as a hue angle on the colour wheel from 0 to 360, a saturation percentage and a lightness percentage. Blue sits near 217 degrees, the colour is 91 percent saturated and 60 percent light. HSL is easier to reason about, which is why designers prefer it for creating variants of a colour.
These were produced with the same arithmetic the tool uses.
The practical use of HSL is generating related colours. Keep the hue and saturation and change only the lightness. From hsl(217, 91%, 60%), lowering lightness to 50% gives a darker blue for a hover state, and raising it to 90% gives a pale tint for a background. Editing the HEX code by hand to get the same effect means changing all three channels at once. To turn an HSL value back into HEX, use the HSL to RGB Converter and the RGB to HEX Converter.
The field accepts a six-digit HEX code with or without the leading #. Shorthand such as #f53 is not recognised here, and while the field holds anything that is not yet a complete six-digit code, which includes every moment while you are still typing, the RGB and HSL fields show the values for black. This is expected, and they update when the sixth digit arrives. For shorthand codes, use the HEX to RGB Converter, which accepts three-digit codes and shows an error message for a bad value. For RGB, HSL or CMYK input, use the HSL to RGB Converter, the RGB to HEX Converter or the CMYK to RGB Converter.
RGB values are whole numbers, and HSL values are rounded to whole degrees and whole percentages. Converting back and forth can land one step away from the original, so keep the HEX code as your source of truth and copy the HEX from the original design file. The converter works in the sRGB colour space used by web browsers. It does not handle transparency, named colours such as "tomato", or print colour profiles, and a screen shows the same value slightly differently from one device to another.
Once you have a colour, check that text in it is readable with the Color Contrast Checker, pick one visually with the Color Picker, or build a matching set with the Color Palette Generator. To pull the colours out of an existing picture, use the Image Color Extractor.
Explore more in Converters, read the guides and articles, or see how we test our tools.
Convert hex color codes to RGB values instantly.
Best for converting a brand's hex color from a style guide into RGB for a tool that only accepts RGB input
Convert HSL color values to RGB format instantly.
Best for converting an HSL value from a design tool's color picker into RGB for a codebase that expects RGB
Convert RGB color values to hex codes instantly.
Best for converting a brand color from a designer's RGB spec into hex for a CSS stylesheet
Convert CMYK color values to RGB format for digital display.
Best for matching a print brand color to its closest on-screen RGB equivalent for a website
Check color contrast ratios for WCAG compliance.
Best for checking that body text color meets WCAG AA contrast requirements before shipping a website
Pick colors and get HEX, RGB, HSL values.
Best for converting a color between formats for different design tools