CSS- & Design-Werkzeuge

HEX zu RGB / HSL Farbkonverter & CSS-Palettengenerator

Konvertieren Sie in Echtzeit zwischen HEX-, RGB-, HSL-, HSV-, CMYK- und OKLCH-Farbcodes. Generieren Sie Tailwind-Nuancen, Schattierungen und harmonische Farbpaletten mit WCAG-Kontrastprüfung. 100% privat im Browser.

100% clientseitige Farbraum-Transformation • W3C CSS Color 4 konform • Keine Netzwerkanfragen
CSS- & Design-Werkzeuge
Beliebte Design-Voreinstellungen
gegen Weiß (#FFFFFF)
3.68:1
AA Large Only
gegen Schwarz (#000000)
5.71:1
AA Pass

Konvertierte Farbformate

HEX (6-digit)
#3B82F6
HEX8 (Alpha)
#3B82F6FF
RGB
rgb(59, 130, 246)
RGBA
rgba(59, 130, 246, 1)
HSL
hsl(217, 91%, 60%)
HSLA
hsla(217, 91%, 60%, 1)
HSV / HSB
hsv(217, 76%, 96%)
CMYK (Print)
cmyk(76%, 47%, 0%, 4%)
CSS OKLCH
oklch(62% 0.19 255)

Nuancen- & Schattierungsskala (Tailwind 50 - 950)

Click any swatch to copy

Farbharmonien

CSS- und Code-Snippets exportieren

:root {
  --color-primary: #3B82F6;
  --color-primary-rgb: 59, 130, 246;
  --color-primary-hsl: 217deg 91% 60%;
}
Häufig gestellte Fragen (FAQ) · HEX zu RGB / HSL Farbkonverter

HEX zu RGB, HSL & OKLCH Farbraum-Konverter & CSS-Palettenarchitektur

Technischer Leitfaden zu digitalen Farbmodellen, mathematischen Transformationen zwischen sRGB, HSL, HSV, CMYK und OKLCH, WCAG 2.1 Barrierefreiheit und Tailwind-Skalen.

MU
IBM Maximo & Entwicklertools-Architekt
Technische Referenz

01. Mathematische Farbraum-Architektur: HEX, RGB, HSL & OKLCH

Digitale Bildschirme stellen Farben durch additive Farbmischung von Rot-, Grün- und Blau-Subpixeln (sRGB-Farbraum) dar. Jeder 8-Bit-Kanal reicht von 0 bis 255.

Die HEX-Schreibweise ist die hexadezimale Darstellung zur Basis 16 dieser Bytes. So entspricht #3B82F6 den Werten 59 Rot, 130 Grün und 246 Blau.

Das HSL-Modell ordnet Farben nach Farbton (Hue 0-360°), Sättigung (0-100%) und Helligkeit (0-100%), was das Erstellen harmonischer Farbthemen intuitiv macht.

DevOmniTools führt alle Umrechnungen 100% clientseitig im Browser gemäß W3C CSS Color Module 4 durch.

  • Echtzeit-Synchronisierung zwischen HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK und OKLCH.
  • 11-stufige Nuancen- und Schattierungsskala kompatibel mit Tailwind CSS 50–950.
  • Farbharmonien: Komplementär, Triadisch, Analog und Tetradisch.
  • Integrierter WCAG 2.1 Kontrastrechner gegen Weiß und Schwarz mit AA/AAA-Prüfung.

02. Schritte zur Farbkonvertierung und CSS-Token-Generierung

1. Geben Sie einen beliebigen Farbcode ein oder wählen Sie eine Farbe über den visuellen Farbwähler.

2. Das Tool aktualisiert sofort alle 9 Farbformate mit 1-Klick-Kopierfunktion.

3. Nutzen Sie die Tailwind-Farbskala für konsistente UI-Zustände.

4. Prüfen Sie die WCAG-Kontrastwerte für barrierefreie Lesbarkeit.

5. Exportieren Sie die CSS-Root-Variablen direkt in Ihr Projekt.

03. Farbpaletten-Design und Vektor-Asset-Workflow

Prüfen Sie WCAG-Kontrastwerte Ihrer Farbpaletten mit unserem Farbkontrast-Prüfer, erstellen Sie Glaseffekte mit dem CSS-Glassmorphism-Generator oder exportieren Sie Grafiken mit dem SVG zu PNG Konverter.

Häufig gestellte Fragen (FAQ)

Wie wird ein 3-stelliger HEX-Code in einen 6-stelligen umgewandelt?

Jedes Zeichen wird verdoppelt: #ABC wird zu #AABBCC.

Was unterscheidet HSL von OKLCH?

OKLCH bietet wahrnehmungsbezogene Gleichförmigkeit: Die scheinbare Helligkeit bleibt über alle Farbtöne hinweg identisch.

Werden Farbeingaben an Server übertragen?

Nein, alle Transformationen laufen zu 100% privat im lokalen Arbeitsspeicher Ihres Browsers.

Kann ich HEX zu RGB / HSL Farbkonverter auch ohne aktive Internetverbindung (offline) nutzen?

Für die Offline-Nutzung müssen die Seite und ihre Werkzeugdateien vollständig zwischengespeichert sein. Kernfunktionen laufen dann lokal; optionale KI und Kontaktversand benötigen Internet.

Ist HEX zu RGB / HSL Farbkonverter kostenlos und gibt es Nutzungslimits?

Die Kernwerkzeuge sind kostenlos und ohne Konto nutzbar. Gerätespeicher und werkzeugspezifische Sicherheitsgrenzen gelten. Optionale KI und Online-Kontaktdienste haben Nutzungslimits.

Technischer Engineering-Leitfaden

Formeln & Code gesucht? Erfahren Sie, wie Sie HEX in RGB und RGBA mit Deckkraft in CSS & JavaScript umwandeln

Vollständigen Leitfaden lesen

Ähnliche Entwickler-Werkzeuge

Optimieren Sie Ihren Workflow mit komplementären, 100% privaten Browser-Werkzeugen.

Design WCAG AAA

Farbkontrast-Prüfer (WCAG)

Farbkontraste nach den Richtlinien von WCAG 2.1 AA und AAA überprüfen für barrierefreie und lesefreundliche Webanwendungen.

Werkzeug öffnen
CSS & Layout Visueller Builder

CSS Flexbox Generator & Visueller Playground

Interaktiver visueller CSS Flexbox Builder mit Live-Vorschau, Ausrichtungsoptionen, flex-grow/shrink Einstellungen und reinem CSS & Tailwind Code-Export.

Werkzeug öffnen
Design Null CLS

CSS Glassmorphism & Schatten Generator

Moderne Milchglaseffekte, Farbverläufe und Schlagschatten mit fertigem CSS-Code für moderne Benutzeroberflächen erstellen.

Werkzeug öffnen
Vektoren & Bilder Vektor Rasterizer

SVG zu PNG & Vektor Konverter

Konvertieren Sie SVG-Vektorgrafiken in hochauflösende PNG-, WebP- oder JPEG-Dateien mit Skalierungsfaktoren bis 8x und Transparenz.

Werkzeug öffnen
Typografie & Fonts Vektor zu Font Gratis

Vektor & SVG zu Font Konverter (TTF & Webfont)

Vektorgrafiken (SVG) und IcoMoon-Projekte kostenlos im Browser in TrueType-Fonts (.ttf) konvertieren. Live-Vorschau, CSS @font-face ohne Server-Uploads.

Werkzeug öffnen
Werkzeugverzeichnis entdecken