Selector de culori

Selectorul de culori este un instrument gratuit cu care poți alege o culoare direct în browser și îi poți obține valoarea în formatul dorit.

Ce rezultat oferă un selector de culori?

Un selector de culori returnează reprezentarea numerică a culorii alese de pe roată. Aceeași culoare vizibilă poate fi exprimată în mai multe formate, cel mai adesea hexadecimal, RGB, RGBA, HSL sau HSLA.

Aceste formate descriu culorile în moduri diferite. Formatele hexadecimal și RGB indică valorile canalelor roșu, verde și albastru. HSL folosește nuanța, saturația și luminozitatea, ceea ce poate simplifica ajustările sistematice. Formatele care includ un canal alfa descriu și opacitatea.

• Valorile hexadecimale conțin un diez urmat de cifre hexadecimale, de exemplu #336699.
• Valorile RGB exprimă de obicei fiecare canal printr-un număr de la 0 la 255, de exemplu rgb(51, 102, 153).
• Valorile HSL descriu un unghi pentru nuanță și valori procentuale pentru saturație și luminozitate, de exemplu hsl(210, 50%, 40%).
• Formatele RGBA și HSLA adaugă transparența. O valoare alfa de 0 înseamnă transparență totală, iar 1 înseamnă opacitate totală.

CSS acceptă și culori denumite, însă numele disponibile formează un set fix și sunt mai puțin potrivite pentru tokenuri de design exacte. Valorile numerice generate sunt, de regulă, mai ușor de transferat între sisteme de design, foi de stil și codul aplicațiilor.

Cum folosesc selectorul de culori?

Selectează câmpul Culoare, alege punctul dorit de pe roata culorilor, apoi folosește valoarea obținută în formatul cerut de aplicația ta. Totul se desfășoară în browser, iar culoarea introdusă nu este încărcată niciodată pe un server.

Pentru o interfață existentă, pornește de la formatul folosit deja în baza de cod. Astfel eviți conversiile inutile și faci cererile de integrare mai ușor de verificat. Când examinezi date provenite de la terți, verifică dacă valorile includ opacitate înainte de a le înlocui cu o culoare aparent echivalentă.

Înainte de publicare, o metodă practică este să selectezi sau să reproduci culoarea dorită, să copiezi notația potrivită și să o verifici în starea reală a componentei. Testează separat stările normală, la trecerea cursorului, focalizată și dezactivată, deoarece opacitatea și stilurile moștenite pot modifica rezultatul final afișat.

Cum interpretezi rezultatul

Interpretează rezultatul în funcție de modelul de culoare și verifică orice componentă alfa înainte de a-l copia în cod. În RGB, valoarea fiecărui canal controlează intensitatea componentei corespunzătoare de roșu, verde sau albastru. În HSL, nuanța se deplasează pe o roată a culorilor, saturația controlează intensitatea culorii, iar luminozitatea stabilește echilibrul dintre negru și alb.

Sintaxa culorilor trebuie respectată cu strictețe în CSS sau în date structurate. Printre greșelile frecvente făcute la editarea manuală se numără:

• omiterea diezului de la începutul unei valori CSS hexadecimale;
• folosirea a cinci sau șapte cifre hexadecimale, lungimi care nu sunt valide în notația hex standard;
• introducerea procentelor acolo unde implementarea RGB așteaptă valori numerice pentru canale;
• omiterea virgulelor în sintaxa RGB veche sau combinarea sintaxelor vechi și moderne incompatibile;
• copierea unei valori cu canal alfa într-un program care acceptă doar valori hex cu șase cifre;
• folosirea virgulei zecimale, precum 0,5, acolo unde CSS impune punctul zecimal, precum 0.5.

Selectorul generează valori de culoare, dar nu este un validator CSS general. El nu confirmă că o declarație din jur, un document JSON sau un fișier de temă este valid. Erorile de sintaxă din afara valorii culorii trebuie verificate în continuare cu parserul sau instrumentul de dezvoltare corespunzător.

Exemple de conversie a culorilor

Într-o culoare hexadecimală cu șase cifre, fiecare pereche de cifre corespunde canalelor roșu, verde și albastru. De exemplu, reprezentările următoare descriu aceeași culoare opacă.

Valoare hex #336699

Echivalent RGB rgb(51, 102, 153)

Echivalent HSL hsl(210, 50%, 40%)

Notația hex cu trei cifre este o formă prescurtată. Fiecare cifră este repetată pentru a obține o valoare cu șase cifre.

Valoare hex scurtă #fff

Valoare hex extinsă #ffffff

Echivalent RGB rgb(255, 255, 255)

Notația hex cu opt cifre include canalul alfa după perechile pentru roșu, verde și albastru. Ai grijă la sistemele care folosesc o altă ordine a canalelor sau nu acceptă notația cu opt cifre. Chiar și o culoare solidă care pare identică poate produce un rezultat diferit atunci când opacitatea este aplicată peste alt fundal.

