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 mehr oder weniger Nachkommastellen, stell oben Precision um (2, 3, 4, 5 oder 8; Standard 3). Das ist praktisch, wenn oklch() zu lang wird oder du es für die Doku gerundet haben willst.
Klick den Copy-Button neben dem gewünschten Format. Fertig — der Wert liegt in der Zwischenablage.

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.7 : 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.
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. Direkt daneben verrät der Color Blindness Simulator, ob die Kombination auch bei Rot-Grün-Schwäche unterscheidbar bleibt.

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 dritten oder vierten Farbpunkt hinzu und gibst 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-Zeile, wenn du mit Utility-Klassen arbeitest. (Beachte den Hinweis: Tailwind kann nativ nur lineare Verläufe mit zwei bis drei Stops.)

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 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.
Sortier die Palette mit den Sort-Schaltern nach Lightness, Saturation oder Hue, um Struktur hineinzubringen — etwa von hell nach dunkel für eine Abstufung. Die eigene Dominant-Color-Karte bleibt dabei stehen.
Wähl im Export-Menü das Zielformat — CSS Variables, SCSS Variables, Tailwind Config, JSON, Array (JS) oder Array (PHP) — und kopier den Block direkt in dein Projekt.

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.