HEX/HTML
HEX farba nie je nič iné ako hexadecimálna reprezentácia RGB.
Farby sú reprezentované ako tri skupiny hexadecimálnych číslic, kde každá skupina zodpovedá za svoju vlastnú farbu: #112233, kde 11 je červená, 22 je zelená, 33 je modrá. Všetky hodnoty musia byť medzi 00 a FF.
Mnoho aplikácií umožňuje skrátenú formu hexadecimálneho farebného zápisu. Ak každá z troch skupín obsahuje rovnaké znaky, napríklad #112233, možno ich zapísať ako #123.
- h1 ( farba: #ff0000; ) /* červená */
- h2 ( farba: #00ff00; ) /* zelená */
- h3 ( farba: #0000ff; ) /* modrá */
- h4 ( farba: #00f; ) /* rovnaká modrá, skratka */
RGB
Farebný priestor RGB (červená, zelená, modrá) pozostáva zo všetkých možných farieb, ktoré možno vytvoriť zmiešaním červenej, zelenej a modrej. Tento model je populárny vo fotografii, televízii a počítačovej grafike.
Hodnoty RGB sú špecifikované ako celé číslo od 0 do 255. Napríklad rgb(0,0,255) sa zobrazí ako modrá, pretože modrý parameter je nastavený na najvyššiu hodnotu (255) a ostatné sú nastavené na 0.
Niektoré aplikácie (najmä webové prehliadače) podporujú percentuálny záznam hodnôt RGB (od 0 % do 100 %).
- h1 ( farba: rgb(255, 0, 0); ) /* červená */
- h2 ( farba: rgb(0, 255, 0); ) /* zelená */
- h3 ( farba: rgb(0, 0, 255); ) /* modrá */
- h4 ( farba: rgb(0%, 0%, 100%); ) /* rovnaká modrá, percentuálne zadanie */
Hodnoty farieb RGB sú podporované vo všetkých hlavných prehliadačoch.
RGBA
V poslednej dobe sa moderné prehliadače naučili pracovať s farebným modelom RGBA - rozšírením RGB s podporou alfa kanála, ktorý určuje nepriehľadnosť objektu.
Hodnota farby RGBA je špecifikovaná ako: rgba (červená, zelená, modrá, alfa). Parameter alfa je číslo v rozsahu od 0,0 (úplne priehľadné) do 1,0 (úplne nepriehľadné).
- h1 ( farba: rgb(0, 0, 255); ) /* modrá v bežnom RGB */
- h2 ( farba: rgba(0, 0, 255, 1); ) /* rovnaká modrá v RGBA, pretože nepriehľadnosť: 100 % */
- h3 ( farba: rgba(0, 0, 255, 0,5); ) /* nepriehľadnosť: 50 % */
- h4 ( farba: rgba(0, 0, 255, 0,155); ) /* nepriehľadnosť: 15,5 % */
- h5 ( farba: rgba(0, 0, 255, 0); ) /* úplne priehľadné */
RGBA je podporovaný v IE9+, Firefox 3+, Chrome, Safari a Opera 10+.
HSL
Farebný model HSL je znázornením modelu RGB vo valcovom súradnicovom systéme. HSL predstavuje farby intuitívnejším a ľudsky čitateľnejším spôsobom ako typické RGB. Model sa často používa v grafických aplikáciách, farebných paletách a analýze obrazu.
HSL je skratka pre Hue (farba/odtieň), Saturation (sýtosť), Lightness/Luminance (svetlosť/svetlosť/svetlosť, nezamieňať s jasom).
Odtieň určuje polohu farby na farebnom koliesku (od 0 do 360). Sýtosť je percentuálna hodnota sýtosti (od 0 % do 100 %). Svetlosť je percento ľahkosti (od 0 % do 100 %).
- h1 ( farba: hsl(120, 100 %, 50 %); ) /* zelená */
- h2 ( farba: hsl(120, 100%, 75%); ) /* svetlozelená */
- h3 ( farba: hsl(120, 100%, 25%); ) /* tmavozelená */
- h4 ( farba: hsl(120, 60%, 70%); ) /* pastelovo zelená */
HSL je podporované v prehliadačoch IE9+, Firefox, Chrome, Safari a Opera 10+.
HSLA
Podobne ako RGB/RGBA má HSL režim HSLA, ktorý podporuje alfa kanál na označenie nepriehľadnosti objektu.
Hodnota farby HSLA je špecifikovaná ako: hsla (odtieň, sýtosť, svetlosť, alfa). Parameter alfa je číslo v rozsahu od 0,0 (úplne priehľadné) do 1,0 (úplne nepriehľadné).
- h1 ( farba: hsl(120, 100%, 50%); ) /* zelená v normálnej HSL */
- h2 ( farba: hsla(120, 100 %, 50 %, 1); ) /* rovnaká zelená v HSLA, pretože nepriehľadnosť: 100 % */
- h3 ( farba: hsla(120, 100 %, 50 %, 0,5); ) /* nepriehľadnosť: 50 % */
- h4 ( farba: hsla(120, 100 %, 50 %, 0,155); ) /* nepriehľadnosť: 15,5 % */
- h5 ( farba: hsla(120, 100 %, 50 %, 0); ) /* úplne priehľadné */
CMYK
Farebný model CMYK sa často spája s farebnou tlačou a tlačou. CMYK (na rozdiel od RGB) je subtraktívny model, čo znamená, že vyššie hodnoty sú spojené s tmavšími farbami.
Farby sú určené pomerom azúrovej (Cyan), purpurovej (Magenta), žltej (Yellow), s prídavkom čiernej (Key/blacK).
Každé z čísel, ktoré definujú farbu v CMYK, predstavuje percento atramentu danej farby, ktoré tvorí farebnú kombináciu, alebo presnejšie veľkosť bodky na obrazovke, ktorá sa vytlačí na fotosádzací stroj na film danej farby (alebo priamo na tlačovú dosku v prípade CTP).
Napríklad na získanie farby PANTONE 7526 by ste zmiešali 9 častí azúrovej, 83 častí purpurovej, 100 častí žltej a 46 častí čiernej. Dá sa to označiť takto: (9,83,100,46). Niekedy sa používajú tieto označenia: C9M83Y100K46, alebo (9 %, 83 %, 100 %, 46 %), alebo (0,09/0,83/1,0/0,46).
HSB/HSV
HSB (tiež známy ako HSV) je podobný HSL, ale ide o dva rôzne farebné modely. Obidve sú založené na valcovej geometrii, ale HSB/HSV je založený na modeli „hexcone“, zatiaľ čo HSL je založený na modeli „bi-hexcone“. Umelci často uprednostňujú používanie tohto modelu, všeobecne sa uznáva, že HSB/HSV zariadenie je bližšie k prirodzenému vnímaniu farieb. V programe Adobe Photoshop sa používa najmä farebný model HSB.
HSB/HSV je skratka pre Hue (farba/odtieň), Saturation (sýtosť), Brightness/Value (jas/hodnota).
Odtieň určuje polohu farby na farebnom koliesku (od 0 do 360). Sýtosť je percentuálna hodnota sýtosti (od 0 % do 100 %). Jas je percento jasu (od 0 % do 100 %).
XYZ
Farebný model XYZ (CIE 1931 XYZ) je čisto matematický priestor. Na rozdiel od modelov RGB, CMYK a iných modelov sú v XYZ hlavné komponenty „imaginárne“, čo znamená, že X, Y a Z nemôžete spájať so žiadnou sadou farieb, ktoré by ste mali zmiešať. XYZ je hlavný model pre takmer všetky ostatné farebné modely používané v technických oblastiach.
LAB
Farebný model LAB (CIELAB, “CIE 1976 L*a*b*”) je vypočítaný z priestoru CIE XYZ. Cieľom laboratória bolo vytvoriť farebný priestor, v ktorom by zmeny farieb boli lineárnejšie z hľadiska ľudského vnímania (v porovnaní s XYZ), to znamená, že rovnaká zmena hodnôt farebných súradníc v rôznych oblastiach farebného priestoru by vyvolávajú rovnaký pocit zmeny farby.
Pozrite sa pozorne na výkres. Pozadie rozbaľovacieho okna je priehľadné. Toto je pomerne bežná dizajnová technika. Zamyslime sa nad tým, ako sa to dá zrealizovať.
Úloha
Urobte priehľadnosť farby v krížovom prehliadači.
Riešenie
Prvá myšlienka v tejto situácii je použiť obrázok png24 s prednastavenou priesvitnosťou pre pozadie. Ale tento obrázok je úplne zbytočný. V pohode sa zaobídete aj bez toho (a teda bez ďalšej požiadavky na server). Skúsme ešte nájsť optimálne riešenie.
Druhá myšlienka je použiť . Ale v tomto prípade to nie je príliš pohodlné. Potom sa stane priesvitným nielen pozadie, ale aj nápisy. Áno, vlastne celé okno naraz.
Samozrejme, môžete skúsiť pridať ďalší kontajner a použiť nepriehľadnosť len naň, ale tento HTML prvok bude určený len na okrasu a bude samozrejme nadbytočný. Dá sa bez toho zaobísť?
Samozrejme môžete! Ak používate RGBA.
Formát popisu farieb RGBA
CSS3 vám umožňuje určiť farbu pomocou funkcií RGB a RGBA. V tomto prípade musíme uviesť podiel každej farebnej zložky, pre ktorú je pridelený jeden bajt (od 0 do 255, ak niekto nevie).
Syntax pre tento prípad je veľmi jednoduchá:
Pozadie: rgb(0, 255, 0); /* čisto zelená */
Pre RGBA sa pridáva štvrtý parameter – priehľadnosť alfa (od 0 do 1).
Pozadie: rgba(255, 0, 0, 0,5); /* čisto červená s 50% priehľadnosťou */
Tu je riešenie nášho problému. Stačí nastaviť farbu pozadia pomocou rgba a všetko bude vyzerať tak, ako chceme. Bez zbytočných obrázkov a prvkov!
Kde môžem získať tieto čísla?
Môžete sa pozrieť na zložky farby pomocou nástroja kvapkadlo vo Photoshope.
O kompatibilite medzi prehliadačmi
Keďže funkcia RGB je oveľa staršia ako RGBA a existuje už od čias štandardu CSS2, na ochranu pred najstaršími prehliadačmi môžete použiť nasledujúcu duplicitnú konštrukciu:
SomeBlock ( pozadie: rgb(255, 0, 0); pozadie: rgba(255, 0, 0, 0,5); )
S týmto prístupom nebudú mať pradedovia moderných prehliadačov priesvitnosť, ale samotná farba zostane správna.
O IE sa budete musieť starať samostatne. Somáre nerozumejú RGBA až do verzie 8 vrátane.
Ako vždy: pôda pre roľníkov, továrne pre robotníkov a osly barla! Ako .
Samozrejme, v bojových podmienkach dávame toto pravidlo do samostatného CSS, ktoré spájame.
SomeBlock ( background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )
Trik spočíva v tom, že počiatočnú a koncovú farbu určíte ako rovnaké (ff0000 - červená) a využijete skutočnosť, že v tomto filtri môžete nastaviť alfa kanál pre gradient (v príklade je to hodnota 80).
Pre informáciu: filter používa hexadecimálny systém a kód pre úplne nepriehľadnú farbu je FF (v desiatkovej sústave je to 255). V súlade s tým je šestnástkové číslo 80 desatinné číslo 128, t. j. 50 % priehľadnosť.
Testované v:
- IE 6-9
- Firefox 3+
- Opera 10+
- Safari 4
- Chrome
Farebný modul CSS podrobne popisuje hodnoty, ktoré umožňujú autorom definovať farby a nepriehľadnosť prvkov html, ako aj hodnoty vlastnosti color.
vlastnosť farby
1. Prioritné farby: vlastnosť farieb
Vlastnosť určuje farbu písma pomocou rôznych systémov vykresľovania farieb. Vlastnosť popisuje farbu textového obsahu prvku. Okrem toho sa používa na poskytnutie potenciálnej nepriamej hodnoty (currentColor) pre akékoľvek iné vlastnosti, ktoré akceptujú hodnoty farieb.
Nehnuteľnosť sa dedí.
2. Hodnoty farieb
2.1. Hlavné kľúčové slová
Zoznam hlavných kľúčových slov obsahuje nasledujúce významy:
názov | HEX | RGB | Farba |
---|---|---|---|
čierna | #000000 | 0,0,0 | |
striebro | #C0C0C0 | 192,192,192 | |
sivá | #808080 | 128,128,128 | |
biely | #FFFFFF | 255,255,255 | |
gaštanové | #800000 | 128,0,0 | |
červená | #FF0000 | 255,0,0 | |
Fialová | #800080 | 128,0,128 | |
fuchsiová | #FF00FF | 255,0,255 | |
zelená | #008000 | 0,128,0 | |
vápno | #00FF00 | 0,255,0 | |
olivový | #808000 | 128,128,0 | |
žltá | #FFFF00 | 255,255,0 | |
námorníctvo | #000080 | 0,0,128 | |
Modrá | #0000FF | 0,0,255 | |
modrozelený | #008080 | 0,128,128 | |
aqua | #00FFFF | 0,255,255 |
V názvoch farieb sa nerozlišujú veľké a malé písmená.
Syntax
Farba: modrozelená;
2.2. Číselné hodnoty farieb
2.2.1. Farby modelu RGB
Hexadecimálny formát hodnoty RGB je znak #, za ktorým bezprostredne nasledujú tri alebo šesť hexadecimálnych znakov. Trojciferný zápis RGB #rgb sa prevedie na šesťcifernú formu #rrggbb skopírovaním číslic namiesto pridávania núl. Napríklad #fb0 sa rozšíri na #ffbb00 . To zaisťuje, že biela #ffffff môže byť špecifikovaná v krátkom #fff položke a odstraňuje všetky závislosti na farebnej hĺbke displeja.
Formát hodnoty RGB vo funkčnom zápise je rgb (nasledovaný čiarkou oddeleným zoznamom troch číselných hodnôt (buď troch celočíselných hodnôt alebo troch percentuálnych hodnôt), za ktorými nasleduje symbol). Hodnota celého čísla 255 zodpovedá 100 % a F alebo FF v hexadecimálnom zápise:
Rgb(255,255,255) = rgb(100 %, 100 %, 100 %) = #FFF
Okolo číselných hodnôt sú povolené medzery.
Farby HTML sú označené šiestimi znakmi za lomkou – napríklad #000000. Týchto šesť symbolov predstavuje pomery rôznych farieb (červená, zelená, modrá) v konečnej farbe. Na monitore vášho počítača je obraz vytvorený z obrovského množstva bodov nazývaných pixely. Každý pixel je malý svetelný zdroj, nazvime ho „baterka“, ktorá sa zase skladá z troch bateriek – červenej, zelenej a modrej. Znížením alebo zvýšením intenzity žiary jednotlivých farebných bateriek získame požadovanú farbu.
HTML farebné kódy
Farby v HTML sú reprezentované hexadecimálnym (HEX) zápisom červenej, modrej a zelenej (RGB).
Najmenšia hodnota farby je 0 (hexadecimálne 00). Najvyššia hodnota farby je 255 (hex FF).
Šestnástková hodnota farby sú tri číslice začínajúce znakom #.
Farebné kódy (významy)
Farba | HEX kód | RGB kód |
---|---|---|
#000000 | rgb(0,0,0) | |
#FF0000 | rgb(255,0,0) | |
#00FF00 | rgb(0,255,0) | |
#0000FF | rgb(0,0,255) | |
#FFFF00 | rgb(255,255,0) | |
#00FFFF | rgb(0,255,255) | |
#FF00FF | rgb(255,0,255) | |
#C0C0C0 | rgb(192,192,192) | |
#FFFFFF | rgb(255,255,255) |
16 miliónov odtieňov
Kombináciou červenej, modrej a zelenej s hodnotami v rozsahu od 0 do 255 pre percento každej farby vznikne celkovo viac ako 16 miliónov odtieňov (256 x 256 x 256).
Väčšina moderných monitorov je schopná zobraziť najmenej 16 384 rôznych odtieňov (LCD monitory sú vo všeobecnosti schopné zobraziť 262 tisíc 16 miliónov (aktualizované v októbri 2013) farby a CRT monitory dokážu zobraziť prakticky neobmedzený počet farieb).
Nižšie uvedená farebná tabuľka ukazuje zmenu podielu červenej od 0 do 255 s nulovými hodnotami pre modrú a zelenú:
Červená | HEX kód | RGB kód |
---|---|---|
#000000 | rgb(0,0,0) | |
#080000 | rgb(8,0,0) | |
#100000 | rgb(16,0,0) | |
#180000 | rgb(24,0,0) | |
#200000 | rgb(32,0,0) | |
#280000 | rgb(40,0,0) | |
#300000 | rgb(48,0,0) | |
#380000 | rgb(56,0,0) | |
#400000 | rgb(64,0,0) | |
#480000 | rgb(72,0,0) | |
#500000 | rgb(80,0,0) | |
#580000 | rgb(88,0,0) | |
#600000 | rgb(96,0,0) | |
#680000 | rgb(104,0,0) | |
#700000 | rgb(112,0,0) | |
#780000 | rgb(120,0,0) | |
#800000 | rgb(128,0,0) | |
#880000 | rgb(136,0,0) | |
#900000 | rgb(144,0,0) | |
#980000 | rgb(152,0,0) | |
#A00000 | rgb(160,0,0) | |
#A80000 | rgb(168,0,0) | |
#B00000 | rgb(176,0,0) | |
#B80000 | rgb(184,0,0) | |
#C00000 | rgb(192,0,0) | |
#C80000 | rgb(200,0,0) | |
#D00000 | rgb(208,0,0) | |
#D80000 | rgb(216,0,0) | |
#E00000 | rgb(224,0,0) | |
#E80000 | rgb(232,0,0) | |
#F00000 | rgb(240,0,0) | |
#F80000 | rgb(248,0,0) | |
#FF0000 | rgb(255,0,0) |
Odtiene sivej
Na získanie odtieňov sivej sa použijú rovnaké podiely všetkých farieb. Aby sme vám uľahčili výber správnej farby, poskytujeme vám kódy odtieňov šedej
Odtiene sivej | HEX kód | RGB kód |
---|---|---|
#000000 | rgb(0,0,0) | |
#080808 | rgb(8,8,8) | |
#101010 | rgb(16,16,16) | |
#181818 | rgb(24,24,24) | |
#202020 | rgb(32,32,32) | |
#282828 | rgb(40,40,40) | |
#303030 | rgb(48,48,48) | |
#383838 | rgb(56,56,56) | |
#404040 | rgb(64,64,64) | |
#484848 | rgb(72,72,72) | |
#505050 | rgb(80,80,80) | |
#585858 | rgb(88,88,88) | |
#606060 | rgb(96,96,96) | |
#686868 | rgb(104,104,104) | |
#707070 | rgb(112,112,112) | |
#787878 | rgb(120,120,120) | |
#808080 | rgb(128,128,128) | |
#888888 | rgb(136,136,136) | |
#909090 | rgb(144,144,144) | |
#989898 | rgb(152,152,152) | |
#A0A0A0 | rgb(160,160,160) | |
#A8A8A8 | rgb(168,168,168) | |
#B0B0B0 | rgb(176,176,176) | |
#B8B8B8 | rgb(184,184,184) | |
#C0C0C0 | rgb(192,192,192) | |
#C8C8C8 | rgb(200,200,200) | |
#D0D0D0 | rgb(208,208,208) | |
#D8D8D8 | rgb(216,216,216) | |
#E0E0E0 | rgb(224,224,224) | |
#E8E8E8 | rgb(232,232,232) | |
#F0F0F0 | rgb(240,240,240) | |
#F8F8F8 | rgb(248,248,248) | |
#FFFFFF | rgb(255,255,255) |
Názvy farieb HTML pre rôzne prehliadače (všetky prehliadače).
Zbierka 150 názvov farieb v html, podporovaná vo všetkých prehliadačoch.
Štandardizované názvy farieb
W3C uvádza 16 platných názvov farieb pre HTML a CSS: aqua, čierna, modrá, fuchsiová, šedá, zelená, limetková, gaštanová (gaštanová), námornícka (ultramarínová), olivová (olivová), fialová (fialová), červená (červená) , strieborná (strieborná), modrozelená (sivá), biela (biela) a žltá (žltá).
Pri použití farieb, ktoré nie sú zahrnuté v tomto zozname, je správnejšie použiť ich hexadecimálny (HEX) kód alebo RGB kód.
Bezpečné farby
Pred niekoľkými rokmi, keď počítače mohli podporovať maximálne 256 rôznych farieb, bol navrhnutý zoznam 216 „Web Safe Colors“ so 40 farbami vyhradenými pre systém.
Táto 216-farebná paleta bola vytvorená na správne zobrazenie farieb v režime 256-farebnej palety.
Teraz na tom nezáleží, pretože väčšina počítačov na celom svete podporuje milióny odtieňov farieb. V každom prípade tu je zoznam týchto farieb:
000000 | 000033 | 000066 | 000099 | 0000 CC | 0000 FF |
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 | 3300 FF |
333300 | 333333 | 333366 | 333399 | 3333 CC | 3333FF |
336600 | 336633 | 336666 | 336699 | 3366 CC | 3366FF |
339900 | 339933 | 339966 | 339999 | 3399 CC | 3399FF |
33 CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
660000 | 660033 | 660066 | 660099 | 6600 CC | 6600 FF |
663300 | 663333 | 663366 | 663399 | 6633 CC | 6633FF |
666600 | 666633 | 666666 | 666699 | 6666 CC | 6666FF |
669900 | 669933 | 669966 | 669999 | 6699 CC | 6699FF |
66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
990000 | 990033 | 990066 | 990099 | 9900 CC | 9900 FF |
993300 | 993333 | 993366 | 993399 | 9933 CC | 9933FF |
996600 | 996633 | 996666 | 996699 | 9966 CC | 9966FF |
999900 | 999933 | 999966 | 999999 | 9999 CC | 9999FF |
99CC00 | 99CC33 | 99CC66 | 99CC99 | 99 CCCC | 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 |
Farbu v CSS je možné nastaviť rôznymi spôsobmi:
- podľa názvu,
- podľa hexadecimálnej hodnoty,
- vo formátoch RGB a RGBA,
- vo formátoch HSL a HSLA.
Nastavte farbu podľa názvu
Prehliadače podporujú špecifikovanie niektorých farieb prvkov podľa názvu. Táto tabuľka obsahuje niektoré kľúčové slová (anglické názvy farieb), ktoré sa používajú na špecifikáciu vlastností farieb, kódu RGB, hexadecimálneho kódu (HEX) a kódu HSL.
názov | Farba | RGB | HEX | HSL | Popis |
---|---|---|---|---|---|
biely | rgb(255, 255, 255) | #ffffff alebo #fff | hsl(0, 0 %, 100 %) | biely | |
striebro | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0 %, 75 %) | Šedá | |
sivá | rgb(128, 128, 128) | #808080 | hsl(0, 0 %, 50 %) | Tmavošedý | |
čierna | rgb(0, 0, 0) | #000000 alebo #000 | hsl(0, 0 %, 0 %) | čierna | |
gaštanové | rgb(128, 0, 0) | #800000 | hsl(0, 100 %, 25 %) | Tmavo červená | |
červená | rgb(255, 0, 0) | #ff0000 alebo #f00 | hsl(0, 100 %, 50 %) | Červená | |
oranžová | rgb(255, 165, 0) | #ffa500 | hsl(38,8, 100 %, 50 %) | Oranžová | |
žltá | rgb(255, 255, 0) | #ffff00 alebo #ff0 | hsl(60, 100 %, 50 %) | žltá | |
olivový | rgb(128, 128, 0) | #808000 | hsl(60, 100 %, 25 %) | Olivový | |
vápno | rgb(0, 255, 0) | #00ff00 alebo #0f0 | hsl(120, 100 %, 50 %) | Svetlo zelená | |
zelená | rgb(0; 128; 0) | #008000 | hsl(120, 100 %, 25 %) | zelená | |
aqua | rgb(0, 255, 255) | #00ffff alebo #0ff | hsl(180, 100 %, 50 %) | Modrá | |
Modrá | rgb(0, 0, 255) | #0000ff alebo #00f | hsl(240, 100 %, 50 %) | Modrá | |
námorníctvo | rgb(0,0,128) | #000080 | hsl(240, 100 %, 25 %) | Tmavomodrá | |
modrozelený | rgb(0, 128, 128) | #008080 | hsl(180, 100 %, 25 %) | Modro zelená | |
fuchsiová | rgb(255, 0, 255) | #ff00ff alebo #f0f | hsl(300, 100 %, 50 %) | Ružová | |
Fialová | rgb(128, 0, 128) | #800080 | hsl(300, 100 %, 25 %) | fialový |
Toto je príklad použitia názvov farieb, názvy farieb sú prevzaté z rozšírenej tabuľky.
Tento kód funguje takto:
Nastavenie farieb pomocou RGB
RGB je aditívny farebný model. V angličtine prídavok- prídavok. RGB je skratka anglických slov: Red, Green, Blue – červená, zelená, modrá). Z toho je zrejmé, že v modeli RGB sa farby syntetizujú pridaním troch farieb (červená, zelená, modrá) v rôznych množstvách.
Zmiešaním červenej, zelenej a modrej farby môžete získať niekoľko miliónov odtieňov. Všetky možné kombinácie sú uložené v pamäti počítača.
Choďte k veci.
Na nastavenie vlastností v tomto formáte použite zápis rgb(r, g, b), kde r, g, b sú tri kanály pre každú farbu (červená, zelená, modrá). Hodnoty pre každý kanál sú nastavené v rozsahu od 0 do 255.
Príklad kódu.
Aby bolo všetko jasné, tu je príklad kódu:
Takto by mal fungovať tento príklad:
Obr.1. Farby v RGB.Napríklad vysvetlenia.
Na začiatku stránky vytvoríme triedu div.rgb, je potrebná pre bloky vytvorené tagom
Ďalej v kóde nastavíme farbu pozadia bloku
Skúste upraviť tento príklad a zadať svoje vlastné hodnoty, napríklad rgb(100, 100, 100) .
Nastavenie farieb pomocou RGBA
CSS3 má nový nástroj na prácu s farbami – formát RGBA. Možno to nazvať evolúciou modelu RGB, ale s pridaním jedného nového kanála - A alebo alfa kanála. Tento kanál nastavuje priehľadnosť farby. Jeho hodnoty sú nastavené v rozsahu od 0 do 1. Hodnota 0 zodpovedá úplnej priehľadnosti, 1 - plnej nepriehľadnosti (farba bude rovnaká, ako bola špecifikovaná v prvých troch RGB kanáloch) a medzihodnotám ako 0,4 alebo 0,6 - priesvitnosť v rôznej miere.
Príklad kódu.
Bude to fungovať takto:
Tento kód je vizuálne podobný nasledujúcemu, ktorý používa model RGB na určenie hodnoty farby:
Tu je jeho výsledok:
Hodnota alfa kanála rovná nule robí akúkoľvek farbu neviditeľnou - absolútne transparentnou; hodnota rovná jednej prevedie farbu v kóde RGB bez zmien. Vlastnosť rgba(255,0,0,1.0) zobrazuje červenú farbu rgb(255, 0, 0) .
Podľa hexadecimálnej hodnoty (HEX kód)
V každodennom živote používame desiatkový systém počítania. Jeho pôvod je veľmi jednoduchý – na rukách máme desať prstov a počítanie na prstoch bolo v živote pohodlné. Ak má desiatkový systém desať číslic: od 0 do 9 a číslo 10 je ďalšia číslica, potom má systém hexadecimálnych čísel 16 číslic a ďalšia číslica je číslo 16.
Na označenie farebných kódov sa ako hexadecimálne číslice používajú obyčajné desatinné číslice od 0 do 9 a na označenie čísel od 10 do 15 sa používajú latinské písmená od A do F, teda (0, 1, 2, 3, 4, 5 6, 7, 8, 9, A, B, C, D, E, F). Pre prehľadnosť si to dajme do tabuľky:
Na zápis hexadecimálnych čísel väčších ako F (15 v desiatkovej sústave), podobne ako v desiatkovej sústave, používajú aj kombináciu dvoch číslic, ale už šestnástkovú, čo je zrejmé. Ak teda chcete zapísať desatinné číslo 255 v hexadecimálnom zápise, použite zápis FF.
Hexadecimálny systém je pre počítač zrozumiteľnejší a rýchlejšie spracováva hodnoty nastavené hexadecimálnou hodnotou.
Ak chcete zadať farbu v šestnástkovej sústave, pred číselnú hodnotu uveďte znak „#“, napríklad: #FFC0CB. Samotná hodnota #FFC0CB pozostáva z troch hexadecimálnych číslic FF, C0 a CB. Význam tejto položky je rovnaký ako nastavenie farby vo formáte RGB (rgb(r, g, b)) - každá hexadecimálna číslica v HEX kóde označuje sýtosť farieb vo svojom kanáli modelu RGB.
Tento kód zobrazí nasledujúce prvky:
A tu je obrázok s výsledkom zo sekcie "Nastavenie farieb pomocou RGB" na tejto stránke vyššie.
Obr.1. Farby v RGB.Vidíme, že farby sú rovnaké.
Skrátený zápis HEX kódu farby je povolený: 6-miestne číslo môže byť napísané ako 3-miestne číslo. Toto platí len vtedy, keď sa dve číslice vo farbe jedného kanála opakujú.
To znamená, že je prijateľná nasledujúca skratka:
Napríklad farba #ff22aa môže byť napísaná ako #f2a alebo farba #44aa22 môže byť napísaná ako #4a2.
Nastavenie farieb pomocou HSL
CSS3 má nový formát na špecifikovanie farieb.
Formát HSL je skratka pre anglické slová: Hue (odtieň), Saturate (sýtosť) a Lightness (svetlosť).
Odtieň v HSL je hodnota farby na špeciálnom farebnom koliesku (obrázok 2) a je špecifikovaná v stupňoch. Ak nakreslíme analógie s modelom RGB, potom 0° zodpovedá červenej, 120° zodpovedá zelenej a 240° zodpovedá modrej.
Hodnota odtieňa sa zmení z 0 na 359.
Obrázok 2. Farebné koliesko HSL.
Druhá hodnota - sýtosť (Saturate) sa nastavuje v percentách. Pri 100% sýtosti je farba čo najviac „šťavnatá“, keď sa indikátor sýtosti pohybuje smerom k 0 %, farba sa stáva matnejšou a stáča sa do sivej.
Tretia hodnota, Svetlosť, sa tiež nastavuje v percentách. Čím vyššie percento, tým jasnejšia bude farba. Extrémne hodnoty 0 % a 100 % budú indikovať čiernu (žiadne svetlo) a bielu (preexponovanú) farbu a nezáleží na tom, ktorá farba z farebného kolieska bola vybratá v prvom kanáli. Optimálna hodnota jasu farieb je 50 %.
Nastavenie farieb pomocou HSLA
Formát HSLA súvisí s HSL, rovnako ako RGB s RGBA. Vo formáte HSLA, rovnako ako v RGBA, je pridaný alfa kanál, ktorý je zodpovedný za farebnú transparentnosť.
Farba uvedená vo formáte HSL je ľahšie čitateľná. Dá sa povedať, že je to intuitívne. Napríklad kód hsl(120,60%,50%) môže predstavovať konečnú farbu, ak je v pamäti obrázok farebného kolieska HSL. To isté sa nedá povedať o formátoch RGB a HEX, farebný kód uvedený v týchto formátoch je jasný až po zobrazení na monitore.
Nové formáty v CSS3 (HSL, HSLA a RGBA) fungujú v prehliadačoch od verzií: IE 9.0, Opera 10.0 Firefox 3.0. Ako môžem zabezpečiť, aby štýly fungovali v starších prehliadačoch?
Somebloсk ( farba pozadia: rgb(255,50,50); farba pozadia: rgba(255,50,50,0,85) )
Pri použití tohto kódu v starších prehliadačoch sa farba pozadia pre triedu .somebloсk, hoci nebude používať alfa kanál, zobrazí vo formáte RGB.