Fargevelger

Alle fargene på denne siden ligger i sRGB, som har vært standard fargerom på nettet siden nettleserne tok det i bruk på slutten av 1990-tallet. En skjerm blander rødt, grønt og blått lys, og hver kanal har 256 nivåer (0–255), noe som gir 16 777 216 mulige farger. RGB skriver disse tre tallene direkte, mens HEX skriver de samme tre tallene i 16-tallsystemet, med to sifre hver, slik at #FF6600 er rød 255, grønn 102 og blå 0. Den korte skrivemåten med tre sifre dobler hvert siffer: #F60 er det samme som #FF6600.

HSL og HSB (også kalt HSV) beskriver de samme fargene på en måte som er enklere å justere for hånd. Fargetone er en vinkel på fargesirkelen: 0° er rødt, 120° grønt og 240° blått. Forskjellen ligger i det siste tallet. I HSL er lysstyrke 100 % alltid hvitt, og 50 % er den reneste versjonen av fargetonen. I HSB er lysstyrke 100 % den rene fargetonen, og hvitt krever metning 0 %. Designprogrammer som Photoshop og Figma bruker HSB i fargevelgerne sine, mens CSS forstår hsl() direkte, og derfor er begge oppført ovenfor.

Skjermer legger til lys, mens skrivere trekker det fra med cyan, magenta, gul og svart blekk. De to systemene dekker ulike fargeomfang, såkalte gamuter. Svært mettede skjermfarger, som en skarp RGB-grønn, en elektrisk blå eller en neonoransje, ligger utenfor det prosessfargene kan gjengi, og de blir derfor matte i trykk sammenlignet med hvordan de ser ut på en skjerm.

CMYK-tallene her bruker den enkle matematiske omregningen uten ICC-profil. Det er nyttig for en grov brief, men ikke for trykk. Et trykkeri konverterer med en profil for papiret og trykkpressen sin, for eksempel FOGRA39 i Europa eller GRACoL i USA, og den samme RGB-fargen kan gi ulike blekkprosenter med hver av dem. Til trykkarbeid bør du sende RGB- eller HEX-verdien sammen med profilen trykkeriet ber om.

WCAG 2.1 sammenligner den relative luminansen til to farger: den lyseste pluss 0,05, delt på den mørkeste pluss 0,05. Resultatet går fra 1:1 (identiske farger) til 21:1 (svart på hvitt). Nivå AA krever minst 4,5:1 for vanlig tekst og 3:1 for stor tekst, det vil si 18 punkt eller 14 punkt fet; nivå AAA hever dette til 7:1 og 4,5:1. Deler av brukergrensesnittet, som kanter på inndatafelt og ikoner, trenger 3:1 mot omgivelsene etter suksesskriterium 1.4.11.

Luminans vekter grønt langt tyngre enn blått, fordi øyet er mest følsomt for det. Derfor feiler gul tekst på hvitt grovt, mens mørkeblått på hvitt består lett, selv om begge fargene ser helt mettede ut. Logoer og rent dekorativ tekst er unntatt fra regelen.

Bildepaletten leser filen din med nettleserens canvas, forminsker den til maks 200 piksler på lengste side og grupperer like piksler med median-cut-metoden beskrevet av Paul Heckbert i 1982: fargeområdet deles igjen og igjen langs den bredeste kanalen til seks grupper gjenstår, og gjennomsnittet av hver gruppe blir en fargeprøve. Gjennomsiktige piksler ignoreres, så en logo på gjennomsiktig bakgrunn gir logoens farger.

Når du har fargene, fungerer en flat logo ofte bedre som vektorgrafikk. Bilde til SVG-konverteren tegner den om til former som beholder akkurat disse fargene, og hvis du lager en kanalbanner, tilpasser YouTube-banner-verktøyet bildet til 2560 × 1440 med tanke på sikker sone.