Hex color generator

How a HEX code reads

A HEX like #059669 is three pairs of hex digits: 05 (red), 96 (green), 69 (blue). Each pair ranges from 00 (0, none) to FF (255, max). That's why #FF0000 is pure red and #000000 is absolute black. Knowing this lets you tweak colors by hand: bumping the first pair raises red, lowering all three darkens.

HEX vs RGB vs HSL

• HEX: compact, ideal for design-to-dev handoff. Used to lack alpha in CSS, but #RRGGBBAA now works everywhere modern.
• RGB: rgb(5 150 105 / 0.8) always supports alpha. Useful for overlays and semi-transparency.
• HSL: hsl(160 94% 30%) reads as human. H = hue, S = saturation, L = lightness. Tweaking L without touching H is the right way to derive light/dark variants of the same color.

Valid CSS syntax

All of these represent the same color and are valid:

color: #059669;
color: #059669FF;       /* with alpha */
color: rgb(5, 150, 105);
color: rgb(5 150 105);  /* modern */
color: rgb(5 150 105 / 0.8);
color: hsl(160 94% 30%);

Named colors: when they're worth it

CSS supports 147 reserved names (tomato, steelblue, rebeccapurple). Handy for quick prototypes, but in production stick to HEX or CSS variables: names can't be fine-tuned and they're a nightmare in design tokens.

Shorthand HEX and when not to use it

#F00 is valid and equals #FF0000: each digit doubles. But it only covers 4096 colors (16³) instead of 16.7 million (256³). For professional design, stick to 6 digits. For minimalist prototype CSS, it's fine.

HEX with alpha (#RRGGBBAA)

Supported by every modern browser since 2018. The last two digits are opacity: FF = 100%, 80 ≈ 50%, 00 = 0%. Useful for dark overlays: #00000080 is black at 50%.

Converting HEX to other formats without losing precision

HEX and RGB are mathematically equivalent: conversion is exact both ways. HEX↔HSL goes through RGB and can introduce small rounding errors (<1% variation), which is why serious design tokens always store HEX or RGB as the source of truth and derive HSL on the fly.