Skip to main content

CSS Legal Color Values

CSS Colors

Colors in CSS can be specified by the following methods:
  • Hexadecimal colors
  • RGB colors
  • RGBA colors
  • HSL colors
  • HSLA colors
  • Predefined/Cross-browser color names

Hexadecimal Colors

Hexadecimal color values are supported in all major browsers.
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 0 and FF.
For example, the #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 0.

Example

p
{
background-color:#ff0000;
}

Try it yourself »

RGB Colors

RGB color values are supported in all major browsers.
An RGB color value is specified with: rgb(red, green, blue). Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%).
For example, the rgb(0,0,255) value is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0.
Also, the following values define the same color: rgb(0,0,255) and rgb(0%,0%,100%).

Example

p
{
background-color:rgb(255,0,0);
}

Try it yourself »

RGBA Colors

RGBA color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+.
RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the object.
An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Example

p
{
background-color:rgba(255,0,0,0.5);
}

Try it yourself »

HSL Colors

HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+.
HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors.
An HSL color value is specified with: hsl(hue, saturation, lightness).
Hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness is also a percentage; 0% is black, 100% is white.

Example

p
{
background-color:hsl(120,65%,75%);
}

Try it yourself »

HSLA Colors

HSLA color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+.
HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity of the object.
An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha), where the alpha parameter defines the opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Example

p
{
background-color:hsla(120,65%,75%,0.3);
}

Try it yourself »

Comments

Post a Comment

Popular posts from this blog

Toshiba Canada enters all-in-one PC market

Toshiba of Canada has thrown its hat into the all-in-one personal computer (PC) ring with the launch this week of the Toshiba DX730, a 23” all-in-one machine designed for users who want a large display and multimedia features in an environment where space is at a premium. It's Toshiba's first foray into this form factor, said Mini Saluja, national training manager with Toshiba of Canada, building on its experience in the laptop market. The DX730 has a 23” full HD multitouch display with a glossy black finish on an aluminum stand. It comes with a matching Bluetooth keyboard and mouse, and boasts Onkyo stereo speakers with Waves MaxxAudio sound processing. Two models of the DX730 will initially be available. The $899 model features a second-generation Intel Core i3 processor with 4GB of DDR3 memory, a 1TB 7200 RPM hard drive, a DVD SuperMulti Drive and HDMI in. For $1,049, you can move up to a model with an NVIDIA Geforce GT 540M processor and Intel Core i5, as we...
1 comment
Read more

Xiaomi Mi 11 Ultra review

  Introduction Now that the Pro moniker has gone mainstream, it's Ultra that has come to represent the cream of the crop, and the Xiaomi Mi 11 Ultra can wear that badge proudly. Limited to its home market last year, the ultimate Mi has gone global this time around, and we're happy to have it for review today. We're torn whether it's the camera system's physical appearance that is more striking or the hardware inside. A simply massive raised area on the back looks bolted on, almost after the fact, it's hard to miss, and it's a great conversation starter even if it's not everyone's cup of tea. But its size is warranted - the main camera packs the largest sensor used on a modern-day smartphone, and next to it - two more modules unmatched in their own fields, in one way or another. Oh, and yes, there's also a display here - because why not, but also because it can be useful. There's a lot more than 1.1 inches of ...
Post a Comment
Read more

JavaScript Where To

JavaScript in <body> The example below writes the current date into an existing <p> element when the page loads: Example <html> <body><h1>My First Web Page</h1> <p id="demo"></p> <script type="text/javascript"> document.getElementById("demo").innerHTML=Date(); </script> </body> </html>
Post a Comment
Read more