El RGB no és suficient: les notacions de color HSL, CMYK i OKLCH

A l’article anterior, Com genera colors l’ordinador: RGB, HEX i números binaris, vam veure que un color no és més que tres nombres — vermell, verd, blau, cadascun entre 0 i 255. Les pantalles funcionen perfectament amb aquests nombres. Però en el moment que un humà comença a treballar amb el color, el RGB es torna incòmode de seguida.

RGB és pràctic, però no intuïtiu

“Un vermell una mica més clar.” Com es fa en RGB? Cal pujar els tres canals alhora. “Només vull baixar una mica la saturació” — mirant només RGB no saps quin canal ajustar. “Vull imprimir-lo exactament igual en paper” — amb RGB això simplement no és possible.

Altres sistemes de color van sorgir precisament per resoldre aquests problemes.

HSL — la forma com pensa el ser humà

HSL divideix el color en tres components: to · saturació · lluminositat. hsl(14, 100%, 60%) és el mateix color que #FF5733, però queda clar d’on ve cada cosa.

Si RGB és el llenguatge de l’ordinador, HSL és el llenguatge del dissenyador. Permet treballar el mateix color des del punt de vista de què es vol canviar.

Hue — el to és un cercle de 360°

El to fa la volta completa com un rellotge, de 0° a 360°. Els 0° i els 360° són el mateix vermell.

Saturation — la saturació és la intensitat del color

Amb el mateix to, reduir la saturació apropa el color al gris.

Lightness — la lluminositat va del negre al blanc

L al 0% sempre és negre, al 100% sempre és blanc. El 50% correspon a la brillantor “natural” d’aquell color.

Per a què serveix realment HSL — crear paletes

Mantenint el mateix to (Hue) i canviant només L, s’obté un conjunt de colors que harmonitzen de manera natural. Per fer el mateix amb RGB caldria calcular manualment 9 cel·les, però amb HSL n’hi ha prou de variar L de 12% a 92% per passos.

Totes dues paletes es poden generar amb una sola línia:

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... només canviar L de 10 en 10 */
}

És on HSL brilla més a l’hora de construir un sistema de disseny.

CMYK — el llenguatge de la tinta

Per donar color al paper en lloc de a una pantalla, cal un sistema completament diferent. CMYK és la proporció de quatre tintes que utilitza una impremta.

Per què el negre s’anomena “K” en lloc de “B”? Per no confondre’l amb Blue. A més, el terme ve de “Key plate” en l’argot d’impremta — la placa de referència que alinea les altres tintes.

La llum suma brillantor; la tinta suma foscor

La diferència més gran entre RGB i CMYK és la forma de barrejar.

La tinta vermella es veu vermella perquè absorbeix les altres longituds d’ona i només reflecteix el vermell. La tinta treu llum. Per això, com més tinta es barreja, més fosc queda el color. En teoria, barrejar CMY hauria de donar negre, però a la pràctica resulta un marró tèrbol. Per això existeix una tinta negra independent (K).

On s’utilitza CMYK?

Si dissenyeu per a pantalla, gairebé mai haureu de tocar CMYK. Apareix únicament quan s’imprimeix en paper.

• En enviar arxius a la impremta — targetes de visita, cartells, llibres, embalatge. La impremta converteix els arxius RGB a CMYK.
• En treballar a Photoshop / Illustrator per a impressió — es comença amb el mode de color en CMYK des del principi.
• En guies de marca — s’anoten tant el HEX per a pantalla com els valors CMYK per a impressió. El mateix color de marca ha de semblar-se en tots dos mitjans.

Per què el color en pantalla i en paper no és igual — Gamut

El rang de colors que pot mostrar una pantalla (gamut RGB) i el que pot reproduir la tinta (gamut CMYK) no coincideixen. Un rosa fluorescent brillant en pantalla no sortirà igual imprès — simplement no és un color reproduïble amb tinta.

Per això els dissenyadors d’impressió treballen des del principi triant només colors dins del rang CMYK. És habitual que un disseny fet en RGB perdi vivacitat en imprimir-se.

Com s’escriuen els valors CMYK

S’indica quin percentatge de cada tinta s’aplica. 0% vol dir que no s’aplica; 100% és al màxim.

Amb només K al 100% el negre queda apagat, semblant al gris. Per això a la impremta s’hi afegeix CMY per aconseguir un negre més profund.

OKLCH — les coordenades humanes

És un model de color que va arribar amb força als anys 2020. La idea clau és una sola: “natural per a l’ull humà.”

Les seves tres coordenades tenen noms similars als de HSL:

