De kleurtools van ToolDeck laten je kleurformaten converteren, toegankelijkheidscontrastverhoudingen controleren, paletten genereren, CSS-verlopen bouwen en kleurnamen of Tailwind-klassen opzoeken, rechtstreeks in je browser. De Color Converter verwerkt HEX, RGB, HSL en HSV in beide richtingen. De Contrast Checker test conformiteit met WCAG 2.1 AA en AAA. De Palette Generator maakt complementaire, analoge, triadische en tetradische schema's op basis van elke basiskleur. De CSS Gradient Generator levert direct kopieerbare lineaire en radiale verloopcodes. De Color Name Finder koppelt elke waarde aan de dichtstbijzijnde CSS-kleurnaam, en de Tailwind Color Finder wijst willekeurige kleuren toe aan Tailwind-utility-klassen. Alle tools draaien aan de clientzijde — er worden geen gegevens naar een server verzonden.
Wat zijn kleurtools?
Kleurtools zijn hulpprogramma's die ontwikkelaars en ontwerpers helpen met digitale kleurwaarden. Elke kleur op het scherm wordt opgeslagen als getallen: drie kanalen voor RGB (rood, groen, blauw), een hex-triplet als CSS-afkorting, of een hoekmatige tint plus verzadiging en helderheid voor HSL. Handmatig schakelen tussen deze representaties is traag en foutgevoelig, zeker wanneer je ook rekening moet houden met alfatransparantie of nieuwere modellen zoals OKLCH.
Naast formaatconversie omvat kleurwerk toegankelijkheidstests, het aanmaken van paletten en het ontwerpen van verlopen. WCAG 2.1 definieert minimale contrastverhoudingen (4,5:1 voor normale tekst op AA, 7:1 voor AAA) die moeilijk op het oog te verifiëren zijn. Het genereren van harmonieuze kleurenschema's vereist nauwkeurige hoekberekeningen op het HSL-kleurenwiel. CSS-verlopen hebben correcte syntaxis nodig voor richting, kleurstops en terugvalwaarden. Dit alles handmatig bijhouden in een ontwerpsysteem met tientallen tokens wordt snel omslachtig.
Kleurtools automatiseren deze taken. Ze accepteren een kleur in één formaat, voeren de berekening uit en geven het gewenste resultaat terug — of dat nu een geconverteerde waarde is, een geslaagd of mislukt toegankelijkheidsoordeel, een set harmonieuze stalen of een CSS-codefragment. Wanneer het tool in de browser draait, voorkom je ook dat gevoelige designtokens worden geüpload naar diensten van derden.
Waarom kleurtools gebruiken op ToolDeck?
De kleurtools van ToolDeck draaien volledig in je browser. Er verlaten geen kleurwaarden je machine, er is geen account vereist en elk tool laadt direct zonder extensies of desktopsoftware te installeren.
🎨Formaten in één stap converteren
Plak een HEX-code en ontvang gelijktijdig RGB-, HSL- en HSV-waarden. Geen noodzaak om meerdere converters te koppelen of conversieformules te onthouden.
🔒Designtokens privé houden
Alle verwerking vindt plaats aan de clientzijde. Je merkkleuren, nog niet uitgebrachte paletbeslissingen en interne ontwerpsysteemwaarden blijven op je apparaat.
♿Toegankelijkheid direct testen
Controleer elk voorgrond/achtergrond-paar aan de hand van WCAG 2.1 AA- en AAA-drempels voor zowel normale als grote tekst. Ontvang de exacte contrastverhouding, niet alleen een geslaagd/mislukt-label.
⚡Productie-klare uitvoer kopiëren
Elk tool geeft waarden terug die je rechtstreeks in CSS, Tailwind-configuratie of invoervelden van ontwerpprogramma's kunt plakken. Geen herformattering nodig.
Gebruiksscenario's voor kleurtools
Hier zijn zes veelvoorkomende situaties waarin de kleurtools van ToolDeck tijd besparen.
Onderhoud van ontwerpsystemen
Bij het bijwerken van een ontwerpsysteem ontvang je kleuren vaak in HEX van een ontwerper, maar heb je HSL nodig voor CSS custom properties. De
Color Converter vertaalt tussen formaten zodat je tokenbestanden kunt vullen zonder handmatige berekeningen.
Toegankelijkheidsaudits
Tijdens een WCAG-conformiteitsaudit moet elke tekst/achtergrond-combinatie voldoen aan de minimale contrastverhoudingen. De
Color Contrast Checker toont de exacte verhouding en de AA/AAA-status voor zowel normale als grote tekstgroottes.
Merkpaletverkenning
Vertrekkend vanuit één merkkleur heb je accent- en neutrale varianten nodig. De
Color Palette Generator berekent complementaire, analoge, triadische en tetradische harmonieën zodat je opties kunt evalueren voordat je een palet vastlegt.
CSS-achtergrondstijlen
Het bouwen van een hero-sectie of kaartachtergrond met een verloop vereist correcte CSS-syntaxis voor hoeken, kleurstops en vendor-prefixes. De
CSS Gradient Generator laat je het verloop visueel samenstellen en de code kopiëren.
Tailwind-migratie
Bij het migreren van een project naar Tailwind CSS moet je bestaande HEX- of RGB-waarden toewijzen aan de dichtstbijzijnde Tailwind-utility-klasse. De
Tailwind Color Finder vindt de beste overeenkomst en toont de delta zodat je kunt beoordelen of de benadering acceptabel is.
Code-review en documentatie
Tijdens code-review zegt een kale HEX-waarde zoals #708090 op het eerste gezicht niets. De
Color Name Finder identificeert deze als SlateGray, waardoor reviews en documentatie leesbaarder worden.
CSS-kleurmodellenreferentie
CSS ondersteunt meerdere kleurmodellen. De onderstaande tabel geeft een overzicht van de zes meest gebruikte formaten, hun syntaxis en typische toepassingen. Al deze formaten worden ondersteund door de Color Converter van ToolDeck.
| Model | CSS-syntaxis | Kanalen | Waardebereik | Typisch gebruik |
|---|
| HEX | #rrggbb | Rood, Groen, Blauw | 00–ff per kanaal | Meest gebruikt in CSS, ontwerpen, merkrichtlijnen |
| RGB | rgb(r, g, b) | Rood, Groen, Blauw | 0–255 per kanaal | JavaScript canvas API, berekende stijlen, beeldverwerking |
| HSL | hsl(h, s%, l%) | Tint, Verzadiging, Helderheid | 0–360 / 0–100% / 0–100% | Designtokens, thema-generatie, programmatische toonvarianten |
| HSV | N/A (niet in CSS) | Tint, Verzadiging, Waarde | 0–360 / 0–100% / 0–100% | Kleurkiezers (Photoshop, Figma), hardwarekleurkalibratie |
| OKLCH | oklch(L C H) | Helderheid, Chroma, Tint | 0–1 / 0–0.4 / 0–360 | Perceptueel uniforme paletten (CSS Color Level 4-specificatie) |
| Named | bijv. slategray | Intern toegewezen aan RGB | 148 voorgedefinieerde namen | Prototyping, leesbare code, snelle demonstraties |
CSS Color Level 4 (W3C) definieert ook de functies lab(), lch() en color(). HEX en RGB blijven het breedst ondersteund in browsers en ontwerpprogramma's.
Het juiste kleurtool kiezen
Elk kleurtool lost een ander probleem op. Gebruik de onderstaande gids om het juiste tool voor jouw taak te vinden.
- 1
Als je wilt een kleur converteren tussen HEX-, RGB-, HSL- of HSV-formaten → Color Converter - 2
Als je wilt verifiëren of een tekst/achtergrond-kleurpaar voldoet aan WCAG-toegankelijkheidsnormen → Color Contrast Checker - 3
Als je wilt een set harmonieuze kleuren genereren vanuit één basiskleur → Color Palette Generator - 4
Als je wilt een lineair of radiaal CSS-verloop bouwen en de code ophalen → CSS Gradient Generator - 5
Als je wilt de leesbare CSS-naam vinden die het dichtst bij een gegeven kleurwaarde ligt → Color Name Finder - 6
Als je wilt een willekeurige kleur toewijzen aan de dichtstbijzijnde Tailwind CSS-utility-klasse → Tailwind Color Finder
Alle zes tools accepteren invoer in meerdere formaten. Als je niet zeker weet in welk formaat je kleur is, begin dan met de Color Converter, die HEX-, RGB-, HSL- en HSV-notatie automatisch herkent.
Veelgestelde vragen
Wat is het verschil tussen de kleurformaten HEX en RGB?
HEX en RGB vertegenwoordigen dezelfde kleurruimte. Een HEX-code zoals #ff6600 is een hexadecimale codering van de drie RGB-kanalen: ff = 255 (rood), 66 = 102 (groen), 00 = 0 (blauw). Het enige verschil is de notatie. HEX is compacter in CSS-stylesheets, terwijl RGB makkelijker programmatisch te bewerken is omdat elk kanaal al een decimaal geheel getal is.
Wanneer gebruik ik HSL in plaats van HEX of RGB?
HSL scheidt de tint (de kleur zelf) van verzadiging en helderheid. Hierdoor is het eenvoudiger om toonvarianten te maken: houd de tint vast, verlaag de helderheid voor een donkerdere toon, verhoog hem voor een lichtere tint. Ontwerpsystemen die lichte/donkere thema's genereren vanuit één basiskleur slaan tokens vaak op in HSL om die reden. CSS custom properties combineren ook goed met HSL omdat je afzonderlijke kanalen kunt overschrijven.
Welke contrastverhouding vereist WCAG 2.1 voor tekst?
WCAG 2.1 Level AA vereist een minimale contrastverhouding van 4,5:1 voor normale tekst (kleiner dan 18pt of 14pt vet) en 3:1 voor grote tekst (18pt+ of 14pt+ vet). Level AAA verhoogt die drempels naar respectievelijk 7:1 en 4,5:1. Deze verhoudingen worden berekend op basis van de relatieve luminantie van de voor- en achtergrondkleuren aan de hand van de formule uit WCAG 2.1 Succescriterium 1.4.3.
Hoeveel benoemde kleuren ondersteunt CSS?
CSS definieert 148 benoemde kleuren, overgenomen uit de SVG 1.1- en CSS3-kleurspecificaties. Deze variëren van algemene namen zoals red, blue en white tot specifieke namen zoals MediumSlateBlue, PapayaWhip en LavenderBlush. Benoemde kleuren worden gekoppeld aan vaste RGB-waarden. De CSS Color Level 4-specificatie behoudt dezelfde 148 namen en voegt er geen nieuwe aan toe. Browsers herkennen ook het trefwoord transparent (equivalent aan rgba(0,0,0,0)).
Kan ik OKLCH-kleuren vandaag al gebruiken in CSS?
Ja. De functie oklch() wordt ondersteund in Chrome 111+, Firefox 113+ en Safari 15.4+. OKLCH maakt deel uit van de CSS Color Level 4-specificatie van W3C. Het grootste voordeel ten opzichte van HSL is perceptuele uniformiteit: twee kleuren met dezelfde helderheidswaarde in OKLCH zien er voor het menselijk oog even helder uit, wat bij HSL niet het geval is. Dit maakt OKLCH een betere keuze voor het genereren van toegankelijke paletten met consistente waargenomen helderheid.
Wat is het verschil tussen HSL en HSV?
HSL en HSV gebruiken beide een cilindrische representatie met de tint als hoek, maar ze definiëren helderheid anders. In HSL is een helderheid van 50% de pure kleur; 0% is zwart, 100% is wit. In HSV is een waarde van 100% de pure kleur; 0% is zwart. HSV heeft geen ingebouwde manier om wit te bereiken zonder ook de verzadiging te verminderen. Ontwerpers en kleurkiezers (Photoshop, Figma) gebruiken doorgaans HSV, terwijl CSS van nature HSL gebruikt.
Hoe vind ik de Tailwind-klasse voor een willekeurige HEX-kleur?
Tailwind CSS bevat een vast palet van ongeveer 220 kleurklassen (22 tinten maal 10 schakeringen elk, plus zwart, wit en transparant). Om de dichtstbijzijnde klasse voor een gegeven HEX-waarde te vinden, bereken je de Euclidische afstand in een perceptuele kleurruimte (zoals CIELAB of OKLCH) tussen jouw kleur en elke Tailwind-staal. De Tailwind Color Finder op ToolDeck doet dit automatisch en toont de beste overeenkomst samen met het kleurverschil, zodat je kunt beoordelen of de benadering goed genoeg is.
Is het veilig om vertrouwelijke merkkleuren in een online tool te plakken?
Dat hangt van het tool af. Elk tool dat je invoer naar een server stuurt, stelt die waarden bloot in netwerkverkeer en serverlogboeken. De kleurtools van ToolDeck draaien volledig in je browser via JavaScript aan de clientzijde. Er worden geen HTTP-verzoeken met je kleurgegevens naar een backend gestuurd. Je kunt dit verifiëren door het tabblad Netwerk in je browser te openen terwijl je het tool gebruikt. Voor maximale voorzichtigheid kun je de tools ook offline gebruiken na het eerste laden van de pagina.