logo
GeekFormat

Farbkonverter

最接近的 CSS 颜色名: mediumseagreen

RGB

R
G
B
A

HSL

H
S
L

HSV

H
S
V
HEX#22c55e
RGBrgb(34, 197, 94)
RGBArgba(34, 197, 94, 1)
HSLhsl(142, 71%, 45%)
HSLAhsla(142, 71%, 45%, 1)
HSVhsv(142, 83%, 77%)
HWBhwb(142, 13%, 23%)
CMYKcmyk(83%, 0%, 52%, 23%)
XYZxyz(22.64, 41.08, 17.32)
LABlab(70, -62, 40)
LCHlch(70, 74, 147)
OKLABoklab(1, 0, 0)
OKLCHoklch(1, 0, 180)

WCAG 对比度检查

白字
2.28:1
AA ✗AAA ✗
黑字
9.22:1
AA ✓AAA ✓

Online-Farbkonverter mit Ein-Klick-Konvertierung zwischen 14 Farbformaten einschließlich HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ, LAB, LCH, OKLAB und OKLCH. Es verfügt über eine integrierte Farbauswahl für Echtzeitanpassungen, WCAG-Kontrastprüfung, Farbharmonie-Schemata, Schattierungsgenerierung, Stapelkonvertierung und Bildfarbenextraktion. Alle Berechnungen laufen vollständig lokal in Ihrem Browser ab — keine Datei-Uploads erforderlich, perfekt für Designer und Frontend-Entwickler.

Ähnliche Tools

Farbenblindheits-Simulator

Bildfilter

CSS Formatter

Einheitenrechner

Währungsrechner

Bild konvertieren

Anwendungsfälle

  • Konvertieren von HEX-Werten aus Design-Mockups nach RGB/HSL für CSS-Stile in der Frontend-Entwicklung oder nach RGBA, wenn Transparenz benötigt wird
  • Vereinheitlichung von Farbwertformaten beim Wechsel zwischen Designwerkzeugen wie Figma, Sketch und Photoshop für UI/UX-Designer
  • Konvertieren von Bildschirm-RGB-Werten nach CMYK als Referenz während der frühen Druckproduktionskommunikation
  • Überprüfen von Kontrastverhältnissen zwischen Text- und Hintergrundfarben für WCAG AA/AAA-Konformität im barrierefreien Design
  • Schnelles Generieren einer vollständigen Ton-in-Schattierung-Familie zum Erstellen von Designsystemen mithilfe des Schattierungsgenerators
  • Generieren professioneller Farbschemata (Komplementär, Analog usw.) für Branding oder Plakatdesign mithilfe der Farbharmonie
  • Extrahieren dominanter Farben aus Referenzbildern oder Fotos zur Inspiration (Bild-Farbpipette)
  • Stapelverarbeitung mehrerer Farbwerte aus Design-Mockups und gleichzeitiges Konvertieren in die benötigten Formate
  • Bequemes Anpassen von Helligkeit und Sättigung mit HSL oder OKLCH beim Schreiben von CSS-Zuständen wie Hover
  • Erstellen perzeptuell gleichmäßiger Designsystem-Farben mithilfe des modernen CSS-Farbraums OKLCH
  • Lehren von Farbraumprinzipien mit interaktivem visuellem Vergleich, wie verschiedene Formate dieselbe Farbe darstellen
  • Schnelles Finden des englischen CSS-Farbnamens für einen beliebigen Wert zur einfachen Referenz und Kommunikation

