Paleta
Barevná paleta hraje klíčovou roli v uživatelském rozhraní. Umožňuje standardizovat používané barvy, podporuje konzistentní vzhled a usnadňuje vývoj.
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 | --deeppuprle-80 |
| Light Blue 40 | --lightblue-80 |
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
Způsobů, jakým lze získat barevnou paletu je mnoho – pocitem, mixováním různého množství bílé nebo černé s danou barvou, využitím některého z dostupných nástrojů nebo využitím již hotové palety z některého z design systémů. Ani jeden přístup však nesplňoval naše požadavky pro přímočaré splnění norem ohledně kontrastu.
Většina z dostupných palet umí znázornit, zda pro konkrétní barvu použitou jako pozadí aplikovat bílý nebo černý text. Nebo zobrazí matici kontrastním poměrů vůči bílé a černé. Málokterá paleta však disponuje návodem, jak zacházet s barevným textem nebo barevným textem na barevném pozadí. Developer nebo designer musí nejprve vybrat barvu a zkontrolovat kontrastní poměr. Chtěli jsme proto systém barev navržený již od samotného začátku s respektem ke kontrastním poměrům W3C tak, aby se s ním pracovalo dobře nám (designerům) i vám (vývojářům).
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ším „tahákem“ je parametr L, tedy světlost. No a? Stařičký formát HSL také obsahuje L, tedy světlost. Prakticky se může zdát totožný, jen napsaný naopak.
- H (hue)
- S (saturation)
- L (lightness)
Jenomže není L jako L. Hlavním problémem HSL je, že používá cylindrický barevný prostor. Každý odstín má stejnou úroveň sytosti (0–100%). Ale ve skutečnosti naše displeje a oči mají různé maximální hodnoty sytosti pro různé odstíny. HSL tuto složitost skrývá deformací barevného prostoru a roztahuje barvy tak, aby měly stejné maximální hodnoty. OKLCH nikoliv.
Generování odstínů barvy
Nyní už k praxi, jak jsme využili přednosti OKLCH v automatizaci barev. Vše začíná „šedesátkou“, která je přímou reprezentaci dané barvy. Navy je skutečně námořnická modrá, Blue je o něco světlejší a Aqua vypadá zase trošku jinak. Fuchsia je velmi dobře rozpoznatelná od Deep Purple.
V prvním kroku tvorby palety je vytvořen odstín 50 – je méně saturovaný a mírně světlejší, jelikož se v reálu jedná o alternativu pro tmavé téma, ve kterém by výrazné barvy příliš razily. Následně jsou z 50 vygenerovány odstíny 10–40, z 60 pak odstíny 70–100.
Každý z těchto odstínů má stejnou hodnotu lightness a chroma , čímž jsme schopni dosáhnout stejného vnímání napříč všemi barvami. V praxi to znamená, že barva Red 30 bude vnímána naprosto stejně jako Blue 30, Orange 30 nebo kterákoliv jiná „třicítka“. Drobnou odchylku jsme pak museli učinit u Silver a Black, protože jak jinak se pohybovat v padesáti odstínech Gray .