Which formats does it accept?

HEX in three, six or eight digits, RGB and RGBA, and HSL and HSLA. Paste any of them and the others are produced immediately, with alpha carried through when present.

What is the difference between HSL and RGB?

RGB specifies how much red, green and blue light to mix, which matches how a display works but is unintuitive to adjust. HSL specifies hue, saturation and lightness, which matches how people describe colour. They can express the same colours; HSL is simply easier to manipulate deliberately.

How do I make a colour lighter or darker?

Adjust the lightness slider. That is the practical advantage of HSL: one number controls how light the colour is, while hue and saturation stay put. Doing the same in HEX means changing three values at once and checking the result by eye.

What is eight-digit hex?

A HEX colour with an extra pair for alpha, so the last two digits set opacity from 00 for fully transparent to FF for fully opaque. It is supported in all current browsers and is a compact alternative to writing an rgba value.

Why does my semi-transparent colour look different in different places?

Because alpha composites with whatever sits behind it. The same rgba value over white and over a dark background produces two visibly different results. If you need a fixed appearance, compute the composited colour and use it opaquely.

Does it check colour contrast?

No, that is a separate measurement. Accessibility guidelines require 4.5 to 1 for normal text and 3 to 1 for large text, and the ratio depends on the relative luminance of both colours rather than on lightness alone. Use a dedicated contrast checker for any colour pair carrying text.

How do I build a consistent palette?

Work in HSL. Keep the hue and saturation fixed and vary the lightness for a set of shades of one colour. Rotate the hue in equal steps, holding saturation and lightness, for a set of related colours. Both are far harder to do consistently by editing HEX values.

Are named CSS colours supported?

The tool works with HEX, RGB and HSL values. Named colours such as those in the CSS keyword list can be converted by looking up their HEX value first, which most editors will show you on hover.

Why does a converted value differ slightly from my design tool?

Rounding. HSL components are typically stored as integers in CSS, so converting from RGB to HSL and back can shift a channel by one. The difference is imperceptible, but it explains why two tools occasionally disagree in the last digit.

Are the colour values I enter sent to a server?

No. Conversion and adjustment happen in your browser, and the values you enter are never transmitted, stored or logged.

Color Converter – HEX, RGB and HSL with Live Sliders

Color Converter

// COLOR INPUT

HEX#00ff88

RGBrgb(0, 255, 136)

HSLhsl(152, 100%, 50%)

// ADJUST

H152

S100

L50

G255

B136

// Color Converter: Features

Three notations for the same colour

HEX is compact and dominates stylesheets and design tools. RGB maps directly onto how a screen produces colour and is what image processing works in. HSL describes a colour the way a person thinks about it: which hue, how saturated, how light. Having all three visible at once means you can reason in whichever suits the task and copy whichever your code needs.

Why HSL is the one worth learning

Making a colour slightly darker in HEX means changing three hexadecimal pairs and hoping. In HSL it means lowering one number. Building a palette works the same way: fix the hue, vary the lightness, and you have a consistent set of shades; rotate the hue by equal steps and you have a scheme. This is why design systems are increasingly specified in HSL, and why the sliders here adjust in HSL regardless of which notation you typed.

Alpha, and where it is allowed

Transparency is supported throughout: paste an rgba or hsla value and the alpha is preserved, and the outputs use the alpha-bearing forms when it is below one. Modern CSS also accepts eight-digit hex, where the last pair is the alpha, which is worth knowing when you meet one. Note that alpha composites against whatever is behind the element, so the same value looks different over different backgrounds.

Contrast is a separate question

A colour that looks fine in isolation may be unreadable as text. Accessibility guidelines call for a contrast ratio of at least 4.5 to 1 for normal text against its background, and 3 to 1 for large text. Lightness in HSL is a useful proxy while you adjust, but it is not the same as measured contrast, so check a pair with a contrast checker before committing to it for body text.

Unreleased brand colours never leave the page

All conversion and adjustment happens locally and nothing is transmitted, stored or logged, so unreleased brand colours are safe to work with here. To build a gradient from the colours you settle on, the CSS Gradient Generator produces the rule directly.

// Color Converter: FAQ

Which formats does it accept?: HEX in three, six or eight digits, RGB and RGBA, and HSL and HSLA. Paste any of them and the others are produced immediately, with alpha carried through when present.
What is the difference between HSL and RGB?: RGB specifies how much red, green and blue light to mix, which matches how a display works but is unintuitive to adjust. HSL specifies hue, saturation and lightness, which matches how people describe colour. They can express the same colours; HSL is simply easier to manipulate deliberately.
How do I make a colour lighter or darker?: Adjust the lightness slider. That is the practical advantage of HSL: one number controls how light the colour is, while hue and saturation stay put. Doing the same in HEX means changing three values at once and checking the result by eye.
What is eight-digit hex?: A HEX colour with an extra pair for alpha, so the last two digits set opacity from 00 for fully transparent to FF for fully opaque. It is supported in all current browsers and is a compact alternative to writing an rgba value.
Why does my semi-transparent colour look different in different places?: Because alpha composites with whatever sits behind it. The same rgba value over white and over a dark background produces two visibly different results. If you need a fixed appearance, compute the composited colour and use it opaquely.
Does it check colour contrast?: No, that is a separate measurement. Accessibility guidelines require 4.5 to 1 for normal text and 3 to 1 for large text, and the ratio depends on the relative luminance of both colours rather than on lightness alone. Use a dedicated contrast checker for any colour pair carrying text.
How do I build a consistent palette?: Work in HSL. Keep the hue and saturation fixed and vary the lightness for a set of shades of one colour. Rotate the hue in equal steps, holding saturation and lightness, for a set of related colours. Both are far harder to do consistently by editing HEX values.
Are named CSS colours supported?: The tool works with HEX, RGB and HSL values. Named colours such as those in the CSS keyword list can be converted by looking up their HEX value first, which most editors will show you on hover.
Why does a converted value differ slightly from my design tool?: Rounding. HSL components are typically stored as integers in CSS, so converting from RGB to HSL and back can shift a channel by one. The difference is imperceptible, but it explains why two tools occasionally disagree in the last digit.
Are the colour values I enter sent to a server?: No. Conversion and adjustment happen in your browser, and the values you enter are never transmitted, stored or logged.

// How to Use Color Converter

Enter a colour

Paste a HEX, RGB or HSL value in any of the usual forms, including the alpha-bearing variants. The preview swatch and all three representations update immediately.
Adjust with the sliders

Use the hue, saturation and lightness sliders to refine the colour. Working in HSL is what makes building a set of consistent shades practical.
Copy the notation you need

Each representation has its own copy button. Take HEX for a stylesheet, RGB for image work, or HSL if your design tokens are specified that way.

Category Design