Funktionen

  • Konvertierung von 14 Farbformaten: Unterstützung für HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ, LAB, LCH, OKLAB, OKLCH und benannte CSS-Farben
  • Intelligente Eingabeerkennung: Fügen Sie ein beliebiges Farbformat ein und es wird automatisch erkannt; unterstützt Kurzschreibweise #rgb, #rrggbbaa mit Alpha, rgb(), hsl() und CSS-Farbnamen
  • Echtzeit-Schieberegler-Anpassungen: RGB Rot/Grün/Blau, HSL Farbton/Sättigung/Helligkeit, HSV-Schieberegler für sofortige WYSIWYG-Farbanpassung
  • Alpha-Transparenz-Unterstützung: RGBA- und HSLA-Konvertierung mit Alphakanal, unterstützt sowohl prozentuale als auch dezimale Deckkraftformate
  • CSS-Farbnamenabgleich: Findet automatisch die nächste gelegene standardmäßige benannte CSS-Farbe (über 140 Optionen) zur schnellen Referenz
  • WCAG-Kontrastprüfer: Echtzeitberechnung der Kontrastverhältnisse gegenüber weißem und schwarzem Text mit automatischen Bestanden/Nicht bestanden-Indikatoren für AA (≥4,5:1) und AAA (≥7:1)
  • Farbharmonie-Generator: Ein-Klick-Generierung von 5 klassischen Schemata — Komplementär, Analog, Triadisch, Split-Komplementär und Tetradisch
  • Schattierungsgenerierung: Sowohl herkömmliche RGB-gemischte Schattierungen als auch perzeptuell gleichmäßige OKLCH-Schattierungen verfügbar, generieren sofort 11 Helligkeitsstufen
  • Stapelkonvertierung: Verarbeiten Sie mehrere Farbwerte gleichzeitig mit mehrzeiliger Eingabe — ideal für die Verarbeitung von Designsystem-Farbpaletten
  • Bild-Farbpipette: Laden Sie ein Bild hoch, um automatisch 16 dominante Farben zu sampeln und zu extrahieren, hervorragend zum Extrahieren von Paletten aus Referenzen oder Fotos
  • Ein-Klick-Kopie: Kopierschaltfläche neben jedem Farbformat zum sofortigen Kopieren in Standardnotation — bereit zum direkten Einfügen in CSS oder Designsoftware
  • Zufallsfarben-Generator: Generieren Sie Zufallsfarben mit einem Klick für schnelle Inspiration
  • Reine browserbasierte Verarbeitung: Alle Farbberechnungen laufen lokal in Ihrem Browser ohne Server-Uploads — funktioniert sofort ohne Registrierung
  • Responsives Design: Funktioniert nahtlos auf Desktop, Mobilgerät und Tablet — passen Sie Farben an und kopieren Sie Werte bequem auf dem Telefon

Anleitung

  1. Geben Sie einen beliebigen Farbformatwert in das obere Eingabefeld ein, klicken Sie auf das Farbfeld, um die Auswahl zu verwenden, oder ziehen Sie die RGB/HSL/HSV-Schieberegler zum Anpassen
  2. Das Werkzeug konvertiert automatisch in Echtzeit in alle 14 Formate einschließlich HEX, RGB, RGBA, HSL, HSV, CMYK, OKLCH
  3. Wechseln Sie zu 'Farbharmonie' für Schemata, 'Schattierungen' für Ton/Schattierungsrampen oder 'Stapel/Pipette' für Stapelkonvertierung oder Bildfarbenextraktion
  4. Klicken Sie auf die Kopierschaltfläche neben einem beliebigen Farbformat, um die Standardnotation direkt zur Verwendung zu kopieren

Häufig gestellte Fragen

Welche Farbformate unterstützt der Farbkonverter?

Er unterstützt die Konvertierung zwischen 14 gängigen Farbformaten: HEX (3-stellige Kurzschreibweise und 8-stellig mit Alpha), RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ (CIE 1931 mit D65-Illuminant), CIE LAB, LCH, OKLAB, OKLCH sowie über 140 standardmäßige benannte CSS-Farben. Geben Sie ein beliebiges Format ein, um es automatisch in alle anderen zu konvertieren.

Wie verwende ich dieses Farbkonvertierungswerkzeug?

Es ist ganz einfach: 1) Geben Sie einen beliebigen Farbwert in das obere Eingabefeld ein — zum Beispiel #22c55e, rgb(34,197,94), hsl(142,71%,45%) oder sogar einen Farbnamen wie Grün; 2) Oder klicken Sie auf das Farbfeld, um die Auswahl zu verwenden, oder ziehen Sie die RGB/HSL/HSV-Schieberegler für Echtzeitanpassungen; 3) Alle 14 Formatkonvertierungen werden sofort unten angezeigt — klicken Sie auf die Kopierschaltfläche neben einem beliebigen Format, um es in die Zwischenablage zu kopieren.

