RGB to HEX / HEX to RGB Converter

They are the same numbers

HEX is RGB written in base 16. The colour rgb(255, 87, 51) is #FF5733, because 255 is FF, 87 is 57 and 51 is 33. Converting between them changes notation, not colour, so there is no precision loss in either direction for 8-bit values.

Three-digit shorthand only works sometimes

A three-digit hex expands by doubling each digit, so #F53 becomes #FF5533. That means shorthand can only express colours where each channel has both digits identical. #FF5733 cannot be shortened, and truncating it to #F53 gives a visibly different colour. Shorthand is not a rounding; it is a distinct, smaller set of colours.

Alpha comes in two orders

Eight-digit hex appends alpha as the last two digits: #FF5733CC. That is the CSS convention. Android uses the opposite order, with alpha first as #CCFF5733, and pasting a value between the two produces a colour that is wrong in both hue and transparency. When a colour arrives from a mobile codebase, check which order it uses.

HSL is the one you can reason about

RGB and HEX are equally opaque to intuition: you cannot look at #3A7BD5 and know how to make it lighter. HSL separates hue, saturation and lightness, so producing a tint or shade is a single-number change. That is why design systems generate colour ramps in HSL even when they output hex.

HSL lightness is not perceived brightness

Two colours at the same HSL lightness can look very different in brightness, because human vision is far more sensitive to green than to blue. Yellow at 50 percent lightness appears much brighter than blue at 50 percent. A ramp built on constant HSL lightness will not look evenly weighted, which is why OKLCH, a perceptually uniform space now supported in all major browsers, is the better choice for generating accessible palettes.

Case and the hash

Hex is case-insensitive, so #ff5733 and #FF5733 are identical. Pick one convention and hold it, because mixed casing makes diffs noisy for no benefit. The leading hash is required in CSS and optional in many design tools, which is a frequent source of a value that silently does nothing when pasted.

Related tools

• Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
• Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
• Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
• Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.