Ga naar hoofdinhoud
← Tools

Gratis tool

Kleurenconverter

Converteer HEX-, RGB-, HSL- en CSS-kleuren direct voor design- en ontwikkelworkflows.

In de browserGeen account nodigAltijd gratis

Probeer HEX, rgb(), hsl() of een CSS-naam zoals red.

✓ Geldige kleur gedetecteerd

Dichtstbijzijnde Tailwind-kleur: green-500

Laag contrast op witte achtergrond · Contrastratio 2.28:1

HEX

#22c55e

RGB

rgb(34, 197, 94)

HSL

hsl(142, 71%, 45%)

HSV

hsv(142, 83%, 77%)

CMYK

cmyk(83%, 0%, 52%, 23%)

Tailwind-match

green-500 · #22c55e

CSS-variabele

--primary-color: #22c55e;

CSS-kleur

color: #22c55e;

Geoptimaliseerd voor CSS- en Tailwind-workflows

Klaar voor webontwikkeling

Directe conversie in de browser

Voorbeeld

#22c55e

Professionele facturen nodig voor je bedrijf? Maak gratis facturen met Invoicey.

Workflow

Hoe het werkt

Drie snelle stappen van invoer tot een resultaat voor je stack.

1

Stap 1

Voer een kleur in of kies er een

2

Stap 2

Direct converteren

3

Stap 3

Kopieer het gewenste formaat

Waarom teams het gebruiken

Voordelen en use cases

  • Convert HEX, RGB, HSL, and named colors instantly in your browser.
  • See a live preview plus HSV, CMYK, Tailwind nearest match, and CSS snippets.
  • One-click copy for every format — built for designers and developers.
  • No signup, dashboards, or heavy “design software” UI.
  • Runs locally in the session for a fast, lightweight workflow.

Overview

Quick context

What does this color converter do?

This tool parses common web color inputs — including HEX codes, rgb()/rgba(), hsl()/hsla(), and CSS named colors — then normalizes them and shows equivalent values in multiple formats. A large preview updates as you type so you can judge the color visually in one glance, without opening a full graphics suite.

Why convert between HEX, RGB, and HSL?

Different tools and codebases prefer different representations. Designers often think in HEX or HSL for quick tweaks, while components and APIs may consume rgb() values. Converting instantly avoids mental math, reduces copy-paste errors, and keeps CSS variables and design tokens aligned across Figma notes, Tailwind configs, and production stylesheets.

Tailwind match and CSS variable output

For Tailwind projects, the closest default palette token can speed up class selection. The CSS variable line formats a ready-to-paste custom property such as --primary-color, which fits modern theming and component libraries. These outputs are optional helpers; you can still copy raw HEX or rgb() when that is what your stack needs.

Antwoorden

FAQ

Is deze kleurenconverter gratis?

Ja. Hij draait in je browser en vereist geen account.

Welke kleurformaten worden ondersteund?

HEX, rgb/rgba, hsl/hsla, HSV- en CMYK-output, CSS-variabelen en veelgebruikte CSS-namen.

Kan ik RGB naar HEX converteren?

Ja. Plak een rgb()-waarde en kopieer direct het HEX-veld.

Ondersteunt dit HSL-kleuren?

Ja. Voer hsl() of hsla() in — alle andere formaten worden automatisch bijgewerkt.

Kan ik geconverteerde waarden kopiëren?

Ja. Elk formaat heeft een kopieactie met één klik.

Gratis kleurenconverter | Invoicey