Color Picker — Pick and Convert Colours

Colour Formats Reference

How to Use the Colour Picker

1. Open the colour picker.
2. Use the colour wheel to select a hue, then adjust the saturation and lightness with the picker.
3. Or enter a known value directly — paste a HEX code, type an RGB value, or enter HSL values.
4. All format equivalents (HEX, RGB, HSL, HSV, CMYK) update instantly.
5. Use the Palette section to generate complementary, analogous, or triadic colour sets based on your chosen colour.
6. Click any colour in the palette to switch to it and see its conversion values.

Colour Relationships and Palette Generation

HEX Colour Codes Explained

A HEX colour code is a 6-digit hexadecimal number prefixed with #. Each pair of digits represents the red, green, and blue channel (0–255 in decimal, 00–FF in hex):

• #RRGGBB — RR is red, GG is green, BB is blue
• #FF0000 — pure red (255 red, 0 green, 0 blue)
• #00FF00 — pure green (0, 255, 0)
• #0000FF — pure blue (0, 0, 255)
• #FFFFFF — white (255, 255, 255 — all channels maximum)
• #000000 — black (0, 0, 0 — all channels zero)

The short form (#RGB) is a shorthand where each digit is doubled: #ABC = #AABBCC. So #FFF = #FFFFFF and #F00 = #FF0000.

RGB vs. HSL: Which to Use in CSS

Both RGB and HSL are valid in CSS. Choose based on which is more intuitive for the task:

• Use RGB when: you have an exact colour from a design tool or brand guidelines (Figma, Sketch output is RGB/HEX)
• Use HSL when: you want to adjust colours programmatically in CSS. HSL makes it easy to create colour variants: same hue and saturation, different lightness. For example, a hover state that is slightly lighter than a button colour: hsl(220, 80%, 50%) → hsl(220, 80%, 60%) — just change the L value.
• Use HSL for design systems: Define a brand colour as hsl(H, S%, 50%) and generate dark/light variants by changing L — systematic and consistent.

CSS also supports oklch() and oklch() (CSS Color Level 4) — perceptually uniform colour spaces where equal steps in the values produce equal steps in perceived colour difference, solving a problem that affects both RGB and HSL.

Colour and Web Accessibility

Colour contrast is a critical accessibility concern. The WCAG (Web Content Accessibility Guidelines) specifies minimum contrast ratios for text and UI elements:

• Normal text (AA): 4.5:1 contrast ratio minimum between text and background
• Large text (AA): 3:1 contrast ratio minimum (18pt or 14pt bold)
• Normal text (AAA): 7:1 contrast ratio — enhanced accessibility
• UI components and graphics (AA): 3:1 contrast ratio minimum

The colour contrast checker calculates the exact contrast ratio between two colours and tells you whether it meets WCAG AA and AAA standards. Good contrast is not just about accessibility — it improves readability for all users, including those in bright sunlight.

Colour Spaces: RGB vs. CMYK for Print

RGB is an additive colour model used for screens: adding red, green, and blue light produces white. CMYK is a subtractive model used for print: overlapping cyan, magenta, yellow, and black inks subtract from white paper to produce colour.

The same colour can look different on screen (RGB) vs. in print (CMYK) because:

• Not all RGB colours are reproducible in CMYK (gamut mismatch) — vibrant saturated screens colours often print duller
• Monitor calibration affects how colours look on screen
• Paper stock, ink type, and printer calibration affect final print colour

For professional print work, work in CMYK from the start in your design tool (Adobe InDesign, Illustrator) rather than converting from RGB at the end. Use Pantone (PMS) spot colours for brand colours that must be reproduced accurately across different print runs.

Common Questions

How do I find the hex code of a colour I see on my screen?

Multiple approaches: (1) Use your browser's devtools — Chrome/Firefox/Edge devtools have a colour picker in the Styles panel when inspecting CSS; (2) Screenshot and use an image colour picker (paste image into the colour picker tool); (3) Use OS-level tools — Digital Color Meter on macOS, PowerToys Color Picker on Windows; (4) Browser extensions like Eye Dropper or ColorZilla add a picker to the browser toolbar, letting you click any pixel on screen.

What is the difference between HSL and HSV/HSB?

Both use Hue (colour wheel position) and Saturation (colour intensity), but the third parameter differs. In HSL, Lightness of 100% is always white — it controls the ratio of tint to shade. In HSV/HSB (Value/Brightness), Value of 100% gives full colour, and Value of 0% is black. Lightness at 50% in HSL is the "pure" colour; Value at 100% in HSV is the pure colour. HSV is more common in graphic design tools (Photoshop's colour picker); HSL is more common in CSS and web design.

Can I convert a Pantone colour to HEX?

Pantone colours do not have precise HEX equivalents — they are physical ink standards, not mathematically defined. Pantone provides approximate RGB/HEX conversions for digital use, but these are approximations. The same Pantone colour looks different on screen vs. in print and varies between printing surfaces. Pantone's Connect tool provides official bridge values; various online tables give community approximations. Treat Pantone → HEX conversions as "close enough for screen presentation" not "exact matches for print production."