Kolory

Sposoby definiowania kolorów

Specyfikacja stylów wprowadza następujące sposoby podawania wartości kolorów:

  1. 16 (17) kolorów podstawowych:

    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.

  2. #RRGGBB - podanie kolejno wartości każdej składowej kolorów podstawowych: czerwonego RR (red), zielonego GG (green) i niebieskiego BB (blue). Wszystkie te liczby muszą być dwucyfrowe i są zapisane w systemie szesnastkowym, w którym mamy 16 cyfr podstawowych: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Przykładowo: liczba szesnastkowa B5 oznacza w systemie dziesiętnym 181 (11*16 + 5 = 181).
  3. #RGB - to samo co powyżej, lecz w tym wypadku jako składowe kolorów należy podawać liczby jednocyfrowe w zapisie szesnastkowym. Przykładowo kolor #FB0 odpowiada #FFBB00 z poprzedniego zapisu.
  4. rgb(R, G, B) - pozwala podać oddzielnie każdą składową koloru w systemie dziesiętnym. Wszystkie liczby muszą się zawierać w zakresie 0...255 (255 = FF).
  5. rgb(R%, G%, B%) - to samo co powyżej, lecz teraz należy podawać wartości procentowe (0%...100%). Znak procentu musi się pojawić na końcu każdej liczby i nie może być oddzielony od niej spacją ani żadnym białym znakiem!
  6. 28 kolorów systemowych - (patrz: tabela w dalszej części tego rozdziału) czyli takich, które pochodzą z systemu operacyjnego (np. kolor pulpitu, okien, menu, przycisków i inne). Jeśli zmienimy kolory w swoim systemie, zmianie ulegną również przedstawione tutaj kolory systemowe. Dlatego każdy użytkownik może odebrać je inaczej. Z tego powodu należy uważać z ich stosowaniem, ponieważ nie da się przewidzieć efektu na komputerze innego użytkownika.
  7. hsl(H, S%, L%) - (CSS 3) alternatywny do RGB model opisu kolorów, w którym kolejne składowe oznaczają:
    H (ang. Hue) - barwa
    Liczba całkowita określana w stopniach (z przedziału od 0 do 360) z tzw. koła barw: 0 - czerwony (Red), 120 - zielony (Green), 240 - niebieski (Blue)
    S (ang. Saturation) - nasycenie
    Wartość procentowa: 0% - szary, 100% - normalny
    L (ang. Lightness) - jasność
    Wartość procentowa: 0% - czarny, 50% - normalny, 100% - biały

    Koło barw

    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:

    DefinicjaKolor
    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:

    DefinicjaKolor
    hsl(0, 100%, 0%) 
    hsl(0, 100%, 25%) 
    hsl(0, 100%, 50%) 
    hsl(0, 100%, 75%) 
    hsl(0, 100%, 100%) 
  8. rgba(R, G, B, A), rgba(R%, G%, B%, A), hsla(H, S%, L%, A) - (CSS 3) kolor z przezroczystością, gdzie A (ang. alpha) to wartość określająca przezroczystość z przedziału od 0 (całkowita przezroczystość) do 1 (brak przezroczystości - domyślnie)

    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.

Wykaz kolorów systemowych

KolorDefinicjaNazwaObjaśnienie
 ActiveBorderActive window borderObramowanie aktywnego okna
 ActiveCaptionActive window captionNagłówek aktywnego okna
 AppWorkspaceBackground color of multiple document interfaceKolor tła wielodokumentowego interfejsu (MDI)
 BackgroundDesktop backgroundTło pulpitu
 ButtonFaceFace color for three-dimensional display elementsPowierzchnia czołowa trójwymiarowych elementów
 ButtonHighlightDark shadow for three-dimensional display elements (for edges facing away from the light source). Shadow color for three-dimensional display elementsCień trójwymiarowych elementów (krawędzie oddalone od światła)
 ButtonShadowShadow color for three-dimensional display elementsKolor cienia trójwymiarowych elementów
 ButtonTextText on push buttonsTekst na przyciskach
 CaptionTextText in caption, size box, and scroll bar arrow boxTekst w nagłówkach, polach zmiany rozmiaru i polach przewijania zawartości
 GrayTextGrayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray colorKolor tekstu na zablokowanych elementach
 HighlightItem(s) selected in a controlWybrana pozycja
 HighlightTextText of item(s) selected in a controlTekst wybranej pozycji
 InactiveBorderInactive window borderObramowanie nieaktywnego okna
 InactiveCaptionInactive window captionNagłówek nieaktywnego okna
 InactiveCaptionTextColor of text in an inactive captionKolor tekstu w nagłówku nieaktywnego okna
 InfoBackgroundBackground color for tooltip controlsTło w informacji narzędziowej ("dymku", który pojawia się po wskazaniu elementu myszką)
 InfoTextText color for tooltip controlsTekst w informacji narzędziowej ("dymku", który pojawia się po wskazaniu elementu myszką)
 MenuMenu backgroundTło menu
 MenuTextText in menusTekst w menu
 ScrollbarScroll bar gray areaSzara powierzchnia w suwaku do przewijania zawartości
 ThreeDDarkShadowDark shadow for three-dimensional display elementsCień trójwymiarowych elementów
 ThreeDFaceFace color for three-dimensional display elementsPowierzchnia czołowa trójwymiarowych elementów
 ThreeDHighlightHighlight color for three-dimensional display elementsKolor podświetlenia dla trójwymiarowych elementów
 ThreeDLightShadowLight 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)
 ThreeDShadowDark shadow for three-dimensional display elementsCień trójwymiarowych elementów
 WindowWindow backgroundTło okna
 WindowFrameWindow frameRamka okna
 WindowTextText in windowsTekst w oknach

Źródło: Cascading Style Sheets, Level 2

Wykaz kolorów rozszerzonych

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

DefinicjaHEXKolor
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