Kostenloses Tool

Farbkonverter

HEX, RGB, HSL und CSS-Farben sofort für Design- und Entwicklungs-Workflows konvertieren.

Im BrowserOhne RegistrierungFür immer kostenlos

Farbe

HEX, rgb(), hsl() oder einen CSS-Namen wie red ausprobieren.

Farbe wählen

✓ Gültige Farbe erkannt

Nächste Tailwind-Farbe: green-500

Niedriger Kontrast auf weißem Hintergrund · Kontrastverhältnis 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-Treffer

green-500 · #22c55e

CSS-Variable

--primary-color: #22c55e;

CSS-Farbe

color: #22c55e;

Optimiert für CSS- und Tailwind-Workflows

Bereit für die Webentwicklung

Sofortige browserbasierte Umwandlung

Vorschau

#22c55e

Brauchst du professionelle Rechnungen für dein Business? Erstelle kostenlos Rechnungen mit Invoicey.

Ablauf

So funktioniert's

Drei schnelle Schritte vom Input bis zum Ergebnis für Ihren Workflow.

Schritt 1

Farbe eingeben oder wählen

Schritt 2

Sofort konvertieren

Schritt 3

Das gewünschte Format kopieren

Warum Teams es nutzen

Vorteile und Einsatzgebiete

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.

Antworten

FAQ

Ist dieser Farbkonverter kostenlos?

Ja. Er läuft in Ihrem Browser und erfordert keine Anmeldung.

Welche Farbformate werden unterstützt?

HEX, rgb/rgba, hsl/hsla, HSV- und CMYK-Ausgabe, CSS-Variablen und gängige CSS-Namen.

Kann ich RGB in HEX umwandeln?

Ja. rgb() einfügen und das HEX-Feld sofort kopieren.

Unterstützt dies HSL-Farben?

Ja. hsl() oder hsla() eingeben — alle anderen Formate aktualisieren sich automatisch.

Kann ich konvertierte Werte kopieren?

Ja. Jedes Format hat eine Ein-Klick-Kopieraktion.

Mehr entdecken