RGB nu este suficient: notațiile de culoare HSL, CMYK și OKLCH

În postarea anterioară, Cum creează computerul culorile: RGB, HEX și sistemul binar, am văzut că o culoare este doar trei numere — roșu, verde, albastru, fiecare de la 0 la 255. Ecranele funcționează perfect cu acele numere. Dar în momentul în care un om începe să lucreze cu culoarea, RGB devine rapid incomod.

RGB este convenabil, dar nu intuitiv

“Un roșu puțin mai deschis.” Cum se obține asta în RGB? Trebuie să creșteți ușor toate cele trei canale simultan. “Vreau să scad doar saturația” — dacă vă uitați doar la RGB, nu știți ce să reduceți. “Tipăriți această culoare exact pe hârtie” — este complet imposibil cu RGB.

Celelalte sisteme de notare a culorilor au apărut tocmai pentru a rezolva aceste probleme.

HSL — Modul în care gândesc oamenii

HSL împarte culoarea în trei componente: nuanță · saturație · luminozitate. hsl(14, 100%, 60%) este aceeași culoare ca #FF5733, dar este clar de unde provine fiecare element.

Dacă RGB este limbajul computerului — HSL este limbajul designerului. Aceeași culoare poate fi abordată din perspectiva ce anume vreți să modificați.

Hue — Nuanța este un cerc de 360°

Nuanța face un cerc complet, ca un ceas. Pornește de la 0° și ajunge la 360°. 0° și 360° sunt același roșu.

Saturation — Saturația înseamnă intensitatea culorii

Chiar cu aceeași nuanță, reducând saturația, culoarea tinde spre gri.

Lightness — Luminozitatea de la negru la alb

Dacă L este 0%, culoarea este întotdeauna negru; dacă este 100%, întotdeauna alb. 50% reprezintă luminozitatea “naturală” a culorii.

Utilitatea reală a HSL — Crearea paletelor

Menținând aceeași nuanță (Hue) și modificând doar L, obțineți un set de culori care se armonizează natural. Același lucru în RGB ar necesita calcule manuale pentru fiecare din cele 9 celule, pe când în HSL este suficient să ajustați L pas cu pas de la 12% la 92%.

Ambele palete de mai sus pot fi generate fiecare cu câteva linii de cod.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... modificați L cu câte 10 și gata */
}

Acesta este momentul în care HSL strălucește cu adevărat în crearea sistemelor de design.

CMYK — Limbajul cernelii

Pentru a aplica culoare pe hârtie, nu pe ecran, este nevoie de un sistem complet diferit. CMYK reprezintă proporțiile celor patru cerneluiri utilizate de tipografii.

De ce negrul este denumit “K” și nu “B”? Pentru că B ar crea confuzie cu Blue. De asemenea, termenul provine din tipografie — “Key plate” — placa de referință față de care se aliniază celelalte cerneluiri.

Lumina adăugată devine mai deschisă, cerneala adăugată devine mai închisă

Cea mai mare diferență între RGB și CMYK este modul de amestecare.

Cerneala roșie apare roșie deoarece absoarbe celelalte culori și reflectă doar roșul. Cerneala scade lumina. De aceea, cu cât amestecați mai multă cerneală, cu atât culoarea devine mai închisă. Teoretic, amestecând CMY ar trebui să obțineți negru, dar în practică rezultă un maro murdar. De aceea există o cerneală neagră dedicată (K).

Unde se folosește CMYK

Dacă lucrați în design digital, veți întâlni rar CMYK. Apare doar la imprimare pe hârtie.

• Când trimiteți fișiere la tipografie — cărți de vizită, postere, cărți, ambalaje. Tipografiile convertesc fișierele RGB în CMYK.
• Lucru pentru imprimare în Photoshop / Illustrator — setați modul de culoare la CMYK de la început.
• Ghiduri de brand — valorile HEX pentru ecran și CMYK pentru imprimare sunt notate împreună, deoarece aceeași culoare de brand trebuie să arate similar pe ambele suporturi.

De ce culoarea de pe ecran diferă de culoarea tipărită — Gamut

Gama de culori reprezentabilă pe ecran (RGB gamut) și gama reprezentabilă cu cerneală (CMYK gamut) sunt diferite. Un roz fluorescent vibrant de pe ecran nu poate fi reprodus la imprimare — este o culoare care nu poate fi creată cu cerneală.

De aceea, designerii pentru print aleg numai culori din domeniul CMYK înainte de a începe lucrul. Este obișnuit ca designurile lucrate în RGB să arate fad la imprimare.

Cum se notează valorile CMYK

Se notează procentul de cerneală aplicat pentru fiecare canal. 0% înseamnă deloc, 100% înseamnă complet.

Negrul intens obținut numai cu K 100% tinde spre un negru mată, aproape gri. De aceea tipografiile adaugă și CMY pentru a obține un negru mai profund.

OKLCH — Coordonatele omului

Este un model de culoare apărut în forță în anii 2020. Cuvântul cheie este unul singur — “natural pentru ochiul uman.”

