HEX naar OKLCH
Hex naar OKLCH omrekenen, gratis en online: plak een hexcode en je krijgt de oklch()-waarde voor je CSS. #0F766E wordt oklch(51.094% 0.08606 186.39). OKLCH is de perceptuele kleurruimte uit CSS Color 4, en Tailwind CSS 4 legt zijn palet erin vast. De pagina noemt ook de dichtstbijzijnde Tailwind-kleur. Alles draait in je browser.
Zo reken je HEX om naar OKLCH
- 1Plak je hexcode in "Kleur", met of zonder #
- 2Of kies een kleur met de kleurkiezer naast het veld
- 3Klik op "Kopiëren" naast de oklch()-waarde in de grote regel
- oklch(L C H), klaar voor een CSS-variabele
Gemaakt voor moderne CSS
- Geschreven zoals CSS het doet.Lichtheid in procenten, chroma en tint als getallen, zodat het zo in je stylesheet past
- Tailwind ernaast.De lijst toont de dichtstbijzijnde kleur uit Tailwind 4 en Tailwind 3, en hoe dichtbij die ligt
- Er wordt niets verstuurd.Je browser rekent, op je eigen apparaat
Wat je kunt doen
- Een hexcode omrekenen naar oklch(), met de lichtheid op drie decimalen in procenten, de chroma op vijf en de tint op twee
- Ook OKLab kopiëren, dezelfde ruimte met a en b in plaats van chroma en tint
- In plaats van een hexcode rgb(), hsl(), een CSS-naam of een Tailwind-naam zoals sky-500 plakken
- HEX, RGB, HSL, Lab, LCH en XYZ van dezelfde kleur in één lijst zien
Goed om te weten
- Elke hexcode ligt binnen sRGB, dus de OKLCH-waarde geeft teruggerekend altijd weer dezelfde hexcode
- Chroma is in OKLCH klein: kleuren in sRGB blijven onder ongeveer 0.33, grijstinten zitten op 0. Bij grijs wordt de tint als 0 geschreven
- OKLCH en LCH zijn verschillende ruimtes. Kopieer de regel OKLCH, niet LCH, als je CSS oklch() gebruikt
Vragen
Hoe reken ik hex om naar OKLCH?
Plak de hexcode in het veld. De grote regel toont meteen de oklch()-waarde en "Kopiëren" neemt hem over. #FFC61A is bijvoorbeeld oklch(85.406% 0.17061 86.92).
Waarom stappen zoveel mensen over op OKLCH?
De lichtheid volgt wat het oog ziet: twee kleuren met dezelfde L lijken ongeveer even licht, welke tint ze ook hebben. Zo bouw je paletten, hover-toestanden en een donkere modus makkelijker door één getal te veranderen.
Begrijpt elke browser oklch()?
Alle actuele grote browsers wel. Voor heel oude browsers kun je de hexcode als reserve houden, en deze pagina geeft je allebei.
Wordt mijn kleur naar een server gestuurd?
Nee. Het omrekenen gebeurt in je browser. Er wordt geen verzoek met je kleur gedaan.
Meer tools in Web en code
Deze pagina bestaat niet. Zoek hieronder of sleep een bestand hierheen om de tool te vinden die je nodig hebt.
Eén site voor elke bestandsklus. Wat is de jouwe?
Stop met hoppen tussen convertersites. Kies uit 410+ tools, of een recipe die er meerdere achter elkaar zet.
- Bestanden blijven op je apparaat
- Geen watermerk
- Werkt offline
Sleep een bestand hierheen
Een geplakt bestand werkt ook.
of zoek een tool
Open een app
Van ‘ugh, dit bestand’ naar klaar, in drie stappen.
- Sleep het erin, of kies een taak
Geen bestand? Zoek wat je nodig hebt. Bestanden worden op je eigen apparaat verwerkt, niet geüpload voor verwerking.
- Kies wat je wilt
Kleiner, een ander formaat, ondertekend, samengevoegd. Eén klik, zonder eerst instellingen te bestuderen.
- Maak er een recept van
Elke week dezelfde drie stappen? Zet ze één keer achter elkaar en voer de volgende keer hetzelfde recept uit.
Eén goedgekeurde gereedschapskist voor het hele team.
Op kantoor, op de bouwplaats of bij een bureau: teams werken de hele dag met vertrouwelijke bestanden. ToolRecipe geeft iedereen dezelfde tools en dezelfde recepten, en de bestanden worden verwerkt op ieders eigen computer.
- Bestanden worden verwerkt op het apparaat van de medewerker
- Bedrijfsrecepten die iedereen op dezelfde manier uitvoert
- Eén plek in plaats van tien converteersites