- W3.CSS Colors
- Coloring HTML Elements
- Containers:
- Buttons:
- Text:
- Borders:
- Tables:
- Cards:
- Background Colors
- London
- London
- London
- Example
- London
- London
- London
- Text Colors
- London
- London
- Example
- London
- Hover Colors
- London
- Example
- London
- London
- Example
- London
- Color libraries
- HTML Color Shades
- Gray / Grey Web Colors
- Shades of Red
- 16 Million Different Colors
- Web Safe Colors?
- #a9a9a9 Color Information
- #a9a9a9 Color Conversion
- Color Schemes with #a9a9a9
- Alternatives to #a9a9a9
- #a9a9a9 Preview
- Shades and Tints of #a9a9a9
- Tones of #a9a9a9
- Color Blindness Simulator
W3.CSS Colors
The default color scheme used in W3.CSS is inspired by Material Design Colors (colors used in marketing, road signs, and sticky notes).
Coloring HTML Elements
The w3-color and w3-text-color classes can be used to color any HTML element:
Containers:
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Buttons:
Text:
Borders:
Tables:
Cards:
A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads, to have seating for one to eight people, to typically have four wheels. (Wikipedia)
Background Colors
The w3-color classes set the background color for any HTML element:
London
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
London
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
London
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Example
London
London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.
London
London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.
London
London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.
The colors gray and grey are interchangeable in all W3.CSS classes.
Text Colors
The w3-text-color classes set the text color of any HTML element:
London
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
London
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Example
London
London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.
Hover Colors
The w3-hover-color classes define the background hover color for any HTML element:
London
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Example
London
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
The w3-hover-text-color classes define the text hover color for any HTML element:
London
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Example
London
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Color libraries
In addition to standard W3.CSS colors, W3.CSS can also use colors from a lot of different color libraries:
HTML Color Shades
Gray colors are displayed using an equal amount of power to all of the light sources.
To make it easy for you to select a gray color we have compiled a table of gray shades for you:
Gray Shades | HEX | RGB |
---|---|---|
HTML Black | #000000 | rgb(0,0,0) |
#080808 | rgb(8,8,8) | |
#101010 | rgb(16,16,16) | |
#181818 | rgb(24,24,24) | |
#202020 | rgb(32,32,32) | |
#282828 | rgb(40,40,40) | |
#303030 | rgb(48,48,48) | |
#383838 | rgb(56,56,56) | |
#404040 | rgb(64,64,64) | |
#484848 | rgb(72,72,72) | |
#505050 | rgb(80,80,80) | |
#585858 | rgb(88,88,88) | |
#606060 | rgb(96,96,96) | |
#686868 | rgb(104,104,104) | |
HTML DimGray | #696969 | rgb(105,105,105) |
#707070 | rgb(112,112,112) | |
#787878 | rgb(120,120,120) | |
HTML Gray | #808080 | rgb(128,128,128) |
#888888 | rgb(136,136,136) | |
#909090 | rgb(144,144,144) | |
#989898 | rgb(152,152,152) | |
#A0A0A0 | rgb(160,160,160) | |
#A8A8A8 | rgb(168,168,168) | |
HTML DarkGray . | #A9A9A9 | rgb(169,169,169) |
#B0B0B0 | rgb(176,176,176) | |
#B8B8B8 | rgb(184,184,184) | |
X11 Gray | #BEBEBE | rgb(190,190,190) |
HTML Silver | #C0C0C0 | rgb(192,192,192) |
#C8C8C8 | rgb(200,200,200) | |
#D0D0D0 | rgb(208,208,208) | |
HTML LightGray | #D3D3D3 | rgb(211,211,211) |
#D8D8D8 | rgb(216,216,216) | |
HTML Gainsboro | #DCDCDC | rgb(220,220,220) |
#E0E0E0 | rgb(224,224,224) | |
#E8E8E8 | rgb(232,232,232) | |
#F0F0F0 | rgb(240,240,240) | |
HTML WhiteSmoke | #F5F5F5 | rgb(245,245,245) |
#F8F8F8 | rgb(248,248,248) | |
HTML White | #FFFFFF | rgb(255,255,255) |
An anomaly in the table above is that HTML Gray is darker than DarkGray.
The color names of HTML / CSS was inherited from the X11 standard.
HTML / CSS defined gray at the midpoint of the 8-bit gray scale (128,128,128).
X11 defined gray to be (190,190,190); which is closer to HTML silver.
Gray / Grey Web Colors
There are several gray color names in HTML / CSS.
All gray colors are spelled as gray (not grey).
This spelling was inherited from the X11 standard.
All modern browsers accept both gray and grey, but early versions of Internet Explorer did not recognize grey
Shades of Red
If you look at the color table below, you will see the result of varying the red light from 0 to 255, while keeping the green and blue light at zero.
Click on the hexadecimal values, if you want to analyze the color in our color picker.
Red Light | HEX | RGB |
---|---|---|
#000000 | rgb(0,0,0) | |
#080000 | rgb(8,0,0) | |
#100000 | rgb(16,0,0) | |
#180000 | rgb(24,0,0) | |
#200000 | rgb(32,0,0) | |
#280000 | rgb(40,0,0) | |
#300000 | rgb(48,0,0) | |
#380000 | rgb(56,0,0) | |
#400000 | rgb(64,0,0) | |
#480000 | rgb(72,0,0) | |
#500000 | rgb(80,0,0) | |
#580000 | rgb(88,0,0) | |
#600000 | rgb(96,0,0) | |
#680000 | rgb(104,0,0) | |
#700000 | rgb(112,0,0) | |
#780000 | rgb(120,0,0) | |
#800000 | rgb(128,0,0) | |
#880000 | rgb(136,0,0) | |
#900000 | rgb(144,0,0) | |
#980000 | rgb(152,0,0) | |
#A00000 | rgb(160,0,0) | |
#A80000 | rgb(168,0,0) | |
#B00000 | rgb(176,0,0) | |
#B80000 | rgb(184,0,0) | |
#C00000 | rgb(192,0,0) | |
#C80000 | rgb(200,0,0) | |
#D00000 | rgb(208,0,0) | |
#D80000 | rgb(216,0,0) | |
#E00000 | rgb(224,0,0) | |
#E80000 | rgb(232,0,0) | |
#F00000 | rgb(240,0,0) | |
#F80000 | rgb(248,0,0) | |
#FF0000 | rgb(255,0,0) |
16 Million Different Colors
The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors to play with (256 x 256 x 256).
Most modern monitors are capable of displaying at least 16384 different colors.
Web Safe Colors?
Many years ago, when computers supported maximum 256 different colors, a list of 216 «Web Safe Colors» was suggested as a Web standard (reserving 40 fixed system colors).
This is not important now, since most computers can display millions of different colors.
This 216 hex values cross-browser color palette was created to ensure that all computers would display the colors correctly when running a 256 color palette:
000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
#a9a9a9 Color Information
In a RGB color space, hex #a9a9a9 (also known as Dark gray) is composed of 66.3% red, 66.3% green and 66.3% blue. Whereas in a CMYK color space, it is composed of 0% cyan, 0% magenta, 0% yellow and 33.7% black. It has a hue angle of 0 degrees, a saturation of 0% and a lightness of 66.3%. #a9a9a9 color hex could be obtained by blending #ffffff with #535353. Closest websafe color is: #999999.
♥
- f
- t
- g
● #a9a9a9 color description : Gray.
#a9a9a9 Color Conversion
The hexadecimal color #a9a9a9 has RGB values of R:169, G:169, B:169 and CMYK values of C:0, M:0, Y:0, K:0.34. Its decimal value is 11119017.
Hex triplet | a9a9a9 | #a9a9a9 |
---|---|---|
RGB Decimal | 169, 169, 169 | rgb(169,169,169) |
RGB Percent | 66.3, 66.3, 66.3 | rgb(66.3%,66.3%,66.3%) |
CMYK | 0, 0, 0, 34 | |
HSL | 0°, 0, 66.3 | hsl(0,0%,66.3%) |
HSV (or HSB ) | 0°, 0, 66.3 | |
Web Safe | 999999 | #999999 |
CIE-LAB | 69.238, -0, -0.006 |
---|---|
XYZ | 37.71, 39.676, 43.205 |
xyY | 0.313, 0.329, 39.676 |
CIE- LCH | 69.238, 0.006, 266.929 |
CIE-LUV | 69.238, -0.004, -0.009 |
Hunter-Lab | 62.988, -3.365, 3.423 |
Binary | 10101001, 10101001, 10101001 |
Color Schemes with #a9a9a9
Alternatives to #a9a9a9
Below, you can see some colors close to #a9a9a9. Having a set of related colors can be useful if you need an inspirational alternative to your original color choice.
#a9a9a9 Preview
This text has a font color of #a9a9a9.
This paragraph has a background color of #a9a9a9.
This element has a border color of #a9a9a9.
Shades and Tints of #a9a9a9
A shade is achieved by adding black to any pure hue, while a tint is created by mixing white to any pure color. In this example, #020202 is the darkest color, while #f7f7f7 is the lightest one.
Tones of #a9a9a9
A tone is produced by adding gray to any pure hue. In this case, #a9a9a9 is the less saturated color, while #ff5353 is the most saturated one.
Color Blindness Simulator
Below, you can see how #a9a9a9 is perceived by people affected by a color vision deficiency. This can be useful if you need to ensure your color combinations are accessible to color-blind users.
- #b0acad Protanopia 1% of men
- #bca8af Deuteranopia 1% of men
- #afabb8 Tritanopia 0.001% of the population
- #adabab Protanomaly 1% of men, 0.01% of women
- #b5a8ac Deuteranomaly 6% of men, 0.4% of women
- #adaab2 Tritanomaly 0.01% of the population