Colour to HTML: Understanding Colour Models and Accessible Choices

From Colour Swatch to HTML Code: Step-by-Step Conversion Tutorial

Getting a colour from a physical swatch or design file into HTML is a common task for web designers and developers. This tutorial walks through practical methods to identify a colour, convert it into web-friendly formats (Hex, RGB, and HSL), and apply it in HTML/CSS with accessibility and precision in mind.

1. Identify the colour source

• Physical swatch: a paint chip, fabric sample, printed material.
• Digital swatch: Figma, Sketch, Photoshop, Illustrator, or a PNG/JPEG exported image.
• Designer note: a named colour or brand token (e.g., “Brand Blue 500”).

2. Capture the colour

• From a digital file: open the file in the design app and use its eyedropper/colour inspector.
• From an image: open the image in an image editor (Photoshop, GIMP) or a lightweight tool (Paint, Preview) and use the eyedropper.
• From a physical object: take a well-lit, in-focus photo and use a digital eyedropper, or use a handheld colorimeter/spectrophotometer for high accuracy.

3. Read the colour values

Most tools give one or more of these representations:

• Hex (hexadecimal): #RRGGBB (e.g., #1a73e8) — compact and common in web CSS.
• RGB: rgb(26,115,232) — direct channel values 0–255.
• RGBA: rgba(26,115,232,0.8) — adds alpha for transparency (0–1).
• HSL: hsl(215, 86%, 51%) — hue (°), saturation (%), lightness (%) — useful for tweaking tints/shades.
• Lab/XYZ: device-independent, used for color-accurate workflows (less common directly in CSS).

If your tool only shows one format, you can convert to the others easily (see next section).

4. Convert between formats

• Hex ⇄ RGB:
  • Hex to RGB: split the hex into RR, GG, BB (hex) and convert to decimal. Example: #1a73e8 → R=0x1a=26, G=0x73=115, B=0xe8=232 → rgb(26,115,232).
  • RGB to Hex: convert each channel to two-digit hex and concatenate. Example: 26 → 1a, 115 → 73, 232 → e8 → #1a73e8.
• RGB ⇄ HSL: use a standard algorithm or an online converter. Most design tools and code libraries (CSS color functions, tiny JS snippets) perform this.
• Tools: use design apps (Figma, Photoshop), online converters, or browser dev tools (inspect element → color picker) for instant conversions.

Quick JS snippet (run in browser console) to convert RGB to Hex:

javascript
Copy CodeCopied
function rgbToHex(r,g,b){
return ”#” + [r,g,b].map(x=>x.toString(16).padStart(2,“0”)).join(””);
}
console.log(rgbToHex(26,115,232)); // #1a73e8

5. Choose the right format for the web

• Hex: concise and widely used — great for static colors.
• RGB(A): useful when you need transparency or to animate color channels.
• HSL: best when you want to adjust lightness/saturation programmatically (e.g., hover states, theming).
• CSS Color Level 4: you can use newer syntax like color(display-p3 …) or lab() in modern browsers for wider gamuts; stick to these only if you need color accuracy and target compatible browsers.

6. Apply the colour in HTML/CSS

Examples:

• Inline style:

html
Copy CodeCopied
<div style=“background:#1a73e8; color:#fff;”>Button</div>

• External CSS:

css
Copy CodeCopied
:root{
  –brand-blue: #1a73e8;
}
.button{
  background: var(–brand-blue);
  color: #fff;
}

• Using HSL for a lighter hover:

css
Copy CodeCopied
.button{ background: hsl(215,86%,51%); }
.button:hover{ background: hsl(215,86%,58%); }

7. Ensure accessibility

• Contrast: check text/background contrast using the WCAG formula. Aim for at least 4.5:1 for normal text, 3:1 for large text.
• Tools: WebAIM Contrast Checker, browser extensions, automated linters.
• Adjustments: if contrast is too low, increase contrast by darkening/lightening the background or changing text colour (often to white or near-black). Use HSL to make predictable adjustments.

8. Create swatches and tokens for consistency

• Define CSS variables or a JSON tokens file for consistent reuse:

css
Copy CodeCopied
:root{
  –brand-500: #1a73e8;
  –brand-600: hsl(215,86%,44%);
  –brand-100: hsl(215,86%,95%);
}

• Maintain a small, well-documented palette (primary, secondary, neutrals, semantic states).

9. Tips for better colour fidelity

• Work in sRGB for web delivery; ensure exported images are in sRGB profile.
• Calibrate your monitor for color accuracy if exact matching matters.
• For brand-critical colours, use a physical color standard (Pantone) mapped to CSS with care—expect slight shifts between print and screen.

10. Quick troubleshooting

• Colour looks different in browser: check color profile (use sRGB), device display, or compression of source image.
• Eyedropper picks wrong pixel: zoom in and sample multiple times; use 1:1 view to avoid anti-aliasing.
• Low contrast: pick a different shade or increase font weight/size as a temporary fix.

Conclusion

• Convert by sampling the colour, extracting a Hex/RGB/HSL value, and apply it with CSS variables for reuse. Always validate contrast for accessibility and prefer sRGB for predictable results across browsers.