Ga naar de hoofdinhoud
Converty

Kleurconverter

Converteer tussen hex, RGB, HSL, OKLCH en OKLAB terwijl je contrast controleert en CSS-klare tokens exporteert.

Ondersteunt hex, rgb(), hsl(), oklch(), oklab() en benoemde CSS-kleuren.

Huidige kleur

#953769

Voorgestelde voorgrond

#FFFFFF

Complementaire kleur

#007653

Hex
RGB(A)
HSL(A)
OKLCH
OKLAB
Alpha
Tailwind-thema
Genereer een volledig merkpalet voor Tailwind CSS 4 of 3 vanuit de huidige kleur.
50
oklch(94.5% 0.0212 350.46)
100
oklch(89.49% 0.0339 350.46)
200
oklch(81.48% 0.0542 350.46)
300
oklch(72.47% 0.0771 350.46)
400
oklch(61.46% 0.105 350.46)
500
oklch(48.44% 0.138 350.46)
600
oklch(43.57% 0.1236 350.46)
700
oklch(38.7% 0.1093 350.46)
800
oklch(33.22% 0.0932 350.46)
900
oklch(27.74% 0.077 350.46)
950
oklch(23.48% 0.0644 350.46)
CSS-variabelen

Over CSS-kleurconversie

Kleurconverters helpen je dezelfde kleur te verplaatsen tussen HEX, RGB, HSL, OKLCH en OKLAB. Ze zijn het nuttigst wanneer je leesbare uitvoer, contrastcontext en waarden klaar voor CSS of Tailwind nodig hebt.

HEX-, RGB-, HSL- en CSS-kleuren

HEX, RGB en HSL dekken de meeste dagelijkse browser-, design- en frontendworkflows.

Met snelle conversie kun je één waarde plakken en overal hergebruiken zonder de syntaxis met de hand te herschrijven.

Waarom OKLCH en OKLAB belangrijk zijn

OKLCH en OKLAB zijn beter voor het bouwen van vloeiende schalen en voorspelbare veranderingen in lichtheid.

Ze maken palettewerk eenvoudiger wanneer je waarde hecht aan evenwichtige verlopen en betrouwbare contrasten.

Contrastcontroles en Tailwind-uitvoer

Contrastcontroles en frameworkklare uitvoer maken van een converter een praktische UI-tool.

Je gaat sneller van één invoerkleur naar toegankelijke tekstkeuzes en Tailwind-vriendelijke tokens.

Veelgestelde vragen

Antwoorden over ondersteunde kleurformaten, wanneer perceptuele ruimten zoals OKLCH nuttig zijn, en hoe je de contrast- en Tailwind-uitvoer moet interpreteren.

Andere tools

Bekijk elke aparte toolpagina vanuit de homepagehub of via de gecentreerde selector in de header.

Afbeeldingen

WebP-converter

Converteer tot 10 JPEG-, PNG- of WebP-afbeeldingen naar WebP met kwaliteitspresets en ZIP-downloads.

Openen WebP-converter

Assets

Favicon- / app-icongenerator

Upload één vierkante bronafbeelding en genereer een faviconpakket met app-iconen en een starter webmanifest.

Openen Favicon-generator

Dataformaten

JSON / YAML / TOML-converter

Valideer, formatteer, minify en converteer JSON, YAML en TOML met duidelijke compatibiliteitswaarschuwingen.

Openen JSON / YAML / TOML

Dataformaten

CSV-validator

Valideer CSV-bestanden en geplakte rijen met detectie van scheidingstekens, headercontroles, probleemlijsten en geparste previews.

Openen CSV-validator

Tekst

Case / Slug / Escape

Zet tekst om naar camelCase, snake_case, kebab-case, PascalCase, slugs en veelvoorkomende ge-escapete vormen.

Openen Case / Slug / Escape

Tekst

Markdown-validator en preview

Valideer Markdown-structuur, bekijk gerenderde uitvoer in preview en ontdek veelvoorkomende authoringproblemen voor publicatie.

Openen Markdown-validator