CSS: Barvy

Pro zápis barev v CSS existují 3 způsoby:

  • Hexadecimálním tvarem - #00AF23
  • Jménem (názvem) - blue, green, white
  • Pomocí rgb, poměru červené, zelené a modré - rgb(10%, 20%,70%)

Šestnáctkový(hexadecimální) zápis a procenty

Výchází z poměru RGB (červené, zelené a modré). V šestnáctkové soustavě jsou číslice 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. F znamená 16. 11 znamená 17 v desítkové. Takže když chcete smíchat 255 červené 255 zelené 255 modré, musíte převést tato čísla na šestnáctková - FF FF FF. Teď stačí čísla spojit #FFFFFF. Většina editorů vám nabídne paletu a vy si vyberete. Více o šestnáctkové soustavě

Pomocí názvů barev

Anglické názvy barev

16 základních barev, které se vždy bezpečně zobrazí
white blue red green yellow gray black fuchsia
silver teal purple maroon aqua lime navy olive

To je 16 základních barev, které s jistotou podporuje každý prohlížeč a počítač. Neznamená to, že jiné podporovány nejsou, tak to bývalo dříve, ale může se to stát

Pomocí tvaru rgb

Každá barva se skládá z červené(red), zelené(green) a modré(blue) zaleží jen na tom, kolik které dáte.

  • Buď zapisujete procenty -
    Červená a modrá je fialová, tak dáte 50% červené a 50% modré style="color: rgb(50%, 0%, 50%)"
  • Nebo čísly -
    rgb(0, 0, 0) - je černá, rgb(255, 255, 255) je bílá, ostatní barvy se nacházejí mezi tím.

Vložení do CSS

Např.:

<style>
h1 {color: red;}
h2 {color: rgb(50%, 0%, 50%);}
h3 {color: #00ccff;}
.modra {background-color: blue; border: 1px gray solid}
</style>

To je jen příklad nadpis h1 bude modrý, h2 fialový, h3 tyrkysový a třída modra bude mít modré pozadí a šedý rámeček.

Jak barvy zjistit

Použijte nějaký editor webových stránek, který vám poskytne barevné palety (případně i grafický editor)

Další: Zápis URL v CSS
Zajímavost: Číselné soustavy


Doporučuji
Pro své weby používám *Webhosting C4: 20 GB prostoru, PHP, MySQL, e-maily, subdomény za 1200 Kč (zdarma 2 GB navíc každý rok). Více WebhostingC4.cz.
Potřebujete poradit?


Vyhledávání


Poradna

Pokud si nevíte rady, chcete kontakt na spolehlivého tvůrce webu, či vás zajímá cizí názor, ozvěte se.

Reklama