Kleurgereedschap - Kiezer, converter, paletten, contrast en kleurenzicht | POLPROG Naar de inhoud

Kleurgereedschap

Kiezer, converter, paletten, contrast en kleurenzicht

Zeven kleurklussen, één gedeelde balk, elk getal hier berekend

Webtool Web
Officiële productpagina Publisher: POLPROG
Officiële productpagina
7
Panelen
7
Harmonieën
11
Schaalstappen
0
Geüploade bytes
01Kleurgereedschap

Over

Zeven panelen boven één gedeelde kleur: kiezen en omrekenen, contrast controleren, een palet bouwen, een schaal bouwen, een verloop bouwen, een palet uit een afbeelding halen, en het geheel door drie vormen van kleurenzicht bekijken. Verander de kleur in één paneel en elk ander paneel heeft het er al over.

De omrekeningen volgen CSS Color Level 4, inclusief de echte stuksgewijze sRGB-overdrachtscurve in plaats van een gamma van 2,2, de Bradford-adaptatie tussen D65 en D50 voor Lab, en het terugbrengen naar het gamut door de chroma in OKLCH te verlagen. Daarom kloppen deze getallen met wat de browser tekent in plaats van er een procent of twee naast te zitten.

Wat het contrastpaneel wel en niet zegt

Het geeft de WCAG 2.2-verhouding en de eisen waaraan het paar voldoet. Het zegt niet dat je pagina toegankelijk is, want contrast is één succescriterium van vele - focusvolgorde, labels, toetsenbordpaden, beweging en structuur zijn evenzoveel andere - en een pagina met perfect contrast kan nog steeds onbruikbaar zijn.

APCA staat achter een uitklap en is gelabeld als conceptinformatie voor WCAG 3. Het modelleert hoe contrast bij een gegeven grootte en gewicht leest, wat WCAG 2 niet doet - maar er wordt vandaag niets aan afgemeten, en het als gelijke tonen zou beide verkeerd voorstellen.

Het paneel voor kleurenzicht

De projectie van Vienot, Brettel en Mollon, toegepast in lineair licht. Ze beantwoordt de vraag die het waard is te stellen - zijn deze twee nog te onderscheiden? - in plaats van te doen alsof ze fotografeert wat een bepaald persoon ziet. Het is een model van één vorm van de aandoening, en het paneel zegt dat ook.

02Toepassing

Wat het oplost

Het probleem
  • Kleurconverters spreken elkaar tegen, omdat de meeste de sRGB-overdrachtscurve benaderen met een gamma van 2,2
  • Een kleurtoon draaien in HSL geeft drie kleuren die geen set vormen - eentje komt zichtbaar donkerder uit
  • Een contrasttool zegt dat een paar slaagt op 4,50:1, en de waarde die je plakt meet 4,49:1 zodra hij op acht bits is afgerond
Het resultaat
  • De omrekeningen volgen CSS Color Level 4, inclusief de echte stuksgewijze sRGB-curve, dus de getallen kloppen met de browser
  • Harmonieën en schalen worden in OKLCH gebouwd, waar gelijke stappen in lichtheid ook gelijk ogen
  • Elke contrastsuggestie wordt na afronding op acht bits opnieuw gemeten, dus de waarde die je kopieert slaagt echt
Voor wie
  • Ontwerpers en ontwikkelaars van wie de kleuren een contrastaudit moeten doorstaan
  • Iedereen die een design system bouwt en een tintenreeks nodig heeft die gelijkmatig leest
  • Teams die nagaan of twee toestanden van een besturingselement onderscheidbaar blijven voor kleurenblinde gebruikers
03Belangrijkste functies

Belangrijkste functies

De belangrijkste mogelijkheden praktisch uitgelegd.

Elke notatie die CSS accepteert

HEX, RGB, HSL, HWB, OKLCH, OKLab, Lab, LCH, Display P3 en de 148 benoemde kleuren, elk met een kopieerknop. Waarden buiten het gamut worden gemarkeerd en teruggebracht door de chroma in OKLCH te verlagen, zoals de specificatie voorschrijft.

WCAG 2.2-contrast, zorgvuldig gezegd

De verhouding, en aan welke van de eisen normaal AA, groot AA, interface AA, normaal AAA en groot AAA het paar voldoet. Halfdoorzichtige kleuren worden eerst over de paginakleur samengesteld, precies zoals een browser ze tekent - een fout die de meeste controleurs maken.

Een suggestie die echt slaagt

Haalt een paar het doel niet, dan wordt de dichtstbijzijnde tint van dezelfde kleur gezocht op lichtheid en chroma in OKLCH - en elke kandidaat wordt na afronding op acht bits opnieuw gemeten, want een zoektocht in een continue ruimte kan een kleur opleveren die als hex alsnog zakt.

Paletten en schalen in OKLCH

Zeven harmonieën en een tintenreeks van elf stappen van 50 tot 950, gebouwd door de kleurtoon te draaien en de lichtheid te trappen in een perceptuele ruimte. Export als CSS custom properties, SCSS-variabelen, JSON of een gewone lijst.

Verlopen zonder grijze band

Lineaire, radiale en conische verlopen met versleepbare stops, geïnterpoleerd in OKLCH zodat blauw naar geel niet door de modder gaat. De gewone sRGB-vorm komt ernaast, zodat oudere browsers alsnog een verloop tekenen.

Palet uit een afbeelding

Median cut gevolgd door Lloyd-verfijning, uitgevoerd op pixels die in dit tabblad zijn gedecodeerd. De bemonsteringsstap wordt weg van kleine priemgetallen gedwongen zodat een gestreepte afbeelding of een tabel niet terugvalt op twee kleuren - een echt gebrek, hier verholpen.

Simulatie van kleurenzicht

De projectie van Vienot, Brettel en Mollon toegepast in lineair licht, voor protanopie, deuteranopie en tritanopie. Ze meldt of een PAAR onderscheidbaar blijft, de vraag die telt, en zegt duidelijk dat ze één vorm van de aandoening modelleert en niet de ogen van een bepaald persoon.

APCA, gelabeld als concept

Het perceptuele contrastmodel dat voor WCAG 3 is opgesteld staat achter een uitklap en wordt beschreven als wat het is: conceptinformatie, niet datgene waaraan vandaag iets wordt afgemeten. Het als gelijke naast de WCAG-oordelen tonen zou beide verkeerd voorstellen.

04Download

Toegang tot het product

Een duidelijk pad van de officiële bron naar je eerste geslaagde workflow.

Kies het juiste platform

Gebruik een van de officiële links voor je apparaat of browser.

Installeer of open

Volg de instructies van de store of open de webapplicatie. Geen installatieprogramma's van derden.

Configureer en begin

Bekijk de opties, kies je voorkeuren en begin met de belangrijkste workflow.

Officiële toegangsopties
05Technologie

Technologie achter het product

Een transparant overzicht van de kerntechnologieën waarmee dit product wordt gebouwd en onderhouden.

JavaScript
06Beveiliging

Privacy & beveiliging

Je gegevens blijven op je apparaat. Altijd.

Er wordt niets geüpload
Afbeeldingen in het tabblad gedecodeerd
Nooit een account
Geen analyse van je kleuren