Table background colors

From Meta, a Wikimedia project coordination wiki
Jump to: navigation, search

Colors used on the web (for backgrounds, borders, or text colors and any decoration) are natively represented in the sRGB color space. Some predefined colors are representable by names, however most colors are specified by decomposing them in each one of the 3 color planes (red, green, blue) with one of 256 values from 0 for the darkest one (intensity level of this color plane in black areas) to 255 for the lightest one (intensity level of this color plane in white areas).

Basic introduction to color encodings and color spaces on the web[edit]

Pure black does not exist in our real world, it is just dark enough for human eyes to not see the difference with a darker area. As well, pure white does not exist (it is just light intense enough to be indiscernible with higher intensities to human eyes because it is saturated; also it depends on the effective spectral composition, so white is modeled from human vision under standardized lighting condition, by the definition of the "white point" in the standard sRGB colorspace, generally as the level of white that does not harm vision, without reflections, without glaring effects, and with maximal diffusion, of an outdoor scene not directly exposed to the sun but only to diffuse light; as this perceptual model is difficult to reproduce, the sRGB model has been more precisely modeled by artificial light sources; also the spectral absorption of common dyes used on color displays have been used to fit the sRGB color space so that it best approximates the natural human vision colorspace, with the widest gamut of colors perceived with only 3 base components).

(Low values of the blue component generate what we perceive as "wam" colors, and they include reds and most greens; high values of the blue component are perceived as "cold" colors such as plain blue). However this is warm vs. cold feeling is less effective if the color components are less contrasted so that the color is nearer from a pure grey scale. So the relative additive quantity of white adds warmness, and relative quantity of blackness adds more coldness.)

On the Web these sRGB colors colored with either 256 or 16 levels of intensity for each of the 3 components are coded using either 6 or 3 digits, either as "#RrGgBb" or as "#RGB", where Rr or R is the hexadecimal intensity level for the red component, Gg or G is for the green component, and Bb or B is for the blue component. In most applications, colors coded with 3 digits only are enough (notably for coloring text). More colors are needed only to accurately represent background colors and subtle shades of colors on natural objects, in photographs and some colorful artistic drawings and paintings.

