Specyfikacja stylów wprowadza następujące sposoby podawania wartości kolorów:
black (#000000) silver (#C0C0C0) gray (#808080) white (#FFFFFF) maroon (#800000) red (#FF0000) purple (#800080) fuchsia (#FF00FF) green (#008000) lime (#00FF00) olive (#808000) yellow (#FFFF00) navy (#000080) blue (#0000FF) teal (#008080) aqua (#00FFFF)
Ponadto CSS 2.1 definiuje jeszcze jeden dodatkowy kolor podstawowy: orange (#FFA500).
CSS 3 określa dodatkowo 130 kolorów rozszerzonych.
HSL jest bardzo intuicyjnym modelem opisu kolorów. Wystarczy wybrać określony odcień z koła barw (H), a następnie odpowiednio sterować nasyceniem (S) i jasnością (L), aby uzyskać pożądany kolor.
Nie obsługuje MSIE 8.0 (od wersji 9.0 wszystko już jest w porządku)!
Przykład:
Sterowanie nasyceniem barwy czerwonej:
Definicja | Kolor |
---|---|
hsl(0, 0%, 50%) | |
hsl(0, 25%, 50%) | |
hsl(0, 50%, 50%) | |
hsl(0, 75%, 50%) | |
hsl(0, 100%, 50%) |
Sterowanie jasnością barwy czerwonej:
Definicja | Kolor |
---|---|
hsl(0, 100%, 0%) | |
hsl(0, 100%, 25%) | |
hsl(0, 100%, 50%) | |
hsl(0, 100%, 75%) | |
hsl(0, 100%, 100%) |
Nie obsługuje MSIE 8.0 (od wersji 9.0 wszystko już jest w porządku)!
Jeśli przeglądarka nie obsługuje przezroczystości, żaden kolor nie zostanie przypisany.
Kolor | Definicja | Nazwa | Objaśnienie |
---|---|---|---|
ActiveBorder | Active window border | Obramowanie aktywnego okna | |
ActiveCaption | Active window caption | Nagłówek aktywnego okna | |
AppWorkspace | Background color of multiple document interface | Kolor tła wielodokumentowego interfejsu (MDI) | |
Background | Desktop background | Tło pulpitu | |
ButtonFace | Face color for three-dimensional display elements | Powierzchnia czołowa trójwymiarowych elementów | |
ButtonHighlight | Dark shadow for three-dimensional display elements (for edges facing away from the light source). Shadow color for three-dimensional display elements | Cień trójwymiarowych elementów (krawędzie oddalone od światła) | |
ButtonShadow | Shadow color for three-dimensional display elements | Kolor cienia trójwymiarowych elementów | |
ButtonText | Text on push buttons | Tekst na przyciskach | |
CaptionText | Text in caption, size box, and scroll bar arrow box | Tekst w nagłówkach, polach zmiany rozmiaru i polach przewijania zawartości | |
GrayText | Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color | Kolor tekstu na zablokowanych elementach | |
Highlight | Item(s) selected in a control | Wybrana pozycja | |
HighlightText | Text of item(s) selected in a control | Tekst wybranej pozycji | |
InactiveBorder | Inactive window border | Obramowanie nieaktywnego okna | |
InactiveCaption | Inactive window caption | Nagłówek nieaktywnego okna | |
InactiveCaptionText | Color of text in an inactive caption | Kolor tekstu w nagłówku nieaktywnego okna | |
InfoBackground | Background color for tooltip controls | Tło w informacji narzędziowej ("dymku", który pojawia się po wskazaniu elementu myszką) | |
InfoText | Text color for tooltip controls | Tekst w informacji narzędziowej ("dymku", który pojawia się po wskazaniu elementu myszką) | |
Menu | Menu background | Tło menu | |
MenuText | Text in menus | Tekst w menu | |
Scrollbar | Scroll bar gray area | Szara powierzchnia w suwaku do przewijania zawartości | |
ThreeDDarkShadow | Dark shadow for three-dimensional display elements | Cień trójwymiarowych elementów | |
ThreeDFace | Face color for three-dimensional display elements | Powierzchnia czołowa trójwymiarowych elementów | |
ThreeDHighlight | Highlight color for three-dimensional display elements | Kolor podświetlenia dla trójwymiarowych elementów | |
ThreeDLightShadow | Light color for three-dimensional display elements (for edges facing the light source) | Kolor oświetlenia trójwymiarowych elementów (krawędzie od strony światła) | |
ThreeDShadow | Dark shadow for three-dimensional display elements | Cień trójwymiarowych elementów | |
Window | Window background | Tło okna | |
WindowFrame | Window frame | Ramka okna | |
WindowText | Text in windows | Tekst w oknach |
Źródło: Cascading Style Sheets, Level 2
(CSS 3)
MSIE do wersji 7.0 (włącznie) nie obsługuje następujących kolorów: darkgrey, darkslategrey, dimgrey, grey, lightgray, lightslategrey, slategrey. Od wersji 8.0 wszystko jest już w porządku.
Definicja | HEX | Kolor |
---|---|---|
aliceblue | #F0F8FF | |
antiquewhite | #FAEBD7 | |
aquamarine | #7FFFD4 | |
azure | #F0FFFF | |
beige | #F5F5DC | |
bisque | #FFE4C4 | |
blanchedalmond | #FFEBCD | |
blueviolet | #8A2BE2 | |
brown | #A52A2A | |
burlywood | #DEB887 | |
cadetblue | #5F9EA0 | |
chartreuse | #7FFF00 | |
chocolate | #D2691E | |
coral | #FF7F50 | |
cornflowerblue | #6495ED | |
cornsilk | #FFF8DC | |
crimson | #DC143C | |
cyan | #00FFFF | |
darkblue | #00008B | |
darkcyan | #008B8B | |
darkgoldenrod | #B8860B | |
darkgray | #A9A9A9 | |
darkgreen | #006400 | |
darkgrey | #A9A9A9 | |
darkkhaki | #BDB76B | |
darkmagenta | #8B008B | |
darkolivegreen | #556B2F | |
darkorange | #FF8C00 | |
darkorchid | #9932CC | |
darkred | #8B0000 | |
darksalmon | #E9967A | |
darkseagreen | #8FBC8F | |
darkslateblue | #483D8B | |
darkslategray | #2F4F4F | |
darkslategrey | #2F4F4F | |
darkturquoise | #00CED1 | |
darkviolet | #9400D3 | |
deeppink | #FF1493 | |
deepskyblue | #00BFFF | |
dimgray | #696969 | |
dimgrey | #696969 | |
dodgerblue | #1E90FF | |
firebrick | #B22222 | |
floralwhite | #FFFAF0 | |
forestgreen | #228B22 | |
gainsboro | #DCDCDC | |
ghostwhite | #F8F8FF | |
gold | #FFD700 | |
goldenrod | #DAA520 | |
greenyellow | #ADFF2F | |
grey | #808080 | |
honeydew | #F0FFF0 | |
hotpink | #FF69B4 | |
indianred | #CD5C5C | |
indigo | #4B0082 | |
ivory | #FFFFF0 | |
khaki | #F0E68C | |
lavender | #E6E6FA | |
lavenderblush | #FFF0F5 | |
lawngreen | #7CFC00 | |
lemonchiffon | #FFFACD | |
lightblue | #ADD8E6 | |
lightcoral | #F08080 | |
lightcyan | #E0FFFF | |
lightgoldenrodyellow | #FAFAD2 | |
lightgray | #D3D3D3 | |
lightgreen | #90EE90 | |
lightgrey | #D3D3D3 | |
lightpink | #FFB6C1 | |
lightsalmon | #FFA07A | |
lightseagreen | #20B2AA | |
lightskyblue | #87CEFA | |
lightslategray | #778899 | |
lightslategrey | #778899 | |
lightsteelblue | #B0C4DE | |
lightyellow | #FFFFE0 | |
limegreen | #32CD32 | |
linen | #FAF0E6 | |
magenta | #FF00FF | |
mediumaquamarine | #66CDAA | |
mediumblue | #0000CD | |
mediumorchid | #BA55D3 | |
mediumpurple | #9370DB | |
mediumseagreen | #3CB371 | |
mediumslateblue | #7B68EE | |
mediumspringgreen | #00FA9A | |
mediumturquoise | #48D1CC | |
mediumvioletred | #C71585 | |
midnightblue | #191970 | |
mintcream | #F5FFFA | |
mistyrose | #FFE4E1 | |
moccasin | #FFE4B5 | |
navajowhite | #FFDEAD | |
oldlace | #FDF5E6 | |
olivedrab | #6B8E23 | |
orangered | #FF4500 | |
orchid | #DA70D6 | |
palegoldenrod | #EEE8AA | |
palegreen | #98FB98 | |
paleturquoise | #AFEEEE | |
palevioletred | #DB7093 | |
papayawhip | #FFEFD5 | |
peachpuff | #FFDAB9 | |
peru | #CD853F | |
pink | #FFC0CB | |
plum | #DDA0DD | |
powderblue | #B0E0E6 | |
rosybrown | #BC8F8F | |
royalblue | #4169E1 | |
saddlebrown | #8B4513 | |
salmon | #FA8072 | |
sandybrown | #F4A460 | |
seagreen | #2E8B57 | |
seashell | #FFF5EE | |
sienna | #A0522D | |
skyblue | #87CEEB | |
slateblue | #6A5ACD | |
slategray | #708090 | |
slategrey | #708090 | |
snow | #FFFAFA | |
springgreen | #00FF7F | |
steelblue | #4682B4 | |
tan | #D2B48C | |
thistle | #D8BFD8 | |
tomato | #FF6347 | |
turquoise | #40E0D0 | |
violet | #EE82EE | |
wheat | #F5DEB3 | |
whitesmoke | #F5F5F5 | |
yellowgreen | #9ACD32 |
Źródło: CSS Color Module Level 3