CSS/Properties/color/keywords

Note: As of [CSS Color], the CSS2 System Color values have been deprecated in favor of the CSS3 UI ‘[appearance]’ property.

• ActiveBorder
  Active window border.

• ActiveCaption
  Active window caption.

• AppWorkspace
  Background color of multiple document interface.

• Background
  Desktop background.

• ButtonFace
  The face background color for 3-D elements that appear 3-D due to one layer of surrounding border.

• ButtonHighlight
  The color of the border facing the light source for 3-D elements that appear 3-D due to one layer of surrounding border.

• ButtonShadow
  The color of the border away from the light source for 3-D elements that appear 3-D due to one layer of surrounding border.

• ButtonText
  Text on push buttons.

• CaptionText
  Text in caption, size box, and scrollbar arrow box.

• GrayText
  Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.

• Highlight
  Item(s) selected in a control.

• HighlightText
  Text of item(s) selected in a control.

• InactiveBorder
  Inactive window border.

• InactiveCaption
  Inactive window caption.

• InactiveCaptionText
  Color of text in an inactive caption.

• InfoBackground
  Background color for tooltip controls.

• InfoText
  Text color for tooltip controls.

• Menu
  Menu background.

• MenuText
  Text in menus.

• Scrollbar
  Scroll bar gray area.

• ThreeDDarkShadow
  The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

• ThreeDFace
  The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

• ThreeDHighlight
  The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

• ThreeDLightShadow
  The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

• ThreeDShadow
  The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

• Window
  Window background.

• WindowFrame
  Window frame.

• WindowText
  Text in windows.

Источник

HTML Colors

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

Color Names

In HTML, a color can be specified by using a color name:

Background Color

You can set the background color for HTML elements:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

Hello World

Lorem ipsum.

Text Color

You can set the color of text:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

Hello World

Lorem ipsum.

Ut wisi enim.

Border Color

You can set the color of borders:

Hello World

Hello World

Hello World

Example

Hello World

Hello World

Hello World

Color Values

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

The following three elements have their background color set with RGB, HEX, and HSL values:

The following two elements have their background color set with RGBA and HSLA values, which add an Alpha channel to the color (here we have 50% transparency):

Источник

CSS Legal Color Values

Colors in CSS can be specified by the following methods:

• Hexadecimal colors
• Hexadecimal colors with transparency
• RGB colors
• RGBA colors
• HSL colors
• HSLA colors
• Predefined/Cross-browser color names
• With the currentcolor keyword

Hexadecimal Colors

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 00 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 00.

Example

Define different HEX colors:

Hexadecimal Colors With Transparency

A hexadecimal color is specified with: #RRGGBB. To add transparency, add two additional digits between 00 and FF.

Example

Define different HEX colors with transparency:

RGB Colors

An RGB color value is specified with the rgb() function, which has the following syntax:

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:

RGBA Colors

RGBA color values are an extension of RGB color values with an alpha channel — which specifies the opacity of the object.

An RGBA color is specified with the rgba() function, which has the following syntax:

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Example

Define different RGB colors with opacity:

HSL Colors

HSL stands for hue, saturation, and lightness — and represents a cylindrical-coordinate representation of colors.

An HSL color value is specified with the hsl() function, which has the following syntax:

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:

HSLA Colors

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 the hsla() function, which has the following syntax:

hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Example

Define different HSL colors with opacity:

Predefined/Cross-browser Color Names

140 color names are predefined in the HTML and CSS color specification.

For example: blue , red , coral , brown , etc:

Example

Define different color names:

A list of all predefined names can be found in our Color Names Reference.

The currentcolor Keyword

The currentcolor keyword refers to the value of the color property of an element.

Example

The border color of the following element will be blue, because the text color of the element is blue:

Источник

RGB Color Codes Chart

Hover with cursor on color to get the hex and decimal color codes below:

RGB color space

RGB color space or RGB color system, constructs all the colors from the combination of the Red, Green and Blue colors.

The red, green and blue use 8 bits each, which have integer values from 0 to 255. This makes 256*256*256=16777216 possible colors.

Each pixel in the LED monitor displays colors this way, by combination of red, green and blue LEDs (light emitting diodes).

When the red pixel is set to 0, the LED is turned off. When the red pixel is set to 255, the LED is turned fully on.

Any value between them sets the LED to partial light emission.

RGB color format & calculation

RGB code has 24 bits format (bits 0..23):

RED[7:0]								GREEN[7:0]								BLUE[7:0]
23	16	15	8	7	0

RGB = (R*65536)+(G*256)+B , (when R is RED, G is GREEN and B is BLUE)

Calculation examples

White RGB Color

White RGB code = 255*65536+255*256+255 = #FFFFFF

Blue RGB Color

Blue RGB code = 0*65536+0*256+255 = #0000FF

Red RGB Color

Red RGB code = 255*65536+0*256+0 = #FF0000

Green RGB Color

Green RGB code = 0*65536+255*256+0 = #00FF00

Gray RGB Color

Gray RGB code = 128*65536+128*256+128 = #808080

Yellow RGB Color

Yellow RGB code = 255*65536+255*256+0 = #FFFF00

RGB color table

See also

• RGB to hex converter
• RGB to HSV converter
• RGB to HSL converter
• RGB to CMYK converter
• Color conversions
• Color wheel chart
• Screen color tester
• HTML color codes
• HTML character codes
• ASCII table
• Unicode characters
• Web safe colors
• Yellow color
• Gold color

Источник

Colors Tutorial

Colors are displayed combining RED, GREEN, and BLUE light.

Color Names

With CSS, colors can be set by using color names:

Example

CSS Color Values

With CSS, colors can be specified in different ways:

• By color names
• As RGB values
• As hexadecimal values
• As HSL values (CSS3)
• As HWB values (CSS4)
• With the currentcolor keyword

RGB Colors

RGB color values are supported in all browsers.

An RGB color value is specified with: rgb( RED , GREEN , BLUE ).

Each parameter defines the intensity of the color as an integer between 0 and 255.

For example, rgb(0,0,255) is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0.

Example

Shades of gray are often defined using equal values for all the 3 light sources:

Example

Hexadecimal Colors

Hexadecimal color values are also supported in all browsers.

A hexadecimal color is specified with: # RR GG BB .

RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color.

For example, #0000FF is displayed as blue, because the blue component is set to its highest value (FF) and the others are set to 00.

Example

Shades of gray are often defined using equal values for all the 3 light sources:

Example

Upper Case or Lower Case?

You can use upper case or lower case letters to specify hexadecimal values.

Lower case are easier to write. Upper case are easier to read.

Color Names

CSS supports 140 standard color names.

In the next chapter you will find a complete alphabetical list of color names with hexadecimal values:

Color Name	Hex	Color
AliceBlue	#F0F8FF
AntiqueWhite	#FAEBD7
Aqua	#00FFFF
Aquamarine	#7FFFD4
Azure	#F0FFFF
Beige	#F5F5DC
Bisque	#FFE4C4

The currentcolor Keyword

The currentcolor keyword refers to the value of the color property of an element.

Example

The border color of the following element will be blue, because the text color of the element is blue:

Источник