Kleurconverter

De converter ondersteunt HEX (3-cijferig, 6-cijferig en 8-cijferig met alfa), RGB en RGBA (comma- of spatiesyntaxis), HSL en HSLA, OKLCH en elke geldige CSS met de naam zoals korenbloemblauw, rebeccapaars of tomaat. De indeling wordt automatisch gedetecteerd terwijl u typt, dus u kunt deze rechtstreeks in het invoerveld plakken zonder eerst een modus te selecteren.

OKLCH is een perceptueel uniforme polaire kleurruimte die wordt gedefinieerd door lichtheid (L), chroma (C) en tint (H). In tegenstelling tot HSL, waar kleuren met identieke lichtheidswaarden er visueel heel verschillend uit kunnen zien wat betreft waargenomen helderheid, gebruikt OKLCH een onderliggend model dat beter aansluit bij hoe het menselijk zicht kleurverschillen waarneemt. Dit maakt het ideaal voor het programmatisch genereren van toegankelijke kleurschalen, consistente knoppaletten en ontwerptokens. CSS ondersteunt oklch() vanaf 2023 in alle moderne browsers, en grote ontwerpsystemen hebben dit vanwege deze precisie overgenomen. U kunt OKLCH-waarden rechtstreeks koppelen aan de CSS Gradient Generator voor perceptueel vloeiende gradiënten.

De contrastverhouding gebruikt de WCAG 2.1-formule: (L1 + 0,05) / (L2 + 0,05), waarbij L1 de relatieve luminantie van de lichtere kleur is en L2 de relatieve luminantie van de donkerdere kleur. De relatieve luminantie wordt berekend op basis van gelineariseerde sRGB-kanaalwaarden, gewogen als 0,2126 R + 0,7152 G + 0,0722 B. De tool vergelijkt uw kleur met puur wit (255, 255, 255) en bijna zwart (15, 23, 42) en geeft de verhouding weer naast het WCAG-cijfer voor zowel normale als grote tekst.

WCAG 2.1 definieert twee conformiteitsniveaus voor tekstcontrast. Niveau AA vereist een verhouding van minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst (18pt+ of 14pt+ vetgedrukt). Niveau AAA vereist 7:1 voor normale tekst en 4,5:1 voor grote tekst. AA is het wettelijke minimum in veel toegankelijkheidsregelgevingen, waaronder EN 301 549 en Sectie 508. AAA wordt aanbevolen voor documenten of interfaces waarbij maximale leesbaarheid van belang is, zoals medische of juridische inhoud.

Het palet converteert uw kleur naar HSL-ruimte en genereert vervolgens vijf tinten door de lichtheid te interpoleren naar 95% (bijna wit) en vijf tinten door te interpoleren naar 5% (bijna zwart), waarbij de tint en verzadiging constant blijven. Het resultaat is een strook met 11 stalen: 5 tinten, uw basiskleur (omlijnd in het palet) en 5 tinten. Als u op een staal klikt, wordt die kleur onmiddellijk in de invoer geladen voor verdere conversie of WCAG-inspectie.

Nee. Alle kleurparsing-, conversiewiskunde- en WCAG-berekeningen worden volledig in uw browser uitgevoerd met behulp van JavaScript. PureTools heeft geen servereindpunt voor deze tool en ontvangt nooit de kleuren die u invoert. De laatste kleur die u hebt getypt, wordt opgeslagen in sessionStorage onder een sleutel met een naamruimte, zodat deze bij vernieuwen blijft bestaan, maar sessionStorage wordt automatisch gewist wanneer u het tabblad sluit, zodat gegevens worden gewist wanneer u het tabblad sluit . Er wordt nooit iets op afstand geüpload of opgeslagen. Uw gegevens worden nooit gebruikt om AI-modellen te trainen of machine learning-systemen te verbeteren.

Ja. Figma kopieert kleuren doorgaans als HEX, HSL of RGB. Browser DevTools kopieert kleuren als hex, rgb() of hsl(). Deze worden allemaal direct geaccepteerd. Als u een oklch()-waarde kopieert uit een CSS-bestand of een ontwerptoken JSON, wordt dat ook ondersteund. De tool detecteert automatisch het formaat van de geplakte tekenreeks, zodat u niets hoeft te selecteren voordat u gaat plakken. U kunt ook de JSON Formatter gebruiken om kleurwaarden uit ontwerptoken-JSON-bestanden te extraheren voordat u ze hier plakt.

Zowel HSL (Tint, Verzadiging, Lichtheid) als HSV (Tint, Verzadiging, Waarde) vertegenwoordigen kleuren met behulp van een tinthoek en twee relatieve assen, maar ze definiëren de derde as anders. Bij HSL geeft een lichtheid van 50% met maximale verzadiging de pure tint. In HSV geeft een waarde van 100% met maximale verzadiging ook de pure tint, maar de waarde ligt conceptueel dichter bij de waargenomen helderheid. HSL geeft intuïtiever weer hoe ontwerpers denken over tinten en schakeringen, terwijl HSV vaak wordt gebruikt in kleurkiezerwielen en beeldbewerkingstoepassingen.

sRGB en OKLCH dekken vergelijkbare maar niet identieke kleurengamma's. Wanneer u sRGB naar OKLCH converteert, zijn de waarden wiskundig exact. Bij terugconversie kan afronding met drijvende komma in de tussenliggende matrixvermenigvuldigingen en de derdemachtswortelstap kanaalwaarden opleveren die 0 of 1 afwijken in het gehele bereik van 0–255, een verschil dat visueel niet waarneembaar is. Als uw invoer een OKLCH-waarde met zeer hoge chroma gebruikt die buiten het sRGB-gamma valt, klemt de tool het uitvoerkanaal vast op de dichtstbijzijnde geldige sRGB-waarde in plaats van ongeldige CSS te produceren.

De kleurkiezer van de eigen browser (input type="color") slaat zijn waarde altijd op als hex. Telkens wanneer u in welk formaat dan ook een geldige kleur in het tekstveld typt, converteert de tool deze naar hexadecimaal en wordt de waarde van de kiezer programmatisch bijgewerkt. Omgekeerd wordt bij het kiezen van een kleur uit het staal de hexadecimale waarde ervan in het tekstveld geschreven. Deze tweerichtingssynchronisatie betekent dat u de visuele kiezer kunt gebruiken voor verkenning en het tekstveld voor precisie, en dat beide altijd dezelfde kleur weergeven.

Ja, binnen dezelfde browsersessie. De tool slaat de laatste geldige invoer op in sessionStorage, zodat deze bij vernieuwen blijft bestaan. Wanneer u het tabblad sluit, wordt sessionStorage automatisch gewist door de browser, zodat de kleur wordt gewist en uw gegevens alleen op uw apparaat blijven staan. De tool gebruikt localStorage niet voor kleurgegevens, alleen de themavoorkeur wordt daar opgeslagen.