Kleurtools

Kiezer: het grote vierkant is een verzadigings-/helderheidskaart bij de huidige tint — van links naar rechts neemt de verzadiging toe, van boven naar beneden neemt de helderheid af. Klik ergens om een kleur te kiezen. De dunne verticale balk rechts is de tintschuifregelaar (0° tot 360°) — schuif om de basistint te wijzigen en het vierkant wordt dienovereenkomstig opnieuw getekend. Rechts staat de gekozen kleur in de formaten HEX, RGB en HSL — klik op een waarde om die te kopiëren.

Palet: de linker kleurkiezer en het rechter bewerkingsvak bevatten dezelfde basiskleur — ze zijn tweerichtingsgesynchroniseerd (kies een kleur of typ een hex-waarde, beide werken elkaar bij). De vijf palet-rijen hieronder zijn allemaal afgeleid van deze basiskleur door de tint rond het kleurenwiel te draaien: Complementair (tint +180°, sterkste contrast), Triadisch (+120° / +240°, evenwichtige triade), Tetradisch (+90° / +180° / +270°, rechthoekig viertal), Analoog (-30° / basis / +30° / +60°, harmonieuze buren) en Gesplitst complementair (+150° / +210°, zachter dan puur complementair). Het eerste staal in elke rij is altijd de basiskleur zelf, en de rest zijn de tintgedraaide varianten.

Converteren: voer een geldige kleur in — HEX (#3b82f6), CSS-functie (rgb(59,130,246) / hsl(217,90%,60%)) of benoemde kleur (dodgerblue) — en krijg direct de omzetting naar alle belangrijke formaten. Het formaatmenu geeft de parser optioneel een hint als automatische detectie het verkeerde formaat kiest. De uitvoer toont HEX, RGB (0-255), HSL (graden, %, %), HSV en CMYK. Klik op een waarde om die te kopiëren.

Blindheid: upload een afbeelding en kies een type kleurenzichtafwijking om te simuleren. De tool past een kegel-responsmatrixtransformatie toe op elke pixel en herschikt de RGB-waarden om te benaderen hoe mensen met verschillende vormen van kleurenblindheid het beeld zien. Het linkercanvas toont het origineel, het rechter de gesimuleerde weergave. Het keuzemenu dekt drie dichromatietypen (één kegelpigment ontbreekt: protanopie, deuteranopie, tritanopie), volledige achromatopsie (geen kleurzicht) en drie anomale trichromatietypen (zwakke kegelrespons). Afbeeldingen met lagere resolutie laden sneller.

Verloop: dit is een visuele CSS-verloopbouwer. Kies lineair (richtingsgebonden) of radiaal (van het midden naar buiten), stel de hoek in (0° = onder naar boven, 90° = links naar rechts) en definieer kleurstops. Elke stop heeft een kleurkiezer en is gelijkmatig verdeeld (0%, 50%, 100% voor drie stops). Klik op + Stop om tussenliggende kleurpunten toe te voegen voor complexere verlopen. Het voorbeeld werkt live bij en de gegenereerde CSS is hieronder klaar om te kopiëren.

Contrast: berekent de WCAG 2.1-contrastverhouding tussen voorgrondtekst en achtergrondkleur met de formule voor relatieve luminantie op basis van sRGB-waarden (gamma-gecorrigeerd). De verhouding loopt van 1:1 (identieke kleuren) tot 21:1 (zwart tegen wit). De resultaten tonen slagen/zakken bij drie nalevingsniveaus: AA normale tekst (verhouding ≥ 4,5:1), AAA grote tekst (verhouding ≥ 4,5:1 voor tekst ≥ 18 pt of vet ≥ 14 pt) en AAA normale tekst (verhouding ≥ 7:1). De voorbeeldtekst past zich in realtime aan wanneer u kleuren wijzigt.

Extraheren: upload een willekeurige afbeelding en de tool bepaalt het dominante kleurenpalet met kleurkwantisering. De afbeelding wordt verkleind tot 100×100 px, daarna wordt elke pixel ingedeeld in een histogram van 4 bits per kanaal (16 niveaus per R/G/B = 4096 bakken). Transparante pixels worden overgeslagen. De meest voorkomende bakken worden op pixelaantal gesorteerd en de middelkleur van elke bak wordt een staal. Elk staal toont zijn HEX-waarde en het percentage afbeeldingspixels dat het vertegenwoordigt. Pas de schuifregelaar voor het aantal (2-12) aan om te bepalen hoeveel dominante kleuren worden geëxtraheerd.

Mixer: mengt twee kleuren in de RGB-kleurruimte door lineaire interpolatie. De verhoudingsschuifregelaar bepaalt de mix: 0% is zuiver Kleur 1, 100% is zuiver Kleur 2 en 50% is een gelijke mix. Elk R-, G- en B-kanaal wordt onafhankelijk geïnterpoleerd (bijv. rood + blauw op 50% geeft paars). Het resultaatvoorbeeld en de HEX-/RGB-waarden werken live bij wanneer u de schuifregelaar sleept of een van beide kleuren wijzigt.

Temp: zet de kleurtemperatuur van een zwarte straler in kelvin om naar de bijbehorende zichtbare kleur, met het benaderingsalgoritme van Tanner Helland. Lagere temperaturen (1000-3000 K) geven warme oranje/rode tinten zoals kaarslicht en gloeilampen; het middengebied (4000-6500 K) levert neutraal wit tot daglicht op; hogere temperaturen (8000-40000 K) verschuiven naar koel blauw zoals een bewolkte hemel en diep water. Het label hieronder noemt voor elke temperatuur de dichtstbijzijnde lichtbron uit de praktijk.

Benoemd: blader door een gecombineerde verzameling van 80 traditionele Chinese kleuren (胭脂, 朱砂, 黛蓝, enz. — namen uit klassieke Chinese literatuur, schilderkunst en verftradities) en 140+ benoemde CSS-kleuren (het standaard webpalet). Gebruik het zoekvak om op naam of HEX-waarde te filteren, of wissel tussen categorieën met het keuzemenu. Klik op een kleurchip voor een groot voorbeeld met de naam en HEX-code — klik op de code om die te kopiëren.