JPKCom DB

Colors

Farb-Toolkit für Web-Entwickler: Picker mit 14 Formaten, WCAG/APCA-Kontrast und Farbenblindheit, Gradienten, CSS-Schatten und Bildpaletten mit Tailwind-Export.

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 — auch mit halbtransparenten Farben und aus Sicht von Menschen mit Farbfehlsichtigkeit. 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. Liegt eine Farbe außerhalb von sRGB, sagt dir ein Hinweis, welche Formate nur eine Annäherung (gamut-gemappt) zeigen und welche exakt sind. 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, mit korrekt verrechneter Transparenz und dem Kontrast unter vier Formen der Farbfehlsichtigkeit) und ein Color-Blindness-Simulator mit acht Sehweisen nach dem Modell von Machado, Oliveira und Fernandes (2009).
  • Gradient Generator — lineare, radiale und konische CSS-Gradienten mit bis zu zehn Farb-Stops, Richtungs-Presets oder freiem Winkel, 16 fertigen Vorlagen und Ausgabe als CSS und als Tailwind-Klassen wahlweise für Tailwind v4 oder v3.
  • 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 box-shadow-Editor mit bis zu zehn Lagen und 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 sieben Formaten exportieren (CSS, SCSS, Tailwind v4 als @theme, Tailwind v3 als Config, 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 (sie steht beim nächsten Besuch wieder im Picker), eine Liste der zehn zuletzt genutzten Farben und die zuletzt extrahierte Palette. Die Palette ersetzt das Tool beim Laden allerdings durch die Auswertung seines Standardbilds — exportiere sie also, bevor du die Seite verlässt. 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.