orbitHow to use the color picker
Click the colour field to open your system’s colour selector and choose a colour. The HEX, RGB and HSL values appear instantly. Press Copy to copy all three formats together. On most computers the selector also has an eyedropper, which lets you pick any colour visible on your screen.
Understanding colour codes
HEX (for example #8C80FF) is the most common way to write colours on the web. The three pairs of characters are the red, green and blue values in hexadecimal, from 00 to FF.
RGB (for example rgb(140, 128, 255)) describes the same colour as three numbers from 0 to 255 for red, green and blue light. Design tools, office programs and many APIs use it.
HSL (for example hsl(246, 100%, 75%)) stands for hue, saturation and lightness. The hue is a position on the colour wheel from 0 to 360°, saturation is the intensity, and lightness goes from black to white. HSL is the easiest format for creating related shades: keep the hue and change only the lightness.
Using the codes
- CSS:
color: #8C80FF;orbackground: hsl(246 100% 75%); - Design apps such as Figma, Canva or Photoshop accept HEX directly.
- Word, PowerPoint and Google Docs offer custom colours by HEX or RGB.
Before using two colours for text and background, check that they are readable with the Contrast checker.
Frequently asked questions
Why are the HSL numbers rounded?
They are rounded to whole numbers for readability. Converting rounded HSL back to HEX can therefore differ by one step; for exact colours use the HEX or RGB value.
What about CMYK for printing?
CMYK depends on the printer, paper and colour profile, so a single conversion would be misleading. Ask your print shop which profile to use and convert in your design program.