Een schema is hier een vaste rotatie van de basistint: 180 graden voor complementair, 120 en 240 voor een triade, 150 en 210 voor een gesplitst complement, met de rotaties van het huidige schema genoemd in de statusbalk. Op welk wiel je draait bepaalt het antwoord, en dit is niet het wiel dat op de kunstacademie wordt geleerd.

Waar de schema's van het kleurenwiel vandaan komen

Complementair, analoog, triadisch en de rest zijn posities op een kleurenwiel, en het wiel dat de meeste ontwerpers voor zich zien is dat van rood, geel en blauw dat Moses Harris in 1766 drukte en Johannes Itten aan het Bauhaus onderwees. Het is een pigmentmodel: het beschrijft wat er gebeurt als je verf mengt, en het complement van rood is er groen omdat rode en groene verf modder maken.

Een scherm is geen verf. Het mengt licht, dus de tint 180 graden van rood is cyaan, niet groen. Deze tool draait op het perceptuele wiel dat een scherm werkelijk heeft, en dat betekent dat een complementair paar hier soms niet het paar is dat een handboek over schilderen noemt. Dat is het juiste antwoord voor een scherm, en het is goed om te weten voordat je op zoek gaat naar het groen dat je verwachtte.

De rotatie gebeurt in OKLCH, niet in HSL

Tint draaien in HSL levert een schema op met één lid dat veel donkerder leest dan de rest, en geen enkele bijstelling repareert dat, want het probleem is de ruimte. De L van HSL is het rekenkundige midden van het grootste en het kleinste RGB-kanaal, geen lichtheid die iemand waarneemt. Vergelijk hsl(60 100% 50%) en hsl(240 100% 50%): HSL noemt allebei 50% lichtheid, en hun relatieve luminantie volgens WCAG is 0,9278 en 0,0722, een contrastverhouding van 8:1 tussen twee kleuren waarvan de ruimte beweert dat ze even licht zijn. Een triade van 120 graden die op allebei landt is geen triade, het is één heldere kleur en één gat.

OKLCH is gebouwd op OKLab, de perceptuele kleurruimte die Björn Ottosson in 2020 op experimentele data afstemde. Zijn L volgt wat mensen echt zien: hetzelfde geel meet 0,968 en hetzelfde blauw meet 0,452, en dat is ruwweg het verschil dat je oog meldt. Houd L en C vast, draai H, en elk lid van het schema komt terug op hetzelfde visuele gewicht. Dat is de hele technische claim van deze pagina, en hij is te controleren: zet een triade uit deze tool naast een triade uit een HSL-generator en knijp je ogen half dicht.

Er zit een addertje onder het gras, en dat is waarom een gegenereerde kleur soms licht afwijkt van het rekenwerk. Het sRGB-gamut is geen cilinder. De maximale chroma die een tint kan halen verschilt rond het wiel met meer dan een factor twee en verandert met de lichtheid, dus een rotatie die L en C vasthoudt loopt bij sommige tinten buiten sRGB. Elk lid hier wordt naar het gamut teruggebracht zoals CSS Color 4 beschrijft: lichtheid en tint blijven staan, en chroma wordt met bisectie omlaag gebracht tot de kleur past. Het naïeve alternatief, elk RGB-kanaal afkappen op 0 en 1, verschuift de kanalen verschillend en daarmee ook de tint, en zo wordt een fel oranje stilletjes een doffer rood. De statusbalk telt hoeveel leden het nodig hadden.

Een palet is pas bruikbaar als je weet welke tekstkleur slaagt

Elk staal draagt een badge die de inkt noemt die er WCAG 2.1 AA op haalt, bij 4,5:1 voor gewone tekst, plus de verhouding waarmee hij dat haalt. Zwart of wit slaagt altijd: de slechtst denkbare kleur ligt op gelijke afstand van beide uiteinden van het luminantiebereik, op 4,58:1. De badge zegt dus niet of het slaagt of zakt, maar aan welke van de twee je vastzit.

Het nuttige eraan is dat de contrastverhouding symmetrisch is. De formule zet de lichtste kleur bovenaan, in welke volgorde je het paar ook aanreikt, dus "witte tekst is leesbaar op dit staal" en "dit staal is leesbaar als tekst op wit" zijn dezelfde uitspraak met hetzelfde getal. Een staal waarvan de badge zwart zegt, is dus ook een staal die je niet voor lopende tekst op een lichte pagina kunt gebruiken. Dat ene feit bepaalt het meeste van waar een palet voor te gebruiken is, en daarom staan de badges op de stalen en niet weggestopt in een export.

Veelvoorkomende problemen