Was ist der Unterschied zwischen HEX, RGB und HSL? Wo werden die einzelnen verwendet?

HEX ist die gebräuchlichste hexadezimale Notation für das Web — #ff0000 für Rot — weit verbreitet in CSS und Design-Übergabedateien. RGB stellt Farben mit Werten von 0-255 für Rot, Grün und Blau dar, die Grundlage der Bildschirmanzeige. HSL verwendet Farbton (0-360°), Sättigung und Helligkeit, was sich besser an die menschliche Farbwahrnehmung anpasst und für Designer beim Anpassen von Farben intuitiver ist. CMYK verwendet Prozentsätze von Cyan-, Magenta-, Gelb- und Schwarztinte für den Druck. OKLCH ist ein moderner perzeptuell gleichmäßiger Farbraum, der visuell glatte Verläufe und Schattierungsrampen erzeugt.

Was ist das WCAG-Kontrastverhältnis? Welches Verhältnis erfüllt die Barrierefreiheitsstandards?

Das WCAG-Kontrastverhältnis misst den Luminanzunterschied zwischen Textfarbe und Hintergrundfarbe und stellt sicher, dass Inhalte für Benutzer mit Sehbehinderungen lesbar sind. Gemäß den Web Content Accessibility Guidelines: Normaler Fließtext benötigt ≥4,5:1 für Stufe AA (bestanden) und ≥7:1 für Stufe AAA (ausgezeichnet); großer Text (≥18pt fett oder ≥24pt normal) benötigt ≥3:1 für AA. Das Werkzeug zeigt Echtzeit-Kontrastverhältnisse gegenüber weißem und schwarzem Text mit automatischen Bestanden/Nicht bestanden-Indikatoren für die AA- und AAA-Standards an.

Was bedeutet das A in RGBA? Wie stelle ich Transparenz ein?

Das A in RGBA steht für Alphakanal, der die Transparenz steuert — die Werte reichen von 0 (vollständig transparent) bis 1 (vollständig deckend). Zum Beispiel ist rgba(34,197,94,0.5) halbtransparentes Grün. Passen Sie die Transparenz mit dem Alpha-Schieberegler an; die Konvertierungsergebnisse zeigen sowohl RGBA- als auch HSLA-Formate mit Alpha an. HEX unterstützt auch Transparenz durch Hinzufügen von zwei Hexadezimalstellen nach der 6-stelligen Farbe — zum Beispiel stellt #22c55e80 eine Deckkraft von 50 % dar.

Was sind OKLCH und LCH? Wie unterscheiden sie sich von HSL?

LCH und OKLCH sind perzeptuell gleichmäßige Farbräume, in denen L für Helligkeit, C für Buntheit (Sättigung) und H für Farbton stehen. Ihr größter Vorteil gegenüber HSL ist: Farben mit dem gleichen L-Wert erscheinen visuell tatsächlich gleich hell, was für Designsysteme entscheidend ist — wenn Sie Paletten mit unterschiedlichen Farbtönen, aber gleicher Helligkeit mit HSL generieren, erscheinen manche dunkler als andere, aber OKLCH garantiert gleichmäßige wahrgenommene Helligkeit. OKLCH ist neuer als LAB/LCH mit einfacheren Berechnungen und genauerer Farbvorhersage, empfohlen in modernem CSS (CSS Color Level 4).

Wie verwende ich die Bild-Farbpipetten-Funktion?

Wechseln Sie zur Registerkarte 'Stapel/Pipette', klicken Sie auf Hochladen, um ein Bild auszuwählen — das Werkzeug skaliert Bilder automatisch auf ein 100×100-Raster und extrahiert 16 Farben aus gleichmäßig verteilten Positionen, wobei Farbfelder und Farbwerte angezeigt werden. Klicken Sie auf ein beliebiges Farbfeld, um diese Farbe als Ihre Hauptfarbe für weitere Anpassungen und Konvertierungen festzulegen. Perfekt zum schnellen Extrahieren von Paletten aus Referenzbildern, Design-Mockups oder Fotos.

Welche Farbharmonie-Schemata sind verfügbar und wie verwende ich sie?

