Biela css farba. HTML tutoriál. RGB farby. Bezpečné paletové farby

  • 30.09.2019

Kódy farieb v CSS sa používajú na špecifikáciu farieb. Farebné kódy alebo hodnoty farieb sa zvyčajne používajú na nastavenie farby buď pre farbu popredia prvku (napr. farba textu, farba odkazu) alebo pre farbu pozadia prvku (farba pozadia, farba bloku). Môžu sa tiež použiť na zmenu farby tlačidla, okraja, značky, vznášania a iných dekoratívnych efektov.

Hodnoty farieb môžete zadať v rôznych formátoch. V nasledujúcej tabuľke sú uvedené všetky možné formáty:

Uvedené formáty sú podrobnejšie popísané nižšie.

CSS farby - Hex kódy

Hexadecimálny kód farby je šesťmiestne znázornenie farby. Prvé dve číslice (RR) predstavujú červenú hodnotu, ďalšie dve predstavujú zelenú hodnotu (GG) a posledné dve predstavujú modrú hodnotu (BB).

CSS farby - krátke hexadecimálne kódy

Krátky hexadecimálny kód farby je kratšia forma šesťznakového zápisu. V tomto formáte sa každá číslica opakuje, aby sa vytvorila ekvivalentná šesťciferná hodnota farby. Napríklad: #0F0 sa zmení na #00FF00.

Šestnástkovú hodnotu možno prevziať z akéhokoľvek grafického softvéru, ako je Adobe Photoshop, Core Draw atď.

Každému hexadecimálnemu farebnému kódu v CSS bude predchádzať znak hash „#“. Nižšie sú uvedené príklady použitia hexadecimálnych zápisov.

Farby CSS - Hodnoty RGB

hodnota RGB je kód farby, ktorý sa nastavuje pomocou vlastnosti rgb(). Táto vlastnosť má tri hodnoty: jednu pre červenú, zelenú a modrú. Hodnota môže byť celé číslo od 0 do 255 alebo percento.

Poznámka: Nie všetky prehliadače podporujú vlastnosť farby rgb(), preto sa neodporúča používať ju.

Nižšie je uvedený príklad viacerých farieb pomocou hodnôt RGB.

Generátor farebného kódu

Pomocou našej služby môžete vytvoriť milióny farebných kódov.

Bezpečné farby pre prehliadač

Nižšie je uvedená tabuľka 216 farieb, ktoré sú najbezpečnejšie a najviac nezávislé od počítača. Tieto farby v CSS sa pohybujú od 000000 do hexadecimálneho kódu FFFFFF. Ich používanie je bezpečné, pretože zaisťujú, že všetky počítače zobrazujú farby správne pri práci s paletou 256 farieb.

Tabuľka "bezpečných" farieb v CSS
#000000 #000033 #000066 #000099 #0000 CC#0000FF
#003300 #003333 #003366 #003399 #0033CC#0033FF
#006600 #006633 #006666 #006699 #0066CC#0066FF
#009900 #009933 #009966 #009999 #0099CC#0099FF
#00CC00#00CC33#00CC66#00CC99#00CCCC#00CCFF
#00FF00#00FF33#00FF66#00FF99#00FFCC#00FFFF
#330000 #330033 #330066 #330099 #3300 CC#3300FF
#333300 #333333 #333366 #333399 #3333CC#3333FF
#336600 #336633 #336666 #336699 #3366CC#3366FF
#339900 #339933 #339966 #339999 #3399CC#3399FF
#33CC00#33CC33#33CC66#33CC99#33CCCC#33CCFF
#33FF00#33FF33#33FF66#33FF99#33FFCC#33FFFF
#660000 #660033 #660066 #660099 #6600CC#6600FF
#663300 #663333 #663366 #663399 #6633CC#6633FF
#666600 #666633 #666666 #666699 #6666CC#6666FF
#669900 #669933 #669966 #669999 #6699CC#6699FF
#66CC00#66CC33#66CC66#66CC99#66CCCC#66CCFF
#66FF00#66FF33#66FF66#66FF99#66FFCC#66FFFF
#990000 #990033 #990066 #990099 #9900CC#9900FF
#993300 #993333 #993366 #993399 #9933CC#9933FF
#996600 #996633 #996666 #996699 #9966CC#9966FF
#999900 #999933 #999966 #999999 #9999CC#9999FF
#99CC00#99CC33#99CC66#99CC99#99CCCC#99CCFF
#99FF00#99FF33#99FF66#99FF99#99FFCC#99FFFF
#CC0000#CC0033#CC0066#CC0099#CC00CC#CC00FF
#CC3300#CC3333#CC3366#CC3399#CC33CC#CC33FF
#CC6600#CC6633#CC6666#CC6699#CC66CC#CC66FF
#CC9900#CC9933#CC9966#CC9999#CC99CC#CC99FF
#CCCC00#CCCC33#CCCC66#CCCC99#CCCCCC#CCCCFF
#CCFF00#CCFF33#CCFF66#CCFF99#CCFFCC#CCFFFF
#FF0000#FF0033#FF0066#FF0099#FF00CC#FF00FF
#FF3300#FF3333#FF3366#FF3399#FF33CC#FF33FF
#FF6600#FF6633#FF6666#FF6699#FF66CC#FF66FF
#FF9900#FF9933#FF9966#FF9999#FF99CC#FF99FF
#FFCC00#FFCC33#FFCC66#FFCC99#FFCCCC#FFCCFF
#FFFF00#FFFF33#FFFF66#FFFF99#FFFFCC#FFFFFF

