Web designers work with HEX codes. Graphic designers use CMYK. CSS uses RGB and HSL. Design tools use all of them. Converting between colour formats is a constant task for anyone working in digital design or web development.
Understanding Colour Formats
HEX (#RRGGBB): Used in HTML and CSS. Each pair of characters (00–FF) represents Red, Green, Blue intensity. Example: #FF5733 = red:255, green:87, blue:51. RGB (rgb(R, G, B)): Direct Red, Green, Blue values from 0–255. More readable for developers. HSL (hsl(H, S%, L%)): Hue (colour), Saturation (intensity), Lightness. Most intuitive for designers — adjusting L changes brightness, adjusting S changes vibrancy. CMYK: Used in print design (Cyan, Magenta, Yellow, Black).
How to Convert HEX to RGB
Manual: Split the HEX code into three pairs and convert each from base 16 to base 10. #A3F2B1: A3 = 163, F2 = 242, B1 = 177. So rgb(163, 242, 177). For most people, using a colour picker tool is faster and error-free.
How to Use the Colour Picker Tool
- 1Open NextifyTools Color Picker (free, no sign-up)
- 2Click the colour spectrum to pick a colour visually
- 3Or enter a HEX code, RGB or HSL value directly
- 4All formats update instantly — copy whichever you need
- 5Browse the shade palette to find lighter or darker variants
Pick a Colour from an Image
When you need to match a colour from an existing design, logo or photo, use the image colour picker mode. Upload any image and click on any pixel to get its exact HEX, RGB and HSL values. This is essential for maintaining brand colour consistency across different design tools.
Frequently Asked Questions
What is the HEX code for white, black and common colours?
White = #FFFFFF | Black = #000000 | Red = #FF0000 | Blue = #0000FF | Green = #008000 | Yellow = #FFFF00 | Orange = #FFA500 | Purple = #800080.
What is the difference between RGB and RGBA?
RGBA adds an Alpha channel (transparency). rgba(255, 0, 0, 0.5) is 50% transparent red. In HEX, you can add two extra digits for alpha: #FF000080.
Why do my colours look different in print vs screen?
Screens use RGB (light-based), print uses CMYK (ink-based). The colour spaces overlap but are not identical. Always use CMYK values when designing for print.
What is HSL good for?
HSL makes it easy to create colour variations. Keep the Hue the same but adjust Lightness to get tints and shades. Adjust Saturation to make colours more muted or vivid.