Barvy

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.

<span class=“code“>body {color: blue}</span>

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)
    <span class=“code“>body {color: rgb(100%,0%,0%)}</span>
  • Desítkově: Čísly 0 až 255
    <span class=“code“>body {color: rgb(255,0,0)}</span>
  • Šestnáctkově: 00 až FF (tj. 0-9, a-f), zápis začíná hash-markem #
    <span class=“code“>body {color: #FF0000}</span>

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

    <span class=“code“>body {color: #F00}</span>

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:

<span class=“code“>#F09</span>)