Colors — Manual

Zurück zur Übersicht: Colors · Tool live öffnen: 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. Konkrete Abläufe zeigen die Beispiele, gesammelte Kniffe die Tipps & Tricks. Ausprobieren kannst du alles direkt im Tool.