# Colors

> Farb-Toolkit für Web-Entwickler: Farb-Picker mit 14 Formaten, Gradient-Generator, CSS-Box-Shadow- und Shadow-Gradient-Builder, Paletten aus Bildern.

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

## Ein Werkzeugkasten rund um Farbe

[Colors](https://www.jpkc.com/tools/colors/) ist kein einzelnes Tool, sondern ein ganzer Werkzeugkasten für alles, was im Web-Alltag mit Farbe zu tun hat: eine Farbe wählen und in 14 CSS-Formaten ablesen, einen CSS-Gradient bauen, weiche mehrlagige Schlagschatten erzeugen — und aus einem hochgeladenen Bild eine fertige Farbpalette ziehen. Fünf Bereiche, ein gemeinsamer Rahmen, alles direkt im Browser.

Gedacht ist das für alle, die Oberflächen gestalten und bauen: **Entwicklerinnen und Entwickler**, die schnell ein gültiges `rgb()`, `oklch()` oder einen `box-shadow`-String brauchen; **Designerinnen und Designer**, die Harmonien, Tints und Tones zu einer Ausgangsfarbe durchspielen; und alle, die **Barrierefreiheit** ernst nehmen und einen Kontrast nach WCAG und APCA prüfen wollen, bevor er live geht. Kein Account, keine Installation, kostenlos.

## Die fünf Bereiche

Die Oberfläche ist in fünf Tabs gegliedert (die Bezeichnungen sind englisch — das Tool ist englischsprachig):

- **Color Picker** — der reichste Bereich. Eine Farbe per visuellem Picker oder als beliebiger CSS-Wert eingeben (`hex`, `rgb`, `hsl`, `oklch`, `lab`, `p3` …) und in **14 Formaten** ablesen: HEX, RGB (%), RGB (0–255), RGBA, HSL, HWB, Lab, LCH, OKLab, OKLCh sowie die Wide-Gamut-Räume Display P3, A98 RGB, ProPhoto und Rec. 2020. Dazu **12 Farb-Harmonien** (Komplementär, Analog, Triadisch, Tetradisch und mehr), eine **216-Farben-Web-Safe-Tabelle**, ein **Contrast Checker** (WCAG 2.1 plus APCA) und ein **Color-Blindness-Simulator** mit acht Sehweisen.
- **Gradient Generator** — lineare, radiale und konische CSS-Gradienten mit beliebig vielen Farb-Stops, Richtungs-Presets oder freiem Winkel, 16 fertigen Vorlagen und Ausgabe als CSS und Tailwind.
- **Shadow Gradient** — ein Gradient als weicher, farbiger Schlagschatten unter einem Element, fein justierbar über Offset, Spread, Blur und Deckkraft, mit Live-Demo und Export als CSS, Tailwind und fertigem HTML-Snippet.
- **Box Shadow** — zwei Builder in einem: **Shadow Palette** erzeugt mehrlagige, weiche Elevation-Schatten als CSS-Custom-Properties über drei Höhenstufen; **Single Shadow** ist der klassische, mehrlagige `box-shadow`-Editor mit `inset`-Option.
- **Image Color Scheme** — ein Bild per Drag & Drop einwerfen und die dominante Farbe plus bis zu zehn Palette-Farben extrahieren, sortieren und in sechs Formaten exportieren (CSS, SCSS, Tailwind, JSON, JS-Array, PHP-Array).

## Alles im Browser — nichts verlässt dein Gerät

Colors ist **rein clientseitig**: kein Server-Roundtrip, kein API, kein Upload. Auch das Bild für die Palette-Extraktion bleibt auf deinem Rechner — es wird lokal über `FileReader` eingelesen und im Browser per Canvas ausgewertet (Color Thief), nicht hochgeladen. Persistiert wird nur Weniges, ausschließlich lokal im **localStorage**: deine zuletzt gewählte Farbe und die zuletzt extrahierte Palette. Wenn du wiederkommst, ist beides noch da. Unter der Haube arbeiten etablierte Open-Source-Bibliotheken — Color.js (inklusive der Color.js Elements), Coloris, TinyColor2 und Color Thief.

## Jetzt ausprobieren

**[→ Colors öffnen](https://www.jpkc.com/tools/colors/)** — Farbe wählen, Gradient bauen, Schatten justieren oder ein Bild einwerfen. Ohne Account, kostenlos, direkt im Browser.

## Verwandte JPKCom-Tools

- **[Graphic Editor](https://www.jpkc.com/db/tools/graphic/)** — Bilder zuschneiden, skalieren und konvertieren; die passende Vorstufe, um ein Motiv für die Palette-Extraktion vorzubereiten.
- **[GeoPattern](https://www.jpkc.com/db/tools/geopattern/)** und **[Trianglify UI](https://www.jpkc.com/db/tools/trianglify/)** — geometrische bzw. Low-Poly-SVG-Hintergründe, in die du die hier gefundenen Farben und Gradienten direkt einsetzt.
- **[SEO & GEO Analyzer](https://www.jpkc.com/db/tools/seo/)** — prüft auf einer echten Seite unter anderem die Barrierefreiheit; den Farbkontrast dafür härtest du vorab im Contrast Checker.

---

Tiefer geht es auf den Unterseiten: das **[Manual](https://www.jpkc.com/db/tools/colors/manual/)** mit jedem Bereich und jeder Option im Detail, **[Beispiele](https://www.jpkc.com/db/tools/colors/examples/)** aus der Praxis und gesammelte **[Tipps & Tricks](https://www.jpkc.com/db/tools/colors/tips/)**.