HEX, RGB, and HSL: choosing a web color format

Every color in these notations is the same sRGB color wearing different clothes. HEX is RGB written in base sixteen: #4F46E5 is the red, green, and blue channels as two hexadecimal digits each. rgb(79, 70, 229) states the same three channels in decimal, and hsl() describes the same pixel as a position on a color wheel.

Conversion between the three is lossless inside sRGB: #4F46E5, rgb(79, 70, 229), and the equivalent hsl() value round-trip exactly, so switching notation is a presentation choice, not a color change.

• HEXHEX is compact and stable for copy-paste between design tools and code, which is why palettes and style guides are usually published as hex.
• RGBRGB reads as three channel intensities from 0 to 255 and matches how screens and image formats actually store pixels.
• HSLHSL reads as hue, saturation, and lightness—closer to how people describe color, and far easier to adjust by intent.

Transparency bolts onto every notation. rgb() and hsl() take a fourth argument—rgba(79, 70, 229, 0.5)—and HEX grew an eight-digit form, #4F46E580, where the last pair is alpha from 00 to FF.

• 0–1 or 00–FFAlpha ranges from 0 to 1 in functional notation and from 00 to FF in hex; 0.5 and 80 are the same half-transparent value.
• Test on surfacesA translucent overlay multiplies against whatever is beneath it, so a semi-transparent token needs testing on every surface it can sit on.
• Related tokensWhen a design system ships a solid and a translucent version of the same hue, one eight-digit hex keeps them visibly related.

Editing RGB channels directly is arithmetic; editing intent is easier in HSL. A tint is the same hue with more lightness, a shade is the same hue with less, and a muted variant is the same hue with saturation turned down—three single-dial moves instead of three channels drifting together.

Color Shades Generator builds that ramp mechanically: give it one hex color and it mixes toward black and toward white, returning three to twenty evenly spaced steps as hex values—so a hover state and a border tone come from the same source color instead of hand-picked guesses.

• Tints and shadesTints and shades: hold hue and saturation, sweep lightness from near-white to near-black, and you get a usable ramp for backgrounds, states, and text.
• Saturation statesMuted and vivid variants come from the saturation dial alone, which is how hover and disabled states stay in the same family.
• Hue rotationHue rotation produces related colors: analogous neighbors sit within about thirty degrees, complements one hundred eighty away.

Color harmonies are geometry on the hue wheel: complementary pairs sit opposite, triadic sets split the wheel into thirds, analogous groups cluster together. HSL makes the math visible—change one number and the whole scheme moves.

Color Harmony Builder applies exactly that model. From one six-digit seed hex it generates five-color palettes in six classic schemes—analogous, complementary, split complementary, triadic, tetradic, and monochrome—and checks each swatch’s contrast against black and white text at WCAG ratio targets of 3, 4.5, or 7.

The result exports as CSS custom properties and as JSON, so the palette drops straight into a stylesheet or a token file. Because the engine is deterministic, the same seed and scheme always reproduce the same five colors—share the seed, not a screenshot.

Modern CSS merged the old functional forms: space-separated channels with an optional slash for alpha—rgb(79 70 229 / 0.5)—replace the comma-heavy rgba(). The level 4 specification also adds notations such as hwb(), lab(), and oklch() for wider gamuts and perceptually even ramps.

Whichever notation you standardize on, mixing two colors is a channel-by-channel operation: Color Mixer blends two colors at a chosen weight and reports the result as RGBA and hex, so you can compute the midpoint between two brand colors instead of eyeballing it.

The same tool doubles as a notation bridge: feed it a color in one form and read the result in another, keeping the arithmetic honest when a spec sheet says hex but the stylesheet is written in rgb().

• New syntaxSpace-separated channels with a slash alpha are valid in every current browser; the comma forms remain supported as legacy aliases.
• Why OKLCHoklch() fixes a real HSL flaw: equal lightness steps in HSL do not look equally bright across hues, while OKLCH keeps perceived lightness consistent.
• Adopt deliberatelyAdopt new notations where they solve a problem—consistent ramps, wide-gamut displays—and keep hex or rgb() where tooling and habits already work.

Palettes rarely start from theory; they start from a screenshot, a logo, or a photo. Reading exact pixel values from the source beats eyeballing a swatch against a color wheel.

Image Color Picker opens a PNG, JPEG, or WebP in the tab and reports the exact RGBA value of the pixel you click—useful for recovering a brand color from a legacy asset or checking what an anti-aliased edge actually contains.

Everything runs locally: the image is decoded in your browser and never uploaded, which matters when the artwork is an unreleased design. Carry the picked value into the shades or harmony tools and the whole chain from artwork to palette stays on your device.