Színválasztó

Az oldalon minden szín sRGB-ben értendő, ami a web alapértelmezett színtere, mióta a böngészők az 1990-es évek végén átvették. A képernyő vörös, zöld és kék fényt kever, és minden csatorna 256 szintet (0–255) különböztet meg, ami 16 777 216 lehetséges színt jelent. Az RGB közvetlenül e három számot írja; a HEX ugyanezt a három számot 16-os számrendszerben, csatornánként két számjeggyel, így a #FF6600 vörös 255, zöld 102, kék 0. A háromjegyű rövidítés minden számjegyet megkettőz: a #F60 megegyezik a #FF6600 színnel.

A HSL és a HSB (más néven HSV) ugyanazokat a színeket írja le, de kézzel könnyebben módosíthatók. A színezet egy szög a színkörön: 0° vörös, 120° zöld, 240° kék. A különbség az utolsó számban van. HSL-ben a 100%-os világosság mindig fehér, az 50% pedig a színezet legtisztább változata; HSB-ben a 100%-os fényerő a tiszta színezet, a fehérhez pedig 0%-os telítettség kell. A tervezőprogramok, például a Photoshop és a Figma a színválasztóikban HSB-t használnak, a CSS viszont natívan a hsl() függvényt ismeri, ezért szerepel fent mindkettő.

A képernyő fényt ad hozzá, a nyomtató ciánnal, bíborral, sárgával és fekete tintával von el belőle. A két rendszer más-más színtartományt, úgynevezett gamutot fed le. A nagyon telített képernyőszínek, például egy élénk RGB-zöld, egy elektromos kék vagy egy neonnarancs, kívül esnek azon, amit a process tinták vissza tudnak adni, ezért nyomtatásban fakóbbak, mint a monitoron.

Az itt látható CMYK-értékek ICC-profil nélküli, egyszerű matematikai átváltással készülnek, ami nagyjából elég egy tájékoztató brieffez, nyomdai munkához viszont nem. A nyomda a papírjához és a gépéhez tartozó profillal alakít át, például Európában FOGRA39-cel, az Egyesült Államokban GRACoL-lal, és ugyanabból az RGB színből mindegyikkel más tintaszázalék lehet. Nyomtatáshoz az RGB- vagy HEX-értéket küldje el a nyomda által kért profillal együtt.

A WCAG 2.1 két szín relatív luminanciáját hasonlítja össze: a világosabb plusz 0,05 osztva a sötétebb plusz 0,05 értékével. Az eredmény 1:1 (azonos színek) és 21:1 (fekete fehéren) között van. Az AA szint normál szövegnél legalább 4,5:1, nagy szövegnél 3:1 arányt kér, nagynak a 18 pontos vagy a 14 pontos félkövér szöveg számít; az AAA szint ezt 7:1-re és 4,5:1-re emeli. A felhasználói felület elemeinek, például a beviteli mezők kereteinek és az ikonoknak az 1.4.11 sikerkritérium szerint 3:1 arány kell a környezetükhöz képest.

A luminancia a zöldet sokkal nagyobb súllyal veszi figyelembe, mint a kéket, mert a szem arra a legérzékenyebb. Ezért bukik meg látványosan a sárga szöveg fehér alapon, míg a sötétkék fehéren könnyen megfelel, pedig mindkét szín teljesen telítettnek látszik. A logók és a tisztán dekoratív szövegek mentesek a szabály alól.

A képpaletta a böngésző vásznával (canvas) olvassa be a fájlt, a hosszabbik oldalon legfeljebb 200 pixelre kicsinyíti, és a hasonló pixeleket Paul Heckbert 1982-ben leírt median-cut módszerével csoportosítja: a színtartományt újra és újra kettéosztja a legszélesebb csatorna mentén, amíg hat csoport marad, és minden csoport átlaga egy színminta lesz. Az átlátszó pixeleket figyelmen kívül hagyja, így az átlátszó hátterű logóból a logó színeit kapja.

Ha megvannak a színek, az egyszínű felületekből álló logó gyakran vektorként működik jobban. A kép SVG-be átalakító olyan alakzatokká követi le, amelyek megtartják pontosan ezeket a színeket, a csatornafejléc tervezésekor pedig a YouTube-borító átméretezője a biztonságos területet figyelembe véve igazítja a grafikát 2560 × 1440 méretre.