• L — Lightness (lluminositat, 0–1)
• C — Chroma (saturació, 0–~0,4)
• H — Hue (to, 0–360°)

Tanmateix, HSL té un problema ocult: tot i que el valor L = 50% sigui el mateix, la lluminositat percebuda varia molt segons el color. Comproveu-ho directament.

En una sola frase — RGB i HSL són coordenades de màquina. OKLCH són coordenades humanes.

L · C · H, el paper de cadascun

Vegem què passa quan es canvia només una coordenada en un mateix color.

On s’utilitza

• Paletes amb lluminositat uniforme — quan es vol que 8 colors de categoria tinguin exactament la mateixa lluminositat
• Conversió automàtica mode fosc/clar — invertint només L s’obté un tema fosc natural
• Accessibilitat — permet predir amb precisió la diferència de lluminositat entre text i fons
• Degradats — flux natural sense aquella franja grisosa al centre

Està inclòs en CSS Color Level 4 i es pot fer servir directament als navegadors moderns.

.btn { background: oklch(67% 0.18 30); }       /* taronja */
.btn:hover { background: oklch(60% 0.18 30); } /* només L baixa 7 → exactament més fosc */

Quan usar cadascun

Per a la majoria del treball digital, RGB/HEX és suficient. HSL és útil en crear paletes, i OKLCH ajuda molt en disseny amb mode fosc/clar.

Com gestionar el color amb fns

Un cop saps que el color és un número, el pas següent és tenir els teus colors favorits a l’abast. fns agrupa en una sola tecla el flux de capturar, guardar i recuperar colors.

Eyedropper per capturar color des de qualsevol punt de la pantalla — ⌘+Shift+K

Eyedropper és una eina que captura amb precisió el color exacte de qualsevol píxel de la pantalla. És com treure el selector de color de Figma/Photoshop i portar-lo a tot el sistema.

Premeu ⌘+Shift+K des de qualsevol lloc i apareix l’Eyedropper de fns. Un píxel de la maqueta de disseny, una zona d’una fotografia, el color de fons d’una altra app — moveu el ratolí i feu clic per capturar-lo amb exactitud.

• Cada clic guarda el color automàticament al portapapers. No cal cap acció addicional de “copiar”.
• Al widget Eyedropper podeu triar en quin format (RGB / HEX / HSL / CMYK / OKLCH) es guardarà al portapapers.
• Mostra també una previsualització visual del color capturat i els colors del sistema més propers.

Eyedropper → guardat automàtic al portapapers → recuperació des del selector de portapapers — el flux no s’interromp. Sense necessitat d’obrir el mesuridor de color digital de Mac per separat, ni de prémer la drecera de copiar cada vegada.

El portapapers reconeix els colors automàticament

L’historial del portapapers de fns detecta automàticament si el text copiat és un codi de color, independentment del format.

En recuperar un color copiat de l’historial, és difícil recordar de quin color era veient només el text. fns mostra una petita mostra de color al costat de cada element perquè el identifiqueu d’una ullada.

Veure només els colors

Amb una sola tecla podeu filtrar l’historial del portapapers per veure únicament els codis de color. En mig d’un treball de disseny, si voleu revisar només els colors recents, no cal buscar entre textos, URLs i codi.

• Des del mateix selector, escriviu el filtre color: → només es mostren els elements de color
• Cerca per nom de color — cerqueu “blue” o “red” i es filtren els colors d’aquella gamma
• Els colors similars s’agrupen i s’ordenen visualment

Convertir un color a un altre format

Podeu convertir el mateix color a una altra notació i recuperar-lo directament. Si heu copiat #FF5733 a Figma i voleu enganxar-lo a CSS com a rgb(...), seleccioneu aquell element al selector de portapapers de fns i amb una drecera es converteix automàticament.

Ja no cal obrir un conversor cada vegada que passeu de Figma (HSB) a CSS (HSL/HEX/OKLCH).

Expansió de text i agrupació

Els colors de marca que useu sovint es registren com a abreviatures de text.

La mateixa abreviatura funciona a qualsevol lloc: el camp de color de CSS, el de Figma, un missatge de Slack, un editor de codi. S’acaba el temps perdut buscant i copiant el color de la guia de marca cada vegada.

Proveu a reduir amb fns el temps que passeu obrint conversors i movent codis de color d’un format a un altre.

Teniu curiositat per saber d’on venen aquests nombres — els fonaments dels tres canals RGB, el binari i la notació HEX? Comenceu per Com genera colors l’ordinador: RGB, HEX i números binaris.