Dacă ați încercat vreodată să proiectați un site web, să creați un logo sau să imprimați o carte de vizită, v-ați lovit imediat de supa confuză de coduri de culoare: HEX, RGB, HSL și CMYK. De ce există atât de multe moduri de a descrie o nuanță simplă de albastru?
Adevărul este că computerele și imprimantele „văd” lumina în moduri fundamental diferite. În plus, modul în care computerele procesează lumina nu este neapărat modul în care creierul uman interpretează culoarea. Înțelegerea acestor formate nu este doar o teorie – vă va scuti de instalarea de site-uri web cu rapoarte de contrast inaccesibile sau de a plăti mii de dolari pentru fluturași de marketing care se imprimă cu aspect noroios și întunecat.
Lumină aditivă vs subtractivă
Înainte de a pătrunde în cod, trebuie să stabilim diferența fizică dintre ecrane și hârtie.
- Ecranele emit lumină (aditiv). Dacă dezactivați toți pixelii, ecranul este negru. Pentru a face alb, un ecran aprinde lumină roșie, verde și albastră la intensitate maximă.
- Hârtia reflectă lumina (sustractiv). O bucată de hârtie goală este deja albă (reflectează toată lumina). Pentru a face negru, o imprimantă stratifică cerneală Cyan, Magenta și Yellow una peste alta pentru a absorbi toată lumina.
1. RGB (roșu, verde, albastru)
RGB este limba maternă a monitorului computerului. Definește o culoare spunând ecranului exact câtă lumină roșie, verde și albastră trebuie să emită. Fiecare canal este reprezentat de un număr întreg de la 0 (dezactivat) la 255 (intensitate maximă).
De exemplu, roșu pur este rgb(255, 0, 0). Albul pur este rgb(255, 255, 255).
Cel mai bun pentru: editare de imagini (Photoshop) și fotografie digitală. Acesta manipulează direct pixelii hardware.
2. HEX (hexazecimal)
Codurile HEX, cum ar fi #FF5733, sunt exact același lucru ca și RGB. Singura diferență este matematica. În loc să folosească numere de bază 10 (0-255), folosește numere hexazecimale de bază 16 (de la 00 la FF). Primele două litere indică roșu, cele din mijloc două verzi și ultimele două albastre.
De ce folosesc dezvoltatorii web HEX? Pentru că este mai scurt. Scrierea #FFF este mult mai rapidă pentru un dezvoltator CSS decât scrierea rgb(255, 255, 255).
Cel mai bun pentru: codificarea tare a culorilor mărcii în CSS. Este concis și ușor de copiat-lipit între instrumentele de proiectare precum Figma și editorii de cod.
Convertiți instantaneu codurile de culoare
Nu pierde timpul făcând matematică hexazecimală în capul tău. Utilizați instrumentul nostru offline pentru a traduce instantaneu între HEX, RGB, HSL și CMYK cu o previzualizare vizuală.
Deschideți Color Converter3. HSL (Nuanță, Saturație, Luminozitate)
RGB și HEX sunt teribile pentru oameni. Dacă vă arăt codul #4A90E2, nu puteți ghici cu ușurință ce culoare este. Dacă vă cer să „faceți albastrul cu 20% mai închis”, să faceți calculul în HEX este aproape imposibil.
HSL a fost conceput pentru creierul uman. Acesta definește culoarea într-o roată de culoare de 360 de grade.
- Nuanță (0-360): culoarea reală. 0 este roșu, 120 este verde, 240 este albastru.
- Saturație (0-100%): cât de intensă este culoarea. 0% este gri, 100% este vibrant.
- Luminozitate (0-100%): cât de întunecat sau luminos este. 0% este negru, 100% este alb.
Dacă marca dvs. albastră este hsl(210, 100%, 50%) și doriți o nuanță mai închisă pentru un efect de trecere cu mouse-ul, pur și simplu schimbați ultimul număr: hsl(210, 100%, 40%). Este magie pentru arhitectura CSS.
4. CMYK (cyan, magenta, galben, cheie/negru)
CMYK este exclusiv pentru lumea fizică. Dictează modul în care o imprimantă amestecă cerneala fizică. Deoarece cerneala absoarbe lumina, spațiul de culoare este fizic mai mic decât RGB. Există verzi neon vibranti pe care un ecran le poate emite (în RGB) pe care o imprimantă nu le poate imprima fizic (în CMYK).
Regula de aur: nu trimiteți niciodată un fișier RGB la o imprimantă comercială. Imprimanta o va converti cu forță în CMYK, rezultând culorile tale vibrante să arate noroios și spălate. Transformați-vă întotdeauna desenele în CMYK înainte de a le trimite la imprimerie.
Matricea de comparație
| Format | Environment | Readability | Primary Use Case |
|---|---|---|---|
| HEX | Digital | Low | Standard web design, copying from Figma |
| RGB | Digital | Medium | Manipulating alpha transparency (rgba) |
| HSL | Digital | High | Dynamic CSS theming, Dark Modes |
| CMYK | Physical Print | N/A | Business cards, flyers, packaging |
Întrebări frecvente (FAQ)
Ce format ar trebui să folosesc pentru un mod întunecat CSS?
Folosiți întotdeauna HSL pentru tematică dinamică. Menținând constante Nuanța și Saturația, puteți pur și simplu inversa valoarea Luminozității pentru a traduce perfect o culoare în mod deschis într-o culoare în mod întunecat.
Pot folosi CMYK pe un site web?
Nu. Browserele web înțeleg doar formate de culoare bazate pe lumină (RGB, HEX, HSL). Dacă încărcați un JPEG CMYK pe un site web, unele browsere vor încerca să îl redeze, dar culorile vor apărea rupte sau inversate.
Ce este un canal alfa?
„A” în RGBA sau HSLA înseamnă Alpha, care controlează transparența. Un alfa de 1,0 este complet solid, în timp ce 0,5 este 50% transparent. CSS modern permite acum transparența direct în codurile HEX, de asemenea, prin adăugarea a două cifre suplimentare (de exemplu, #FFFFFF80).