# Colors — Manual

> Vollständige Funktionsbeschreibung von Colors: Color Picker mit 14 Formaten und 12 Harmonien, Contrast Checker, Gradient- und Shadow-Builder, Palette-Extraktion.

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

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/)

Dieses Manual beschreibt jeden der fünf Bereiche von **Colors** mit allen Optionen. Die Oberfläche des Tools ist auf Englisch — die Tab-, Feld- und Button-Bezeichnungen stehen hier deshalb in ihrer englischen Original-Schreibweise (mit deutscher Erläuterung), damit du dich im Interface wiederfindest.

## Architektur und Bedienung

Colors läuft **vollständig in deinem Browser**. Es gibt keinen Server-Roundtrip, kein API und keinen Upload — auch nicht bei der Bild-Palette: Das Bild wird lokal über `FileReader` eingelesen und im Browser per Canvas ausgewertet, es verlässt dein Gerät nicht. Gespeichert wird nur Weniges, ausschließlich im **localStorage** des Browsers: deine zuletzt gewählte Farbe und die zuletzt extrahierte Palette. Die Farb-Mathematik übernehmen die Bibliotheken Color.js (samt der Color.js Elements für den visuellen Picker), Coloris, TinyColor2 und Color Thief.

Die fünf Bereiche sind als Tab-Leiste oben angeordnet: **Color Picker**, **Gradient Generator**, **Shadow Gradient**, **Box Shadow** und **Image Color Scheme**. Jeder ist unten ein eigener Abschnitt.

## Color Picker

Der umfangreichste Bereich. Hier wählst du eine Farbe und liest sie in vielen Formaten ab, leitest Harmonien ab und prüfst Kontrast und Farbsehschwäche.

### Color Input und Preview

Ganz oben steht ein visueller **Color Picker** (das `<color-picker>`-Element aus den Color.js Elements, im sRGB-Raum, mit Alpha-Regler). Darunter ein Textfeld (`Enter a color value`), das **jeden gültigen CSS-Farbwert** annimmt — `hex`, `rgb()`, `hsl()`, `oklch()`, `lab()`, `color(display-p3 …)` und so weiter. Picker und Feld sind synchron: Was du im einen änderst, übernimmt das andere. Der Default ist `#336699`. Ein Copy-Button kopiert den HEX-Wert. Die große **Color Preview** zeigt die Farbe als Fläche.

### Web Safe Colors

