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.

  1. h1 ( farba: #ff0000; ) /* červená */
  2. h2 ( farba: #00ff00; ) /* zelená */
  3. h3 ( farba: #0000ff; ) /* modrá */
  4. 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 %).

  1. h1 ( farba: rgb(255, 0, 0); ) /* červená */
  2. h2 ( farba: rgb(0, 255, 0); ) /* zelená */
  3. h3 ( farba: rgb(0, 0, 255); ) /* modrá */
  4. 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é).

  1. h1 ( farba: rgb(0, 0, 255); ) /* modrá v bežnom RGB */
  2. h2 ( farba: rgba(0, 0, 255, 1); ) /* rovnaká modrá v RGBA, pretože nepriehľadnosť: 100 % */
  3. h3 ( farba: rgba(0, 0, 255, 0,5); ) /* nepriehľadnosť: 50 % */
  4. h4 ( farba: rgba(0, 0, 255, 0,155); ) /* nepriehľadnosť: 15,5 % */
  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 %).

  1. h1 ( farba: hsl(120, 100 %, 50 %); ) /* zelená */
  2. h2 ( farba: hsl(120, 100%, 75%); ) /* svetlozelená */
  3. h3 ( farba: hsl(120, 100%, 25%); ) /* tmavozelená */
  4. 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é).

  1. h1 ( farba: hsl(120, 100%, 50%); ) /* zelená v normálnej HSL */
  2. h2 ( farba: hsla(120, 100 %, 50 %, 1); ) /* rovnaká zelená v HSLA, pretože nepriehľadnosť: 100 % */
  3. h3 ( farba: hsla(120, 100 %, 50 %, 0,5); ) /* nepriehľadnosť: 50 % */
  4. h4 ( farba: hsla(120, 100 %, 50 %, 0,155); ) /* nepriehľadnosť: 15,5 % */
  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.

Tabuľka 1. Názvy farieb, ich RGB, HEX a HSL kód.
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.

RGB v CSS

Stredne tyrkysová
hnedá
karmínová
modrofialová
rolivedrab


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:

RGB v CSS

rgb(255, 0, 0)
rgb(0, 255, 0)
rgb(0, 0, 255)


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

boli zobrazené v požadovanej veľkosti: 240px x 40px. Vlastnosti line-height priradíme hodnotu 40px, teda rovnajúcu sa výške bloku, čo vám umožní zobraziť text v bloku
vo vertikálnom strede. Text vycentrujeme vodorovne pomocou pravidla ( zarovnanie textu: na stred ;).

Ďalej v kóde nastavíme farbu pozadia bloku

pomocou atribútu style, pomocou vlastnosti pozadia a priradením hodnôt rgb(255, 0, 0) , rgb(0, 255, 0) a rgb(0, 0, 255) . To znamená, že striedavo robíme jeden kanál tak nasýtený, ako je to len možné, a zvyšné kanály sa nepoužívajú na syntézu, pretože ich hodnota je nula.

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.

RGBA v CSS3



Bude to fungovať takto:

Tento kód je vizuálne podobný nasledujúcemu, ktorý používa model RGB na určenie hodnoty farby:

RGBA v CSS3



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.

HEX kód v CSS

#FF0000
#00FF00
#0000FF


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.