CSS Color Converter

Use this online color converter to find out different codes that can be used for the color you enter. You can also see how the color will displayed as a font, border and solid background color. The color you enter will also give you a selection of other shades that are complimentary to the color entered. Click on any shade below for more information on that particluar color. If you need to, you can also link to a color using the following address https://www.generateit.net/color-converter/?????? where ?????? is the hex color code.

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

Color Conversion


Color Display

Shade Lighter
Shade Darker

in Action

color: ;

The color of this text is:

border: 2px solid ;


background-color: ;


Color Schemes

Triadic Color
Tetradic Color
Split Complementary Color
Complementary Color
Monochromatic Color
Analogous Color

How to Use?

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

  1. To start, enter the color code into the form above. Color codes accepted are: color name, Hex, RGB, HSL or HSV.
  2. The converter will now show you the same color in a variety of different color formats which you can easily copy.
  3. If 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.
  4. Further down the page you will be able to see the color 'In Action', such as font color, background and border color.
  5. Lastly we have a range of color schemes that will compliment yor color shade.