Ghiduri despre culori
Ghiduri scurte și practice despre culoare pe ecran: formate, contrast, palete, modul întunecat și CSS. Fiecare număr este calculat, fiecare exemplu poate fi copiat.
- OKLCH explicat: formatul de culoare care se potrivește, în sfârșit, cu ochiulOKLCH descrie o culoare prin cât de deschisă pare, cât de intensă este și ce nuanță are. Spre deosebire de HSL, aceeași valoare a luminozității arată la fel de deschis pentru orice nuanță, așa că paletele, stările hover și contrastul accesibil devin previzibile.28 septembrie 2026Citire: 3 min
- APCA vs WCAG 2: în ce verificare de contrast să ai încredereRapoartele de contrast WCAG 2 sunt cele cerute de lege. APCA este un model mai nou care prezice mult mai bine lizibilitatea, mai ales în temele întunecate și la culorile saturate. Dacă le verifici pe amândouă, obții un text conform și cu adevărat ușor de citit.28 septembrie 2026Citire: 3 min
- Gamutul de culori explicat: sRGB, Display P3 și culorile din afara gamutuluiGamutul este setul de culori pe care le poate afișa un ecran sau un spațiu de culoare. Webul a fost construit pe sRGB, dar majoritatea telefoanelor și multe laptopuri afișează acum Display P3, cu roșuri, verzi și portocalii vizibil mai vii.28 septembrie 2026Citire: 2 min
- Formatele de culoare explicate: HEX, RGB, HSL, OKLCH și celelalteAceeași culoare poate fi scrisă în zeci de feluri. Aici afli ce înseamnă fiecare format, când îl folosești și cum arată aceeași culoare în toate.28 septembrie 2026Citire: 2 min
- Codurile de culoare hex explicate: cum funcționează #RRGGBBUn cod de culoare hex precum #1e90ff înseamnă trei perechi de cifre hexazecimale: cantitatea de lumină roșie, verde și albastră, fiecare de la 00 (deloc) la ff (maxim, 255). Adaugă o a patra pereche ca să setezi opacitatea: 80 înseamnă circa 50%, ff înseamnă complet opac.28 septembrie 2026Citire: 6 min
- Cum alegi o paletă de culori pentru un site sau o aplicațiePornește de la o singură culoare de brand, generează din ea o scală de la 50 la 950, adaugă griuri ușor colorate și patru culori de stare, apoi testează fiecare pereche de text și fundal la contrast și daltonism. Alege treptele după luminozitatea OKLCH, nu din ochi: pe fundal alb, textul trece WCAG AA când luminozitatea scade la aproximativ 0,55, indiferent de nuanță.28 septembrie 2026Citire: 7 min
- Culori pentru modul întunecat: cum alegi fundalul, textul și accenteleFolosește un fundal gri închis precum #121212 în loc de negru pur, un text aproape alb precum #e5e5e5 în loc de alb pur și versiuni mai deschise și mai puțin saturate ale culorilor de brand. Verifică textul cu APCA pe lângă WCAG 2, pentru că WCAG 2 supraevaluează contrastul pe fundaluri închise.28 septembrie 2026Citire: 6 min
- Armonii cromatice: complementare, analoge, triadice și alteleO armonie cromatică alege nuanțe la unghiuri fixe pe roata culorilor: la 180° una de alta pentru complementare, la 30° pentru analoge, la 120° pentru triadice. Rotește nuanța în OKLCH, nu în HSL, și culorile rămân la fel de luminoase, astfel încât nicio nuanță nu iese în evidență din greșeală.28 septembrie 2026Citire: 5 min
- CSS color-mix() și culorile relative: variante deschise, hover și transparențăcolor-mix() amestecă două culori într-un spațiu de culoare ales de tine, iar sintaxa culorilor relative îți permite să modifici un singur canal al unei culori existente, de exemplu oklch(from var(--brand) calc(l - 0.1) c h). Ambele rulează în browser, merg cu variabilele CSS și înlocuiesc majoritatea funcțiilor de culoare din Sass. Amestecă în oklab pentru variante deschise și hover, în srgb pentru transparență.28 septembrie 2026Citire: 7 min
- Palete de culori pentru daltoniști: cum îți verifici și corectezi culorileO paletă prietenoasă cu daltoniștii păstrează fiecare pereche de culori ușor de deosebit la protanopie, deuteranopie, tritanopie și în tonuri de gri. Cea mai sigură soluție nu este o nuanță anume, ci o diferență de luminozitate: culorile aflate la aproximativ 0,2 una de alta în luminozitatea OKLCH au rămas distincte în toate simulările noastre. Adaugă și pictograme sau etichete, pentru că doar culoarea nu ajunge niciodată pentru toată lumea.28 septembrie 2026Citire: 7 min
- Culori Tailwind CSS: paleta v4 în OKLCH, culori personalizate și trepteTailwind CSS v4 vine cu 26 de scale de culori, fiecare cu 11 trepte de la 50 la 950, în total 286 de culori definite în OKLCH ca variabile CSS de tipul --color-blue-500. Pe ale tale le adaugi cu @theme { --color-brand-500: oklch(...) }. Același număr de treaptă nu înseamnă aceeași luminozitate: blue-600 este cel mai deschis albastru care trece de 4,5:1 pe alb, în timp ce galbenul are nevoie de 700.28 septembrie 2026Citire: 7 min