Color tools

One colour, three ways to write it

A single on-screen colour can be written in several notations, and web work constantly moves between them. A designer hands you a #3B82F6 hex code from a style guide; the canvas API you are scripting wants raw rgb() channels; and to build a hover state you really want hsl() so you can nudge the lightness without touching the hue. This tool keeps all three notations in sync: edit any one field and the other two — plus the live swatch on the left — update the instant the value becomes valid.

Everything is the same colour underneath. HEX and RGB are just two ways of writing the amount of red, green and blue light a pixel emits (HEX in base-16 byte pairs, RGB in plain decimals 0–255). HSL re-describes that same point as a position on the colour wheel, so it reads the way humans think about colour rather than the way a screen produces it.

A worked example

Take #3B82F6. Splitting it into byte pairs gives 3B, 82 and F6, which in decimal are 59, 130 and 246 — so rgb(59, 130, 246). Running those channels through the HSL formula lands on hsl(217, 91%, 60%): a hue of 217° (a confident blue), high saturation, and a lightness just above the midpoint. Want the complementary colour for an accent? Add 180° to the hue to get hsl(37, 91%, 60%), a warm amber — same vividness, opposite side of the wheel.

When to reach for each format

Building a palette from one hue

Because HSL isolates the hue, you can derive a whole scheme by rotating one number while keeping saturation and lightness fixed:

• Complementary: add 180° for a high-contrast accent.
• Analogous: shift ±30° for calm, cohesive neighbours.
• Triadic: add 120° and 240° for a vivid, balanced trio.