Fünf verwandte Werkzeuge
Farbauswahl, Bildfarben, Paletten, Verläufe und Kontrastprüfung nutzen die gemeinsame Technik des Farbstudios. Die Modusauswahl öffnet die jeweilige Werkzeugseite.
Farbstudio
Wähle Farben, gewinne Paletten aus Bildern, stelle eigene Paletten zusammen, erstelle CSS-Verläufe und prüfe Textkontraste.
Modus wählen
Farbwähler
Farbharmonie
Aktuell
Farbformate
Ähnliche Tools
Deine Statistiken
0
Gewählte Farben
0
Exportierte Paletten
0
Erstellte Verläufe
0
Kontrastprüfungen
Farbwähler
Meistgenutzter Modus
0%
Aktivitätswert
So nutzt du das Farbstudio
Das Video konnte nicht geladen werden. Du kannst weiterhin der Anleitung unten folgen.
Das Video zeigt die englische Oberfläche.
Wähle den Farbton durch Klicken oder Ziehen auf dem Regenbogenregler. Passe Helligkeit und Sättigung in der Fläche darunter an. Die Werte neben der Farbfläche aktualisieren sich dabei. In unterstützten Browsern kannst du auch „Vom Bildschirm aufnehmen“ verwenden.
Farbwerkzeuge in einem Studio
Farben aus Bildern und GIFs
Wähle Farben aus der Bildvorschau oder lasse eine Palette erstellen. Animierte GIFs haben eine Einzelbildsteuerung. Skalierung, Dekodierung und Gruppierung können die Farben beeinflussen.
Bibliothek für CSS-Verläufe
Wähle aus 60 durchsuchbaren Vorlagen oder erstelle lineare, radiale, konische und Mehrpunkt-Hintergründe. Beachte vor der Verwendung die Grenzen der Code- und Bildexporte.
3 weitere anzeigenWeniger anzeigen
Sechs Farbharmonien
Probiere komplementäre, analoge, triadische, geteilte komplementäre, tetradische und monochromatische Farben. Prüfe den Kontrast gesondert, bevor du sie für Text verwendest.
Kontrast von Text und Hintergrund
Vergleiche zwei Vollfarben mit den vier WCAG-Textschwellen für AA und AAA. Die ungefähren Vorschaufilter weisen keine Barrierefreiheit nach.
Eine Kontrastanpassung versuchen
Die Anpassung an AA oder AAA versucht, die RGB-Werte des Textes zu ändern. Das kann fehlschlagen oder den Farbton ändern. Prüfe deshalb das resultierende Verhältnis.
Häufige Fragen
Welche Farbwerkzeuge gibt es?
Die Farbauswahl zeigt fünf Formate und sechs Farbharmonien. Die Bildextraktion liest Farben aus Fotos und GIF-Einzelbildern. Im Palettenwerkzeug bearbeitest du Farbfelder, im Verlaufsgenerator erstellst du CSS-Hintergründe. Die Kontrastprüfung vergleicht eine einfarbige Text-Hintergrund-Kombination mit WCAG-Textschwellen. Die Modusauswahl öffnet die einzelnen Werkzeugseiten.
Welche Farbformate kann ich kopieren?
Die Farbauswahl zeigt HEX, RGB, HSL, HSV und geschätztes CMYK. Kopiere Werte einzeln oder nutze Alle Formate kopieren. Die Felder sind schreibgeschützt. Angezeigte Werte sind gerundet, und CMYK verwendet kein Drucker-ICC-Profil.
Kann ich Farben aus einem animierten GIF entnehmen?
Ja. Die Bildextraktion bietet Wiedergabe und Einzelbildwahl für animierte GIFs. Wähle eine Farbe oder extrahiere eine Palette aus dem gewählten Bild. Große Animationen können viel Arbeitsspeicher benötigen.
Welche Bildformate kann ich öffnen?
Nutze ein Format, das der Browser dekodieren kann, etwa PNG, JPG oder WebP. Für HEIC und HEIF gibt es einen bei Bedarf geladenen lokalen Decoder. Animierte GIFs werden in Einzelbilder zerlegt. Die Formatunterstützung hängt vom Browser ab. Für TIFF gibt es hier keinen eigenen Decoder.
10 weitere anzeigenWeniger anzeigen
Welche Farbharmonien sind enthalten?
Komplementär, Analog, Triade, Geteilt-komplementär, Tetrade und Monochrom. Ein Klick auf ein vorgeschlagenes Farbfeld übernimmt die Farbe. Eine Harmonie kombiniert Farben, prüft aber nicht die Barrierefreiheit von Text.
Welche Verläufe kann ich erstellen?
Lineare, radiale und konische Verläufe erlauben bis zu sechs Stopps. Mehrpunkt-Verläufe erlauben bis zu zehn Punkte und schichten radiale CSS-Verläufe. Die Bibliothek enthält 60 Vorlagen. Tailwind vereinfacht Verläufe zu linearen, SVG ersetzt konische und Mehrpunkt-Typen durch lineare. Bildexporte haben eigene Darstellungsgrenzen. Konische Bilder benötigen Canvas-Unterstützung für konische Verläufe.
Welche Kontrastverhältnisse verlangt WCAG?
Normaler Text benötigt mindestens 4,5:1 für AA und 7:1 für AAA. Für großen Text gelten 3:1 beziehungsweise 4,5:1. Ein bestandener Test gilt für das gewählte Farbpaar und die jeweilige Textschwelle, nicht für eine ganze Website.
Kann das Werkzeug den Kontrast für mich anpassen?
An AA anpassen und An AAA anpassen versuchen, die RGB-Kanäle der Textfarbe aufzuhellen oder abzudunkeln. Dabei kann sich der Farbton ändern, oder die Anpassung scheitert am gewählten Hintergrund. Prüfe das resultierende Verhältnis, bevor du die Farbe verwendest.
Was zeigen die Farbsehoptionen?
Protanopie, Deuteranopie und Tritanopie wenden einfache CSS-Filter auf die Vorschau an. Das sind ungefähre visuelle Darstellungen, keine validierten Farbsehmodelle oder Nachweise für Barrierefreiheit.
Wie bewahre ich eine Palette auf?
Speichere sie als benannte Vorlage in diesem Browser oder exportiere sie. Farben exportieren bietet PNG-, JPG-, SVG- und JSON-Dateien sowie das Kopieren von CSS-Variablen. Eine ungespeicherte Arbeitspalette wird beim erneuten Öffnen auf Material zurückgesetzt.
Wo wird die Farbhistorie gespeichert?
Der gemeinsame Verlauf speichert in diesem Browser bis zu 20 letzte Einträge samt Herkunftsmodus. Du findest sie unter Zuletzt verwendete Farben. Beim Löschen der Websitedaten können sie verloren gehen. Der Verlauf wird nicht zwischen Geräten synchronisiert.
Kann ich eine Farbe vom Bildschirm aufnehmen?
Vom Bildschirm aufnehmen nutzt die EyeDropper API, sofern Browser und Gerät sie unterstützen. Sie benötigt einen sicheren Kontext und liefert einen sRGB-HEX-Wert. Nutze den Farbtonregler und die Farbfläche, wenn die Bildschirmaufnahme nicht verfügbar ist.
Wo landen meine Bilder und Vorlagen?
Ausgewählte Bilder werden in diesem Browser verarbeitet und nicht an einen Konvertierungsserver gesendet. Benannte Vorlagen und der jüngste Verlauf liegen lokal in IndexedDB. Exportiere wichtige Ergebnisse, bevor du die Websitedaten löschst.
Kann ich das Farbstudio offline nutzen?
Geladene Bedienelemente und Berechnungen können ohne Verbindung funktionieren. Die Seite und alle benötigten Skripte müssen aber bereits verfügbar sein. Der HEIC-Decoder wird bei Bedarf geladen, daher kann eine neu gewählte HEIC-Datei dafür eine Verbindung benötigen.
Technische Details
Farbwerte und Harmonien
Die Farbauswahl rechnet RGB in HEX, HSL, HSV und geschätztes CMYK um. Die Werte sind gerundet und die Formatfelder schreibgeschützt. Sechs Harmonien verschieben den Farbton oder variieren die Helligkeit. Der CMYK-Ausgabe fehlt ein Drucker-ICC-Profil.
Bildvorschau und Farbextraktion
Die Canvas-Abtastung liest die skalierte Bildvorschau. Die automatische Extraktion gruppiert RGB-Stichproben mit K-Means zu einer Palette mit 1 bis 20 Farben. Die meisten Formate dekodiert der Browser. HEIC und HEIF haben einen lokalen Ersatzdecoder, GIFs eine Einzelbildsteuerung.
4 weitere anzeigenWeniger anzeigen
Berechnung des Textkontrasts
Das Verhältnis vergleicht die relative Leuchtdichte zweier sRGB-Vollfarben. AA verlangt 4,5:1 für normalen und 3:1 für großen Text. Für AAA gelten 7:1 und 4,5:1. Die Ergebnisse beruhen auf dem ungerundeten Verhältnis und belegen keine vollständige WCAG-Konformität.
CSS-Verläufe und Exportgrenzen
Lineare, radiale und konische Verläufe nutzen CSS-Verlaufsfunktionen. Mehrpunkt-Verläufe schichten radiale Verläufe. Tailwind erzeugt vereinfachten linearen Code, SVG ersetzt konische und Mehrpunkt-Typen durch lineare. PNG und JPG rendert Canvas mit 1200 × 600 Pixeln. Konische Exporte benötigen entsprechende Canvas-Unterstützung. Das feste Seitenverhältnis und die Farbmischung können von der CSS-Vorschau abweichen.
Paletten bearbeiten und exportieren
Sieben Vorlagen mit je vier Farben bilden den Ausgangspunkt. Farbfelder lassen sich ändern, hinzufügen, entfernen, sperren und sortieren. Der Export bietet PNG-, JPG- oder SVG-Farbstreifen, eine JSON-Datei und das Kopieren von CSS-Variablen. PNG und JPG erlauben 120 bis 7680 Pixel Breite. Speichere eine benannte Vorlage, um die Palette für spätere Besuche zu behalten.
Verlauf und Vorlagen im Browser
Der Verlauf enthält bis zu 20 letzte Einträge im gemeinsamen IndexedDB-Speicher des Farbstudios. Benannte Vorlagen speichern Farben und Moduseinstellungen lokal. Verfügbarkeit und Aufbewahrung hängen vom Browser ab. Eine automatische Gerätesynchronisierung gibt es nicht.