Cele trei coordonate seamănă ca nume cu HSL.

• L — Lightness (luminozitate, 0–1)
• C — Chroma (intensitate, 0–circa 0.4)
• H — Hue (nuanță, 0–360°)

Există însă o problemă ascunsă în HSL. Chiar dacă L = 50% este același, luminozitatea percepută efectiv variază considerabil de la o culoare la alta. Să comparăm direct.

Rezumând într-o singură linie — RGB și HSL sunt coordonatele mașinii. OKLCH sunt coordonatele omului.

Rolul fiecăruia dintre L · C · H

Să vedem ce se întâmplă când modificați o singură coordonată, păstrând aceeași culoare.

Unde se utilizează

• Palete cu luminozitate uniformă — când doriți ca toate cele 8 culori de categorie să aibă aceeași luminozitate
• Conversie automată mod întunecat/luminos — inversând doar valoarea L se obține o temă întunecată naturală
• Accesibilitate — diferența de luminozitate dintre text și fundal poate fi prevăzută cu precizie
• Degradeuri — flux natural fără benzi gri la mijloc

A fost adoptat oficial odată cu CSS Color Level 4 și poate fi utilizat direct în browsere moderne.

.btn { background: oklch(67% 0.18 30); }       /* portocaliu */
.btn:hover { background: oklch(60% 0.18 30); } /* L scăzut cu 7 → exact mai întunecat cu atât */

Ce să folosiți și când

Pentru majoritatea lucrărilor digitale, RGB/HEX este suficient. HSL este util de ținut minte la crearea paletelor, iar OKLCH ajută mult în designul cu moduri întunecat și luminos.

Cum gestionați culorile cu fns

Odată ce știți că o culoare este un număr, pasul următor este să aveți culorile des utilizate la îndemână. fns reunește fluxul de extragere, salvare și reutilizare a culorilor în spatele unei singure taste.

Eyedropper pentru a prelua culori de oriunde pe ecran — ⌘+Shift+K

Eyedropper este un instrument care captează exact culoarea oricărui pixel de pe ecran. Este ca și cum ați adus selectorul disponibil doar în Figma/Photoshop la nivel de sistem.

Apăsați ⌘+Shift+K și Eyedropper-ul fns apare oriunde pe ecran. Un pixel dintr-un fișier de design, o zonă dintr-o fotografie, culoarea de fundal a altei aplicații — aduceți cursorul și faceți clic pentru a captura culoarea exactă.

• La fiecare clic, culoarea se salvează automat în clipboard. Nu este necesară o acțiune separată de “copiere”.
• În widgetul Eyedropper puteți alege în ce format (RGB / HEX / HSL / CMYK / OKLCH) intră culoarea în clipboard.
• Afișează o previzualizare vizuală a culorii capturate și culorile de sistem apropiate.

Eyedropper → salvare automată în clipboard → preluare din selectorul de clipboard — fluxul nu se întrerupe. Nu trebuie să deschideți o aplicație separată ca Digital Color Meter-ul implicit de pe Mac și nici să apăsați de fiecare dată o scurtătură de copiere.

Clipboardul recunoaște automat culorile

Istoricul clipboardului din fns detectează automat dacă textul copiat este un cod de culoare. Funcționează indiferent de format.

Când preluați o culoare din istoric, este greu de reținut ce culoare era privind doar textul. fns afișează un chip de culoare mic lângă fiecare intrare, astfel încât puteți vedea dintr-o privire ce culoare este.

Vizualizați doar culorile

Cu o singură tastă puteți filtra doar codurile de culoare din istoricul clipboard-ului. Când doriți să vedeți numai culorile utilizate recent în timpul unui proiect de design, nu mai trebuie să căutați printre texte, URL-uri și cod.

• Cuvinte cheie de filtrare ca color: în același selector → afișează doar intrările de culoare
• Căutare după nume de culoare — “blue”, “red” filtrează numai culorile din acea familie
• Culorile similare sunt grupate și sortate vizual

Convertiți o culoare în alt format

Puteți converti și prelua aceeași culoare în altă notație. Când copiați #FF5733 din Figma și vreți să îl lipiți ca rgb(...) în CSS, selectați acea intrare în selectorul de clipboard fns și o scurtătură o convertește automat.

Nu mai trebuie să deschideți un convertor de fiecare dată când treceți între Figma (HSB) și CSS (HSL/HEX/OKLCH).

Extindere text și grupare

Culorile de brand frecvent utilizate se înregistrează ca scurtături text.

Aceeași scurtătură funcționează oriunde — câmpul de culoare din CSS, Figma, mesaje Slack, editor de cod. Dispare timpul pierdut căutând și copiând culorile din ghidul de brand de fiecare dată.

Reduceți cu fns timpul pe care îl petreceați deschizând convertoare și transferând coduri de culoare în alte formate.

Curios de unde provin aceste numere — elementele de bază ale celor trei canale RGB, sistemul binar și notația HEX? Începe cu Cum creează computerul culorile: RGB, HEX și sistemul binar.