Das Werkzeug bietet 5 klassische Harmonie-Schemata: 1) Komplementär: Farben im Abstand von 180° für hohen Kontrast; 2) Analog: Farben im Abstand von 30° für natürliche Harmonie; 3) Triadisch: Farben im Abstand von 120° für lebendige Balance; 4) Split-Komplementär: Grundfarbe + 30° auf jeder Seite der Komplementärfarbe für Kontrast mit Sanftheit; 5) Tetradisch (Rechteck): Vier Farben im Abstand von 90° für reiche Vielfalt. Wechseln Sie zur Registerkarte 'Farbharmonie', um generierte Schemata anzuzeigen — klicken Sie auf ein beliebiges Farbfeld, um es als Ihre Hauptfarbe festzulegen.

Können CMYK-Konvertierungsergebnisse direkt für den Druck verwendet werden?

Sie eignen sich gut als Referenz, aber beachten Sie: Bildschirme verwenden additive RGB-Farbe (Lichtemission), während der Druck subtraktives CMYK (Tintenreflexion) verwendet. Diese haben unterschiedliche Farbumfänge — einige leuchtende RGB-Farben (wie lebendige Grüne und Blaue) können mit CMYK-Tinten nicht genau reproduziert werden, sodass eine gewisse Farbverschiebung auftritt. Das Werkzeug verwendet Standard-RGB-zu-CMYK-Konvertierungsformeln, geeignet für frühe Kommunikation und schnelle Referenz. Für die endgültige Druckproduktion empfehlen wir die Verwendung professioneller Designsoftware mit geeigneten ICC-Farbprofilen für den Digitalproof.

Wie funktioniert die Stapelkonvertierung? Wie viele Farben kann ich gleichzeitig konvertieren?

Wechseln Sie zur Registerkarte 'Stapel/Pipette', geben Sie eine Farbe pro Zeile in das Textfeld ein (mischen Sie frei HEX/RGB/HSL/CSS-Farbnamen), klicken Sie dann auf Stapelkonvertierung, um alle Farben auf einmal zu verarbeiten. Die Ergebnisse zeigen Farbfelder und HEX-Werte für jede an. Es gibt keine theoretische Begrenzung, aber bei Hunderten von Farben empfehlen wir die stufenweise Verarbeitung, um Browser-Verzögerungen zu vermeiden.

Kann ich den Farbkonverter auf dem Mobilgerät verwenden?

Ja. Das Werkzeug verwendet responsives Design und funktioniert perfekt auf Mobilgeräten, Tablets und Desktop-Bildschirmen aller Größen. Auf dem Mobilgerät können Sie weiterhin Farbwerte eingeben, Schieberegler ziehen, um Farben anzupassen, Konvertierungen anzuzeigen und Werte zu kopieren — alle Funktionen entsprechen dem Desktop-Erlebnis. Und da es sich um reine lokale Berechnung handelt, verbraucht es keine mobilen Daten.

Was bedeutet es, wenn die Eingabe 'nicht erkanntes Farbformat' anzeigt?

Überprüfen Sie das Eingabeformat: 1) HEX muss mit # beginnen (optional), gefolgt von 3, 6 oder 8 Hexadezimalzeichen (0-9/a-f) — #f00, #ff0000, #ff0000ff sind alle gültig; 2) RGB-Format muss rgb(r,g,b) mit drei Werten von 0-255 sein, getrennt durch Kommas; 3) HSL-Format ist hsl(h,s%,l%) mit Farbton 0-360°, Sättigung und Helligkeit 0-100%; 4) CSS-Farbnamen müssen Standardnamen wie Rot/Blau/Grün sein — chinesische Farbnamen werden nicht unterstützt.

Warum sehen konvertierte Farben in verschiedenen Programmen unterschiedlich aus?

Dies ist ein normales Farbmanagement-Verhalten: Verschiedene Programme, Monitore und Betriebssysteme können unterschiedliche Farbprofile verwenden (sRGB, Display P3, Adobe RGB), was zu leichten visuellen Unterschieden für denselben Farbwert führt. Webseiten verwenden standardmäßig den sRGB-Farbraum — wenn Sie Adobe RGB- oder Display P3-Profile in Programmen wie Photoshop verwenden, müssen Sie beim Exportieren nach sRGB konvertieren, um eine konsistente Webanzeige zu gewährleisten.

