Colors — Anwendungsbeispiele

Zurück zur Übersicht: Colors · Tool live öffnen: www.jpkc.com/tools/colors/

Das Manual erklärt jeden Bereich und jede Option im Detail. Diese Seite ergänzt das um konkrete Arbeitsabläufe: typische Aufgaben, Schritt für Schritt durchgespielt. Die Oberfläche ist auf Englisch — Tab- und Button-Namen stehen deshalb im Original, bei Bedarf mit deutscher Erläuterung.

Beispiel 1: Eine Marken-Farbe in alle CSS-Formate übersetzen

Du hast eine HEX-Farbe aus dem Styleguide und brauchst sie als oklch() fürs moderne CSS — oder als rgba() fürs Legacy-Stylesheet.

Öffne den Color Picker und tippe den Wert in das Feld Enter a color value (z. B. #336699). Der visuelle Picker und die Vorschau springen sofort mit.
Schau in die Karte Color Formats. Dieselbe Farbe steht dort in 14 Schreibweisen — von HEX über HSL und HWB bis OKLCh und den Wide-Gamut-Räumen.
Brauchst du kürzere oder genauere Werte, stell oben Precision um (2, 3, 4, 5 oder 8 signifikante Stellen; Standard 3). Das ist praktisch, wenn oklch() zu lang wird. Bedenk aber: Gezählt werden signifikante Stellen, mit 2 rundet das Tool also auch den Vorkommateil — aus dem LCH-Farbton 262 wird 260.
Klick den Copy-Button neben dem gewünschten Format. Fertig — der Wert liegt in der Zwischenablage.

Gehst du den umgekehrten Weg und tippst etwa ein sattes oklch(70% 0.25 145) ein, erscheint über den Formaten ein Hinweis, dass die Farbe außerhalb von sRGB liegt: HEX, RGB %, HSL und HWB zeigen dann nur eine Annäherung, OKLCH, Lab, Display P3 und Rec. 2020 den exakten Wert — denn innerhalb von P3 liegt dieses Grün noch. Drehst du die Chroma weiter auf, verlässt die Farbe irgendwann auch P3, und das P3-Feld zeigt ebenfalls nur noch eine Annäherung.

So wird aus einem einzelnen HEX-Code in Sekunden jede Notation, die dein Stylesheet, dein Design-Token oder dein Canvas-Code gerade verlangt.

Beispiel 2: Eine Farbpalette aus einer Ausgangsfarbe ableiten

Du hast eine Primärfarbe und brauchst dazu passende Akzent- und Abstufungstöne.

Wähl im Color Picker deine Ausgangsfarbe.
Geh in die Karte Color Harmonies. Für ein zweites, kräftiges Akzent nimmst du Complementary oder eine der beiden Split-Complementary-Farben; für einen ruhigen, verwandten Look die Analogous-Töne.
Brauchst du eine ganze Helligkeitsstaffel (etwa für Buttons, Hover-Zustände und Flächen), nutz Shades (dunkler), Tints (heller) und Tones (entsättigt) — die drei zusammen ergeben eine konsistente Skala um deine Basisfarbe.
Klick auf das jeweilige Swatch, um seinen HEX-Wert zu kopieren, und übernimm ihn in deine Token-Liste.

Weil die Harmonien im OKLCH-Raum gerechnet werden, wirken die Helligkeits- und Sättigungsschritte gleichmäßiger als bei einer reinen HSL-Rechnung.

Beispiel 3: Textkontrast nach WCAG und APCA absichern

Bevor eine Text-/Hintergrund-Kombination live geht, willst du wissen, ob sie barrierefrei ist.

Trag im Color Picker die Textfarbe ein (sie ist der Vordergrund des Contrast Checkers).
Roll runter zum Contrast Checker und setz im Feld Background Color die Hintergrundfarbe. Die Vorschau zeigt großen und kleinen Text live auf diesem Grund. Vertauscht? Der Swap-Button dreht Vorder- und Hintergrund um.
Lies das WCAG 2.1-Ergebnis: das Verhältnis (z. B. 4.70 : 1) und die vier Badges AA Large (≥ 3), AA Small (≥ 4,5), AAA Large (≥ 4,5) und AAA Small (≥ 7). Für normalen Fließtext ist AA Small die Messlatte.
Wirf zusätzlich einen Blick auf APCA: den Lc-Wert mit den Schwellen Body Text (Lc ≥ 75) und Large Text (Lc ≥ 60). APCA bewertet Helligkeit realistischer und ist der vorgeschlagene WCAG-3-Nachfolger.
Darunter steht der Block With color vision deficiency (WCAG ratio): dasselbe Verhältnis, wie es bei Protanopie, Deuteranopie, Tritanopie und Achromatopsie ankommt, jeweils mit AA, AA Large oder Fail. Fällt eine Zeile durch, hängt die Lesbarkeit an der Farbe statt an der Helligkeit.
Reicht es nicht, dunkle oder helle die Textfarbe im Picker nach — über Color Harmonies → Shades/Tints findest du eine Variante, die im selben Farbton bleibt, aber den Kontrast packt. Der Color Blindness Simulator darunter zeigt dir die Farbe selbst durch die Augen der verschiedenen Sehweisen.

Variante: halbtransparenter Text. Arbeitet dein Design mit gedimmtem Text — etwa rgba(0, 0, 0, 0.6) für Metadaten —, tipp genau diesen Wert ins Eingabefeld. Der Contrast Checker mischt die Farbe mit dem Hintergrund, bevor er misst, und nennt unter dem Verhältnis die tatsächlich sichtbare Farbe. So siehst du, was 60 % Deckkraft auf deinem Grund wirklich übrig lassen, statt dich vom Kontrast des reinen Schwarz täuschen zu lassen.

Beispiel 4: Einen CSS-Gradient für einen Hero-Bereich bauen

Du brauchst einen Verlauf als Hintergrund — schnell, aber konfigurierbar.

Wechsle in den Tab Gradient Generator und wähl den Gradient Type (meist Linear).
Leg die Richtung fest: entweder über eine der acht Preset-Richtungen oder per Custom Angle (Slider/Zahlenfeld, 0–360°).
Stell die Color Stops ein. Klick einen Farbwert an, um ihn im Picker zu ändern; über Add Stop fügst du einen weiteren Farbpunkt hinzu (bis zu zehn) und passt seine Position an (z. B. 50%). Keine Idee? Ein Preset liefert einen Startpunkt, den du dann anpasst.
Kopier unten das CSS Output in dein Stylesheet — oder die Tailwind CSS-Ausgabe, wenn du mit Utility-Klassen arbeitest. Wähl dafür oben in der Karte deine Version: v4 (Standard) schreibt etwa bg-linear-110 from-[#336699] from-0% to-[#66ccff] to-100% und kann jeden Winkel; v3 kennt nur acht Richtungen und liefert bei einem krummen Winkel zusätzlich den exakten Verlauf als Arbitrary-Wert. Hat dein Verlauf mehr als drei Stops oder Positionen in px, bekommst du in beiden Versionen eine bg-[…]-Klasse.

Beispiel 5: Weiche Elevation-Schatten als Design-Token erzeugen

Du willst ein konsistentes Schatten-System für drei Höhenstufen, statt jeden box-shadow von Hand zu raten.

Öffne den Tab Box Shadow und bleib im Sub-Tab Shadow Palette.
Setz unter Color die Background Color (Preview) auf den echten Untergrund deiner UI und lass Tint shadow with background hue an — so bekommt der Schatten einen leichten Farbstich aus dem Hintergrund und wirkt natürlicher als reines Schwarz.
Justier die Light Position (Angle/Distance) und das Tuning (Oomph für die Intensität, Crispy für die Schärfe, Resolution für die Zahl der Lagen — bei Normal nutzen die Stufen Low/Medium/High 2/3/6 Lagen). Die Vorschau zeigt sofort die drei Stufen Low/Medium/High.
Kopier die CSS Custom Properties (--shadow-elevation-low/medium/high) in dein Stylesheet und wende sie an mit box-shadow: var(--shadow-elevation-medium);. Brauchst du eine lauffähige Demo, nimm stattdessen das Full HTML + CSS Snippet.

Für einen einzelnen, von Hand gestapelten Schatten (etwa Ambient plus Kontakt) wechselst du in den Sub-Tab Single Shadow und legst die Lagen einzeln an — inklusive inset für innenliegende Schatten.

Beispiel 6: Eine Palette aus einem Bild ziehen und exportieren

Aus einem Foto oder Logo soll eine abgestimmte Farbpalette werden.

Geh in den Tab Image Color Scheme und zieh ein Bild in die Drag & drop-Zone (oder wähl es über Browse files). Erlaubt sind PNG, GIF, JPG, WebP, AVIF, BMP und SVG bis 25 MB. Das Bild bleibt auf deinem Gerät — die Auswertung läuft lokal im Browser.
Sofort erscheinen die Dominant Color und bis zu zehn weitere Extracted Palette-Farben. Ein Logo mit wenigen Farben liefert entsprechend weniger Zeilen.
Sortier die Palette mit den Sortier-Schaltern im Kartenkopf nach Lightness, Saturation oder Hue, um Struktur hineinzubringen — Lightness etwa ordnet von dunkel nach hell und ergibt so eine Abstufung. Die eigene Dominant-Color-Karte bleibt dabei stehen.
Wähl in der Karte Export das Zielformat — CSS Variables, SCSS Variables, Tailwind v4 (@theme), Tailwind v3 (config), JSON, Array (JS) oder Array (PHP) — und kopier den Block direkt in dein Projekt. Mit Tailwind v4 bekommst du einen @theme-Block, danach stehen dir Klassen wie bg-palette-1 oder text-palette-3 zur Verfügung.
Exportier die Palette, bevor du die Seite schließt: Beim nächsten Aufruf wertet das Tool wieder sein Standardbild aus.

Tipp: Soll das Motiv vorher zugeschnitten oder verkleinert werden, erledigst du das im Graphic Editor und wirfst das Ergebnis hier ein.

Noch tiefer: die Übersicht zum großen Bild, das Manual für jede Option im Detail und die Tipps & Tricks für Kniffe und Stolperfallen. Ausprobieren kannst du alles direkt im Tool.