Tailwind-kleur naar HEX
Zet een Tailwind-kleur om naar HEX, gratis en online. Typ een naam als sky-500 of een hele class als bg-rose-300 en je krijgt de HEX-code uit het standaardpalet van Tailwind 4 of Tailwind 3. Handig voor Figma, e-mails, grafieken en overal waar Tailwind-classes niet werken.
Zo krijg je de HEX-code van een Tailwind-kleur
- 1Kies Tailwind 4 of Tailwind 3 bij "Tailwind-versie"
- 2Typ een kleur zoals sky-500 of bg-rose-300 in "Kleur"
- 3Kopieer de HEX-code uit de grote regel
- De HEX-code, zoals #00A6F4 voor sky-500 in Tailwind 4
Voordat je kopieert
- Plak de class zoals hij is.bg-, text-, border- en dergelijke, hover: en md:, en /50 worden eraf gehaald
- Versie 4 of 3.De paletten verschillen: sky-500 is #00A6F4 in Tailwind 4 en #0EA5E9 in Tailwind 3
- Er wordt niets verstuurd.De paletten zitten in de pagina en het opzoeken gebeurt in je browser
Wat je kunt doen
- Elke standaardkleur van Tailwind opzoeken: 22 paletten van slate tot rose, stappen 50 tot 950
- Hem typen zoals hij in je markup staat: sky-500, bg-sky-500, hover:text-sky-500/50 of sky 500
- Wisselen tussen Tailwind 4 en Tailwind 3 en meteen zien hoe de HEX-code verandert
- rgb(), hsl() of oklch() van dezelfde kleur uit de lijst kopiëren. Bij Tailwind 4 toont de OKLCH-regel de waarde zoals Tailwind hem vastlegt
- Een duidelijke melding krijgen bij een naam die niet bestaat, zoals sky-550
Goed om te weten
- Tailwind 4 legt zijn kleuren vast in OKLCH, en veel daarvan, zoals amber-400 en sky-500, vallen buiten sRGB. HEX toont dan de dichtstbijzijnde sRGB-kleur en de pagina meldt dat
- Wil je een Tailwind 4-kleur precies in CSS, kopieer dan de oklch()-regel in plaats van de HEX-code
- Dekking zoals /50 wordt genegeerd, omdat een HEX-code hier geen transparantie heeft
- Alleen het standaardpalet is bekend, uit Tailwind 4.1.11 en 3.4.17. Eigen themakleuren en zwart en wit zitten er niet in
Vragen
Wat is de HEX-code van een Tailwind-kleur?
Typ de naam, bijvoorbeeld blue-600, en kies je versie. In Tailwind 3 is blue-600 #2563EB, in Tailwind 4 #155DFC.
Waarom geeft Tailwind 4 een andere HEX-code dan Tailwind 3?
Tailwind 4 heeft zijn palet opnieuw vastgelegd in OKLCH, met fellere kleuren. Veel daarvan gaan verder dan HEX aankan, dus de HEX-code is de dichtstbijzijnde sRGB-kleur en niet de exacte.
Kan ik een hele class plakken, zoals hover:bg-sky-500/75?
Ja. Varianten zoals hover: en md:, de utility zoals bg- of text- en de dekking na de schuine streep vallen weg. Alleen de kleurnaam en de stap worden gelezen.
Kent de pagina mijn eigen kleuren?
Nee. Alleen de standaardpaletten van Tailwind 4 en 3. Een naam uit je eigen thema, zoals brand-500, krijgt de melding dat er geen Tailwind-kleur met die naam is.
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