Kolory

Sposoby definiowania kolorów

Specyfikacja stylów poziomu drugiego (CSS 2) wprowadza sześć sposobów 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).

  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.

Wykaz kolorów systemowych

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