Selector de culori

Fiecare culoare de pe această pagină folosește sRGB, spațiul de culoare implicit al web-ului de când browserele l-au adoptat, la sfârșitul anilor 1990. Un ecran amestecă lumină roșie, verde și albastră, iar fiecare canal are 256 de niveluri (0–255), ceea ce dă 16.777.216 culori posibile. RGB scrie direct cele trei numere; HEX scrie aceleași trei numere în baza 16, câte două cifre fiecare, deci #FF6600 înseamnă roșu 255, verde 102, albastru 0. Forma scurtă cu trei cifre dublează fiecare cifră: #F60 este #FF6600.

HSL și HSB (numit și HSV) descriu aceleași culori într-un mod mai ușor de ajustat manual. Nuanța (hue) este un unghi pe cercul cromatic: 0° roșu, 120° verde, 240° albastru. Diferența apare la ultimul număr. În HSL, luminozitatea 100% este mereu alb, iar 50% este cea mai pură variantă a nuanței; în HSB, strălucirea 100% este nuanța pură, iar albul cere saturație 0%. Aplicații de design precum Photoshop și Figma folosesc HSB în selectoarele lor, în timp ce CSS înțelege nativ hsl(), de aceea ambele sunt listate mai sus.

Ecranele adaugă lumină; imprimantele o scad prin cerneluri cyan, magenta, galben și negru. Cele două sisteme acoperă game de culori diferite, numite gamuturi. Culorile foarte saturate de pe ecran, precum un verde RGB aprins, un albastru electric sau un portocaliu neon, se află în afara a ceea ce pot reproduce cernelurile de cuadricromie, așa că la tipar ies mai șterse decât pe monitor.

Valorile CMYK de aici folosesc conversia matematică simplă, fără profil ICC, utilă pentru o orientare aproximativă, dar nu pentru tipografie. Tipografia convertește cu un profil potrivit hârtiei și mașinii de tipar, precum FOGRA39 în Europa sau GRACoL în Statele Unite, iar aceeași culoare RGB poate avea procente de cerneală diferite în fiecare. Pentru tipar, trimiteți valoarea RGB sau HEX împreună cu profilul cerut de tipografie.

WCAG 2.1 compară luminanța relativă a două culori: cea mai deschisă plus 0,05, împărțită la cea mai închisă plus 0,05. Rezultatul variază de la 1:1 (culori identice) la 21:1 (negru pe alb). Nivelul AA cere cel puțin 4,5:1 pentru text normal și 3:1 pentru text mare, adică de 18 puncte sau 14 puncte aldin; nivelul AAA ridică aceste valori la 7:1 și 4,5:1. Elementele de interfață, precum marginile câmpurilor și pictogramele, au nevoie de 3:1 față de context, conform criteriului 1.4.11.

Luminanța dă verdelui o pondere mult mai mare decât albastrului, pentru că ochiul este cel mai sensibil la verde. De aceea textul galben pe alb pică clar, iar albastrul închis pe alb trece ușor, deși ambele culori par complet saturate. Logourile și textul pur decorativ sunt exceptate de la regulă.

Paleta din imagine citește fișierul cu canvas-ul browserului, îl micșorează la cel mult 200 de pixeli pe latura lungă și grupează pixelii similari cu metoda median-cut descrisă de Paul Heckbert în 1982: gama de culori este împărțită din nou și din nou pe canalul cel mai larg, până rămân șase grupuri, iar media fiecărui grup devine o probă de culoare. Pixelii transparenți sunt ignorați, deci un logo pe fundal transparent returnează culorile logoului.

După ce aveți culorile, un logo plat funcționează adesea mai bine ca vector. Convertorul de imagine în SVG îl transformă în forme care păstrează exact aceste culori, iar dacă proiectați un banner de canal, redimensionarea bannerului YouTube adaptează grafica la 2560 × 1440, ținând cont de zona sigură.