Na určenie farby sa používajú kódy farieb CSS. Farebné kódy alebo hodnoty farieb sa zvyčajne používajú na nastavenie farby buď pre popredie prvku (napríklad farba textu, farba odkazu) alebo pre pozadie 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.
Môžete si nastaviť vlastné hodnoty farieb 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 - Hexadecimálne 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ťmiestneho 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 „#“. Nasledujú príklady použitia hexadecimálneho zápisu.
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 prehliadača
Nižšie je uvedená tabuľka 216 farieb, ktoré sú najbezpečnejšie a najviac nezávislé od počítača. Tieto farby CSS sa pohybujú od 000000 do FFFFFF hexadecimálne. 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.
| CSS "bezpečná" tabuľka 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 | # 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 | # 6600 CC | # 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 | # 9900 CC | # 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 |
>> Správa farieb
Hexadecimálne hodnoty farieb RGB
Spôsoby popisu a spracovania farby sa navzájom líšia v tom, na akú finálnu prezentáciu sú určené. Porovnajme napríklad znázornenie farieb pre tlač a pre počítačové monitory. V prvom prípade sa vezme základ biely farba papiera, na ktorú sú následne nanesené tri základné farby: Modrá, Fialová a žltá... Miešaním medzi sebou as bielou farbou papiera v rôznych pomeroch tieto tri základné farby dávajú rôzne farebné odtiene, s výnimkou čistej čiernej, alebo pri úplnej absencii farby dávajú papieru bielu farbu. Ak k nim pridáme čiernu, dostaneme CMYK- spôsob podania farieb, kedy sa požadovaná farba získa odčítaním chýbajúcich farieb od bielej.
V druhom prípade sa vezme základ čierna farba obrazovky monitora, ktorej každá bunka svieti jednou z troch farieb: červená- červená, zelená- zelené a Modrá-Modrá. Potom, pri úplnej absencii akejkoľvek žiary, dostaneme čisto čiernu farbu obrazovky a ktorákoľvek z požadovaných farieb je nastavená pomerom každej z troch farieb. V tomto prípade dostaneme RGB- spôsob prenosu farieb. Primárne farby sa môžu pohybovať od 0
predtým 255
, alebo z 0%
predtým 100%
, alebo môže byť vyjadrená ako hexadecimálna hodnota. Na obrázku nižšie môžete vidieť výsledky miešania základných farieb.
Hexadecimálny číselný systém, na rozdiel od desiatkového čísla v jeho riadku číslic, nemá desať číslic, ale šestnásť - odtiaľ názov. V súlade s tým môžu byť neopakujúce sa varianty kombinácií dvoch číslic iba - 256 , ak chcete pokračovať v sérii číslic po 9 listy od A predtým F riadok bude teda vyzerať takto -
| 0,1,2,3,4,5,6,7,8,9, A, B, C, D, E, F. |
V tomto prípade je farba určená tromi hexadecimálnymi číslami, z ktorých každé pozostáva z dvoch číslic. Prvé číslo určuje intenzitu červená farby, priemer zelená, posledná vec- Modrá farby. Všetky čísla môžu nadobúdať hodnoty v rozsahu od 00 predtým FF(od 0 do 255). Napríklad: zelená sa uvádza ako # 00FF00, červená - ako # FF0000, modrá - ako # 0000 FF, biela - ako #FFFFFF, úplná absencia farby alebo čiernej je daná ako #000000 .
Vo formulári nižšie môžete nastaviť ľubovoľné hexadecimálne hodnoty pre každú z troch farieb a kliknutím do výstupného poľa vidieť výsledok ich zmiešania.
Príklady niektorých hexadecimálnych hodnôt farieb RGB sú gradácie červenej, modrej a zelenej.
| vyhliadka | kód | vyhliadka | kód | vyhliadka | kód | vyhliadka | kód | vyhliadka | kód | vyhliadka | kód |
| #010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
| #100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
| #200000 | # A00000 | #002000 | # 00A000 | #000020 | # 0000A0 | ||||||
| #300000 | # B00000 | #003000 | # 00B000 | #000030 | # 0000B0 | ||||||
| #400000 | # C00000 | #004000 | # 00C000 | #000040 | # 0000C0 | ||||||
| #500000 | # D00000 | #005000 | # 00D000 | #000050 | # 0000D0 | ||||||
| #600000 | # E00000 | #006000 | # 00E000 | #000060 | # 0000E0 | ||||||
| #700000 | # FF0000 | #007000 | # 00FF00 | #000070 | # 0000 FF |
Určenie farby pomocou reťazcových literálov
Na uľahčenie používania boli niektorým farbám a ich kombináciám priradené názvy, ktoré rozpoznávajú všetky prehliadače, a mnohé z nich bolo možné nastaviť podľa názvu. V tabuľke nižšie sú uvedené niektoré názvy farieb:
| vyhliadka | názov | vyhliadka | názov | vyhliadka | názov | vyhliadka | názov |
| biely | Červená | Oranžová | žltá | ||||
| zelená | Modrá | Fialová | čierna | ||||
| Aliceblue | Antiquewhite | Aqua | Akvamarín | ||||
| Azure | Béžová | Bisque | Blanchedalmond | ||||
| Modrofialová | Hnedá | Burlywood | Cadetblue | ||||
| Chartreuse | Čokoláda | Coral | Nevädza modrá | ||||
| Cornsilk | Crimson | Tyrkysový | Tmavomodrá | ||||
| Darkcyan | Darkgoldenrod | Tmavo-sivá | Tmavozelený | ||||
| Darkkhaki | Darkmagenta | Darkolivegreen | Tmavooranžová | ||||
| Darkorchid | Tmavo červená | Tmavý losos | Tmavozelená | ||||
| Tmavoslatemodrá | Darkslategrey | Tmavo tyrkysová | Tmavofialová | ||||
| Deeppink | Deepskyblue | Dimgray | Dodgerblue | ||||
| Ohnivá tehla | Kvetinovobiela | Forestgreen | Fuschia | ||||
| Gainsboro | Ghostwhite | Zlato | zlatobyľ | ||||
| Šedá | Zelenožltá | Medová Rosa | Hotpink | ||||
| indiánsky | Indigo | Slonovina | kaki | ||||
| Levanduľa | Levanduľová ruža | Lemonchiffon | Svetlo modrá | ||||
| Svetlokoralový | Svetlokyanová | Svetlostudenárodožltá | Svetlo zelená | ||||
| Svetlo sivá | Svetlo ružová | Svetlý losos | Svetlozelená | ||||
| svetloskymodrá | Svetloslatešedá | Svetloocelová modrá | Svetlo žltá | ||||
| Limetka | Limetková zelená | Bielizeň | purpurová | ||||
| Maroon | Stredný akvamarín | Stredne modrá | Stredne morchidný | ||||
| Stredne fialová | Strednezelená | Stredne bridlicovomodrá | Stredne jarná zelená | ||||
| Stredne tyrkysová | Stredne fialová | Polnočná modrá | Mätový krém | ||||
| Mistyrose | Navajobiela | námorníctvo | Oldlace | ||||
| Olivový | Olivedrab | Oranžová | Orchidea | ||||
| Palegoldenrod | Svetlo zelená | Paletyrkysová | Palefialová | ||||
| Papayawhip | Peachpuff | Peru | Ružová | ||||
| Slivka | Powderblue | Rosybrown | Kráľovská modrá | ||||
| Sedlohnedá | Seagreen | Mušle | Sienna | ||||
| Strieborná | Modrá obloha | Slateblue | Slategray | ||||
| Sneh | Springgreen | Oceľovomodrá | Tan | ||||
| Modrozelený | Bodliak | Paradajka | tyrkysová | ||||
| fialový | Pšenica | Whitesmoke | Žltá zelená |
Použitie bezpečného nástroja na výber farieb
Bohužiaľ, na rôznych platformách, s rôznymi systémovými nastaveniami, je správne podanie farieb problém. Ide o to, že prehliadač sa vždy snaží prispôsobiť farebnú paletu dokumentu systémovým nastaveniam a možnostiam monitora nezávislým miešaním farieb a ich nahradením. V dôsledku toho používateľ niekedy nevidí presne to, čo mu správca webu chcel ukázať. Východisko z tejto situácie sa našlo v použití palety, ktorej každú farbu zaručene vykreslia rovnako všetky prehliadače na rôznych platformách. Ide o tzv zaručené paleta, nazývaná tiež bezpečné paleta. Táto paleta obsahuje farby, ktorých farebné zložky nadobúdajú nasledujúce hodnoty: 00 ,33 ,66 ,99 , CC,FF, vo všetkých možných 216 ich kombinácie.
| vyhliadka | kód | vyhliadka | kód | vyhliadka | kód | vyhliadka | kód | vyhliadka | kód | vyhliadka | kód |
| Fffff | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
| CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
| 99FF00 | 99FF33 | 99CC66 | 99 CC00 | 99CC33 | 669900 | ||||||
| CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
| 66FF00 | 66FF33 | 33FF00 | 33 CC00 | 339900 | 009900 | ||||||
| 33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
| CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
| 99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
| 66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
| 66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
| 99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
| CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
| 99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
| 66CCFF | 33CCFF | 00CCFF | 3399 CC | 0099CC | 003333 | ||||||
| 99CCFF | 3399FF | 0099FF | 6699 CC | 336699 | 006699 | ||||||
| 0066FF | 3366 CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
| 6699FF | 3366FF | 0000 FF | 0000 CC | 0033CC | 000033 | ||||||
| 3333FF | 3300 FF | 3300 CC | 3333 CC | 000099 | 000066 | ||||||
| 9999 CC | 6666FF | 6666 CC | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999FF | 6666FF | 6600 FF | 330099 | 330066 | ||||||
| 9966 CC | 9966FF | 6600 CC | 6633 CC | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900 FF | 660099 | 663366 | ||||||
| CC66FF | CC33FF | CC00FF | 9900 CC | 996699 | 660066 | ||||||
| CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
| FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
| FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
| FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
| FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
| CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
| FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
| FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
| FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
| FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
| FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
| FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
HEX/HTML
HEX farba nie je nič iné ako hexadecimálne zobrazenie RGB.
Farby sú reprezentované ako tri skupiny hexadecimálnych číslic, kde každá skupina je zodpovedná za svoju vlastnú farbu: # 112233, kde 11 je červená, 22 je zelená, 33 je modrá. Všetky hodnoty musia byť medzi 00 a FF.
V mnohých aplikáciách je povolená skrátená forma zápisu hexadecimálnych farieb. 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 získať 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 zvyšok je nastavený na 0.
Niektoré aplikácie (najmä webové prehliadače) podporujú percentuálny zápis hodnôt RGB (0 % až 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 písanie * /
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). 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 normálnom 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 transparentné * /
RGBA je podporovaný v prehliadačoch IE9+, Firefox 3+, Chrome, Safari a Opera 10+.
Hsl
Farebný model HSL je cylindrickým znázornením modelu RGB. HSL predstavuje farby intuitívnejším a zrozumiteľnejším spôsobom ako typické RGB. Model sa často používa v grafických aplikáciách, vo výberoch farieb a na analýzu obrazu.
HSL je skratka pre Hue, Saturation, Lightness / Luminance, nezamieňajte s jasom.
Odtieň nastavuje polohu farby na farebnom koliesku (od 0 do 360). Sýtosť je percento nasýtenia (0 % až 100 %). Svetlosť je percento svetlosti (0 % až 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 s alfa kanálom na označenie nepriehľadnosti objektu.
Hodnota farby HSLA sa udáva ako: hsla (odtieň, sýtosť, svetlosť, alfa). 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úrová, Purpurová, Žltá 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 skôr veľkosť rastrovej bodky zobrazenej na fotosetke na filme danej farby (alebo priamo na tlačová forma v prípade CTP).
Napríklad, ak chcete získať farbu PANTONE 7526, zmiešajte 9 častí azúrovej, 83 purpurovej, 100 žltej a 46 čiernej. Môže to byť označené nasledovne: (9,83,100,46). Niekedy používajú takéto 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-hexe". Umelci často uprednostňujú používanie tohto modelu, všeobecne sa uznáva, že zariadenie HSB / HSV 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, Saturation, Brightness / Value.
Odtieň nastavuje polohu farby na farebnom koliesku (od 0 do 360). Sýtosť je percento nasýtenia (0 % až 100 %). Jas je percento jasu (0 % až 100 %).
XYZ
Farebný model XYZ (CIE 1931 XYZ) je čisto matematický priestor. Na rozdiel od modelov RGB, CMYK a iných modelov v XYZ sú hlavné komponenty „imaginárne“, to znamená, že nemôžete priradiť X, Y a Z k žiadnej množine farieb, ktoré chcete zmiešať. XYZ je hlavný model pre prakticky 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. Pri vývoji Lab bolo cieľom vytvoriť farebný priestor, v ktorom bude zmena farby lineárnejšia z pohľadu ľudského vnímania (v porovnaní s XYZ), teda tak, aby rovnaká zmena hodnôt farebných súradníc v rôzne oblasti farebného priestoru vytvárajú rovnaký pocit zmeny farby.
Vlad Merževič
V HTML je farba určená jedným z dvoch spôsobov: pomocou hexadecimálneho kódu a názvom niektorých farieb. Používa sa najmä metóda založená na hexadecimálnej číselnej sústave, ako najuniverzálnejšia.
Hexadecimálne farby
Na špecifikáciu farieb v HTML 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. Tabuľka 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 255 desatinné číslo je FF hexadecimálne.
Aby sa predišlo nejasnostiam v definícii číselnej sústavy, pred šestnástkové číslo sa umiestni znak hash #, napríklad # aa69cc. V tomto prípade nezáleží na registri, takže 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) sú zelené a posledné dve číslice (47) sú modré. V dôsledku toho získate túto farbu.
| FA | + | 8E | + | 47 | = | FA8E47 |
Každá z troch farieb – červená, zelená a modrá – môže nadobudnúť hodnoty od 00 do FF, výsledkom čoho je 256 odtieňov. 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á; červená, zelená, modrá). Tento model je aditívny (od pridať - pridať), 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), získate šedý odtieň. Čím vyššie číslo, tým svetlejšia farba, hodnoty sa líšia od # 000000 (čierna) po #FFFFFF (biela).
- Jasne červená farba sa vytvorí, ak je červená zložka nastavená na maximum (FF) a ostatné zložky sú nastavené na nulu. Farba # FF0000 je najčervenší možný červený odtieň. To isté platí pre zelenú (# 00FF00) a modrú (# 0000FF).
- Žltá (#FFFF00) sa získa zmiešaním červenej so zelenou. To je dobre viditeľné na farebnom koliesku (obr. 6.1), kde sú prezentované primárne farby (červená, zelená, modrá) a doplnkové alebo doplnkové farby. 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 blízkych farieb. Takže azúrová (# 00FFFF) sa získa kombináciou modrej a zelenej.
Ryža. 6.1. Farebný kruh
Hexadecimálne farby nie je potrebné vyberať empiricky. Na tento účel je vhodný grafický editor, ktorý dokáže pracovať s rôznymi farebnými modelmi, napríklad Adobe Photoshop. Na obr. 6.2 je zobrazené 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 výberu farby vo Photoshope
Webové farby
Ak nastavíte kvalitu farieb monitora na 8 bitov (256 farieb), rovnaká farba sa 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ú v palete nemá. V tomto prípade je farba nahradená kombináciou pixelov iných, blízkych farieb, ktoré napodobňujú zadanú. Aby farba zostala nezmenená v rôznych prehliadačoch, predstavili sme paletu takzvaných webových farieb. Webové farby sú tie farby, pre každú zložku - červenú, zelenú a modrú - je nastavená jedna zo šiestich hodnôt - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC ), 255 (FF). Zátvorky označujú hexadecimálnu hodnotu tohto komponentu. Celkový počet farieb zo všetkých možných kombinácií dáva 6x6x6 - 216 farieb. Príkladom webovej farby je # 33FF66.
Hlavnou črtou webovej farby je, že vyzerá rovnako vo všetkých prehliadačoch. V súčasnosti je relevantnosť webových farieb veľmi malá kvôli zvýšeniu kvality monitorov a rozšíreniu ich možností.
Farby podľa názvu
Aby ste si nezapamätali množinu čísel, môžete namiesto toho použiť názvy bežne používaných farieb. Tabuľka 6.3 uvádza názvy populárnych názvov farieb.
| Názov farby | Farba | Popis | Hexadecimálna hodnota |
|---|---|---|---|
| čierna | čierna | #000000 | |
| Modrá | Modrá | # 0000 FF | |
| fuchsiová | Svetlo fialová | # FF00FF | |
| sivá | Tmavošedý | #808080 | |
| zelená | zelená | #008000 | |
| vápno | Svetlo zelená | # 00FF00 | |
| gaštanové | Tmavo červená | #800000 | |
| námorníctvo | námornícka modrá | #000080 | |
| olivový | Olivový | #808000 | |
| Fialová | Tmavofialová | #800080 | |
| červená | Červená | # FF0000 | |
| striebro | Svetlo sivá | # C0C0C0 | |
| modrozelený | Modro zelená | #008080 | |
| biely | biely | #FFFFFF | |
| žltá | žltá | # FFFF00 |
Nezáleží na tom, akým spôsobom špecifikujete farbu - podľa názvu alebo pomocou hexadecimálnych čísel. Tieto metódy sú vo svojej činnosti rovnaké. Príklad 6.1 ukazuje, ako nastaviť pozadie a farbu textu webovej stránky.
Príklad 6.1. Farba pozadia a textu
Ukážkový text
V tomto príklade je farba pozadia nastavená pomocou atribútu bgcolor značky
a farbu textu prostredníctvom atribútu text. Pre zmenu je atribút text nastavený na hexadecimálne číslo a bgcolor je nastavené na kľúčové slovo modrozelená.Pozrite sa pozorne na výkres. Pozadie rozbaľovacieho okna je priehľadné. Ide o pomerne bežný dizajnový trik. Zamyslime sa nad tým, ako sa to dá zrealizovať.
Úloha
Vytvorte polopriehľadnú farbu naprieč prehliadačmi.
Riešenie
Prvá myšlienka v tejto situácii je použiť obrázok png24 na pozadie s už nastavenou priesvitnosťou. Ale tento obrázok je úplne zbytočný. Vystačíte si bez nej (a teda bez zbytočnej požiadavky na server). Skúsme nájsť optimálne riešenie.
Druhá myšlienka je použiť. Ale v tomto prípade to nie je príliš pohodlné. Koniec koncov, nielen pozadie, ale aj nápisy sa stanú priesvitnými. Áno, vlastne celé okno naraz.
Samozrejme, môžete skúsiť pridať ďalší kontajner a aplikovať nepriehľadnosť len naň, ale tento HTML prvok bude len na okrasu a bude zrejme nadbytočný. Dokážete sa bez toho zaobísť?
Samozrejme! Ak používate RGBA.
Formát popisu farieb RGBA
CSS3 vám umožňuje určiť farbu pomocou funkcií RGB a RGBA. Zároveň musíme uviesť zlomok každej farebnej zložky, pre ktorú je pridelený jeden bajt (od 0 do 255, zrazu, kto 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 potrebujeme. Žiadne zbytočné obrázky a prvky!
Kde môžem získať tieto čísla?
Na farebné zložky sa môžete pozrieť 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, môžete použiť nasledujúcu duplicitnú konštrukciu na zabezpečenie proti najstarším prehliadačom:
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 budeme musieť postarať samostatne. Somárikovia do verzie 8 nerozumejú RGBA.
Ako vždy: zem roľníkom, továrne robotníkom a osly berle! Ako .
Samozrejme, v bojových podmienkach dávame toto pravidlo do samostatného CSS, ktoré spájame.
SomeBlock (pozadie: transparentné; filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 80ff0000, endColorstr = # 80ff0000); priblíženie: 1;)
Trik je v tom, že počiatočnú a koncovú farbu určíte rovnako (ff0000 - červená) a využijete to, že pre gradient v tomto filtri môžete nastaviť alfa kanál (v príklade hodnotu 80).
Pre informáciu: filter používa hexadecimálny systém a kód FF zodpovedá úplne nepriehľadnej farbe (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ť.
Nahlásený:
- IE 6-9
- Firefox 3+
- Opera 10+
- Safari 4
- Chrome
Hodnota avatarov v psychológii
Hodnota avatarov v psychológii
Ako zdôrazniť písmeno v MS Word
Čo to znamená, ak je avatar osoby
Ako si vytvoriť svoj vlastný Twitter moment