Farbwähler

Wähle eine beliebige Farbe und erhalte ihre HEX-, RGB-, HSL- und OKLCH-Werte, ihren Kontrast zu Weiß und Schwarz, eine Skala aus Tints und Shades und passende Farben.

So nutzt du den Farbwähler

  1. Ziehe im OKLCH-Farbwähler, gib einen Hex-Code ein oder öffne den Farbwähler deines Browsers, um eine Farbe auszuwählen. Die Seitenadresse folgt deiner Farbe, sodass du sie teilen kannst.
  2. Lies die Farbe in HEX, RGB, HSL, OKLCH und Display P3 ab und kopiere jeden Wert mit seinem Kopieren-Button.
  3. Prüfe den Kontrast zu Weiß und Schwarz, mit WCAG-Verhältnissen und APCA-Werten.
  4. Scrolle nach unten zu einer Skala aus Tints und Shades, zur Darstellung der Farbe bei Farbenblindheit, zu passenden Harmonien und ähnlichen benannten Farben.

Das kannst du damit machen

  • OKLCH-Farbwähler

    Wähle Helligkeit, Chroma und Farbton mit einem Farbwähler auf Basis von OKLCH, auch Farben jenseits von sRGB, mit einem Gamut-Bericht für sRGB, Display P3 und Rec. 2020.

  • Alle Formate

    HEX-, RGB-, HSL-, OKLCH- und Display-P3-Werte, dazu ein CSS-Snippet zum Einfügen in dein Stylesheet.

  • Kontrastprüfung

    WCAG-2-Verhältnisse und APCA-Werte für deine Farbe als Text und als Hintergrund auf Weiß und Schwarz.

  • Skala aus Tints und Shades

    Eine OKLCH-Skala rund um deine Farbe, die du im Tailwind-Skalen-Generator weiterbearbeiten kannst.

  • Ansichten bei Farbenblindheit

    Sieh, wie sich die Farbe bei simulierten Farbsehschwächen verändert.

  • Harmonien und Namen

    Passende Farbharmonien, die sich im Generator öffnen lassen, und die nächsten benannten Farben.

Häufige Fragen

Wie wähle ich online eine Farbe aus?

Ziehe im OKLCH-Farbwähler, gib einen Hex-Code ein oder nutze den Farbwähler deines Browsers. Die Werte der Farbe aktualisieren sich dabei laufend, und du kannst jeden davon kopieren.

Was ist ein HEX-Farbcode?

Ein Hex-Code ist eine sechsstellige Hexadezimalzahl, die mit # beginnt, zum Beispiel #E77B80. Die drei Ziffernpaare geben die Anteile von Rot, Grün und Blau an, jeweils von 00 bis FF, also dezimal von 0 bis 255.

Was ist OKLCH?

OKLCH ist ein Farbformat mit drei Teilen: Helligkeit, Chroma und Farbton. Es basiert auf einem Farbraum, in dem gleiche Zahlenschritte auch wie gleich große visuelle Schritte aussehen. Deshalb verschiebt eine Änderung der Helligkeit den sichtbaren Farbton nicht so, wie es bei HSL passiert. CSS unterstützt es mit oklch().

Wie finde ich den Namen einer Farbe anhand ihres Hex-Codes?

Gib den Hex-Code ein. Die Seite zeigt die nächste benannte Farbe, und eine Farbe, die genau einem Namen entspricht, hat im Verzeichnis der Farbnamen eine eigene Seite.

Wie nehme ich eine Farbe aus einem Bild oder vom Bildschirm auf?

Nutze den Farbwähler für Bilder, um ein Foto auszuwerten, oder die GetColors-Erweiterung für Chrome, um mit ihrer Pipette jede Farbe auf dem Bildschirm aufzunehmen.