Vlad Merževič

V HTML je farba určená jedným z dvoch spôsobov: pomocou hexadecimálneho kódu a názvom určitých farieb. Prevažne sa používa metóda založená na hexadecimálnej číselnej sústave, pretože je najuniverzálnejšia.

Hexadecimálne farby

HTML používa na určenie farieb hexadecimálne čísla. Šestnástková sústava je na rozdiel od desiatkovej sústavy založená, ako už jej názov napovedá, na čísle 16. Čísla budú nasledovné: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Čísla od 10 do 15 sú nahradené latinskými písmenami. V tabuľke 6.1 ukazuje zhodu medzi desatinnými a hexadecimálnymi číslami.

Čísla väčšie ako 15 v šestnástkovej sústave vznikajú spojením dvoch čísel do jedného (tabuľka 6.2). Napríklad číslo 255 v desiatkovej sústave zodpovedá číslu FF v šestnástkovej sústave.

Aby sa predišlo nejasnostiam pri definovaní číselnej sústavy, pred hexadecimálnym číslom sa nachádza symbol hash #, napríklad #aa69cc. V tomto prípade nezáleží na veľkosti písmen, preto je dovolené písať #F0F0F0 alebo #f0f0f0.

Typická farba používaná v HTML vyzerá takto.

Tu je farba pozadia webovej stránky nastavená na #FA8E47. Symbol hash # pred číslom znamená, že je hexadecimálne. Prvé dve číslice (FA) definujú červenú zložku farby, tretia až štvrtá číslica (8E) definujú zelenú zložku a posledné dve číslice (47) definujú modrú zložku. Konečným výsledkom bude táto farba.

F.A. + 8E + 47 = FA8E47

Každá z troch farieb – červená, zelená a modrá – môže nadobudnúť hodnoty od 00 do FF, čo vedie k celkovo 256 odtieňom. Celkový počet farieb teda môže byť 256x256x256 = 16 777 216 kombinácií. Farebný model založený na červenej, zelenej a modrej zložke sa nazýva RGB (červená, zelená, modrá). Tento model je aditívny (od add - add), v ktorom pridaním všetkých troch komponentov vzniká biela farba.

