Paleta

Paleta sjednocuje barvy v celé aplikaci a zrychluje práci designu i vývoje.

Ke každé barvě náleží deset odstínů:

10 – 40 pro světlá pozadí
70 – 100 pro tmavá pozadí
50 a 60 jako základ pro tmavé a světlé téma

Názvy CSS proměnných ve tvaru --[color]-[10-100] korespondují s názvy odstínů, například:

Barva	Proměnná
Red 10	`--red-10`
Deep Purple 80	`--deeppurple-80`
Light Blue 40	`--lightblue-40`

Prozkoumej celou paletu Vyzkoušejte si různé barevné kombinace v našem nástroji.

Jak s paletou pracovat

Paleta ve Spectru slouží primárně jako referenční vrstva tokenů, ze které se odvozují sémantické tokeny pro povrchy a texty. V běžném UI by proto neměly být používány přímé odkazy na --[color]-[10-100].

10–40: referenční světlé odstíny
50–60: referenční střed pro generování
70–100: referenční tmavé odstíny

Návaznost na `flag`

Názvy barev jsme sjednotili s názvy hodnot datového atributu flag, který je využíván pro barevné odlišení komponent nebo řádků seznamu. Chybějící flagy byly do palety doplněny jako zcela nové barvy.

OKLCH, nový formát barev pro CSS

Paletu lze vytvářet různě, ale většina přístupů není dost spolehlivá pro konzistentní kontrast.

Běžné palety většinou řeší jen volbu černého nebo bílého textu na pozadí. My jsme potřebovali systém, který dobře funguje i pro barevný text a barevné plochy bez ručního dopočítávání.

Doposud jsme mohli definovat barvy v sRGB barevném prostoru (16,7 mld. barev) ve formátech RGB, HSL nebo v hexadecimálním zápisu. Nicméně dnešní displeje jsou schopny zobrazit barev více. Na přelomu let 2022 a 2023 začaly všechny hlavní prohlížeče podporovat nové formáty LAB, LCH, OKLAB, a OKLCH využívající barevný prostor Display P3, který disponuje 26% více barvami.

Z nových formátů nás ihned zaujal OKLCH, který je vylepšenou verzí LCH.

L (lightness): světlost
C (chroma): sytost, saturace
H (hue): hodnota na kolu barev (0–360)

Největší výhoda je parametr L (světlost). Podobný parametr má i HSL, ale chová se jinak.

H (hue)
S (saturation)
L (lightness)

HSL pracuje s barvami méně perceptuálně přesně. U různých odstínů proto stejné číslo neznamená stejné vnímání. OKLCH je v tomto stabilnější.

Generování odstínů barvy

V praxi vše začíná odstínem 60, který reprezentuje základní barvu.

Pak vznikne odstín 50 (méně saturovaný, vhodný hlavně pro tmavé téma). Z 50 se generují odstíny 10–40, z 60 odstíny 70–100.

Odstíny mají napříč barvami stejné hodnoty lightness a chroma, takže působí podobně. Výjimkou jsou Silver a Black, kde je nutné jemné doladění.

TODO: Doplnit tabulku “nejčastější chyby při výběru odstínu” (příliš slabý kontrast, záměna status a brand barev).