From design to code
Converting a mockup’s colours to HEX or RGB is the mandatory step to get them into the stylesheet.
Convert between HEX, RGB, HSL and CMYK.
🔒 This file is processed in your browser. It is never uploaded anywhere.
…
The same colour is written differently depending on where it will be used, and this tool translates between all of them. HEX is the six-character code common on the web, RGB expresses colour as a mix of red, green and blue, HSL describes it by hue, saturation and lightness, and CMYK is the printing system.
Conversion is needed daily because every program speaks its own dialect. The designer hands over a HEX, the layout tool asks for RGB, the printer works in CMYK and the stylesheet accepts any of the three. Translating by hand is possible but tedious and error-prone.
HSL deserves a special mention because it is the most intuitive for adjusting a colour by eye. Keeping the hue and raising the lightness gives a lighter variant of the same colour, something far harder to achieve by nudging three RGB numbers.
Converting a mockup’s colours to HEX or RGB is the mandatory step to get them into the stylesheet.
Screen colours are defined in RGB, but printing works in CMYK. The conversion gives you the starting point.
Adjusting lightness in HSL produces light and dark versions of a brand colour without losing the hue.
Each context uses a different one: CSS typically uses HEX or RGB, print design uses CMYK, and HSL is more intuitive for adjusting hue and lightness by hand.
It's a standard mathematical RGB→CMYK conversion; for professional printing, your print shop may require a specific, different color profile.