Kleurkiezer

Elke kleur op deze pagina staat in sRGB, de standaardkleurruimte van het web sinds browsers die eind jaren negentig overnamen. Een scherm mengt rood, groen en blauw licht, en elk kanaal heeft 256 niveaus (0–255), wat 16.777.216 mogelijke kleuren geeft. RGB schrijft die drie getallen rechtstreeks op; HEX schrijft dezelfde drie getallen in grondtal 16, elk met twee cijfers, dus #FF6600 is rood 255, groen 102, blauw 0. De korte notatie met drie cijfers verdubbelt elk cijfer: #F60 is #FF6600.

HSL en HSB (ook wel HSV genoemd) beschrijven dezelfde kleuren op een manier die makkelijker met de hand aan te passen is. Tint is een hoek op het kleurenwiel: 0° rood, 120° groen, 240° blauw. Het verschil zit in het laatste getal. Bij HSL is lichtheid 100% altijd wit en 50% de zuiverste versie van de tint; bij HSB is helderheid 100% de zuivere tint en heeft wit een verzadiging van 0% nodig. Ontwerpapps zoals Photoshop en Figma gebruiken HSB in hun kleurkiezers, terwijl CSS hsl() standaard begrijpt. Daarom staan beide hierboven.

Schermen voegen licht toe; printers trekken het af met cyaan, magenta, geel en zwarte inkt. De twee systemen bestrijken verschillende kleurbereiken, gamuts genoemd. Zeer verzadigde schermkleuren, zoals een felgroen in RGB, een elektrisch blauw of een neonoranje, liggen buiten wat procesinkten kunnen weergeven, dus ze drukken saaier af dan ze op een monitor lijken.

De CMYK-getallen hier gebruiken de gewone wiskundige omrekening zonder ICC-profiel. Dat is handig voor een globale briefing, maar niet voor de drukpers. Een drukker rekent om met een profiel voor zijn papier en pers, zoals FOGRA39 in Europa of GRACoL in de Verenigde Staten, en dezelfde RGB-kleur kan onder elk daarvan andere inktpercentages opleveren. Stuur voor drukwerk de RGB- of HEX-waarde mee, samen met het profiel waar uw drukker om vraagt.

WCAG 2.1 vergelijkt de relatieve luminantie van twee kleuren: de lichtere plus 0,05, gedeeld door de donkerdere plus 0,05. Het resultaat loopt van 1:1 (identieke kleuren) tot 21:1 (zwart op wit). Niveau AA vraagt minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst, dat wil zeggen 18 punt of 14 punt vet; niveau AAA verhoogt dat naar 7:1 en 4,5:1. Onderdelen van de gebruikersinterface, zoals randen van invoervelden en pictogrammen, hebben volgens succescriterium 1.4.11 3:1 nodig ten opzichte van hun omgeving.

Luminantie weegt groen veel zwaarder dan blauw, omdat het oog daar het gevoeligst voor is. Daarom faalt gele tekst op wit faliekant, terwijl donkerblauw op wit makkelijk slaagt, ook al lijken beide kleuren volledig verzadigd. Logo's en puur decoratieve tekst zijn van de regel uitgezonderd.

Het afbeeldingspalet leest uw bestand met het canvas van de browser, verkleint het tot maximaal 200 pixels aan de lange zijde en groepeert vergelijkbare pixels met de median-cut-methode die Paul Heckbert in 1982 beschreef: het kleurbereik wordt steeds opnieuw gesplitst langs het breedste kanaal tot er zes groepen overblijven, en het gemiddelde van elke groep wordt een kleurstaal. Transparante pixels worden genegeerd, dus een logo op een transparante achtergrond levert de kleuren van het logo op.

Als u de kleuren hebt, werkt een plat logo vaak beter als vector. De afbeelding-naar-SVG-converter tekent het over in vormen die precies deze kleuren behouden, en als u een kanaalheader ontwerpt, past de YouTube-banner formaat wijzigen het beeld aan op 2560 × 1440 met de veilige zone in gedachten.