Farbwerkzeuge

Farbwähler: Das große Quadrat ist eine Sättigungs-Helligkeits-Karte beim aktuellen Farbton — von links nach rechts steigt die Sättigung, von oben nach unten sinkt die Helligkeit. Klicken Sie irgendwo darauf, um eine Farbe zu wählen. Die schmale senkrechte Leiste rechts ist der Farbtonschieber (0° bis 360°) — schieben Sie ihn, um den Basisfarbton zu ändern; das Quadrat wird entsprechend neu gezeichnet. Die rechte Seite zeigt die gewählte Farbe in den Formaten HEX, RGB und HSL — klicken Sie auf einen Wert, um ihn zu kopieren.

Palette: Der linke Farbwähler und das rechte Bearbeitungsfeld speichern dieselbe Basisfarbe — sie sind in beide Richtungen synchronisiert (wählen Sie eine Farbe oder tippen Sie einen HEX-Wert, beide aktualisieren sich gegenseitig). Die fünf Palettenzeilen darunter werden alle aus dieser Basisfarbe abgeleitet, indem ihr Farbton auf dem Farbkreis gedreht wird: Komplementär (Farbton +180°, stärkster Kontrast), Triadisch (+120° / +240°, ausgewogenes Dreierset), Tetradisch (+90° / +180° / +270°, rechteckige Vierfarbigkeit), Analog (-30° / Basis / +30° / +60°, harmonische Nachbarn) und Geteilt-Komplementär (+150° / +210°, weicher als rein komplementär). Das erste Feld jeder Zeile ist immer die Basisfarbe selbst, die übrigen sind ihre Farbton-Varianten.

Umrechnen: Geben Sie eine gültige Farbe ein — HEX (#3b82f6), CSS-Funktion (rgb(59,130,246) / hsl(217,90%,60%)) oder benannte Farbe (dodgerblue) — und erhalten Sie sofort die Umrechnung in alle gängigen Formate. Das Formatauswahlfeld gibt dem Parser optional einen Hinweis, falls die automatische Erkennung das falsche Format wählt. Die Ausgabe zeigt HEX, RGB (0–255), HSL (Grad, %, %), HSV und CMYK. Klicken Sie auf einen Wert, um ihn zu kopieren.

Farbenblindheit: Laden Sie ein Bild hoch und wählen Sie einen Typ der Farbfehlsichtigkeit zur Simulation. Das Werkzeug wendet auf jeden Bildpunkt eine Umrechnung über die Zapfen-Antwortmatrix an und bildet die RGB-Werte so ab, dass sie annähernd zeigen, wie Menschen mit verschiedenen Formen von Farbenblindheit das Bild sehen. Die linke Fläche zeigt das Original, die rechte die simulierte Ansicht. Das Auswahlfeld umfasst drei Dichromasie-Typen (ein Zapfenpigment fehlt: Protanopie, Deuteranopie, Tritanopie), die vollständige Achromatopsie (kein Farbsehen) und drei anomale Trichromasie-Typen (geschwächte Zapfenantwort). Bilder mit niedrigerer Auflösung laden schneller.

Verlauf: Dies ist ein visueller Generator für CSS-Verläufe. Wählen Sie linear (gerichtet) oder radial (von der Mitte nach außen), legen Sie den Winkel fest (0° = von unten nach oben, 90° = von links nach rechts) und definieren Sie die Farbstopps. Jeder Stopp hat einen Farbwähler und ist gleichmäßig verteilt (0 %, 50 %, 100 % bei drei Stopps). Klicken Sie auf + Stopp, um weitere Farbpunkte für komplexere Verläufe hinzuzufügen. Die Vorschau aktualisiert sich live, und der erzeugte CSS-Code steht unten zum Kopieren bereit.

Kontrast: Berechnet das WCAG-2.1-Kontrastverhältnis zwischen Vordergrundtext und Hintergrundfarbe mit der Formel für die relative Leuchtdichte aus sRGB-Werten (gammakorrigiert). Das Verhältnis reicht von 1:1 (identische Farben) bis 21:1 (Schwarz gegen Weiß). Die Ergebnisse zeigen bestanden/nicht bestanden auf drei Konformitätsstufen: AA normaler Text (Verhältnis ≥ 4,5:1), AAA großer Text (Verhältnis ≥ 4,5:1 für Text ≥ 18 pt oder fett ≥ 14 pt) und AAA normaler Text (Verhältnis ≥ 7:1). Die Textvorschau aktualisiert sich in Echtzeit, während Sie die Farben anpassen.

Extrahieren: Laden Sie ein beliebiges Bild hoch, und das Werkzeug ermittelt seine dominante Farbpalette mithilfe der Farbquantisierung. Das Bild wird auf 100×100 px verkleinert, dann wird jeder Bildpunkt in ein Histogramm mit 4 Bit pro Kanal einsortiert (16 Stufen pro R/G/B = 4096 Klassen). Transparente Bildpunkte werden übersprungen. Die häufigsten Klassen werden nach Bildpunktanzahl sortiert, und die Mittelfarbe jeder Klasse wird zu einem Farbfeld. Jedes Feld zeigt seinen HEX-Wert und den Anteil der Bildpunkte, die es repräsentiert. Mit dem Zähl-Schieberegler (2–12) bestimmen Sie, wie viele dominante Farben extrahiert werden.

Mischer: Mischt zwei Farben im RGB-Farbraum durch lineare Interpolation. Der Verhältnis-Schieberegler bestimmt die Mischung: 0 % ist reine Farbe 1, 100 % ist reine Farbe 2, und 50 % ist eine gleichmäßige Mischung. Jeder Kanal R, G und B wird unabhängig interpoliert (z. B. ergibt Rot + Blau bei 50 % Violett). Die Ergebnisvorschau und die HEX-/RGB-Werte aktualisieren sich live, wenn Sie den Schieberegler ziehen oder eine der Farben ändern.

Temperatur: Wandelt die Farbtemperatur eines Schwarzkörperstrahlers in Kelvin mit dem Näherungsalgorithmus von Tanner Helland in die entsprechende sichtbare Farbe um. Niedrige Temperaturen (1000–3000 K) erzeugen warme Orange- und Rottöne wie Kerzenlicht und Glühlampen; der mittlere Bereich (4000–6500 K) ergibt neutrales Weiß bis Tageslicht; höhere Temperaturen (8000–40000 K) wechseln zu kühlem Blau wie bewölktem Himmel und tiefem Wasser. Die Beschriftung darunter nennt die nächstliegende reale Lichtquelle für jede Temperatur.

Benannt: Durchsuchen Sie eine gemeinsame Sammlung von 80 traditionellen chinesischen Farben (胭脂, 朱砂, 黛蓝 usw. — Namen aus klassischer chinesischer Literatur, Malerei und Färbetraditionen) und über 140 benannten CSS-Farben (die Standardpalette des Webs). Verwenden Sie das Suchfeld, um nach Name oder HEX-Wert zu filtern, oder wechseln Sie mit dem Auswahlfeld zwischen den Kategorien. Klicken Sie auf ein Farbfeld, um eine große Vorschau mit Name und HEX-Code zu sehen — klicken Sie auf den Code, um ihn zu kopieren.