Welches Farbformat sollte ich in der Frontend-Entwicklung verwenden?

Modernes CSS unterstützt alle Farbformate: HEX ist am gebräuchlichsten mit der besten Kompatibilität und ist der Standard für Design-Übergaben; RGB/RGBA funktioniert gut, wenn Sie dynamische Deckkraftanpassungen oder Kanalmanipulationen benötigen; HSL ist am intuitivsten zum Schreiben von Farbvarianten direkt im Code (wie das Aufhellen eines Hover-Zustands durch einfaches Erhöhen von L); OKLCH ist die Zukunft, nativ unterstützt in CSS Color Level 4, mit perzeptueller Gleichmäßigkeit, die perfekt zum Generieren von Schattierungen und Verläufen geeignet ist — wählen Sie basierend auf den Kompatibilitätsanforderungen Ihres Projekts.

Wozu dient die Schattierungsgenerierungsfunktion? Was ist der Unterschied zwischen herkömmlichen und OKLCH-Schattierungen?

Die Schattierungsgenerierung erstellt sofort 11 Stufen (50-900) von Tönungen und Schattierungen für eine Farbfamilie, ideal zum Erstellen von Designsystem-Paletten (wie dem Farbsystem von Tailwind). Herkömmliche Schattierungen mischen im RGB-Raum einfach in Richtung Weiß — während sie numerisch gleichmäßig sind, können die Mitteltöne ungleichmäßig erscheinen. OKLCH-Schattierungen behalten Farbton und Buntheit bei, während nur die Helligkeit L angepasst wird, wodurch visuell glatte Übergänge zwischen Hell und Dunkel erzeugt werden — professioneller und ausgefeilter.

Über Farbräume und Farbformatkonvertierung

Farbkonverter gehören zu den am häufigsten verwendeten Werkzeugen für Designer und Frontend-Entwickler und bieten eine genaue Konvertierung zwischen verschiedenen Farbdarstellungen. Farbe selbst ist eine visuelle Wahrnehmung; um sie auf Computern und im Druck darzustellen, haben Menschen mehrere Farbmodelle (Farbräume) entwickelt, die dieselbe Farbe mithilfe verschiedener numerischer Systeme beschreiben, die jeweils für unterschiedliche Szenarien und Geräte geeignet sind.

Gängige Farbformate umfassen: HEX (hexadezimales RGB, die Standard-Web-Notation), RGB (Rot/Grün/Blau-Werte 0-255, die Grundlage der Bildschirmanzeige), HSL (Farbton/Sättigung/Helligkeit, am intuitivsten für die menschliche Farbanpassung), CMYK (Cyan/Magenta/Gelb/Schwarz-Prozentsätze für den Druck). In den letzten Jahren haben perzeptuell gleichmäßige Farbräume wie OKLCH an Popularität gewonnen, da sie mathematisch garantieren, dass Farben mit demselben Helligkeitswert visuell tatsächlich gleich hell erscheinen — entscheidend für den Aufbau von Designsystemen und das Generieren von Verläufen.

Warum zwischen Farbformaten konvertieren? Verschiedene Werkzeuge, Plattformen und Ausgabemedien verwenden unterschiedliche Farbformate: Web-CSS unterstützt HEX/RGB/HSL/OKLCH und mehr; Designsoftware wie Figma/Sketch verwendet standardmäßig HEX; Der Druck erfordert CMYK; und beim dynamischen Anpassen von Farben im Code (wie Hover-Zustände oder Deckkraftänderungen) sind HSL und OKLCH weitaus praktischer als HEX. Eine genaue Farbkonvertierung gewährleistet Farbkonsistenz zwischen Design-Mockups und endgültiger Implementierung.

WCAG-Kontrast ist ein wichtiger Standard für die Web-Barrierefreiheit, der den Luminanzunterschied zwischen Vordergrundtext und Hintergrundfarben misst, um die Lesbarkeit für Benutzer mit Sehbehinderungen zu gewährleisten. Normaler Fließtext benötigt ein Kontrastverhältnis von 4,5:1 (AA-Stufe), wichtige Inhalte werden mit 7:1 (AAA-Stufe) empfohlen. Unser Werkzeug berechnet dies in Echtzeit und hilft Designern, die Barrierefreiheit bei der Farbauswahl zu berücksichtigen, anstatt später zu korrigieren.