Rechts liegt die klassische **216-Farben-Web-Safe-Tabelle** (die „browsersicheren" Farben aus den 6er-Stufen `00/33/66/99/CC/FF`). Ein Klick auf ein Feld übernimmt die Farbe in den Picker. Nostalgisch, aber praktisch als schnelle, gerasterte Farbauswahl.

### Color Formats

Die Karte **Color Formats** gibt die aktuelle Farbe in **14 Formaten** aus, jedes mit eigenem Copy-Button. Die Anzahl der Nachkommastellen stellst du oben über **Precision** ein (2, 3, 4, 5 oder 8; Standard 3). Gruppiert sind die Formate so:

- **CSS Traditional:** HEX, RGB % (moderne Prozent-Schreibweise), RGB (0–255, klassische Komma-Syntax), RGBA (klassische Komma-Syntax), HSL, HWB.
- **Perceptual (CIE):** Lab, LCH, OKLab, OKLCh — die wahrnehmungsbasierten Räume, die sich für gleichmäßige Helligkeits- und Sättigungsschritte eignen.
- **Wide Gamut:** Display P3, A98 RGB, ProPhoto RGB, Rec. 2020 — für Bildschirme mit erweitertem Farbraum.

Die Umrechnung erledigt Color.js; du kopierst den Wert, den dein CSS gerade braucht.

### Color Harmonies

Die Karte **Color Harmonies** leitet aus der gewählten Farbe **12 Harmonie-Sätze** ab. Berechnet werden sie im OKLCH-Raum (Hue-Rotation bzw. Anpassung von Helligkeit `L` und Chroma `C`). Ein **Klick auf ein Swatch kopiert dessen HEX-Wert**. Die Sätze:

- **Complementary** — die Gegenfarbe (180°).
- **Analogous** — Basis plus die beiden Nachbarn (−30°/+30°).
- **Triadic** — drei Farben im 120°-Abstand.
- **Split-Complementary** — Basis plus die beiden Nachbarn der Komplementärfarbe (150°/210°).
- **Tetradic (Square)** — vier Farben im 90°-Abstand.
- **Rectangle** — vier Farben im Rechteck (0°/60°/180°/240°).
- **Monochromatic** — dieselbe Farbe in drei Helligkeiten.
- **Shades** — abgedunkelte Varianten (weniger Helligkeit).
- **Tints** — aufgehellte Varianten (Richtung Weiß).
- **Tones** — entsättigte Varianten (weniger Chroma).
- **Compound** — eine Mischung aus Analog- und Komplementär-Logik.
- **Clash** — bewusst „schräge" Kombination (90°/270°).

### Contrast Checker

Über die ganze Breite prüft der **Contrast Checker** zwei Farben gegeneinander: die aktuell gewählte Farbe als Vordergrund und das Feld **Background Color** (eigener Coloris-Picker) als Hintergrund. Ein **Swap**-Button tauscht beide. Die Live-Vorschau zeigt großen und kleinen Text auf dem Hintergrund. Bewertet wird nach zwei Systemen:

- **WCAG 2.1:** Das Kontrastverhältnis (z. B. `4.7 : 1`) plus vier Badges — **AA Large** (verlangt ≥ 3:1), **AA Small** (≥ 4,5:1), **AAA Large** (≥ 4,5:1) und **AAA Small** (≥ 7:1).
- **APCA (Proposed WCAG 3):** der `Lc`-Wert des neueren Algorithmus, dazu **Body Text** (verlangt Lc ≥ 75) und **Large Text** (Lc ≥ 60). APCA ist der vorgeschlagene Nachfolger der WCAG-2.x-Formel und gewichtet Helligkeit realistischer.

### Color Blindness Simulator

Der **Color Blindness Simulator** zeigt die gewählte Farbe so, wie sie Menschen mit verschiedenen Formen der Farbfehlsichtigkeit erscheint (Matrix-Simulation). Acht Felder: **Normal**, **Protanopia** (Rot-blind, ~1 % der Männer), **Deuteranopia** (Grün-blind, ~1 %), **Tritanopia** (Blau-blind, selten), **Protanomaly** (Rot-schwach, ~1 %), **Deuteranomaly** (Grün-schwach, ~5 %), **Tritanomaly** (Blau-schwach, selten) und **Achromatopsia** (vollständige Farbenblindheit, sehr selten). Nützlich, um zu prüfen, ob zwei Farben für alle unterscheidbar bleiben.

## Gradient Generator

Baut CSS-Gradienten und gibt sie als CSS und Tailwind aus.

- **Gradient Type:** **Linear**, **Radial** oder **Conic**.
- **Direction** (je nach Typ): Bei Linear acht **Preset-Richtungen** (`to right`, `to left`, `to bottom`, `to top` plus vier Diagonalen) oder ein freier **Custom Angle** per Slider und Zahlenfeld (0–360 deg). Bei Radial wählst du die **Shape** (Ellipse/Circle) und eine von neun **Positionen**. Bei Conic stellst du einen **Start Angle** und eine Position ein.
- **Color Stops:** beliebig viele Farb-Stops (Start: zwei, `#336699` bei 0 % und `#66ccff` bei 100 %). Über **Add Stop** kommen weitere hinzu, ab drei Stops lässt sich jeder einzelne entfernen. Jeder Stop hat einen Farbwert (Coloris-Picker) und eine **Position** mit frei wählbarer Einheit: %, px, em, rem, vw, vh, vmin, vmax (auch absolute Einheiten werden akzeptiert; eine reine Zahl wird als % gewertet).
- **Presets:** 16 fertige Verläufe (Purple Dream, Ocean Blue, Fire, Tropical …) als Startpunkt.
- **Output:** **CSS Output** (`background: linear-gradient(…)`) und **Tailwind CSS** (z. B. `bg-gradient-to-r from-[#336699] to-[#66ccff]`). Hinweis im Tool: Tailwind unterstützt nativ nur lineare Verläufe mit zwei bis drei Stops — für komplexere nimmst du arbitrary values oder direkt das CSS.

## Shadow Gradient

Erzeugt einen **Gradient als weichen, farbigen Schlagschatten** unter einem Element — der modische „glow"-Schatten, der die Elementfarbe aufnimmt. Die Gradient-Steuerung (Typ, Richtung, Color Stops, 12 Presets) entspricht der des Gradient Generators. Dazu kommen:

- **Shadow Properties** (Slider): **X Offset** und **Y Offset** (−100…100 px, Y standardmäßig 20), **Spread** (−50…100 px), **Blur** (0…150 px) und **Opacity** (0…100 %).
- **Demo Element:** die Vorschau-Form — **Box**, **Card**, **Button** oder **Circle** —, ein **Border Radius** (0–100 px) und eine **Element Background**-Farbe. Der Schalter **Mirror gradient on element** malt denselben Gradient zusätzlich auf die Oberfläche des Elements (überschreibt die Hintergrundfarbe).
- **Preview-Hintergrund:** umschaltbar zwischen hell und dunkel, um den Schatten auf beiden Untergründen zu beurteilen.
- **Output:** **CSS Output**, **Tailwind CSS** (nutzt `before:`-Pseudo-Element-Utilities mit arbitrary values, Tailwind v3.1+) und ein **Full HTML + CSS Snippet** — ein fertiges, eigenständiges HTML-Dokument zum direkten Einfügen. Technisch entsteht der Effekt über ein `::before`-Element mit Gradient, Blur und Deckkraft.

## Box Shadow

Dieser Bereich hat zwei Sub-Tabs: **Shadow Palette** und **Single Shadow**.

### Shadow Palette

Erzeugt **mehrlagige, weiche Elevation-Schatten** über drei Höhenstufen auf einmal — der „smooth shadow"-Look, bei dem ein Schatten aus mehreren gestapelten Lagen besteht.

- **Color:** **Shadow Color** (Schattenfarbe) und **Background Color** für die Vorschau. Der Schalter **Tint shadow with background hue** (standardmäßig an) leitet den Schattenton aus der Hintergrundfarbe ab, was harmonischer wirkt als reines Schwarz.
- **Light Position:** **Angle** (0–360°, Standard 135) bestimmt die Lichtrichtung — 0° = Licht von oben, Schatten nach unten; 90° = von rechts, Schatten nach links; 315° = von oben-links, Schatten nach unten-rechts. **Distance** (0–100) steuert die Länge: 0 = enger Kontaktschatten, hohe Werte = lange, dramatische Schatten (bis ~130 px auf der höchsten Stufe).
- **Tuning:** **Oomph** (Gesamt-Intensität), **Crispy** (Schärfe der Kontaktschicht) und **Resolution** (Slider Low/Normal/High) — die Zahl gestapelter Lagen je Stufe. Bei **Normal** nutzen die Stufen Low/Medium/High **2 / 3 / 6** Lagen (Resolution Low → 1/2/3, High → 3/5/9).
- **Preview:** drei Demo-Kästen für die Stufen **Low**, **Medium** und **High**.
- **Output:** **CSS Custom Properties** (`--shadow-elevation-low/medium/high`), angewendet per `box-shadow: var(--shadow-elevation-medium);`, plus ein **Full HTML + CSS Snippet**.

### Single Shadow

Der klassische, manuelle `box-shadow`-Editor mit beliebig vielen Lagen.

- **Shadow Layers:** Start sind zwei Lagen. Jede Lage hat **X/Y-Offset**, **Blur**, **Spread**, **Color** mit **Alpha** und einen **inset**-Schalter (innenliegender Schatten). Über **Add Layer** kommen weitere hinzu; die Lagen stapeln von der ersten (unten) zur letzten (oben). So kombinierst du etwa einen weichen Ambient- mit einem scharfen Kontaktschatten.
- **Demo Element:** Form (Box/Card/Button/Circle), **Border Radius** und **Element Background**.
- **Preview:** heller oder dunkler Hintergrund.
- **Output:** **CSS Output** (der kommagetrennte `box-shadow`-String), **Tailwind CSS** und ein **Full HTML + CSS Snippet**.

## Image Color Scheme

Extrahiert aus einem Bild eine Farbpalette — vollständig im Browser.

- **Upload:** per **Drag & Drop** in die Zone oder über **Browse files**. Akzeptiert werden **PNG, GIF, JPG, WebP, AVIF, BMP und SVG**, bis **maximal 25 MB**. Eine Fortschrittsanzeige begleitet das Einlesen.
- **Extraktion:** Color Thief ermittelt die **dominante Farbe** und **bis zu zehn** weitere Palette-Farben. Beim Laden der Seite wird bereits ein Standardbild ausgewertet, damit du sofort ein Ergebnis siehst.
- **Extracted Palette:** Dominant plus Color 1–10, jeweils mit Swatch und Copy-Button. Über die **Sort**-Schalter ordnest du nach **Original** (Reihenfolge der Extraktion), **Lightness** (Helligkeit), **Saturation** (Sättigung) oder **Hue** (Farbton). **Copy all** kopiert die ganze Liste. Die eigene **Dominant Color**-Karte bleibt von der Sortierung unberührt.
- **Export:** Über das **Format**-Menü wählst du die Ausgabe — **CSS Variables** (`--color-N`), **SCSS Variables**, **Tailwind Config**, **JSON**, **Array (JS)** oder **Array (PHP)** — und kopierst sie mit einem Klick.

## Grenzen und Datenschutz — kompakt

- **Rein clientseitig:** kein Server, kein API, kein Upload; Bilder bleiben auf deinem Gerät (lokale Canvas-Auswertung).
- **Persistenz:** nur letzte Farbe und letzte Palette, ausschließlich im localStorage.
- **Bild-Limit:** maximal 25 MB; akzeptierte Typen PNG, GIF, JPG, WebP, AVIF, BMP, SVG.
- **Palette:** dominante Farbe plus bis zu zehn weitere.
- **Kontrast:** WCAG 2.1 (AA/AAA) und APCA — beide Systeme nebeneinander.

Für den Einstieg und das große Bild siehe die [Übersicht](https://www.jpkc.com/db/tools/colors/). Konkrete Abläufe zeigen die [Beispiele](https://www.jpkc.com/db/tools/colors/examples/), gesammelte Kniffe die [Tipps & Tricks](https://www.jpkc.com/db/tools/colors/tips/). Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/colors/).