Aby ste uľahčili navigáciu v hexadecimálnych farbách, vezmite do úvahy niektoré pravidlá.

  • Ak sú hodnoty farebných komponentov rovnaké (napríklad: #D6D6D6), výsledkom bude šedý odtieň. Čím vyššie číslo, tým svetlejšia farba s hodnotami od #000000 (čierna) do #FFFFFF (biela).
  • Jasne červená farba sa vytvorí, ak je červená zložka nastavená na maximum (FF) a zvyšné zložky sú nastavené na nulu. Farba s hodnotou #FF0000 je najčervenší možný červený odtieň. To isté platí pre zelenú (#00FF00) a modrú (#0000FF).
  • Žltá (#FFFF00) sa vyrába zmiešaním červenej a zelenej. To je jasne viditeľné na farebnom koliesku (obr. 6.1), ktoré predstavuje primárne farby (červená, zelená, modrá) a doplnkové alebo doplnkové. Patrí medzi ne žltá, azúrová a fialová (nazývaná aj purpurová). Vo všeobecnosti možno akúkoľvek farbu získať zmiešaním farieb blízko nej. Azúrová (#00FFFF) sa teda získa spojením modrej a zelenej.

Ryža. 6.1. Farebné koliesko

Farby založené na hexadecimálnych hodnotách nemusia byť vybrané empiricky. Na tento účel je vhodný grafický editor, ktorý dokáže pracovať s rôznymi farebnými modelmi, napríklad Adobe Photoshop. Na obr. Obrázok 6.2 zobrazuje okno pre výber farby v tomto programe, výsledná hexadecimálna hodnota aktuálnej farby je ohraničená čiarou. Môžete ho skopírovať a vložiť do kódu.

Ryža. 6.2. Okno na výber farieb vo Photoshope

Webové farby

Ak nastavíte kvalitu podania farieb monitora na 8-bit (256 farieb), potom sa tá istá farba môže v rôznych prehliadačoch zobrazovať odlišne. Je to spôsobené spôsobom zobrazovania grafiky, kedy prehliadač pracuje s vlastnou paletou a nedokáže zobraziť farbu, ktorá nie je v jeho palete. V tomto prípade je farba nahradená kombináciou pixelov iných, jemu blízkych farieb, ktoré napodobňujú danú. Aby farba zostala rovnaká v rôznych prehliadačoch, bola predstavená paleta takzvaných webových farieb. Webové farby sú tie farby, pre ktoré je každá zložka – červená, zelená a modrá – nastavená na jednu zo šiestich hodnôt – 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) 255 (FF). Šestnástková hodnota tohto komponentu je uvedená v zátvorkách. Celkový počet farieb zo všetkých možných kombinácií dáva 6x6x6 - 216 farieb. Príklad webovej farby je #33FF66.

Hlavnou črtou webovej farby je, že sa vo všetkých prehliadačoch zobrazuje rovnako. V súčasnosti je relevancia webových farieb veľmi malá vzhľadom na zlepšenie kvality monitorov a rozšírenie ich možností.

Farby podľa názvu

Aby ste si nemuseli pamätať množinu čísel, môžete namiesto nich použiť názvy bežne používaných farieb. V tabuľke 6.3 zobrazuje názvy populárnych názvov farieb.

Tabuľka 6.3. Názvy niektorých farieb
Názov farby Farba Popis Hexadecimálna hodnota
čierna Čierna #000000
modrá Modrá #0000FF
fuchsiová Svetlo fialová #FF00FF
sivá Tmavosivá #808080
zelená Zelená #008000
vápno Svetlo zelená #00FF00
gaštanové Tmavo červená #800000
námorníctvo Tmavomodrá #000080
olivový Olivový #808000
fialová Tmavo fialová #800080
červená Červená #FF0000
striebro Svetlo šedá #C0C0C0
modrozelená Modro-zelená #008080
biela Biela #FFFFFF
žltá Žltá #FFFF00

Nezáleží na tom, či špecifikujete farbu podľa názvu alebo pomocou hexadecimálnych čísel. Tieto metódy sú svojim účinkom rovnocenné. Príklad 6.1 ukazuje, ako nastaviť farby pozadia a textu webovej stránky.

Príklad 6.1. Farba pozadia a textu

Farby

Príklad textu



V tomto príklade je farba pozadia nastavená pomocou atribútu bgcolor značky a farbu textu prostredníctvom atribútu text. Pre spestrenie je atribút text nastavený na hexadecimálne číslo a atribút bgcolor je nastavený na vyhradené kľúčové slovo teal .

26.02.2015 8,9 tis

Ako viete, farba môže ovplyvniť stav človeka: duševný aj fyzický. Každý deň pri prehliadaní webových stránok na internete oči vyhodnocujú milióny farieb a odtieňov. Webdizajnér, ktorý pozná psychológiu farieb, dokáže manipulovať s náladou návštevníka, aby dosiahol určité ciele.

Je to spôsobené tým, že niektoré odtiene upokojujú a niektoré naopak vzrušujú. Ďalej si povieme, ako sa farba syntetizuje a zobrazuje pomocou počítačovej technológie.

RGB je farebný model, ktorý predstavuje metódu získania všetkých farieb a ich odtieňov zmiešaním troch hlavných zložiek v rôznych pomeroch, ktorými sú:

  • červená ( Červená);
  • zelená farba ( Zelená);
  • modrá farba ( Modrá).

Odtiaľ pochádza aj skrátený názov RGB. Tieto farby boli vybrané ako hlavné z nejakého dôvodu: dôvodom je fyziológia sietnice ľudského oka a spôsob, akým ich vníma:


Model RGB zostáva dnes najpopulárnejším a používa sa na reprodukciu farieb na televíznych obrazovkách a počítačových monitoroch. Keďže výrobcovia vybavujú svoje produkty rôznymi vlastnosťami, v roku 1996 bol vytvorený jednotný systém syntézy farieb na báze RGB s názvom sRGB, na ktorom spolupracovali Microsoft a HP.

Číselné znázornenie farby

Ako už bolo spomenuté, RGB farby vznikajú zmiešaním základných farieb. Na opis intenzity každého z nich bola prijatá schéma, v ktorej je farba reprezentovaná rozsahom 0-255 (8 bitov), ​​čo v hexadecimálnom zápise zodpovedá 00-FF.

To znamená, že primárne farby budú vyzerať takto:

  • Červená – RGB (255,0,0);
  • Zelená – RGB (0,255,0);
  • Modrá – RGB (0,0,255);

Ak intenzita farby nadobudne hodnoty menšie ako 255, získajú sa rôzne odtiene červenej, zelenej a modrej. Nasleduje tabuľka ich gradácií, ako aj hexadecimálne hodnoty každého z odtieňov:

RGB farebné tabuľky

Prirodzene, okrem gradácií základných farieb existujú aj zmiešané a ich počet je pomerne veľký. Preto bola vytvorená tabuľka farieb RGB, ktorá prezentuje všetky existujúce odtiene, ako aj ich názvy a číselné zastúpenia ( v desiatkovom a hexadecimálnom tvare).

Pozrieť si ho môžete tu. Táto tabuľka výrazne uľahčuje život webdizajnérom, keďže za pár sekúnd nájdete požadovaný odtieň a zistíte jeho číselné zastúpenie.

Bezpečná farebná paleta RGB

V určitom momente však nastal problém so zobrazovaním farieb v rôznych prehliadačoch a na jeho vyriešenie bola zostavená takzvaná “bezpečná” paleta farieb RGB, ktoré boli odvodené matematickými výpočtami.

Keď prehliadač nedokáže správne zobraziť farbu, pokúsi sa získať niečo blízke tomu, čo potrebuje, zmiešaním susedných farieb a s najväčšou pravdepodobnosťou bude výsledok úplne neprijateľný:

Použitím farebných kódov RGB z tejto palety môže mať webový vývojár pokoj v súvislosti so zobrazením farieb na stránkach svojej webovej lokality pri prezeraní pomocou rôznych prehliadačov, platforiem a monitorov. Aj keď v súčasnosti stráca tabuľka bezpečných farieb svoj význam ( technologický pokrok stále nestojí), pri jeho používaní môžete, ako sa hovorí, pokojne spávať.

Zlatá farba v modeli RGB

Slovo „zlato“ bolo prvýkrát použité na začiatku 14. storočia na označenie farby chemického prvku zvaného Aurum – zlato. V modeli RGB je zlatá farba reprezentovaná nasledujúcimi číselnými hodnotami:

  • RGB (255, 215, 0) – desiatková sústava;
  • HEX #FFD700 – hexadecimálna sústava.

Béžová farba v modeli RGB

Béžová farba zaujíma v histórii pomerne významné miesto, aj keď nie je najvýraznejšia. Mnohé kultúrne pamiatky, najmä antické sochy, boli vyrobené z mastenca a mastenca, ktoré majú béžový odtieň. V modeli RGB má béžová farba nasledujúce číselné zastúpenia.

Na určenie farieb sa používajú hexadecimálne čísla. Šestnástková sústava je na rozdiel od desiatkovej sústavy založená, ako už jej názov napovedá, na čísle 16. Čísla budú nasledovné: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Čísla od 10 do 15 sú nahradené latinskými písmenami. Čísla väčšie ako 15 v šestnástkovej sústave vznikajú spojením dvoch čísel do jedného. Napríklad číslo 255 v desiatkovej sústave zodpovedá číslu FF v šestnástkovej sústave. Aby sa predišlo zmätkom pri určovaní číselnej sústavy, pred šestnástkové číslo sa umiestni krížik #, napríklad #666999. Každá z troch farieb – červená, zelená a modrá – môže nadobúdať hodnoty od 00 do FF. Farebný symbol je teda rozdelený na tri zložky #rrggbb, kde prvé dva symboly označujú červenú zložku farby, stredné dva - zelenú a posledné dva - modrú. Je povolené používať skrátenú formu #rgb, kde by mal byť každý znak zdvojený. Záznam #fe0 by sa teda mal považovať za #ffee00.

Podľa mena

Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

Prehliadače podporujú niektoré farby podľa ich názvu. V tabuľke 1 zobrazuje názvy, hexadecimálny kód, RGB, hodnoty HSL a popis.

Tabuľka 1. Názvy farieb
Meno Farba kód RGB HSL Popis
biela #ffffff alebo #fff rgb(255,255,255) hsl(0,0%,100%) Biela
striebro #c0c0c0 rgb(192,192,192) hsl (0,0 %, 75 %) Šedá
sivá #808080 rgb(128,128,128) hsl (0,0 %, 50 %) Tmavosivá
čierna #000000 alebo #000 rgb(0,0,0) hsl(0,0%,0%) Čierna
gaštanové #800000 rgb(128,0,0) hsl (0,100 %, 25 %) Tmavo červená
červená #ff0000 alebo #f00 rgb(255,0,0) hsl(0,100%,50%) Červená
oranžová #ffa500 rgb(255,165,0) hsl(38,8,100%,50%) Oranžová
žltá #ffff00 alebo #ff0 rgb(255,255,0) hsl(60,100%,50%) Žltá
olivový #808000 rgb(128,128,0) hsl(60,100%,25%) Olivový
vápno #00ff00 alebo #0f0 rgb(0,255,0) hsl(120,100%,50%) Svetlo zelená
zelená #008000 rgb(0,128,0) hsl(120,100%,25%) Zelená
aqua #00ffff alebo #0ff rgb(0,255,255) hsl(180,100%,50%) Modrá
modrá #0000ff alebo #00f rgb(0,0,255) hsl(240,100%,50%) Modrá
námorníctvo #000080 rgb(0,0,128) hsl(240,100%,25%) Tmavomodrá
modrozelená #008080 rgb(0,128,128) hsl(180,100%,25%) Modro-zelená
fuchsiová #ff00ff alebo #f0f rgb(255,0,255) hsl(300,100%,50%) Ružová
fialová #800080 rgb(128,0,128) hsl(300,100%,25%) Fialová

Používanie RGB

Internet Explorer Chrome Opera Safari Firefox Android iOS
5.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

Farbu môžete definovať pomocou hodnôt červenej, zelenej a modrej v desatinných číslach. Každá z troch farebných zložiek nadobúda hodnotu od 0 do 255. Je tiež prípustné určiť farbu v percentách, pričom 100 % zodpovedá číslu 255. Najprv zadajte kľúčové slovo rgb a potom zadajte farebné zložky v zátvorkách oddelené čiarkami, napríklad rgb(255, 128, 128) alebo rgb(100 %, 50 %, 50 %).

RGBA

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

Formát RGBA je syntaxou podobný RGB, ale obsahuje alfa kanál, ktorý špecifikuje priehľadnosť prvku. Hodnota 0 je úplne priehľadná, 1 je nepriehľadná a stredná hodnota ako 0,5 je polopriehľadná.

RGBA bol pridaný do CSS3, takže kód CSS musí byť overený podľa tejto verzie. Treba poznamenať, že štandard CSS3 je stále vo vývoji a niektoré funkcie sa môžu zmeniť. Napríklad farba vo formáte RGB pridaná do vlastnosti background-color je overená, ale farba pridaná do vlastnosti pozadia už nie je platná. Prehliadače zároveň celkom správne chápu farbu pre obe vlastnosti.

HSL

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 9.6+ 3.1+ 3.0+ 2.1+ 2.0+

Názov formátu HSL je odvodený od kombinácie prvých písmen Hue (odtieň), Saturate (sýtosť) a Lightness (svetlosť). Odtieň je hodnota farby na farebnom koliesku (obr. 1) a udáva sa v stupňoch. 0° zodpovedá červenej, 120° zelenej a 240° modrej. Hodnota odtieňa sa môže meniť od 0 do 359.

Ryža. 1. Farebné koliesko

Sýtosť je intenzita farby a meria sa v percentách od 0 % do 100 %. Hodnota 0 % označuje žiadnu farbu a odtieň sivej, 100 % je maximálna hodnota pre sýtosť.

Svetlosť určuje, aká jasná je farba, a uvádza sa v percentách od 0 % do 100 %. Nízke hodnoty farbu stmavia a vysoké hodnoty zosvetlia farbu, extrémne hodnoty 0 % a 100 % zodpovedajú čiernej a bielej.

HSLA

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

Formát HSLA je syntaxou podobný ako HSL, ale obsahuje alfa kanál na určenie transparentnosti prvku. Hodnota 0 je úplne priehľadná, 1 je nepriehľadná a stredná hodnota ako 0,5 je polopriehľadná.

Hodnoty farieb RGBA, HSL a HSLA boli pridané do CSS3, preto pri používaní týchto formátov skontrolujte platnosť verzie kódu.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Farby

POZOR

Všetky metódy chytania levov uvedené na stránke sú teoretické a založené na výpočtových metódach. Autori neručia za vašu bezpečnosť pri ich používaní a zriekajú sa akejkoľvek zodpovednosti za výsledky. Pamätajte, že lev je dravec a nebezpečné zviera!

Arrrgh!


Výsledok tohto príkladu je znázornený na obr. 2.

Ryža. 2. Farby na webovej stránke