JPKCom DB

Colors

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

Ein Werkzeugkasten rund um Farbe

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 — Farbe wählen, Gradient bauen, Schatten justieren oder ein Bild einwerfen. Ohne Account, kostenlos, direkt im Browser.

Verwandte JPKCom-Tools

  • Graphic Editor — Bilder zuschneiden, skalieren und konvertieren; die passende Vorstufe, um ein Motiv für die Palette-Extraktion vorzubereiten.
  • GeoPattern und Trianglify UI — geometrische bzw. Low-Poly-SVG-Hintergründe, in die du die hier gefundenen Farben und Gradienten direkt einsetzt.
  • SEO & GEO Analyzer — 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 mit jedem Bereich und jeder Option im Detail, Beispiele aus der Praxis und gesammelte Tipps & Tricks.