Barvy

Použití

Na stránce se barví text, odkazy, pozadí a ohraničení. Barvit můžeme buď celý dokument selektorem body nebo jednotlivé elementy.

Barvu pozadí volíme tak, aby text byl dobře čitelný, tedy kontrastní textu, barva by neměla být příliš jasná, vysloveně nevhodné je použití jasně červené, opatrně i s modrou. Signální barvy jsou dobré pro zvýraznění textu nebo odkazů. Pokud předpokládáme, že uživatelé si budou stránku tisknout, je třeba dát pozor na podobnou sytost barev (aby se barvy „neslily”).

Vznik barev

Pro zobrazení barev na monitoru se používá systém barev RGB (Red Green Blue). Každá barva na monitoru se skládá ze tří základních barev (červené, zelené a modré) v různém poměru. Barvy se vytváří aditivně – přidáváním k černé, sčítáním barev. Čím více barev, tím blíže k bílé. Čím méně barev, tím blíže k černé. (tzn. čím větší číslo, tím světlejší barva) Odstíny šedi vznikají, když jsou všechny tři složky na stejné hodnotě.

Zápis barvy

Pro zápis barvy můžeme použít:

  • Název barvy (v angličtině) – u předdefinovaných (pojmenovaných) barev

    body {color: blue}

    Pozn.: Při použití zápisu jménem barvy je validních pouze základních 16 VGA barev.

  • RGB zápis:
    – Procentuálně
    Intenzitu každé barvy určujeme procenty 0% (minimální intenzita) až 100% (maximální intenzita)

    body {color: rgb(100%,0%,0%)}

    – Desítkově
    Čísly 0 až 255

    body {color: rgb(255,0,0)}

    – Šestnáctkově
    00 až FF (tj. 0-9, a-f), zápis začíná hash-markem #

    body {color: #FF0000}

    Pokud jsou obě číslice odpovídající jedné barevné složce stejné, můžeme použít zkrácený zápis

    body {color: #F00}

Barvení dokumentu

U většiny elementů můžeme barvit pozadí pomocí vlastnosti background-color. Například:

body {background-color: #00FF00}

Text barvíme vlastností color. Například:

h1 {color: #FFFFFF}

Pokud nedefinujeme žádné barvy, budou použity defaultní barvy prohlížeče, což je obvykle transparentní pro pozadí, černá pro text, modrá pro odkazy, fialová pro navštívené odkazy a červená pro aktivní odkazy.

Bezpečné barvy

Bezpečné barvy (též tzv. Netscape paleta) jsou takové barvy, které by měl podporovat jakýkoliv WWW klient na jakémkoliv operačním systému, podporujícím alespoň 256 barev. Jinými slovy, pokud použijete na svých stránkách tyto barvy, máte vpodstatě zaručeno, že každý, kdo si vaše stránky bude prohlížet, si je bude prohlížet v barvách, v jakých jste je vytvořili. Jinak, v případě, že WWW klient nemá k dispozici vámi definovanou barvu, snáží se jí „poskládat” z jiných barev (tzv. dithering).

Bezpečných barev je 216 a 16 odstínů šedi. Jsou to barvy, u kterých hodnota každé složky (červená, zelená a modrá) nabývá pouze hodnot 00, 33, 66, 99, CC nebo FF. U všech tedy můžeme použít zkrácený zápis barvy (např. #F09)

           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
                               

Pozn.: Při najetí kursorem myši na barvu se zobrazí její RGB kód (pokud nemáte vypnuté zobrazování popisků).

Pojmenované barvy

Základních 16 VGA barev

00FFFF   Aqua 000000   Black 0000FF   Blue FF00FF   Fuchsia
808080   Gray 008000   Green 00FF00   Lime 800000   Maroon
000080   Navy 808000   Olive 800080   Purple FF0000   Red
C0C0C0   Silver 008080   Teal FFFFFF   White FFFF00   Yellow

Rozšíření na 64 barev

FAEBD7   AntiqueWhite 7FFFD4   Aquamarine F0FFFF   Azure
F5F5DC   Beige 8A2BE2   BlueViolet A52A2A   Brown
5F9EA0   CadetBlue D2691E   Chocolate FF7F50   Coral
FFF8DC   CornSilk DC143C   Crimson 00FFFF   Cyan
00008B   DarkBlue 008B8B   DarkCyan 006400   DarkGreen
A9A9A9   DarkGray 8B008B   DarkMagenta FF8C00   DarkOrange
8B0000   DarkRed 8FBCBF   DarkSeaGreen 483D8B   DarkSlateBlue
9400D3   DarkViolet FF1493   DeepPink 00BFFF   DeepSkyBlue
B22222   FireBrick FFD700   Gold ADFF2F   GreenYellow
CD5C5C   IndianRed 4B0082   Indigo FFFFF0   Ivory
FOE68C   Khaki ADD8E6   LightBlue F08080   LightCoral
E0FFFF   LightCyan 90EE90   LightGreen D3D3D3   LightGray
FFFFE0   LightYellow FF00FF   Magenta FFA500   Orange
FFC0CB   Pink 8B4513   SaddleBrown 2E8B57   SeaGreen
FFFAFA   Snow 4682B4   SteelBlue FF6347   Tomato
EE82EE   Violet F5F5F5   WhiteSmoke 9ACD32   YellowGreen

A zbytek

F0F8FF   AliceBlue FFE4C4   Bisque FFEBCD   BlancheDalmond
DEB887   BurlyWood 6495ED   CornFlower 7FFF00   Chartreuse
B8860B   DarkGoldenRod BDB76B   DarkKhaki 556B2F   DarkOliveGreen
9932CC   DarkOrchid E9967A   DarkSalmon 2F4F4F   DarkSlateGray
00CED1   DarkTurquoise 696969   DimGray 1E90FF   DodgerBlue
FFFAF0   FloralWhite 228B22   ForestGreen DCDCDC   Gainsboro
F8F8FF   GhostWhite DAA520   GoldenRod F0FFF0   HoneyDew
FF69B4   HotPink FFF0F5   LavenderBlush 7CFC00   LawnGreen
FFFACD   LemonChiFFon FAFAD2   LightGoldenRodYellow FFB6C1   LightPink
FFA07A   LightSalmon 20B2AA   LightSeaGreen 87CEFA   LightSkyBlue
778899   LightSlateGray B0C4DE   LightSteelBlue FFFFE0   LightYellow
32CD32   LimeGreen FAF0E6   Linen 66CDAA   MediumAquamarine
0000CD   MediumBlue BA55D3   MediumOrchid 9370DB   MediumPurple
3CB371   MediumSeaGreen 7B68EE   MediumSlateBlue 00FA9A   MediumSpringGreen
48D1CC   MediumTurquoise C71585   MediumVioletRed FFE4E1   MistyRose
191970   MidnightBlue F5FFFA   MintCream FFE4B5   Moccasin
FFDEAD   NavajoWhite FDF5E6   OldLace 6B8E23   OliveDrab
FF4500   OrangeRed DA70D6   Orchid EEE8AA   PaleGoldenRod
98FB98   PaleGreen AFEEEE   PaleTurquoise DB7093   PaleVioletRed
FFEFD5   PapayaWhip FFDAB9   PeachPuFF CD853F   Peru
AAA0DD   Plum B0E0E6   PowderBlue BC8F8F   RosyBrown
4169E1   RoyalBlue FA8072   Salmon F4A460   SandyBrown
2E8B57   SeaGreen FFF5EE   SeaShell A0522D   Sienna
87CEEB   SkyBlue 6A5ACD   SlateBlue 708090   SlateGray
FFFAFA   Snow 00FF7F   SpringGreen D2B48C   Tan
008080   Teal D8BFD8   Thistle 40E0D0   Turquoise
F5DEB3   Wheat 9ACD32   YellowGreen

Systémové barvy Windows

Tuto „povedenou” kolekci barev rozhodně doporučuji nepoužívat, jak sám název napovídá, nebude to vypadat všude stejně ;-)

  ActiveBorder   ActiveCaption   AppWorkspace   Background
  ButtonFace   ButtonHighLight   ButtonShadow   ButtonText
  CaptionText   GrayText   HighLight   HighLightText
  InactiveBorder   InactiveCaption   InactiveCaptionText   InfoBackground
  InfoText   Menu   MenuText   Scrollbar
  ThreeddarkShadow   ThreedFace   ThreedHighLight   ThreedLightShadow
  ThreedShadow   Window   WindowFrame   WindowText