Every designer has stared at a colour and wondered what its HEX code is. Every developer has copied a colour from Figma and forgotten how to adjust its lightness in CSS. This guide explains colour formats — HEX, RGB, HSL — how to convert between them, how to pick accessible colour combinations, and how to build palettes that work for Indian digital audiences.
All three formats describe the same colour — they are just different ways to express it. Here is the same red-orange colour in all three:
A HEX code is six hexadecimal digits (0–9, A–F) split into three pairs — RR GG BB. Each pair represents one colour channel from 00 (none) to FF (full). So #FF0000 is pure red (R=255, G=0, B=0), #00FF00 is pure green, and #000000 is black (all channels zero). The shorthand 3-digit HEX (#F53) expands each digit — #FF5533.
HSL is the most intuitive format for making design decisions. Hue is the pure colour — a position on the colour wheel from 0° (red) to 360° (back to red), with green at 120° and blue at 240°. Saturation controls intensity — 0% is grey, 100% is fully vivid. Lightness controls brightness — 0% is black, 100% is white, 50% is the pure colour.
Why HSL is better for building palettes: To create a lighter tint of a colour, just increase the L value. To desaturate, decrease S. The hue stays the same. In HEX, you would have to do trigonometric colour math. In HSL it's: hsl(220, 80%, 50%) → lighter: hsl(220, 80%, 75%) → darker: hsl(220, 80%, 30%). Same hue, same saturation, just different lightness.
| Format | Best Used For | Avoid When |
|---|---|---|
| HEX (#FF5733) | CSS colour values, brand style guides, Figma/Sketch, email templates | When you need to programmatically adjust lightness or saturation |
| RGB (255,87,51) | Android development, Flutter, image processing, when mixing colours programmatically | Building palettes — RGB math is non-intuitive for designers |
| RGBA (255,87,51,0.8) | Transparent overlays in CSS, semi-transparent UI elements, shadows | Solid colours — transparency adds file complexity unnecessarily |
| HSL (11,100%,60%) | Building palettes in CSS, generating tints and shades, Tailwind CSS custom themes | Sharing with printers — they use CMYK, not HSL |
| HSLA (11,100%,60%,0.9) | Semi-transparent elements where you need colour control + opacity | When a simple RGBA would suffice |
| CSS variables (--primary-colour) | Component-based design systems, theme switching (light/dark mode) | One-off colours that don't repeat |
The fastest way: use ToolLoom's Color Picker — paste any format and get all three instantly. For manual understanding:
Split the HEX into three pairs. Convert each from base-16 to base-10. #4878F0 → 48=72, 78=120, F0=240 → rgb(72, 120, 240).
Normalise each channel to 0–1 (divide by 255). Find max and min. Lightness = (max+min)/2. Saturation depends on whether you are at max or min. Hue is calculated from which channel is max. This is complex to do manually — use ToolLoom's converter.
Convert HSL to RGB using the standard formula (involves converting hue to one of 6 sectors of the colour wheel), then convert each RGB channel to a 2-digit hex. Again — the Color Picker handles this instantly.
In VS Code: Hover over any colour value in a CSS file — VS Code shows a colour preview and lets you click to open a colour picker inline. Click the top of the picker to cycle between HEX, RGB, and HSL formats. This is the fastest workflow for developers already in their editor.
Colour contrast is not just a nice-to-have — it is a legal requirement for government websites in India and a best practice for any product with Indian users, where a significant portion browse on mid-range Android devices with uncalibrated screens.
| WCAG Level | Normal Text | Large Text (18pt+) | Requirement |
|---|---|---|---|
| Level A (minimum) | No requirement | No requirement | Basic accessibility |
| Level AA (standard) | 4.5:1 minimum | 3:1 minimum | Required for Indian govt sites (GIGW) |
| Level AAA (enhanced) | 7:1 minimum | 4.5:1 minimum | Recommended for highest accessibility |
Don't rely on colour alone: About 8% of men and 0.5% of women globally have some form of colour vision deficiency (colour blindness). The most common type — red-green colour blindness — makes red and green indistinguishable. Always pair colour with a secondary indicator (icon, text label, pattern) for critical UI states like errors, success, and warnings.
| Harmony Type | Description | HSL Relationship | Best For |
|---|---|---|---|
| Monochromatic | Same hue, different lightness/saturation | Same H, vary L and S | Clean, minimal UI; single-brand products |
| Complementary | Opposite colours on the wheel | H + 180° | High contrast, energetic; buttons on hero sections |
| Analogous | Adjacent colours (within 30–60°) | H ± 30° to 60° | Calm, natural palettes; health, wellness apps |
| Triadic | Three equally spaced hues | H, H+120°, H+240° | Vibrant, balanced; playful or creative products |
| Split-complementary | Base + two colours adjacent to its complement | H, H+150°, H+210° | High contrast with more variety than complementary |
The 60-30-10 rule: Effective colour palettes use a dominant colour (60% of the design), a secondary colour (30%), and an accent (10%). Example: white/light grey dominant, dark navy secondary, orange accent. This is the structure behind most successful fintech and SaaS products in India.
Indian digital products have distinct colour preferences rooted in cultural associations, device display characteristics, and audience demographics. Understanding these helps designers make choices that resonate with Indian users.
Once you have your colour code from the picker, here is how to use it effectively in web development:
| Context | CSS Code | Notes |
|---|---|---|
| Solid colour (HEX) | color: #4878F0; | Most common; all browsers support HEX |
| With opacity (RGBA) | color: rgba(72,120,240,0.8); | 4th value = opacity (0–1) |
| HSL in CSS | color: hsl(220, 80%, 61%); | Best for building scales with CSS variables |
| CSS custom property | --primary: #4878F0; | Define in :root{} — reuse everywhere |
| Tailwind arbitrary value | bg-[#4878F0] | Use bracket notation for custom colours |
| Tailwind config | colors: { brand: '#4878F0' } | Add to tailwind.config.js extend.colors |
Best practice for design systems: Define all brand colours as CSS custom properties in :root{}. Use semantic names like --colour-primary, --colour-success, --colour-text-muted rather than --blue-500. This makes light/dark mode theming trivial — just redefine the variables in a [data-theme="dark"] selector.
| Mistake | Why It's a Problem | Fix |
|---|---|---|
| Not checking colour contrast | Text that looks fine on your calibrated monitor may fail WCAG AA on budget Android displays — alienating a huge portion of Indian users | Always run foreground/background pairs through a contrast checker before finalising |
| Using colour alone to convey meaning | Red = error, green = success fails for red-green colour blind users (8% of men) | Pair colour with an icon (✗ ✓) or text label ("Error", "Success") |
| Too many accent colours | More than 2–3 accent colours creates visual noise and weakens brand recognition | Pick one primary, one secondary, one accent — use tints and shades for variety |
| Choosing colours in isolation | A colour may look beautiful alone but fail against your actual background or alongside brand colours | Always test colours in context — on your actual page layout, not a blank white canvas |
| Ignoring dark mode implications | A dark navy colour that works on light mode may become near-invisible on dark mode backgrounds | Design and test both modes from the start — use HSL variables to invert lightness systematically |
ToolLoom builds free design and developer tools for Indian students, professionals, and creators. Found a bug or want a feature in the Color Picker? Email us at contact@toolloom.in