Color Converter

Color Converter

Need the same colour in HEX, RGB or HSL?

Enter a colour in one format and Kayefi calculates the matching values in the others.

It is useful when a design file gives you RGB, a CSS stylesheet expects HEX, or you want to work with HSL because you need to adjust saturation or lightness.

Change any supported value and the other representations update with it.

HEX, RGB and HSL

HEX

Common in CSS and web design.

Example:

#2563EB

RGB

Represents a colour through red, green and blue channels.

Example:

rgb(37, 99, 235)

HSL

Represents hue, saturation and lightness.

Example:

hsl(217, 83%, 53%)

The three formats describe the same colour in different ways.

Why Convert Colors?

You may receive a design specification in one format and need another.

For example:

A designer gives you:

rgb(37, 99, 235)

but your CSS uses:

#2563EB

Or you may want to adjust a colour by working with hue and lightness instead of individual RGB channels.

A converter saves you from manually calculating the values.

Copy CSS-Ready Values

Once the colour is converted, copy the format your project needs.

You can also copy a CSS custom property for use in a stylesheet.

For example:

–color-primary: #2563EB;

That makes it easy to move a sampled or existing colour into a design system.

Frequently Asked Questions

Can I convert HEX to RGB?

Yes.

Can I convert RGB to HEX?

Yes.

Can I convert HEX to HSL?

Yes.

Does changing the colour format change the colour?

No. A format conversion represents the same colour in another notation.

Can I use the result in CSS?

Yes. HEX, RGB and HSL are all commonly used in CSS.

Convert the Format, Keep the Color

Enter the colour you already have and get the other values immediately.

No calculation sheet required.