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.

HEX and rgb() can encode the same eight-bit sRGB channels exactly. An hsl() value can describe that color too, but rounding hue, saturation, or lightness can shift a round trip.

• 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–FFFunctional alpha ranges from 0 to 1; eight-digit hex uses 00 to FF. The 80 byte means 128/255, about 0.502—close to, but not exactly, 0.5.
• Test on surfacesA translucent overlay is composited with the backdrop according to its alpha, so test it on every surface where it will appear.
• 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 weighted steps as hex values. These are not perceptually uniform; check each candidate in its actual UI context.

• 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. To reproduce the five colors, share the seed and scheme; include the contrast target if the same pass/fail labels matter.

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.

Color Mixer accepts supported hex colors, offers alpha-aware interpolation or source-over compositing, and reports hex and RGBA results. Choose the operation and weight before comparing two brand colors.

The input field accepts hex text, not an arbitrary CSS color expression. Convert rgb() or hsl() values to a supported hex form before using this workspace.

• 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 often start from a screenshot, logo, or photo. Sampling a decoded pixel in the browser gives a reproducible value for that rendering, which is more useful than guessing by eye.

Image Color Picker opens a PNG, JPEG, or WebP in the tab and reports the browser Canvas-sampled RGBA value of the decoded pixel you click. This helps inspect a legacy asset or an anti-aliased edge, but the reported value can reflect decoding and color conversion.

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.