Colour to HTML: Convert Any Colour to HTML Hex, RGB & HSL

Colour to HTML: Convert Any Colour to HTML Hex, RGB & HSL

What it is
A concise guide and toolset for translating any visual colour into the three most common web representations: Hex, RGB, and HSL. Useful for designers, developers, and content creators who need consistent, web-ready colour values.

Why it matters

• Web compatibility: Hex, RGB, and HSL are supported by all modern browsers and CSS.
• Precision: Numeric representations ensure exact colour reproduction across platforms.
• Flexibility: HSL is easier for adjusting hue, saturation, and lightness; RGB and Hex are widely used in code and design tools.

Quick reference for formats

• Hex: Six-digit hexadecimal, preceded by #. Example: #1E90FF (DodgerBlue).
• RGB: rgb(r, g, b) with values 0–255. Example: rgb(30, 144, 255).
• HSL: hsl(h, s%, l%) with hue 0–360, saturation/lightness 0–100%. Example: hsl(210, 100%, 56%).

How to convert (practical steps)

1. From an image or screen:
   • Use an eyedropper tool (in image editors or browser dev tools) to sample a pixel.
   • Read the sampled colour’s Hex or RGB value directly.
2. From paint or physical colour:
   • Use a spectrophotometer or mobile colour-match app to get an approximate RGB/Hex value.
3. Between formats (Hex ↔ RGB):
   • Hex to RGB: split #RRGGBB into pairs, convert each pair from hex to decimal.
     • Example: #1E90FF → R=0x1E=30, G=0x90=144, B=0xFF=255 → rgb(30,144,255).
   • RGB to Hex: convert each decimal 0–255 to two-digit hex and concatenate.
4. RGB ↔ HSL (outline):
   • Convert RGB (normalized to 0–1) to HSL using standard formulas: compute max/min, lightness = (max+min)/2, saturation and hue based on delta. (Most tools handle this automatically.)
5. Use reliable tools: colour pickers in Figma/Sketch/Photoshop, browser devtools, online converters.

Tips for web use

• Short hex: Use 3-digit shorthand like #0F8 only when each pair repeats (e.g., #00FF88 → #0F8).
• Alpha/transparency: Use rgba(r,g,b,a) or hsla(h,s%,l%,a) or 8-digit hex #RRGGBBAA.
• Accessibility: Check contrast ratios (WCAG) to ensure text is readable over backgrounds.
• Consistency: Define brand colours as CSS variables (e.g., –brand: #1E90FF;) for reuse.

Quick examples

• Hex: #1E90FF
• RGB: rgb(30, 144, 255)
• HSL: hsl(210, 100%, 56%)

If you want, I can convert a specific colour (hex, RGB, image sample, or photo) into all three formats and provide WCAG contrast against white/black.