* Ihre Inhalte werden nicht an den Server übertragen. Alle Berechnungen erfolgen direkt im Browser.
HEX
RGB
HSL
HSV
CMYK
LAB
OKLCH
HSV dient nur als Referenz. CSS hat keine hsv()-Funktion, verwenden Sie HSL.
CSS-Variable
--color-primary: #06d6a0;
Tailwind-Klasse
bg-[#06d6a0]
Tailwind v4 @theme
@theme {
  --color-primary: oklch(78% 0.16 167);
}

Über Farbumwandlung

Ein Farbkonverter übersetzt dieselbe Farbe in die Formate, die in Web, Druck und Design verwendet werden: HEX für CSS, RGB/HSL für die direkte Anpassung, CMYK für den Druck, LAB/OKLCH für wahrnehmungsgerechte Gleichmäßigkeit.

Farbräume
HEX, kompakte 6/8-stellige RGB-Notation. Der Standard für CSS.
RGB, additive Primärfarben 0-255. Abbildung direkt auf Bildschirmpixel.
HSL, Farbwert/Sättigung/Helligkeit. Für Menschen leichter zu verstehen als RGB.
HSV, Farbwert/Sättigung/Wert. Häufig in Designtools, aber keine CSS-Funktion.
CMYK, subtraktive Primärfarben für den Druck. Näherungswert bei Umwandlung von RGB.
LAB, wahrnehmungsgerecht gleichmäßig; gleicher numerischer Abstand entspricht ungefähr gleichem visuellem Abstand.
OKLCH, moderner wahrnehmungsgerechter Farbraum; bevorzugt von Tailwind v4 und CSS Color Module Level 4.
Kontrast (WCAG vs. APCA)

WCAG 2.1 verwendet ein Leuchtdichteverhältnis (1:1 bis 21:1) mit Schwellenwerten für AA/AAA. Es ist weit verbreitet, berücksichtigt aber die Wahrnehmung von kleinem Text oder Dark Mode nicht vollständig.

APCA ist ein Kandidat für WCAG 3 mit einem polaritätsabhängigen Lc-Wert. Er korreliert besser mit der Lesbarkeit von dünnem oder kleinem Text.

Tipps

  • Verwenden Sie die Pipette, um eine Farbe von einem beliebigen Pixel auf Ihrem Bildschirm zu wählen (Chromium-Browser).
  • Ziehen Sie ein Bild in den Palette-Tab, um seine 6 dominierenden Farben über Median-Cut-Quantisierung zu extrahieren.
  • Tailwind v4 gibt Farben in OKLCH für wahrnehmungsgerechte Gleichmäßigkeit aus. Kopieren Sie den @theme-Block, um mit diesem Workflow kompatibel zu bleiben.