yizhiweb.top / online tools
Search 102 tools

Colour

Move a colour between HEX, RGB and HSL without a design tool.

Written for: Developers and designers · Everyone else, quickly

What this family is for

The same colour is written at least three ways, and each tool wants a different one. A designer hands over #4682B4, the CSS needs rgb(70, 130, 180), and a charting library asks for HSL so the hues can be rotated. These tools read a colour however it is written, show all three notations at once, and keep the value exact — no colour picker required, and nothing uploaded.

Converting a colour, building a palette, or checking contrast

The colour tools answer three different questions. The converter translates one value between notations — HEX, RGB, HSL — which is notation, not a change of colour. The palette tool generates a set of colours that work together, following a harmony rule. The contrast checker evaluates whether a text colour on a background colour is readable by the WCAG definition.

The trap is treating a harmony as a guarantee. A palette generated from a hue wheel is a set of colours that relate to each other; it says nothing about whether text on any of them is legible. That is what the contrast checker is for, and it is a separate measurement.

If you have… Use Because
The same colour in another notation Colour converter HEX, RGB and HSL describe the same colour
A set of colours that go together Colour palette generator Harmony rules produce related hues
To know if text is readable on a background Contrast checker WCAG ratio against the 4.5:1 AA threshold
The dominant colours in an image Colour palette (from image) Extracts the colours actually present

3 tools in Colour

Colour Converter (HEX · RGB · HSL) Read a colour however it is written — #4682b4, rgb(70,130,180) or hsl(210,14%,49%) — and convert it between HEX, RGB and HSL with a live swatch. Color Palette Generator Extract a colour palette from an image and build complementary, analogous, triadic or monochromatic schemes — with hex codes and contrast checks. Color Contrast Checker Check the WCAG contrast ratio between text and background colours, with AA/AAA pass labels and a suggested fix.

Common mistakes with these tools

  • Assuming HSL and RGB are perceptually uniform — Both are mathematical spaces; a 50% lightness in HSL is not a mid-perceived brightness. Perceived contrast needs the luminance calculation the checker uses.
  • Trusting a palette for text contrast — A harmony tool has no access to your layout. Check the specific foreground/background pair you will ship.
  • Comparing HEX strings to detect the same colour — #fff and #FFFFFF are the same colour and different strings. Compare the parsed values, not the text.

Frequently asked questions

What do HEX, RGB and HSL actually describe?

They are three ways of writing the same sRGB colour. HEX and RGB give the red, green and blue amounts directly (each 0–255). HSL re-describes that mix as a hue (0–360°), a saturation and a lightness, which is easier to reason about when you want a lighter tint or a different hue.

Why does converting to HSL and back change the value by one?

HSL is shown rounded to whole degrees and percents for readability, and that rounding can shift a channel by up to one step when it is converted back to RGB. The HEX and RGB forms are exact; treat the HSL figure as the readable description, and copy the HEX or RGB when an exact value is needed.

Is the on-screen colour the same on every device?

It is the standard sRGB interpretation of the value. A wide-gamut display or a colour profile can render it slightly differently, but the numeric value is unambiguous and that is what is copied.

Other tool families