Farbharmonie ist eine klassische Farbtheorie, die auf dem Farbkreis basiert und visuell kohärente Kombinationen mithilfe geometrischer Positionen von Farbtönen um den Kreis herum erzeugt. Komplementärfarben erzeugen starken Kontrast, ideal für Schaltflächen und Akzente; Analogfarben sind harmonisch und natürlich für große Hintergrundbereiche; Triadische und tetradische Schemata bieten Balance und Reichtum für die Markenidentität. Das Werkzeug enthält 5 der am häufigsten verwendeten Harmonie-Schemata und generiert Paletten mit einem Klick.

Farb-Schattierungen/Tönungen sind Hell-zu-Dunkel-Variationen desselben Farbtons, die Grundlage für den Aufbau von Designsystemen (wie die 50-900-Paletten von Tailwind CSS). Herkömmliche RGB-Schattierungen mischen einfach in Richtung Weiß, erscheinen aber visuell ungleichmäßig; OKLCH-basierte Schattierungen behalten Farbton und Buntheit bei, während nur die Helligkeit angepasst wird, wodurch visuell glatte Hell-Dunkel-Übergänge erzeugt werden — der empfohlene Ansatz für moderne Designsysteme. Unser Werkzeug bietet beide Schattierungsstile zum Vergleich an.

Warum ist lokale Verarbeitung wichtig? Die Farbkonvertierung ist rein mathematisch und erfordert absolut keinen Daten-Upload auf Server. Alle Berechnungen in unserem Werkzeug laufen vollständig lokal in Ihrem Browser ab — öffnen Sie die Seite und verwenden Sie sie sofort ohne Registrierung oder Anmeldung, keine Bild- oder Farbdaten werden hochgeladen. Es ist schnell und datenschutzfreundlich — Sie können es auch für unveröffentlichte, vertrauliche Design-Mockup-Farben sicher verwenden.

Wichtiger Hinweis: Die Farbformatkonvertierung ist mathematisch präzise, aber aufgrund von Bildschirmfarbumfängen, Monitorkalibrierung und Druckprozessen kann derselbe Farbwert auf Geräten und Medien leicht unterschiedlich erscheinen. Bildschirme verwenden additives RGB (mehr Licht = heller), während der Druck subtraktives CMYK (mehr Tinte = dunkler) verwendet. Die beiden haben unterschiedliche Farbumfänge — einige hochgesättigte RGB-Farben können mit CMYK-Tinten nicht genau reproduziert werden. Konvertierungsergebnisse sind ideal für digitales Design und Web-Entwicklung; für die endgültige Druckproduktion empfehlen wir professionelle Farbmanagement-Software zum Proofen.

术语表

