Color Format Converter vertaalt elke kleur tussen HEX, RGB, HSL, HSV en OKLCH. Kies een kleur met de native picker, typ een hex-waarde, plak een CSS-kleurentekenreeks of pas RGB-sliders aan — elk formaat wordt live bijgewerkt en elk heeft zijn eigen Copy-knop.
Modern CSS geeft u een dozijn manieren om dezelfde kleur te schrijven: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), plus alphavarianten van elk. U moet ze vaak converteren — een Figma-ontwerp geeft u een OKLCH, uw codebase gebruikt HEX en uw themavariabelen geven de voorkeur aan HSL voor hover-aanpassingen. Color Format Converter voert alle conversies in één paneel uit. Kies een kleur uit de native color picker, plak een bestaande kleur in een willekeurige syntaxis of sleep RGB-sliders om er één in te voeren. Elk algemeen formaat wordt tegelijkertijd weergegeven: HEX (met alfa), rgb()/rgba(), hsl()/hsla(), hsv() en oklch() — plus een CSS-variabelcodeert en de berekende luminantiewaarde voor snel contrastmatematisch. Het alfakanaal wordt van begin tot eind ondersteund. Elk formaat heeft zijn eigen Copy-knop voor eenmalig gebruik, en de parser accepteert native kleurnamen en alles wat CSS ondersteunt.
Toont HEX, RGB/RGBA, HSL/HSLA, HSV en OKLCH tegelijkertijd — kies welk formaat uw doelcode verwacht zonder elke keer opnieuw te converteren.
Accepteert HEX (#abc of #aabbcc of #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch() en native kleurnamen. Plak alles wat CSS ondersteunt.
Verwerkt het nieuwe OKLCH-formaat dat in moderne CSS wordt gebruikt — perceptueel uniforme kleurruimte die de nieuwe design-system standaard wordt.
Elke uitvoer heeft zijn eigen Copy-knop. Klik om precies het formaat te pakken dat u voor uw code nodig hebt, geen handmatige selectie vereist.
Pas Red/Green/Blue/Alpha-sliders aan voor fijnafstelling. Elk formaat wordt in real-time bijgewerkt wanneer u sleept.
Transparantie wordt afgehandeld in elk formaat: #RRGGBBAA, rgba(...), hsla(...). Eenmaal ingesteld, overal geconverteerd.
Figma geeft u een OKLCH of HSL — plak het, kopieer het HEX-equivalent voor uw Tailwind-config of CSS-variabelen zonder de browser te verlaten.
Sleep sliders om tinten te verkennen, noteer de OKLCH-waarden voor een systematisch design system palet.
Converteer een merkkleur naar zijn HSL-vorm zodat u hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) kunt gebruiken voor hover-staten.
Het luminantieveld geeft u de onbewerkte waarde die in WCAG-contrastberekeningen wordt gebruikt — nuttig voor a11y-wiskunde.
Plak een oklch(...) uit een CSS-bestand dat u leest en zie onmiddellijk welke kleur het daadwerkelijk produceert.
Klik op het pictogram Kleurenformaten in de DevSuite Pro dock. Een paneel verschijnt met een color picker, hex-invoer en RGB-sliders.
Gebruik de color picker, typ een hex of plak een CSS-kleurentekenreeks (rgb(...), oklch(...), enz.). De kleur wordt onmiddellijk weergegeven.
Elk formaat wordt hieronder weergegeven: HEX, RGB, HSL, HSV, OKLCH, CSS-variabele en luminantie. Alles blijft gesynchroniseerd terwijl u aanpassingen aanbrengt.
Sleep R/G/B/A-sliders voor fijne aanpassingen. Perfect voor het instellen van een specifieke tint die overeenkomt met een ontwerpspecificatie.
Klik op Kopiëren op de formaattrij die u wilt — de waarde belandt in uw klembord in de juiste syntaxis.
Installeer DevSuite Pro gratis en ontgrendel 64+ ontwikkelaarstools voor uw browser.