Elk staal lijkt dezelfde kleur. Je basis heeft vrijwel geen chroma. Een monochroom schema op een bijna-grijs is vijf grijzen, en een rotatie van een grijs is nog steeds dat grijs, want er is geen tint om te draaien. Zet de chroma van de basis hoger, of gebruik de picker en beweeg weg van het midden.
De lichte leden van een monochrome schaal kruipen op elkaar. Een basis die al bijna wit is heeft er geen ruimte boven, dus de tinten drukken naar elkaar toe. Er is geen lichtere versie van wit. Begin bij een middentoon en laat de schaal beide kanten op reiken.
Niets in het palet werkt voor tekst. Een schema houdt de lichtheid met opzet ongeveer gelijk, dus vijf leden op één lichtheid geven je vijf achtergronden en geen voorgrond. Neem één kleur mee naar de generator voor tinten en schakeringen en bouw daar de schaal die je nodig hebt.
Het Tailwind-blok doet niets.@theme is Tailwind v4-syntaxis en het blok gaat direct onder je regel @import "tailwindcss";. Een v3-project negeert het hele blok en wil de kleuren in plaats daarvan in theme.extend.colors in tailwind.config.js. Kijk op welke hoofdversie je project draait voordat je aanneemt dat het plakken mislukte.
De geëxporteerde kleur komt niet overeen met wat je koos. Is het staal naar het gamut teruggebracht, dan is de getoonde hex die teruggebrachte kleur en niet die waar de rotatie om vroeg. De hex is altijd de waarheid: dat is wat een browser tekent.

Veelgestelde vragen

Hoeveel kleuren hoort een palet te hebben?

Minder dan deze tool je geeft. Vijf is een werkset, geen afgemaakte set. De meeste interfaces leveren één accent dat acties en links draagt, één ondersteunende kleur voor de identiteit, en een neutrale grijsschaal die de rest van het werk doet, met het semantische rood, amber en groen bewust apart van dat alles zodat een status nooit als merk leest. Behandel de vijf hier als kandidaten en reken erop dat je er twee weggooit.

Waarom is het complement van rood cyaan en niet groen?

Omdat dit draait op een perceptueel wiel dat afgeleid is van hoe licht mengt, en 180 graden van rood op dat wiel is cyaan. Groen is het complement van rood op het pigmentwiel van rood, geel en blauw dat op de kunstacademie wordt geleerd, en dat modelleert verf mengen. Geen van beide is fout. Wil je juist de combinatie van de schilder, kies het groen dan met de hand en zet het op slot.

Wat houdt het slot precies vast?

De kleur, niet de regel van het vakje. Een staal op slot bewaart zijn eigen hex en houdt die door elke nieuwe generatie en elke wisseling van basis heen, terwijl vakjes zonder slot vanuit het schema rond een verse willekeurige basis opnieuw worden gebouwd. Van schema wisselen laat de sloten staan, dus je kunt een merkkleur in vakje één vasthouden en er alle zes de schema's omheen doorlopen. De vergrendelde hexwaarden staan ook in de URL.

Is de Tailwind-export in OKLCH met opzet?

Ja. Het eigen standaardpalet van Tailwind wordt sinds v4 als oklch() geleverd, elke huidige browser ondersteunt de notatie, en elke waarde hier valt al binnen sRGB, dus hij benoemt precies dezelfde pixel als de hex. De reden om hem te verkiezen is het bewerken: het eerste getal in oklch(0.65 0.14 45) aanpassen maakt de kleur lichter en doet verder niets, terwijl een byte in een hexwaarde aanpassen lichtheid, chroma en tint tegelijk verandert. De exports naar CSS, SCSS en JSON dragen hex als je dat liever plakt, en de SVG is een plat vel met stalen om in Figma of een README te zetten.

Verlaat hier iets mijn browser?

Nee. De omrekeningen, de gamut-omzetting, de contrastverhoudingen en elke export worden in de pagina berekend. Er is geen verzoek, geen account en geen upload. Het enige dat vertrekt is de URL, als je die deelt, en daar staat niets in behalve een basiskleur, een schemanaam en de hexwaarden die je op slot zette.

Wat kan deze tool niet?

Het genereert harmonieuze kleurrelaties. Het kent je merk niet, niet de conventies van je branche, en niet welke kleuren je concurrenten al bezitten, en juist die drie beperkingen bepalen meestal meer dan harmonie. Financiële dienstverlening en zorg komen om redenen die geen wiel vastlegt allebei bij blauw uit; een waarschuwing die niet ergens in de buurt van rood zit wordt verkeerd gelezen, wat het schema ook zegt. Gebruik dit om snel relaties te vinden, en toets het resultaat daarna tegen de dingen die het niet kan zien.