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 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.

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čená forma 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. Dizajn Lab bol navrhnutý tak, aby vytvoril 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 farby priestor by vyvolal rovnaký pocit zmeny farby.

Pre html stránky Farby sú určené predovšetkým v šestnástkovej sústave. Na tento účel sa používajú dva typy záznamu kódu - úplné alebo skrátené. Ak chcete správne uviesť plnú farbu html, musíte zadať šesť znakov (čísla a/alebo anglické písmená) za hashom je napríklad čierna napísaná takto: #000000. Skratka pre špecifikáciu html farieb pozostáva z hash a troch čísel a/alebo písmen za ním. V rovnakom čase tento typ rezervy možno použiť len vtedy, ak úplný záznam danej farby pozostáva z identických symbolov za značkou mriežky. Napríklad tá istá čierna farba môže byť napísaná takto: #000. Farby html môžete zadať pomocou veľkých aj malých znakov, pretože nerozlišujú veľké a malé písmená.

Každý znak napísaný za „#“ zodpovedá určitému podielu červenej, zelenej a modrej. Na druhej strane sa všetky monitory skladajú z obrovské množstvo pixely (mikroskopické body), z ktorých každý obsahuje 3 takzvané „baterky“ (svetelné zdroje): červené, zelené a modré. Potom nastavením intenzity svetla vyžarovaného týmito „baterkami“ monitor zobrazí farbu, ktorú potrebujeme.

Kombináciou intenzity vyžarovania červeného, ​​modrého a zeleného svetla (od 0 do 256) dokážu monitory zobraziť 16 000 000 rôznych odtieňov.

Farby pre webové stránky môžu byť tiež označené slovne alebo v RGB kóde.

Dnes sa dá slovne napísať 147 farieb. Je dôležité vedieť, že niektoré rôzne názvy môžu znamenať rovnaké farby, napríklad Šedá a Šedá sú sivou farbou (#808080).

Bezpečné farby pre webové stránky.

Nie každý monitor a prehliadač dokáže správne zobraziť všetkých 16 miliónov html farieb.

Ak napríklad narazíte na farbu, ktorú prehliadač nedokáže správne zobraziť, potom:

1. Prehliadač ho nahradí tým, ktorý je mu najviac podobný a dá sa úspešne reprodukovať;
2. Pre správne zobrazenie prehliadač dokáže miešať viacero farieb a reprodukovať výsledok.

Ak chcete zabezpečiť, aby výstup v ľubovoľnom prehliadači a na akomkoľvek monitore mal farbu, ktorú ste zadali v kóde, odporúča sa použiť „Bezpečné farby“. Boli určené nie manuálne alebo želaním niekoho iného, ​​ale matematicky. Toto sú 100% bezpečné farby html dokumenty je ich 216. A hoci dnešná technológia dospela do bodu, že moderné monitory a prehliadače rozpoznávajú milióny odtieňov, odporúčame používať tieto bezpečné farby, aby bola zaručená reprodukcia farieb.

Táto tabuľka obsahuje 216 bezpečných html farebných kódov. Každá farba má hodnotu RGB na definovanie farby grafických editorov a HEX na určenie farby na stránkach html.

Táto stránka obsahuje tabuľku s kľúčovými slovami, ktoré možno použiť na označenie farieb v jazykoch webových vývojárov, ako sú: HTML, CSS, JavaScript, Flash atď.

V starých špecifikáciách pre koncern WC3 bolo špecifikovaných len 16 kľúčových slov, pomocou ktorých sa nastavovali farby v HTML a CSS. V ďalších modernejších špecifikáciách bolo pridaných ďalších 130 kľúčových slov na označenie názvov farieb. Nasledujúca tabuľka obsahuje názvy farieb a hex a RGB kódy, ktorým zodpovedajú.

Podľa pravidiel CSS sa v názvoch farieb nerozlišujú veľké a malé písmená. Položky farieb IndianRed a indianred sú ekvivalentné.

Za zmienku tiež stojí, že zo 146 kľúčových slov v tabuľke je v nej v skutočnosti menej farieb. Je to preto, lebo niektorí kľúčové slová predstavujú rovnakú farbu. Názvy Gray a Grey teda predstavujú 50% kód šedej farby #808080 a slovo Magenta je synonymom pre HTML farbu Fuchsia, ktorá zodpovedá hexadecimálnemu kódu #FF00FF. Synonymné sú aj slová Aqua a Cyan, zodpovedajú kódu #00FFFF.

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 už nastavenou 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, že 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! Vo forme .

Samozrejme, v bojových podmienkach toto pravidlo aplikujeme samostatné CSS ktoré spájame.

SomeBlock ( background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )

Trik je v tom, že počiatočnú a koncovú farbu určíte ako rovnaké (ff0000 - červená) a využijete to, ž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

Tabuľka (paleta) farieb html vám dáva možnosť nezávisle si vybrať tón, ktorý potrebujete. Hodnota farby sa zobrazuje v troch formátoch: Hex, RGB a HSV.

• Hex sa skladá z troch dvojznakových hodnôt v systéme hexadecimálnych čísel. Napríklad: #ff00b3, kde prvý pár čísel je červený, druhý je zelený a tretí je modrý.
• RGB (RedGreenBlue) má tvar „200,100,255“, označujúci množstvo zodpovedajúceho tónu (červená, zelená, modrá) vo výslednej farbe.
• HSV (Hue, Saturation, Value - tón, sýtosť, hodnota) je farebný model, v ktorom sú súradnice:
  • Hue - farebný tón, môže sa meniť od 0° do 360°.
  • Sýtosť - sýtosť, mení sa od 0-100 alebo 0-1. Čím je tento parameter vyšší, tým je farba „čistejšia“, a preto sa tento parameter niekedy nazýva čistota farieb. A čím je tento parameter bližšie k nule, tým je farba bližšie k neutrálnej šedej.
  • Hodnota (hodnota farby) - nastavuje jas, hodnota sa môže meniť aj medzi 0-100 alebo 0-1.

Zadajte kód farby: Ísť

Zoznam farieb s menami

V tabuľke sú uvedené názvy farieb angličtina(ktoré možno použiť ako hodnoty) podporované všetkými prehliadačmi a ich hexadecimálne hodnoty. Všetky uvedené farby sú „bezpečné“, čo znamená, že sa budú zobrazovať rovnako vo všetkých prehliadačoch.