CSS Random Color Generator

Stuck for ideas? Take a punt with the random color generator!

Your random color is:

Generated Color Codes

Here's your random color represented in five different color models. Choose the value that works for you, or generate another color.

Hex
RGB
HSL
HSV
Color Name

About the Color Values

The above table displays the same random 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.