CSS Legal Color Values

## CSS Reference

CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX CSS3 Browser Support

## CSS Properties

animation
@keyframes
animation
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-play-state
appearance
backface-visibility
background
background
background-attachment
background-color
background-image
background-position
background-repeat
background-clip
background-origin
background-size
border
border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-collapse
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
border-bottom-left-radius
border-bottom-right-radius
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-radius
border-top-left-radius
border-top-right-radius
bottom
box
box-align
box-direction
box-flex
box-flex-group
box-lines
box-ordinal-group
box-orient
box-pack
box-sizing
box-shadow
caption-side
clear
clip
color
column
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
float
font
font
font-family
font-size
font-style
font-variant
font-weight
@font-face
font-size-adjust
font-stretch
grid-columns
grid-rows
hanging-punctuation
height
icon
left
letter-spacing
line-height
list-style
list-style
list-style-image
list-style-position
list-style-type
margin
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
nav
opacity
outline
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding
padding-bottom
padding-left
padding-right
padding-top
page-break
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
position
punctuation-trim
quotes
resize
right
rotation
rotation-point
table-layout
target
target
target-name
target-new
target-position
text
text-align
text-decoration
text-indent
text-justify
text-outline
text-overflow
text-shadow
text-transform
text-wrap
top
transform
transform
transform-origin
transform-style
transition
transition
transition-property
transition-duration
transition-timing-function
transition-delay
unicode-bidi
vertical-align
visibility
width
white-space
word-spacing
word-break
word-wrap
z-index

# CSS Legal Color Values

« Previous
Next Reference »

## 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

Define different HEX colors:

#p1 {background-color:#ff0000;} / * red */
#p2 {background-color:#00ff00;} / * green */
#p3 {background-color:#0000ff;} / * blue */
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 equal color: rgb(0,0,255) and rgb(0%,0%,100%).

## Example

Define different RGB colors:

#p1 {background-color:rgb(255,0,0);} / * red */
#p2 {background-color:rgb(0,255,0);} / * green */
#p3 {background-color:rgb(0,0,255);} / * blue */
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

Define different RGB colors with opacity:

#p1 {background-color:rgba(255,0,0,0.3);} / * red with opacity */
#p2 {background-color:rgba(0,255,0,0.3);} / * green with opacity */
#p3 {background-color:rgba(0,0,255,0.3);} / * blue with opacity */
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

Define different HSL colors:

#p1 {background-color:hsl(120,100%,50%);} / * green */
#p2 {background-color:hsl(120,100%,75%);} / * light green */
#p3 {background-color:hsl(120,100%,25%);} / * dark green */
#p4 {background-color:hsl(120,60%,70%);} / * pastel green */
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

Define different HSL colors with opacity:

#p1 {background-color:hsla(120,100%,50%,0.3);} / * green with opacity */
#p2 {background-color:hsla(120,100%,75%,0.3);} / * light green with opacity */
#p3 {background-color:hsla(120,100%,25%,0.3);} / * dark green with opacity */
#p4 {background-color:hsla(120,60%,70%,0.3);} / * pastel green with opacity */
Try it yourself »

## Predefined/Cross-browser Color Names

140 color names are predefined in the HTML and CSS color specification. Look at our table of predefined color names.

« Previous
Next Reference »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE