# Colors — Anwendungsbeispiele

> Praxisnahe Durchläufe mit Colors: Farben in CSS-Formate übersetzen, Kontrast härten, Gradienten bauen, Elevation-Schatten und Paletten aus Bildern ziehen.

Source: https://www.jpkc.com/db/tools/colors/examples/

Zurück zur Übersicht: [Colors](https://www.jpkc.com/db/tools/colors/) · Tool live öffnen: [www.jpkc.com/tools/colors/](https://www.jpkc.com/tools/colors/)

Das [Manual](https://www.jpkc.com/db/tools/colors/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.

1. Öffne den [Color Picker](https://www.jpkc.com/tools/colors/) und tippe den Wert in das Feld **Enter a color value** (z. B. `#336699`). Der visuelle Picker und die Vorschau springen sofort mit.
2. 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.
3. 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.
4. 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.

1. Wähl im **Color Picker** deine Ausgangsfarbe.
2. 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.
3. 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.
4. **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.

1. Trag im **Color Picker** die **Textfarbe** ein (sie ist der Vordergrund des Contrast Checkers).
2. 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.
3. 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.
4. 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.
5. 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.

1. Wechsle in den Tab **Gradient Generator** und wähl den **Gradient Type** (meist **Linear**).
2. Leg die Richtung fest: entweder über eine der acht **Preset-Richtungen** oder per **Custom Angle** (Slider/Zahlenfeld, 0–360°).
3. 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.
4. 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.

1. Öffne den Tab **Box Shadow** und bleib im Sub-Tab **Shadow Palette**.
2. 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.
3. 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**.
4. 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.

1. 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.
2. Sofort erscheinen die **Dominant Color** und bis zu zehn weitere **Extracted Palette**-Farben.
3. 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.
4. 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](https://www.jpkc.com/db/tools/graphic/)** und wirfst das Ergebnis hier ein.

---

Noch tiefer: die [Übersicht](https://www.jpkc.com/db/tools/colors/) zum großen Bild, das [Manual](https://www.jpkc.com/db/tools/colors/manual/) für jede Option im Detail und die [Tipps & Tricks](https://www.jpkc.com/db/tools/colors/tips/) für Kniffe und Stolperfallen. Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/colors/).