HEX
Hexadezimale Farbnotation mit # gefolgt von 6 Hexadezimalziffern, die RGB darstellen (zwei Ziffern pro Kanal, 00-FF) — #FF0000 für Rot, das gebräuchlichste Format für Web- und Designsoftware. Unterstützt 3-stellige Kurzschreibweise (z. B. #f00) und 8-stellige Notation mit Alpha.
RGB/RGBA
Stellt Farbe mit drei Werten von 0-255 für Rot, Grün und Blau dar; rgba() fügt einen Alphakanal für Transparenz hinzu (0-1). Das grundlegende Farbmodell für Bildschirmanzeigen.
HSL/HSLA
Stellt Farbe mit Farbton (0-360°), Sättigung (0-100%) und Helligkeit (0-100%) dar, passt sich besser an die menschliche Farbwahrnehmung an — intuitiver für Designer beim Anpassen von Farben.
HSV/HSB
Farbton, Sättigung, Wert/Helligkeit — ähnlich wie HSL, aber mit anderer Helligkeitsberechnung, häufig in Farbauswahlen in Designsoftware wie Photoshop zu finden.
HWB
Farbton, Weißanteil, Schwarzanteil — eine Ergänzung aus CSS Color Level 4, die intuitiver als HSL ist: Fügen Sie einfach Weiß oder Schwarz hinzu, um den Ton anzupassen.
CMYK
Prozentsätze von Cyan-, Magenta-, Gelb- und Schwarz- (Key-) Tinten, die in der Druckindustrie zur Darstellung von Tintenmischungsverhältnissen verwendet werden.
CIE LAB/LAB
Ein perzeptuell gleichmäßiger Farbraum, definiert von der Internationalen Beleuchtungskommission (CIE): L für Helligkeit (0-100), a für die Grün-Rot-Achse, b für die Blau-Gelb-Achse — entwickelt, damit numerische Abstände wahrgenommenen Farbunterschieden entsprechen.
LCH
Eine Polarkoordinatendarstellung, die aus LAB konvertiert wird: L Helligkeit, C Buntheit (Sättigung), H Farbton — perzeptuell gleichmäßiger als HSL, geeignet für professionelles Design, das präzise perzeptuelle Steuerung erfordert.
OKLAB/OKLCH
Eine neue Generation perzeptuell gleichmäßiger Farbräume, eingeführt 2020 — einfachere Berechnungen und genauere Farbtonvorhersage als LAB/LCH. OKLCH ist seine Polform, nativ unterstützt in modernem CSS und empfohlen für den Aufbau von Designsystemen.
WCAG-Kontrast
Das Luminanzverhältnis zwischen Vordergrundtext und Hintergrund, spezifiziert durch die Web Content Accessibility Guidelines: AA erfordert ≥4,5:1 für Fließtext, AAA erfordert ≥7:1 — gewährleistet Lesbarkeit für Benutzer mit Sehbehinderungen.
Farbharmonie
Farbtheorie basierend auf Positionen um den Farbkreis, die geometrische Beziehungen (Komplementär 180°, Analog 30° Abstand, Triadisch 120° Abstand usw.) verwendet, um visuell kohärente und ästhetisch ansprechende Kombinationen zu generieren.
Schattierungen/Tönungen
Ein Bereich von Hell-zu-Dunkel-Variationen desselben Farbtons, typischerweise generiert als 11 Stufen von 50 bis 900, verwendet in Designsystemen für verschiedene Anwendungen einer einzelnen Farbe (Hintergründe, Ränder, Text, Akzente).

Schnellreferenz zum Vergleich von 14 Farbformaten

Unten sind die Wertbereiche, reine Rotbeispiele und primäre Anwendungsfälle für jedes Farbformat aufgeführt:

FormatWertbereichReines Rot-BeispielPrimäre Anwendungsfälle
HEX#RRGGBB 00-FF#ff0000Web-CSS, Design-Übergabe — das universellste Format
RGBR/G/B: 0-255rgb(255,0,0)Grundlage der Bildschirmanzeige, Canvas/WebGL-Programmierung
RGBAPlus A: 0-1rgba(255,0,0,1)CSS mit Transparenzanforderungen, Überlagerungseffekte
HSLF:0-360°, S/H:0-100%hsl(0,100%,50%)Designer-Farbanpassung, dynamische Farbmanipulation im Code
HSVF:0-360°, S/W:0-100%hsv(0,100%,100%)Farbauswahlen in Designsoftware wie Photoshop
HWBF:0-360°, W/S:0-100%hwb(0,0%,0%)CSS Color 4 — intuitive Anpassung durch Hinzufügen von Weiß/Schwarz
CMYKC/M/G/S: 0-100%cmyk(0%,100%,100%,0%)Druck- und Verlagsindustrie
OKLCHL:0-1, C:0-0.4, F:0-360°oklch(0.63,0.24,29)Modernes CSS, Designsystem-Paletten, perzeptuell gleichmäßige Verläufe

Referenz zu WCAG-Barrierefreiheits-Kontraststandards

Minimale Kontrastanforderungen aus den Web Content Accessibility Guidelines (WCAG 2.1):

StufeKontrastverhältnis-AnforderungAnwendbarer TexttypHinweise
AA≥ 4,5:1Normaler Fließtext (<18pt normal oder <14pt fett)Minimaler bestandener Standard, rechtliche Konformitätsanforderung
AA≥ 3:1Großer Text (≥18pt normal oder ≥14pt fett)Große Überschriften können reduzierte Anforderungen haben
AAA≥ 7:1Normaler Fließtext (verbessert)Empfohlen für wichtige Inhalte, langes Lesen
AAA≥ 4,5:1Großer Text (verbessert)Ausgezeichnetes barrierefreies Design