Ce format de culoare ar trebui să aleg?

Alege notația de culoare acceptată deja la destinație, dacă nu există un motiv clar să o schimbi. Formatul hex cu șase cifre este compact și des întâlnit în variabilele CSS și fișierele cu tokenuri de design. RGB este practic atunci când programul afișează direct valorile canalelor, iar HSL este util pentru a crea culori înrudite prin ajustarea luminozității sau a saturației.

• Folosește hex cu șase cifre pentru o culoare web opacă atunci când contează concizia și lizibilitatea generală.
• Folosește hex cu opt cifre numai dacă mediul țintă acceptă explicit canalul alfa în această notație.
• Folosește RGB sau RGBA când lucrezi separat cu canalele roșu, verde și albastru.
• Folosește HSL sau HSLA pentru variații programatice ale temei, bazate pe nuanță, saturație sau luminozitate.
• Folosește Convertorul de culori dacă ai deja o valoare și trebuie să o convertești, nu să alegi vizual o culoare nouă.

Nu considera o valoare RGB afișată pe ecran drept specificație pentru tipar. Tiparul comercial poate necesita valori CMYK, un profil de culoare ICC, probe de tipar și confirmarea tipografiei. O simplă conversie matematică nu poate garanta că o culoare tipărită va corespunde unui ecran iluminat din spate.

Când nu este necesar să aleg sau să convertesc o culoare?

Nu este necesar să alegi sau să convertești o culoare dacă valoarea existentă are deja formatul cerut la destinație. Conversiile repetate pot introduce diferențe de rotunjire, folosirea inconsecventă a literelor mari și mici sau modificări inutile în fișierele sursă.

De asemenea, poate fi mai bine să păstrezi un token de design denumit, cum ar fi o variabilă de temă, în loc să-l înlocuiești cu o valoare literală. Tokenurile păstrează legătura dintre componente și permit schimbarea centralizată a unei culori. În mod similar, o culoare folosită doar de un sistem nu are nevoie de o reprezentare mai ușor de citit de către oameni, decât dacă cineva trebuie să o examineze sau să o întrețină.

Niciun selector de culori nu poate stabili singur dacă o alegere are suficient contrast, respectă specificațiile unui brand sau rămâne ușor de diferențiat pentru persoanele cu deficiențe de vedere cromatică. Verifică combinațiile dintre prim-plan și fundal cu un instrument dedicat contrastului și examinează interfața în context.

Întrebări frecvente

Pot folosi rezultatul în variabile CSS?

Da, dacă notația aleasă este validă în CSS pentru browserele și instrumentele de compilare pe care le accepți. Salvează valoarea completă într-o proprietate personalizată, apoi apeleaz-o cu funcția var(). Dacă proiectul prelucrează canalele separat, poate fi mai practic să le stochezi conform convenției existente în proiect.

De ce arată aceeași culoare diferit pe alt ecran?

Ecranele diferă în privința calibrării, luminozității, tehnologiei panoului și a gamei de culori acceptate. Gestionarea culorilor de către browser și profilul de afișare al sistemului de operare pot influența, de asemenea, redarea. Prin urmare, valori numerice identice nu garantează același aspect fizic pe toate dispozitivele.

Literele mari sau mici dintr-o valoare hex schimbă culoarea?

Nu. Cifrele hexadecimale de la A la F nu fac diferența între litere mari și mici, așa că #AABBCC și #aabbcc reprezintă aceeași culoare. Respectă convenția folosită în depozitul de cod pentru a evita modificările care țin doar de formatare.

Poate o valoare de culoare să conțină diacritice sau caractere non-latine?

Notațiile standard hexadecimal, RGB și HSL folosesc cifre, litere și semne de punctuație ASCII. Diacriticele și caracterele non-latine nu fac parte din aceste sintaxe numerice pentru culori. Ele pot apărea în numele variabilelor sau în metadatele din jur, dacă limbajul și codificarea fișierului permit acest lucru.

O culoare transparentă înseamnă că nu există nicio culoare?

Nu. O culoare complet transparentă păstrează valorile canalelor, chiar dacă acestea nu sunt vizibile separat. Canalele ascunse pot conta la animație, interpolare, compunere sau la modificarea ulterioară a opacității. Păstrează-le atunci când aplicația se bazează pe un astfel de comportament.

Ar trebui să rotunjesc valorile zecimale ale canalelor?

Rotunjește valorile zecimale ale canalelor de culoare și valorile alfa numai la precizia acceptată de destinație și necesară pentru rezultate consecvente. Precizia excesivă îngreunează verificarea valorilor, iar o rotunjire prea agresivă poate produce o mică diferență de culoare. După rotunjire, verifică redarea componentei pe fundalul prevăzut și în stările sale interactive.