Every format represents the same colour — they are just different ways of expressing it. Choosing the right format for your context saves conversion steps and avoids errors.
HEX
Hexadecimal
Six-digit code using 0–9 and A–F. The most compact format, universally supported in CSS and every design tool. Two digits each for red, green, and blue.
#FF5733
#000000 = black
#FFFFFF = white
RGB
Red Green Blue
Three decimal values 0–255 for each channel. Intuitive for understanding colour composition. Used in CSS, Photoshop, After Effects, and most digital tools.
rgb(255, 87, 51)
rgb(0, 0, 0) = black
rgb(255,255,255) = white
HSL
Hue Saturation Lightness
The most human-readable format. Hue = colour wheel position (0–360°), Saturation = intensity (0–100%), Lightness = brightness (0–100%). Ideal for generating colour variations programmatically.
hsl(9, 100%, 60%)
hsl(0, 0%, 0%) = black
CMYK
Cyan Magenta Yellow Key
The colour model used in physical printing. Represents colour as ink percentages. CMYK has a smaller gamut than RGB — some vibrant digital colours cannot be reproduced in print.
cmyk(0%, 66%, 80%, 0%)
cmyk(0%,0%,0%,100%) = black
CSS Variable
Custom property
Ready-to-paste CSS custom property declaration. Define once in :root, reuse everywhere. The foundation of maintainable design systems and theme switching.
--color-primary: #FF5733;
/* use: var(--color-primary) */
RGBA
RGB + Alpha (opacity)
RGB with an additional alpha channel (0–1) controlling opacity. Used for semi-transparent overlays, shadows, and layered UI elements. The RGBA value in the tool uses 50% opacity as a starting point.
rgba(255, 87, 51, 0.5)
/* 50% transparent */
Tints and shades — building a colour scale
A tint is a colour mixed with white (higher lightness in HSL). A shade is a colour mixed with black (lower lightness). Together they form the colour scale used in every major design system — Tailwind CSS, Material Design, and Radix UI all use 10-stop scales (typically labelled 50 through 950) derived from a single base colour.
The tints and shades in this tool are generated by holding the hue and saturation constant from your selected colour and varying the lightness from near-white to near-black across 11 stops. Click any swatch to instantly update the main picker to that tone.
Design system tip: For a production colour scale, pick your primary brand colour, then generate tints and shades. The lightest 2–3 tones work as background fills, the mid-range as interactive component colours, and the darkest 2–3 as text colours — all while maintaining the same brand hue throughout.
Colour harmony — complementary, analogous, triadic
Colour harmony describes the systematic relationship between colours on the colour wheel. These relationships have been studied since the 18th century and form the basis of how designers create palettes that feel cohesive rather than arbitrary.
Complementary
Two colours directly opposite on the wheel (180° apart). Creates strong, vibrant contrast. Best for call-to-action elements and emphasis.
Analogous
Three colours adjacent on the wheel (30° apart). Harmonious and low-tension. Found in nature. Best for backgrounds, gradients, and calm visual environments.
Triadic
Three colours equally spaced 120° apart. Vibrant and energetic while remaining balanced. Best for brand palettes needing three distinct, punchy colours.
Split-complementary
The base colour plus the two colours adjacent to its complement (150° apart). Softer than full complementary, more contrast than analogous. Versatile and beginner-friendly.
WCAG colour contrast — accessibility explained
The Web Content Accessibility Guidelines (WCAG) define the minimum contrast ratio between text and its background that ensures readability for users with low vision or colour vision deficiencies. Approximately 1 in 12 men and 1 in 200 women have some form of colour vision deficiency.
| WCAG Level |
Normal text (<18pt) |
Large text (18pt+ or 14pt bold) |
Non-text UI |
| AA (minimum) |
4.5 : 1 |
3.0 : 1 |
3.0 : 1 |
| AAA (enhanced) |
7.0 : 1 |
4.5 : 1 |
No requirement |
| Fail (below AA) |
Below 4.5 : 1 |
Below 3.0 : 1 |
Below 3.0 : 1 |
The contrast ratio is calculated from the relative luminance of each colour. Black on white is 21:1 — the maximum possible. Use the WCAG Contrast Checker in the tool above to verify any text/background combination before shipping.
Common mistake: Many designers test their brand colour on white and assume it passes accessibility — but then use it as a background with white text, which is a completely different ratio. Always test the exact combination you'll use in production. The WCAG checker above lets you set both foreground and background independently.
RGB vs CMYK — screen vs print
RGB (Red, Green, Blue) is an additive colour model — colour is created by combining light. Computer screens, TVs, and phones all use RGB. When all three channels are at maximum (255, 255, 255), you get white light.
CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive colour model — colour is created by absorbing light using ink. Commercial printers use CMYK. When all four channels are at maximum, you get black (in theory — in practice, a rich black mix is more common).
The key difference is gamut: the range of colours each system can reproduce. RGB has a significantly larger gamut than CMYK, meaning some highly saturated digital colours — particularly vivid blues, greens, and oranges — cannot be reproduced accurately in print. This is why a design that looks vibrant on screen may appear duller when printed. Always convert to CMYK and request a physical proof for print-critical work.
CSS custom properties (variables) for design systems
CSS custom properties (the --variable-name: value syntax) are the standard way to manage colours in modern design systems and component libraries. They solve three problems simultaneously:
- Single source of truth: Define each brand colour once in
:root, reference it everywhere with var(). Update the variable to update every instance.
- Theme switching: Override variables in a
[data-theme="dark"] selector to implement dark mode without duplicating CSS rules.
- Design–code sync: Variables with semantic names (
--color-primary, --color-danger) bridge the gap between design tokens in Figma and implementation in code.
This tool outputs a ready-to-paste CSS variable declaration for any colour you pick. Copy it directly into your :root block.
Frequently asked questions
What is the difference between HEX, RGB, and HSL?+
HEX is a compact 6-character code (#RRGGBB) used universally in CSS and design tools. RGB expresses the same colour as three decimal values (0–255) for red, green, and blue channels. HSL describes colour as hue (0–360° on the colour wheel), saturation (0–100% intensity), and lightness (0–100% brightness). All three represent identical colours and are fully interconvertible — this tool shows all of them simultaneously.
What is CMYK and when should I use it?+
CMYK (Cyan, Magenta, Yellow, Key/Black) is the colour model used in physical printing. It represents colour as ink percentages. Use CMYK values when preparing artwork for print — brochures, business cards, packaging, and any commercial printing. Screens use RGB; printers use CMYK. Because CMYK has a smaller gamut (range of reproducible colours) than RGB, some vivid digital colours cannot be reproduced accurately in print.
How do I check if my colour passes WCAG accessibility?+
Use the WCAG Contrast Checker in the tool above. Set your text colour as the foreground and your background colour, then check the contrast ratio result. WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). WCAG AAA requires 7:1 for normal text. Both levels pass/fail are shown in the tool. Always test the exact foreground/background pair you'll use — not the brand colour on white in isolation.
What are tints and shades?+
A tint is a colour mixed with white — in HSL terms, the same hue and saturation with increased lightness. A shade is a colour mixed with black — the same hue and saturation with reduced lightness. Tints and shades are the foundation of design system colour scales (e.g. Tailwind's 50–950 scale). The tool generates 11 tints and shades from your selected colour. Click any to apply it as the main colour.
What are complementary, analogous, and triadic colours?+
These are systematic colour wheel relationships. Complementary colours are 180° apart and create strong contrast. Analogous colours are 30° apart and create harmonious, natural-feeling combinations. Triadic colours are 120° apart and create vibrant, energetic palettes. The Harmony section in the tool above shows all relationships calculated from your selected colour. Click any harmony swatch to apply it as the main colour.
How do CSS colour variables work?+
CSS custom properties use the syntax --name: value defined in a :root block, then referenced anywhere with var(--name). They are the standard approach for design token management in modern web projects. The CSS variable output in this tool generates a ready-to-paste declaration. Give it a semantic name (--color-primary, --color-brand) before adding it to your codebase.
Why does my colour look different when printed?+
Screens use RGB (additive light) which has a much larger gamut than CMYK (subtractive ink). Vivid digital colours — particularly electric blues, neon greens, and bright oranges — are often outside the CMYK gamut and must be approximated when printed. The shift can be significant. For print-critical work, always view the CMYK values from this tool, check them in your design application's CMYK proof view, and order a physical test print before committing to a large print run.