Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.
Wählt eine Farbe auf einem OKLCH-Feld: Die Helligkeit läuft nach oben, das Chroma läuft quer, und der Farbton ist der Streifen darunter. Diese Anordnung ist der ganze Sinn – im vertrauten HSV-Quadrat ist „dieselbe Farbe, ein bisschen weniger gesättigt“ eine diagonale Bewegung, die niemand findet, und hier ist es eine horizontale. Es nimmt außerdem eine Farbe vom Bildschirm auf, wo der Browser das erlaubt, und von einem Bild, das Sie ablegen, was überall funktioniert.
Auswählen
Die Helligkeit läuft im Feld nach oben, das Chroma nach rechts, und der Farbton ist der Streifen darunter. Schraffiert heißt: Die Farbe gibt es, aber sRGB kann sie nicht darstellen.
Diese Farbe
L
62,3
C
0,1880
H
259,8°
Schreibweisen
- hex
#3b82f6 - rgb
rgb(59 130 246) - hsl
hsl(217.22 91.22% 59.8%) - hwb
hwb(217.22 23.14% 3.53%) - lab
lab(54.619% 8.763 -65.791) - lch
lch(54.619% 66.372 277.59) - oklab
oklab(62.308% -0.0332 -0.1851) - oklch
oklch(62.308% 0.188 259.81) - named
#3b82f6
Aus einem Bild picken
Screenshot oder Foto hier ablegen
Klicken Sie irgendwo hinein, um dieses Pixel zu nehmen.
Alles bleibt in diesem Tab. Nützlich, wenn die EyeDropper-API fehlt, also in den meisten Browsern.
Schreibweisen im Stapel umrechnen? Der Farbkonverter macht das. Aus dieser einen Farbe eine ganze Palette bauen? Der Palettengenerator dreht sie in OKLCH weiter.
So funktioniert es
Setzen Sie zuerst den Farbton, dann bewegen Sie sich auf dem Feld
Der Streifen wählt den Farbton; das Feld zeigt dann jede Helligkeit und jedes Chroma, die bei diesem Farbton verfügbar sind. Es andersherum zu machen heißt, der Farbe hinterherzujagen, weil eine Farbtonänderung das ganze Feld neu zeichnet.
Oder nehmen Sie eine vom Bildschirm auf
„Vom Bildschirm aufnehmen“ öffnet die Browser-Pipette und liest jedes Pixel auf dem Desktop, auch in anderen Anwendungen. Sie existiert nur in Chromium-basierten Browsern; anderswo sagt der Knopf das, statt stillschweigend zu scheitern.
Oder legen Sie einen Screenshot ab und klicken Sie hinein
Das Bild-Panel unten nimmt jedes Bild an und gibt genau das Pixel zurück, das Sie anklicken. Das ist der Weg, der in jedem Browser funktioniert, und der, den Sie nehmen, wenn die Pipette fehlt.
Kopieren Sie in der Notation, die der Code will
Jede Notation wird auf einmal mit eigenem Kopierknopf aufgelistet. Nehmen Sie das Hex für ein Stylesheet, das überall funktionieren muss, und den `oklch()`-Wert, wenn die Farbe wichtiger ist als die Kompatibilität – das Hex ist eine gemappte Näherung, wann immer das Farbfeld außerhalb von sRGB liegt.
Speichern Sie die, die Sie vergleichen
„Diese speichern“ hält bis zu zwölf Farbfelder in einer Reihe, zu denen Sie zurückklicken können. Sie leben nur in der Seite – ein Neuladen löscht sie.
Häufige Fragen
Der Bildschirm-Pipettenknopf tut nichts Brauchbares. Warum?
Er braucht die EyeDropper-API, die nur Chromium-basierte Browser ausgeliefert haben – Chrome, Edge, Arc, Brave. Firefox und Safari haben es nicht, und es gibt keinen Polyfill dafür, weil das Lesen beliebiger Bildschirmpixel ein Privileg ist, das die Seite sich nicht selbst gewähren kann. Laden Sie stattdessen einen Screenshot in das Bild-Panel; er gibt dieselbe Antwort.
Warum ist ein großer Teil des Feldes schraffiert?
Diese Kombinationen aus Helligkeit und Chroma existieren in OKLCH, aber sRGB kann sie bei diesem Farbton nicht darstellen. Es ist eine echte Eigenschaft des Farbraums, kein Fehler, der Bereich wird also schraffiert, statt mit der nächsten darstellbaren Farbe gemalt – eine flache Farbwand dort wäre eine Lüge darüber, was Ihr Bildschirm kann. „In sRGB bringen“ senkt das Chroma, bis die Farbe passt, und hält Helligkeit und Farbton.
Behält die Pipette die Wide-Gamut-Präzision?
Nein. Die API gibt eine sRGB-Hex-Zeichenkette zurück, eine Display-P3-Farbe auf dem Bildschirm ist also bereits umgewandelt, wenn diese Seite sie sieht. Für eine P3-Farbe, deren Wert Sie kennen, tippen Sie stattdessen die Form `oklch()` oder `color(display-p3 ...)` in den Farbkonverter.
Wird das Bild, das ich ablege, irgendwohin hochgeladen?
Nein. Es wird in einen Canvas in diesem Tab dekodiert und dort Pixel für Pixel gelesen. Nichts verlässt den Browser, und das Schließen des Tabs verwirft es.
Eingabe aus
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Kontrast prüfen
Contrast Checker
Bewertet ein Paar aus Vorder- und Hintergrundfarbe nach WCAG 2 und APCA und schlägt die nächste bestehende Farbe vor.
Palettengenerator
Palette Generator
Baut aus einer Grundfarbe eine harmonische Palette nach Komplementär-, Triaden- und Analogregeln.
CSS-Verlaufsgenerator
CSS Gradient Builder
Baut lineare, radiale und konische Verläufe mit verschiebbaren Stopps und gibt das CSS aus, in sRGB oder OKLCH.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Farbabstufungen
Tint & Shade Scale
Erzeugt aus einer Farbe eine Helligkeitsskala von 50 bis 950 mit wahrnehmungsgleichen Schritten, fertig als Design-Tokens.
Kontrast prüfen
Contrast Checker
Bewertet ein Paar aus Vorder- und Hintergrundfarbe nach WCAG 2 und APCA und schlägt die nächste bestehende Farbe vor.
Farbpalette extrahieren
Palette Extractor
Zieht eine Palette aus N Farben aus einem Bild und exportiert sie als Hex, CSS-Variablen oder ASE-Farbfelder.
Palettengenerator
Palette Generator
Baut aus einer Grundfarbe eine harmonische Palette nach Komplementär-, Triaden- und Analogregeln.
Seitenverhältnis-Rechner
Aspect Ratio Calculator
Berechnet die fehlende Abmessung für ein Zielverhältnis und listet die Standardgrößen auf, die dazu passen.