CSS Color Converter
Convert between CSS color codes such as RGB, hex, HSL, and more.
Conversion Results
About the Color Values
The above conversion results displays the same color using different color models. Here's an explanation of each model.
- Hex
"Hex" is short for hexadecimal. This method uses hexadecimal notation to define the color in their RGB components.
The color value is provided as a six-digit hexadecimal number, preceded by a hash symbol (
#
).Hex can also be provided as a three digit number (but only some colors can be represented this way).
Also, CSS Color Module Level 4 currently proposes an eight digit hex value (and its four digit shorthand) for representing alpha transparency.
- RGB
The RGB model represents a color based on its proportions of red, green, and blue. In CSS, we pass the color value to the
rgb()
function as a comma separated list of the red, green, and blue components. Each component can be a number between 0 and 255. Therefore,rgb(255,0,0)
represents red,rgb(0,0,255)
represents blue, and so on.The values can also be represented as a percentage.
- HSL
HSL represents the hue, saturation, and lightness of a color. The hue is given as a value between 0 and 360 to represent its position on the color wheel. The saturation and lightness are expressed as percentage values, to represent the amount of saturation in the color and the lightness.
In CSS, HSL is defined using the
hsl()
function.- HSV
- HSV uses hue, saturation, and value to represent the color. HSV is similar to HSL in that it allows you to specify the hue and saturation levels. However, the saturation may or may not be the same for a given color. In fact, it can be dramatically different, depending on the color. Also, HSV uses value instead of lightness. Value corresponds to the brightness of the color.
- Color Name
CSS also assigns a name to certain colors. This can make it easier to remember than a bunch of numbers and functions.
Here's more about named colors. And here's a named color chart which outlines all named colors in CSS.
Color Schemes
You can also enter your color into the color scheme generator to generate color schemes based on your color.