--color-primary: #06d6a0;bg-[#06d6a0]@theme {
--color-primary: oklch(78% 0.16 167);
}Der Farbkonverter ist ein kostenloses Online-Tool zur Konvertierung zwischen HEX, RGB, HSL, OKLCH und anderen Farbräumen. Enthält eine visuelle Farbauswahl, Bildpaletten-Extraktion, WCAG-Kontrastprüfung und Vorschau von Farbfehlsichtigkeit. Läuft vollständig in Ihrem Browser.
Was ist das Farb-Tool?
Ein umfassendes Farbdienstprogramm, das zwischen 7 Farbräumen (HEX, RGB, HSL, HSV, CMYK, LAB, OKLCH) konvertiert, Farbharmonien erzeugt, Kontrastverhältnisse für Barrierefreiheit prüft, Farbfehlsichtigkeit simuliert und Paletten aus Bildern extrahiert.
Gängige Anwendungsfälle
Farben für die Webentwicklung auswählen und konvertieren — den exakten HEX-, RGB-, HSL- oder OKLCH-Wert für CSS oder Tailwind erhalten.
Textkontrast gegen eine Hintergrundfarbe prüfen, um die WCAG-Barrierefreiheitsrichtlinien (AA/AAA) oder den neueren APCA-Standard zu erfüllen.
Dominante Farben aus einem Bild extrahieren, um eine kohärente Designpalette zu erstellen, dann komplementäre, analoge oder triadische Harmonien generieren.
Farbräume
Dieses Farb-Tool konvertiert zwischen 7 Farbräumen, erzeugt Harmonien, prüft Kontrastverhältnisse (WCAG und APCA), simuliert Farbfehlsichtigkeit und extrahiert Paletten aus Bildern. Siehe [Zahlenbasen-Konverter](/numbase) für Hex-Berechnungen oder [Bildkompressor](/image) für Bildverarbeitung.
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 nicht vollständig die Wahrnehmung von kleinem Text oder Dark Mode.
APCA ist ein Kandidat für WCAG 3 mit einem polaritätsbewussten 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 übernehmen (Chromium-Browser).
- Ziehen Sie ein Bild in die Palette-Registerkarte, um seine 6 dominanten Farben mittels Median-Cut-Quantisierung zu extrahieren.
- Tailwind v4 gibt Farben in OKLCH für wahrnehmungsgerechte Gleichmäßigkeit aus — kopieren Sie den @theme-Block, um diesen Workflow zu nutzen.