Schnellreferenz zu 5 Farbharmonie-Schemata

Klassische Farbkombinationen basierend auf Farbkreiswinkeln — klicken Sie zum sofortigen Generieren:

SchematypFarbtonabstandFarbanzahlVisueller Effekt & Anwendungsfälle
Komplementär180° auseinander2 FarbenStarker Kontrast — ideal für Schaltflächen, Akzente, CTAs
Analog±30° benachbart3 FarbenHarmonisch und natürlich — hervorragend für große Hintergründe, Primärpaletten
Triadisch120° Abstand3 FarbenLebendig und ausgewogen — ideal für Branding, Illustration
Split-KomplementärBasis + ±30° der Komplementärfarbe3 FarbenKontrast mit Sanftheit — raffinierter als Komplementär
Tetradisch90° Abstand4 FarbenReich und vielfältig — ideal für komplexe Designs, Kinderprodukte

Privacy & Security

Dieser Farbkonverter führt alle Farbberechnungen, Bildfarbauswahlen und Stapelverarbeitungen vollständig lokal in Ihrem Browser mit reinem JavaScript im Browserspeicher aus. Die von Ihnen eingegebenen Farbwerte und hochgeladenen Bilder werden niemals über das Netzwerk an einen Server übertragen, noch protokolliert, zwischengespeichert oder gespeichert. Nach der Verarbeitung werden temporäre Daten beim Schließen oder Aktualisieren der Seite automatisch aus dem Browserspeicher gelöscht. Vertrauliche Inhalte wie unveröffentlichte Design-Mockup-Farben und Markenfarben können sicher ohne Risiko einer Offenlegung verwendet werden.

Authoritative References

Troubleshooting

Was bedeutet es, wenn die Eingabe 'nicht erkanntes Farbformat' anzeigt?

Überprüfen Sie: 1) HEX-Format verwendet gültige Hexadezimalzeichen (0-9, a-f, A-F) mit 3, 6 oder 8 Ziffern; # ist optional; 2) RGB/RGBA-Format erfordert drei oder vier Werte in Klammern — R/G/B 0-255, Alpha 0-1, getrennt durch Kommas; 3) HSL/HSLA-Format erfordert F 0-360, S und H als 0-100 Prozentwerte; 4) CSS-Farbnamen müssen standardmäßige englische Namen sein — chinesische Farbnamen werden nicht unterstützt.

Warum sieht die CMYK-Konvertierung anders aus als der tatsächliche Druck?

Dies ist zu erwarten: RGB und CMYK haben unterschiedliche Farbumfänge — viele leuchtende RGB-Farben können mit CMYK-Tinten nicht reproduziert werden. Das Werkzeug verwendet Standard-Konvertierungsformeln, die für die frühe Referenz geeignet sind. Für professionellen Druck: 1) Konvertieren Sie im Designprogramm in den CMYK-Modus; 2) Verwenden Sie korrekte ICC-Farbprofile; 3) Führen Sie einen Digitalproof durch.

Warum sieht dieselbe Farbe auf meinem Telefon anders aus als auf dem Computer?

Verschiedene Bildschirme haben unterschiedliche Farbumfangsabdeckung, Farbtemperatur, Helligkeit und Kalibrierung: Mac verwendet standardmäßig den breiten Display P3-Farbumfang, die meisten Windows-PCs verwenden sRGB, und mobile Bildschirme variieren. Für Webdesign wird empfohlen, sRGB als Basis für ein konsistentes Erscheinungsbild auf den meisten Geräten zu standardisieren.

Das Hochladen von Bildern für die Farbpipette reagiert nicht?

Bitte bestätigen Sie: 1) Sie laden ein Standardbildformat hoch (JPG/PNG/GIF/WebP); 2) Die Bilddatei ist nicht beschädigt; 3) Die Dateigröße ist nicht zu groß (empfohlen unter 5 MB). Die Bildfarbauswahl wird lokal in Canvas verarbeitet und niemals auf Server hochgeladen — Aktualisieren und erneutes Hochladen behebt normalerweise Probleme.