CSS Color Syntax

By Xah Lee. Date: . Last updated: .

CSS 2 Named Colors

black #000000 white #ffffff silver #c0c0c0 gray #808080 red #ff0000 maroon #800000 yellow #ffff00 olive #808000 lime #00ff00 green #008000 aqua #00ffff teal #008080 blue #0000ff navy #000080 fuchsia #ff00ff purple #800080 orange #ffa500

CSS code example:

p {color:red}

CSS 3 Named Colors

CSS Color Names

RGB Color Syntax

Rgb Hexadecimal

The RGB color model uses 3 values, for {Red, Green, Blue}, each with a value range from 0 to 255, in 2 hexadecimal digits.

/* rgb color by hexadecimal */
p { color: #ffc0cb }

When using hexadecimal, if digit for each value are repeated, it can be abbreviated to just 3 hex digits. Like this:

p { color: #0f7; }
/* same as */
p { color: #00ff77; }

RGB Integer

/* rgb color by integer, 0 to 255 */
p { color: rgb(255, 192, 203) }

RGB Percent

/* rgb color by percentage */
p { color: rgb(100%, 75%, 79%) }

HSL Color Syntax

[see CSS: HSL Color]

Opacity

[see CSS: Opacity]

CSS Color Topic

  1. CSS Color Syntax
  2. CSS Color Names
  3. CSS: HSL Color
  4. CSS: Opacity
  5. CSS: Linear Gradient
  6. CSS: Radial Gradient
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS Basics
  4. JS in Depth
  5. JS Reference
  6. DOM
  7. SVG
  8. JS Misc