CSS Color Converter

Use this online color converter to quickly discover the different codes associated with any color you enter, including Hex, RGB, HSL, and other commonly used formats. This tool also lets you preview how the color will appear when applied as text, borders, or solid background colors, helping you visualize its use in real-world design scenarios.

In addition to displaying the color you entered, the converter generates a selection of complementary shades and variations, making it easy to build cohesive color palettes for websites, graphics, or other design projects. You can click on any of the suggested shades to get detailed information, including their color codes and visual preview, so you can make informed decisions about your color choices.

If you need to, you can also link to a color using the following address https://www.generateit.net/color-converter/

Select color

Enter any color value, color name, Hex, RGB, HSL or HSV.

Color Conversion

Hex

RGB

RGB%

HSL

HSV

Name

Lighter shades

Darker shades

in Action

Font color

Some text to see color!

Border color

Background color

Color Schemes

Everything is worked out in your browser. Select any shade or scheme color to convert that one instead.

How to use it

The color converter web tool is a handy app that will give you a range of information for an entered color code:

Enter a colorTo start, enter the color code into the form above. Color codes accepted are: color name, Hex, RGB, HSL or HSV.
Copy a formatThe converter will now show you the same color in a variety of different color formats which you can easily copy.
Try a shadeIf you need a lighter or darker shade, you will find that under the color display heading. Click on a shade for that color to be converted.
See it in actionFurther down the page you will be able to see the color ‘In Action’, such as font color, background and border color.
Explore schemesLastly we have a range of color schemes that will complement your color shade.

Good to know

Color names work

Type a name such as tomato or rebeccapurple to get its codes. The Name box only fills in when the color has an exact CSS name.

Click to explore

Select any shade or scheme color and it becomes the selected color, so you can keep stepping through related colors.

Link to a color

Add a hex code to the address, for example /color-converter/BA6400, to open the page on that color.

Frequently asked questions

Which color formats can I type in?

CSS color names, Hex (#ba6400 or the short #b60, with or without the #), rgb(186, 100, 0), RGB with percentages, hsl(32, 100%, 36%) and hsv(32, 100%, 73%).

What is the difference between HSL and HSV?

Both use a hue angle from 0 to 360 and a saturation. HSL then uses lightness, where 50% is the pure color and 100% is white. HSV uses value (brightness), where 100% is the brightest version of the color. CSS supports HSL directly, but not HSV.

Why does the Name box say ‘none assigned’?

Only 148 colors have a name in CSS, and the color must match one of them exactly. Most colors do not have one.

How are the color schemes made?

The hue of your color is turned around the color wheel. Complementary is 180° away, triadic is 120° apart, tetradic is 90° apart, split complementary is 72° and 216° away, and analogous uses neighbours 12° apart. Monochromatic keeps the hue and changes the brightness.

Is my color stored or sent anywhere?

No. Everything is worked out in your browser.