Finally, more colors may be represented with more precision (but not with the hexadecimal shortcut notation), but noting them like "rgb(R%, G%, B%)"; with R, G and B as any real value between 0 and 100 (including values with fractional decimals), where "0%" is equivalent to the hexadecimal pair "00", and "100%" is equivalent to the hexadecimal pair "FF" (some devices, usually not conventional display screens; may extend this gamut with percentages exceeding 100%, but negative percentages are impossible in the standard sRGB colorspace as it is already the smallest representable intensity in the absence of light.

In datatables where color background is used to emphasize some values, adding CSS styles often increases the wiki code size, making the table difficult to edit. It is possible however to replace the CSS style="background-color:#RGB" by a much short cell attribute bgcolor=#RGB which will automatically map to the equivalent CSS in browsers, provided that there are not competing and more selectice CSS styles specified in these colored cells.

But note also that use of colors in tables should not be a replacement for presenting the actual data because colors alone can generate accessibility issues (notably if they are not sufficiently contrasted (in lightness) because each other: colors that are only differentiated by hue (or even worse only by saturation) are not accessible to many users.

Some sRGB colors coded with 3 hexadecimal digits[edit]

When the two hex digits of each red/green/blue component are equal, you can strip one of these digits to use a RGB color code on 3 digits only instead of 6.
So #AABBCC is the same as #ABC (most contents on Wikipedia will not need more precision for enhancing the user interface; 256 values or more per RGB color component is only for photos with soft variation of shades).
You could also reduce these colors with only 6 and the 16 possible hex digits : 0; 3; 6; 9; C; or F (this gives the 216 colors of the default "en:Web palette" usable on 256-color displays in association with the 16 standard HTML colors; the web palette is now deprecated as it is not the best fitting choice and it works poorly with devices with low color depths or monochromatic displays or printing; and also does not fit well with th rendering of photography with a limited number of color inks).
For this reason, the HTML, CSS and SVG standards of the W3C have assigned precise assignment of RGB color values by defining them in a standard colorspace. Standard colors are then equivalent whever you use their standard names (only a few are standardized and recognized everywhere, but some browsers do not map them to the correct colors), or color values in the sRGB color space, or in the alternate HSL colorspace (or the YCbCr colorspace for videos). CMYK colorspaces are not supported in CSS (as they are device dependant depending on how they map blackness, or dependant on the printed support, which are still unpredictable and not easily selectable).
FF0 EE0 DF0 CF0 BF0 AF0 9F0 8F0 6F0 4F0 2F0 0F0 FF2 EE2 DF2 CF2 BF2 AF2 9F2 8F2 6F2 4F2 2F2 0F2 FF4 EE4 DF4 CF4 BF4 AF4 9F4 8F4 6F4 4F4 2F4 0F4
FE0 EE0 DE0 CE0 BE0 AE0 9E0 8E0 6E0 4E0 2E0 0E0 FE2 EE2 DE2 CE2 BE2 AE2 9E2 8E2 6E2 4E2 2E2 0E2 FE4 EE4 DE4 CE4 BE4 AE4 9E4 8E4 6E4 4E4 2E4 0E4
FD0 ED0 DD0 CD0 BD0 AD0 9D0 8D0 6D0 4D0 2D0 0D0 FD2 ED2 DD2 CD2 BD2 AD2 9D2 8D2 6D2 4D2 2D2 0D2 FD4 ED4 DD4 CD4 BD4 AD4 9D4 8D4 6D4 4D4 2D4 0D4
FC0 EC0 DC0 CC0 BC0 AC0 9C0 8C0 6C0 4C0 2C0 0C0 FC2 EC2 DC2 CC2 BC2 AC2 9C2 8C2 6C2 4C2 2C2 0C2 FC4 EC4 DC4 CC4 BC4 AC4 9C4 8C4 6C4 4C4 2C4 0C4
FB0 EB0 DB0 CB0 BB0 AB0 9B0 8B0 6B0 4B0 2B0 0B0 FB2 EB2 DB2 CB2 BB2 AB2 9B2 8B2 6B2 4B2 2B2 0B2 FB4 EB4 DB4 CB4 BB4 AB4 9B4 8B4 6B4 4B4 2B4 0B4
FA0 EA0 DA0 CA0 BA0 AA0 9A0 8A0 6A0 4A0 2A0 0A0 FA2 EA2 DA2 CA2 BA2 AA2 9A2 8A2 6A2 4A2 2A2 0A2 FA4 EA4 DA4 CA4 BA4 AA4 9A4 8A4 6A4 4A4 2A4 0A4
F90 E90 D90 C90 B90 A90 990 890 690 490 290 090 F92 E92 D92 C92 B92 A92 992 892 692 492 292 092 F94 E94 D94 C94 B94 A94 994 894 694 494 294 094
F80 E80 D80 C80 B80 A80 980 880 680 480 280 080 F82 E82 D82 C82 B82 A82 982 882 682 482 282 082 F84 E84 D84 C84 B84 A84 984 884 684 484 284 084
F70 E70 D70 C70 B70 A70 970 870 670 470 270 070 F72 E72 D72 C72 B72 A72 972 872 672 472 272 072 F74 E74 D74 C74 B74 A74 974 874 674 474 274 074
F60 E60 D60 C60 B60 A60 960 860 660 460 260 060 F62 E62 D62 C62 B62 A62 962 862 662 462 262 062 F64 E64 D64 C64 B64 A64 964 864 664 464 264 064
F50 E50 D50 C50 B50 A50 950 850 650 450 250 050 F52 E52 D52 C52 B52 A52 952 852 652 452 252 052 F54 E54 D54 C54 B54 A54 954 854 654 454 254 054
F40 E40 D40 C40 B40 A40 940 840 640 440 240 040 F42 E42 D42 C42 B42 A42 942 842 642 442 242 042 F44 E44 D44 C44 B44 A44 944 844 644 444 244 044
F20 E20 D20 C20 B20 A20 920 820 620 420 220 020 F22 E22 D22 C22 B22 A22 922 822 622 422 222 022 F24 E24 D24 C24 B24 A24 924 824 624 424 224 024
F00 E00 D00 C00 B00 A00 900 800 600 400 200 000 F02 E02 D02 C02 B02 A02 902 802 602 402 202 002 F04 E04 D04 C04 B04 A04 904 804 604 404 204 004
FF6 EE6 DF6 CE6 BF6 AE6 9F6 8F6 6F6 4F6 2F6 0F6 FF8 EE8 DF8 CE8 BF8 AE8 9F8 8F8 6F8 4F8 2F8 0F8 FFA EEA DFA CEA BFA AEA 9FA 8FA 6FA 4FA 2FA 0FA
FE6 EE6 DE6 CE6 BE6 AE6 9E6 8E6 6E6 4E6 2E6 0E6 FE8 EE8 DE8 CE8 BE8 AE8 9E8 8E8 6E8 4E8 2E8 0E8 FEA EEA DEA CEA BEA AEA 9EA 8EA 6EA 4EA 2EA 0EA
FD6 ED6 DD6 CD6 BD6 AD6 9D6 8D6 6D6 4D6 2D6 0D6 FD8 ED8 DD8 CD8 BD8 AD8 9D8 8D8 6D8 4D8 2D8 0D8 FDA EDA DDA CDA BDA ADA 9DA 8DA 6DA 4DA 2DA 0DA
FC6 EC6 DC6 CC6 BC6 AC6 9C6 8C6 6C6 4C6 2C6 0C6 FC8 EC8 DC8 CC8 BC8 AC8 9C8 8C8 6C8 4C8 2C8 0C8 FCA ECA DCA CCA BCA ACA 9CA 8CA 6CA 4CA 2CA 0CA
FB6 EB6 DB6 CB6 BB6 AB6 9B6 8B6 6B6 4B6 2B6 0B6 FB8 EB8 DB8 CB8 BB8 AB8 9B8 8B8 6B8 4B8 2B8 0B8 FBA EBA DBA CBA BBA ABA 9BA 8BA 6BA 4BA 2BA 0BA
FA6 EA6 DA6 CA6 BA6 AA6 9A6 8A6 6A6 4A6 2A6 0A6 FA8 EA8 DA8 CA8 BA8 AA8 9A8 8A8 6A8 4A8 2A8 0A8 FAA EAA DAA CAA BAA AAA 9AA 8AA 6AA 4AA 2AA 0AA
F96 E96 D96 C96 B96 A96 996 896 696 496 296 096 F98 E98 D98 C98 B98 A98 998 898 698 498 298 098 F9A E9A D9A C9A B9A A9A 99A 89A 69A 49A 29A 09A
F86 E86 D86 C86 B86 A86 986 886 686 486 286 086 F88 E88 D88 C88 B88 A88 988 888 688 488 288 088 F8A E8A D8A C8A B8A A8A 98A 88A 68A 48A 28A 08A
F76 E76 D76 C76 B76 A76 976 876 676 476 276 076 F78 E78 D78 C78 B78 A78 978 878 678 478 278 078 F7A E7A D7A C7A B7A A7A 97A 87A 67A 47A 27A 07A
F66 E66 D66 C66 B66 A66 966 866 666 466 266 066 F68 E68 D68 C68 B68 A68 968 868 668 468 268 068 F6A E6A D6A C6A B6A A6A 96A 86A 66A 46A 26A 06A
F56 E56 D56 C56 B56 A56 956 856 656 456 256 056 F58 E58 D58 C58 B58 A58 958 858 658 458 258 058 F5A E5A D5A C5A B5A A5A 95A 85A 65A 45A 25A 05A
F46 E46 D46 C46 B46 A46 946 846 646 446 246 046 F48 E48 D48 C48 B48 A48 948 848 648 448 248 048 F4A E4A D4A C4A B4A A4A 94A 84A 64A 44A 24A 04A
F26 E26 D26 C26 B26 A26 926 826 626 426 226 026 F28 E28 D28 C28 B28 A28 928 828 628 428 228 028 F2A E2A D2A C2A B2A A2A 92A 82A 62A 42A 22A 02A
F06 E06 D06 C06 B06 A06 906 806 606 406 206 006 F08 E08 D08 C08 B08 A08 908 808 608 408 208 008 F0A E0A D0A C0A B0A A0A 90A 80A 60A 40A 20A 00A
FFC EFC DFC CFC BFC AFC 9FC 8FC 6FC 4FC 2FC 0FC FFE EFE DFE CFE BFE AFE 9FE 8FE 6FE 4FE 2FE 0FE FFF EFF DFF CFF BFF AFF 9FF 8FF 6FF 4FF 2FF 0FF
FEC EEC DEC CEC BEC AEC 9EC 8EC 6EC 4EC 2EC 0EC FEE EEE DEE CEE BEE AEE 9EE 8EE 6EE 4EE 2EE 0EE FEF EEF DEF CEF BEF AEF 9EF 8EF 6EF 4EF 2EF 0EF
FDC EDC DDC CDC BDC ADC 9DC 8DC 6DC 4DC 2DC 0DC FDE EDE DDE CDE BDE ADE 9DE 8DE 6DE 4DE 2DE 0DE FDF EDF DDF CDF BDF ADF 9DF 8DF 6DF 4DF 2DF 0DF
FCC ECC DCC CCC BCC ACC 9CC 8CC 6CC 4CC 2CC 0CC FCE ECE DCE CCE BCE ACE 9CE 8CE 6CE 4CE 2CE 0CE FCF ECF DCF CCF BCF ACF 9CF 8CF 6CF 4CF 2CF 0CF
FBC EBC DBC CBC BBC ABC 9BC 8BC 6BC 4BC 2BC 0BC FBE EBE DBE CBE BBE ABE 9BE 8BE 6BE 4BE 2BE 0BE FBF EBF DBF CBF BBF ABF 9BF 8BF 6BF 4BF 2BF 0BF
FAC EAC DAC CAC BAC AAC 9AC 8AC 6AC 4AC 2AC 0AC FAE EAE DAE CAE BAE AAE 9AE 8AE 6AE 4AE 2AE 0AE FAF EAF DAF CAF BAF AAF 9AF 8AF 6AF 4AF 2AF 0AF
F9C E9C D9C C9C B9C A9C 99C 89C 69C 49C 29C 09C F9E E9E D9E C9E B9E A9E 99E 89E 69E 49E 29E 09E F9F E9F D9F C9F B9F A9F 99F 89F 69F 49F 29F 09F
F8C E8C D8C C8C B8C A8C 98C 88C 68C 48C 28C 08C F8E E8E D8E C8E B8E A8E 98E 88E 68E 48E 28E 08E F8F E8F D8F C8F B8F A8F 98F 88F 68F 48F 28F 08F
F7C E7C D7C C7C B7C A7C 97C 87C 67C 47C 27C 07C F7E E7E D7E C7E B7E A7E 97E 87E 67E 47E 27E 07E F7F E7F D7F C7F B7F A7F 97F 87F 67F 47F 27F 07F
F6C E6C D6C C6C B6C A6C 96C 86C 66C 46C 26C 06C F6E E6E D6E C6E B6E A6E 96E 86E 66E 46E 26E 06E F6F E6F D6F C6F B6F A6F 96F 86F 66F 46F 26F 06F
F5C E5C D5C C5C B5C A5C 95C 85C 65C 45C 25C 05C F5E E5E D5E C5E B5E A5E 95E 85E 65E 45E 25E 05E F5F E5F D5F C5F B5F A5F 95F 85F 65F 45F 25F 05F
F4C E4C D4C C4C B4C A4C 94C 84C 64C 44C 24C 04C F4E E4E D4E C4E B4E A4E 94E 84E 64E 44E 24E 04E F4F E4F D4F C4F B4F A4F 94F 84F 64F 44F 24F 04F
F2C E2C D2C C2C B2C A2C 92C 82C 62C 42C 22C 02C F2E E2E D2E C2E B2E A2E 92E 82E 62E 42E 22E 02E F2F E2F D2F C2F B2F A2F 92F 82F 62F 42F 22F 02F
F0C E0C D0C C0C B0C A0C 90C 80C 60C 40C 20C 00C F0E E0E D0E C0E B0E A0E 90E 80E 60E 40E 20E 00E F0F E0F D0F C0F B0F A0F 90F 80F 60F 40F 20F 00F
To compact the wiki code of the table above, the "background-color:" CSS styles of the table (found in the next section) are replaced by equivalent bgcolor attributes.
Note that setting background colors also requires controling the color of text (the table below is not readable for cells showing dark colors because the text remains black within these cells). So the two colors are not usable to present orthogonal/independant data values.
The table above maps the additional 0 and F single-hex digit values (equivalent to 00 and FF hex pairs) missing in the table of the next section below.
And because the human eye is more sensitive to the difference of levels of green in medium intensities, additional values are shown for greens in the middle high values (high values of the sRGB colorspace are compressed due to saturation of human vision so the medium physical intensities are "transfered" to medium-high values in the sRGB color space).
So this table will offer a larger gamut and easier reading than the table in the next section, which is also more limited in its gamut of easily differenciable colors.

Some colors coded with 6 hexadecimal digits[edit]

This is a systematic table of a few hundred colors. AA, BB, and CC in the above example represent hex digits that give the brightness of the red, green, and blue components, respectively, thereby enabling 256 levels per component, or 16,777,216 different colors.

Note that the palette below forgets the plain colors (using 00 and FF pairs of hex digits). And it does not show the full palette of the millions colors possible with this encoding.
333333 444444 666666 888888 AAAAAA CCCCCC DDDDDD
222222 442222 662222 882222 AA2222 CC2222 EE2222
224422 444422 664422 884422 AA4422 CC4422 EE4422
226622 446622 666622 886622 AA6622 CC6622 EE6622
228822 448822 668822 888822 AA8822 CC8822 EE8822
22AA22 44AA22 66AA22 88AA22 AAAA22 CCAA22 EEAA22
22CC22 44CC22 66CC22 88CC22 AACC22 CCCC22 EECC22
22EE22 44EE22 66EE22 88EE22 AAEE22 CCEE22 EEEE22
222244 442244 662244 882244 AA2244 CC2244 EE2244
224444 444444 664444 884444 AA4444 CC4444 EE4444
226644 446644 666644 886644 AA6644 CC6644 EE6644
228844 448844 668844 888844 AA8844 CC8844 EE8844
22AA44 44AA44 66AA44 88AA44 AAAA44 CCAA44 EEAA44
22CC44 44CC44 66CC44 88CC44 AACC44 CCCC44 EECC44
22EE44 44EE44 66EE44 88EE44 AAEE44 CCEE44 EEEE44
222266 442266 662266 882266 AA2266 CC2266 EE2266
224466 444466 664466 884466 AA4466 CC4466 EE4466
226666 446666 666666 886666 AA6666 CC6666 EE6666
228866 448866 668866 888866 AA8866 CC8866 EE8866
22AA66 44AA66 66AA66 88AA66 AAAA66 CCAA66 EEAA66
22CC66 44CC66 66CC66 88CC66 AACC66 CCCC66 EECC66
22EE66 44EE66 66EE66 88EE66 AAEE66 CCEE66 EEEE66
222288 442288 662288 882288 AA2288 CC2288 EE2288
224488 444488 664488 884488 AA4488 CC4488 EE4488
226688 446688 666688 886688 AA6688 CC6688 EE6688
228888 448888 668888 888888 AA8888 CC8888 EE8888
22AA88 44AA88 66AA88 88AA88 AAAA88 CCAA88 EEAA88
22CC88 44CC88 66CC88 88CC88 AACC88 CCCC88 EECC88
22EE88 44EE88 66EE88 88EE88 AAEE88 CCEE88 EEEE88
2222AA 4422AA 6622AA 8822AA AA22AA CC22AA EE22AA
2244AA 4444AA 6644AA 8844AA AA44AA CC44AA EE44AA
2266AA 4466AA 6666AA 8866AA AA66AA CC66AA EE66AA
2288AA 4488AA 6688AA 8888AA AA88AA CC88AA EE88AA
22AAAA 44AAAA 66AAAA 88AAAA AAAAAA CCAAAA EEAAAA
22CCAA 44CCAA 66CCAA 88CCAA AACCAA CCCCAA EECCAA
22EEAA 44EEAA 66EEAA 88EEAA AAEEAA CCEEAA EEEEAA
2222CC 4422CC 6622CC 8822CC AA22CC CC22CC EE22CC
2244CC 4444CC 6644CC 8844CC AA44CC CC44CC EE44CC
2266CC 4466CC 6666CC 8866CC AA66CC CC66CC EE66CC
2288CC 4488CC 6688CC 8888CC AA88CC CC88CC EE88CC
22AACC 44AACC 66AACC 88AACC AAAACC CCAACC EEAACC
22CCCC 44CCCC 66CCCC 88CCCC AACCCC CCCCCC EECCCC
22EECC 44EECC 66EECC 88EECC AAEECC CCEECC EEEECC
2222EE 4422EE 6622EE 8822EE AA22EE CC22EE EE22EE
2244EE 4444EE 6644EE 8844EE AA44EE CC44EE EE44EE
2266EE 4466EE 6666EE 8866EE AA66EE CC66EE EE66EE
2288EE 4488EE 6688EE 8888EE AA88EE CC88EE EE88EE
22AAEE 44AAEE 66AAEE 88AAEE AAAAEE CCAAEE EEAAEE
22CCEE 44CCEE 66CCEE 88CCEE AACCEE CCCCEE EECCEE
22EEEE 44EEEE 66EEEE 88EEEE AAEEEE CCEEEE EEEEEE