Farbe & Farbpaletten-Studio

Professionelles Farbkonvertierungs- und Paletten-Studio mit Unterstützung für HEX, RGB, HSL, HSV, CMYK, Tailwind 50-950 Farbabstufungen, WCAG 2.1 Kontrastprüfung und harmonische Farbschemata.

Farbe an nachfolgende Tools weiterleiten
#3B82F6
rgb(59, 130, 246)
Lesbarkeit auf Weiß (WCAG)
3.68:1
AA FAILAAA FAIL
Lesbarkeit auf Schwarz (WCAG)
5.71:1
AA PASSAAA FAIL

Farbraum-Konvertierungen

HEX
#3B82F6
RGB
rgb(59, 130, 246)
RGBA
rgba(59, 130, 246, 1)
HSL
hsl(217, 91%, 60%)
HSLA
hsla(217, 91%, 60%, 1)
HSV / HSB
hsv(217, 76%, 96%)
CMYK
cmyk(76%, 47%, 0%, 4%)
CSS Variable
--color: #3B82F6;

RGB-Kanäle

R (Red)59
G (Green)130
B (Blue)246

HSL-Farbton & Sättigung

H (Hue)217°
S (Saturation)91%
L (Lightness)60%

Tailwind 50 ~ 950 Farbton-Generator

50
#EDF3FD
100
#D5E4FB
200
#A9C8F9
300
#73A6F7
400
#3780F6
500
#0960EC
600
#054FC7
700
#04409F
800
#043076
900
#04204E
950
#02122C

Harmonische Farbpaletten

Komplementär (Complementary)
Analog (Analogous)
Triadisch (Triadic)
Tetradisch (Tetradic)
Geteilt-Komplementär

Weiter mit

Setzen Sie Ihren Workflow mit diesen nächsten Schritten fort
Bild-Farbpalette

Intelligenter Bildfarb-Extraktor und Pixel-Farbpipette mit K-Means-Clustering-Algorithmus, CSS-Variablen, Tailwind-Token-Export und PNG-Paletten-Download.

SVG-Optimierer

Visueller SVG-Code-Minimierer zur Entfernung redundanter XML-Deklarationen, Editor-Metadaten, Rundung von Koordinaten-Fließkommazahlen und Export als React JSX-Komponente.

Ähnliche Werkzeuge

Bild-Editor

Bild hochladen ➔ Zuschneiden, drehen, Farbfilter anwenden und mit Markup-Werkzeugen beschriften

Bildkomprimierung

Mehrere Bilder ablegen ➔ Qualität und Format anpassen ➔ Dateigröße in MB verringern und als ZIP laden

QR-Code-Studio

Professioneller QR-Code-Generator und lokaler Offline-Scanner mit Unterstützung für URL, WLAN, vCard, Logo-Einbettung, Fehlerkorrektur und SVG/PNG-Download.

100 % lokale Verarbeitung im Arbeitsspeicher · Kein Daten-Upload

Bedienungsanleitung

  • 1. Wählen Sie eine Farbe oder geben Sie einen Farbcode (HEX/RGB/HSL/CMYK) ein.
  • 2. Betrachten Sie Konvertierungen, WCAG-Werte und die 50-950 Tailwind-Schattierungen.
  • 3. Kopieren Sie die Tailwind-Konfiguration oder CSS-Variablen für Ihr Frontend.

Technische Vorteile & Datenschutz

  • 1. Präzise Berechnung der relativen Helligkeit gemäß WCAG 2.1-Standards.
  • 2. Verknüpfte RGB- und HSL-Schieberegler mit Alpha-Transparenzkanal.
  • 3. 100 % lokal im Browser ausgeführt ohne Serveranfragen.

Häufig gestellte Fragen (FAQ)

Q: Wie wird die Textlesbarkeit bewertet?
A: Nach WCAG 2.1 erfordert normaler Fließtext ein Mindestkontrastverhältnis von 4,5:1 für Stufe AA und 7,0:1 für Stufe AAA.
Q: Kann die Farbe an Bildwerkzeuge übergeben werden?
A: Ja, über das Weiterleitungsmenü können Sie den Hex-Code direkt an den Bild-Editor senden.