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:

• die zuletzt gewählte Farbe — sie steht beim nächsten Aufruf wieder im Picker (als HEX);
• eine History der zehn zuletzt genutzten Farben — beim Tippen landet ein Wert erst nach einer Sekunde Pause darin, nicht jeder Zwischenstand; eine Anzeige dieser Liste gibt es im Tool derzeit nicht;
• die zuletzt extrahierte Palette — beim Laden wertet das Tool allerdings jedes Mal sein Standardbild aus und ersetzt sie dadurch.

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): eine Farbraum-Auswahl, darunter je ein Regler pro Kanal des gewählten Raums — beim Start sRGB — und ein 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. Der Default ist #336699.

Picker und Feld sind synchron, aber mit einer Rücksicht aufs Tippen: Solange du im Feld schreibst, bleibt dein Wert so stehen, wie du ihn eingibst — ein oklch() wird nicht nachträglich in HEX umgeschrieben, ein #3366cc nicht auf #36c gekürzt. Wählst du die Farbe dagegen im Picker, in der Web-Safe-Tabelle oder über den Swap-Button des Contrast Checkers, schreibt das Tool sie als HEX ins Feld: immer voll ausgeschrieben und auf sRGB abgebildet. Der Copy-Button neben dem Feld kopiert dessen aktuellen Inhalt — also HEX oder eben den Wert, den du getippt hast. Die große Color Preview zeigt die Farbe als Fläche, einschließlich Transparenz.

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 Picker und Eingabefeld. 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. Wie genau die Werte ausfallen, stellst du oben über Precision ein (2, 3, 4, 5 oder 8; Standard 3). Color.js zählt dabei signifikante Stellen, nicht Nachkommastellen — der Vorkommateil zählt mit. Aus lch(41.5% 33.8 262) (Precision 3) wird mit 2 also lch(42% 34 260): Auch der Farbton rundet auf Zehner. HEX und RGB (0–255) hängen nicht von der Einstellung ab, bei RGBA betrifft sie nur den Alpha-Wert (dort als Nachkommastellen). 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.

Liegt die Farbe außerhalb des sRGB-Gamuts — etwa ein kräftiges color(display-p3 1 0 0) oder ein oklch() mit hoher Chroma —, blendet die Karte oben einen gelben Hinweis ein. Alle sRGB-basierten Felder sind dann nur eine Annäherung, und zwar auf unterschiedliche Weise: HEX und RGB % sind gamut-gemappt. HSL und HWB werden in ihrem eigenen Raum abgebildet und können deshalb im Farbton von HEX abweichen. RGB (0–255) und RGBA bilden gar nicht ab, sondern schneiden jeden Kanal einzeln bei 0 bzw. 255 ab — auch sie können von HEX abweichen. OKLCH und Lab (ebenso LCH und OKLab) behalten den exakten Wert, Display P3 und Rec. 2020 ebenfalls, solange die Farbe in diesen Räumen darstellbar ist; liegt sie auch außerhalb von P3, zeigt das P3-Feld ebenfalls einen gamut-gemappten Wert.

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 Farbe aus dem Eingabefeld als Vordergrund (Textfarbe) und das Feld Background Color (eigener Coloris-Picker, Standard #ffffff; wie alle Coloris-Felder des Tools mit Alpha-Regler, Format-Umschalter HEX/RGB/HSL und zehn Schnellfarben) als Hintergrund. Ein Swap-Button tauscht beide. Die Live-Vorschau zeigt großen und kleinen Text auf dem Hintergrund.

Transparenz wird mitgerechnet. Die Kontrastformeln selbst kennen keinen Alphakanal. Das Tool mischt deshalb vor jeder Messung zusammen, was du tatsächlich siehst: die Textfarbe über dem Hintergrund und einen durchscheinenden Hintergrund über Weiß. Ein rgba(0, 0, 0, 0.1) auf Weiß ergibt so die realistischen rund 1,25:1 statt eines scheinbaren 21:1. Unter dem Verhältnis erklärt ein Hinweis, was passiert ist — etwa „The text color is 10% opaque — measured as it appears on the background (…)" mit der gemischten HEX-Farbe, bzw. „The background is translucent — assumed on white."

Bewertet wird nach drei Blöcken:

• WCAG 2.1: Das Kontrastverhältnis (mit zwei Nachkommastellen, z. B. 4.70 : 1) plus vier Badges — AA Large (verlangt ≥ 3:1), AA Small (≥ 4,5:1), AAA Large (≥ 4,5:1) und AAA Small (≥ 7:1), jeweils Pass oder Fail.
• APCA (Proposed WCAG 3): der Lc-Wert des neueren Algorithmus (als Betrag, eine Nachkommastelle), 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.
• With color vision deficiency (WCAG ratio): das WCAG-Verhältnis desselben Farbpaars, wie es Menschen mit Protanopia, Deuteranopia, Tritanopia und Achromatopsia sehen — simuliert mit demselben Modell wie der Color Blindness Simulator. Jede Zeile trägt ein Badge: AA (≥ 4,5:1), AA Large (≥ 3:1) oder Fail. So siehst du direkt, ob eine Kombination, die normal gut lesbar ist, bei Farbfehlsichtigkeit zusammenfällt.

Color Blindness Simulator

Der Color Blindness Simulator zeigt die gewählte Farbe so, wie sie Menschen mit verschiedenen Formen der Farbfehlsichtigkeit erscheint. Gerechnet wird nach dem physiologisch begründeten Modell von Machado, Oliveira und Fernandes (2009) — angewendet auf lineare sRGB-Werte, die vollständigen Formen (Dichromasie) mit Schweregrad 1,0, die abgeschwächten Formen (Anomalien) mit 0,6; Achromatopsie bildet die relative Luminanz ab. 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 als Tailwind-Klassen (v4 oder v3) aus.

• Gradient Type: Linear, Radial oder Conic.
• Direction (je nach Typ): Bei Linear acht Preset Directions (to right, to left, to bottom, to top plus vier Diagonalen; Standard to right) oder ein freier Custom Angle per Slider und Zahlenfeld (0–360 deg, Standard 90). Ein Preset setzt den passenden Winkel — mit einer Ausnahme: to top landet im Tool bei 90° (nach rechts) statt bei 0°, CSS und Tailwind zeigen dann einen Verlauf nach rechts. Für einen Verlauf nach oben stellst du den Custom Angle auf 0. Ein eigener Winkel hebt die Preset-Auswahl auf. Bei Radial wählst du die Shape (Ellipse/Circle) und eine von neun Positionen. Bei Conic stellst du einen Start Angle (0–360) und eine von neun Positionen ein.
• Color Stops: zwei bis zehn Farb-Stops (Start: #336699 bei 0 % und #66ccff bei 100 %). Add Stop fügt vor dem letzten Stop einen neuen ein — mit der 50:50-Mischung der beiden letzten Farben, mittig zwischen ihren Positionen (bei unterschiedlichen Einheiten auf 50 %). Ab drei Stops lässt sich jeder einzelne entfernen. Jeder Stop hat einen Farbwert (Coloris-Picker) und eine Position. Erlaubte Einheiten: %, px, em, rem, vw, vh, vmin, vmax, cm, mm, in, pt und pc; eine reine Zahl wird als % gewertet. Eine ungültige Eingabe färbt das Feld rot und meldet „Invalid position. Use formats like: 50%, 100px, 2em". Für die Ausgabe sortiert das Tool die Stops nach Position.
• Presets: 16 fertige Zwei-Farben-Verläufe (Purple Dream, Ocean Blue, Fire, Tropical …) als Startpunkt; ein Klick ersetzt die Stops durch die beiden Preset-Farben bei 0 % und 100 %.
• Preview: zeigt den Verlauf live, so wie ihn das CSS Output beschreibt.
• CSS Output: z. B. background: linear-gradient(90deg, #336699 0%, #66ccff 100%); — lineare Verläufe gibt das Tool immer mit Gradzahl aus, auch wenn du ein Richtungs-Preset gewählt hast. Radial: radial-gradient(ellipse at center, …), Conic: conic-gradient(from 45deg at center, …) (das from entfällt bei 0°).
• Tailwind CSS mit Umschalter v4/v3 (Standard v4):
  • Lineare Verläufe mit höchstens drei Stops und Positionen in % werden zu Utility-Klassen samt Positionen, etwa from-[#336699] from-0% via-[#4d99cc] via-50% to-[#66ccff] to-100%.
  • v4 nimmt jeden Winkel: Vielfache von 45° als lesbare Richtung (bg-linear-to-r, bg-linear-to-br …), alles andere als bg-linear-<Winkel>, z. B. bg-linear-110.
  • v3 kennt nur die acht Richtungen bg-gradient-to-*. Weicht der Winkel davon ab, liefert das Tool zuerst den exakten Verlauf als Arbitrary-Wert und darunter die auf die nächste Richtung gerundete Variante — beide mit erklärendem Kommentar.
  • Alles andere — radiale und konische Verläufe, mehr als drei Stops, Positionen in anderen Einheiten als % — gibt das Tool als Arbitrary-Wert bg-[…] aus (Leerzeichen durch _ ersetzt), mit einem Kommentar zum Grund. Dieser Weg funktioniert in v3 und v4.

Shadow Gradient

Erzeugt einen Gradient als weichen, farbigen Schlagschatten unter einem Element — der modische „glow"-Schatten, der die Elementfarbe aufnimmt. Die Gradient-Steuerung entspricht weitgehend der des Gradient Generators: Gradient Type (Linear/Radial/Conic), Direction mit acht Preset-Richtungen oder Custom Angle (Standard 135°, also to bottom right), Shape und Position für Radial, Start Angle und Position für Conic. Die Color Stops starten mit #667eea und #764ba2; Add Stop hängt bis zu zehn Stops an und verteilt dabei alle Positionen gleichmäßig neu über 0–100 %, ab drei Stops kannst du einzelne entfernen. Zwölf Presets setzen Farben, Winkel, Blur, Spread und Y-Offset in einem Schritt. Dazu kommen:

• Shadow Properties (Slider): X Offset und Y Offset (−100…100 px, Standard 0 bzw. 20), Spread (−50…100 px, Standard 10), Blur (0…150 px, Standard 30) und Opacity (0…100, angezeigt als 0,00–1,00, Standard 0,70).
• Demo Element: die Vorschau-Form — Box, Card, Button oder Circle —, ein Border Radius (0–100 px, Standard 12; beim Kreis ohne Wirkung) und eine Element Background-Farbe (Standard #1e1e2f). 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.
• Technik: Das Element selbst bleibt transparent. Sein ::before malt die sichtbare Fläche (Hintergrundfarbe oder gespiegelter Gradient), sein ::after trägt den Gradient — um den Spread vergrößert, um X/Y verschoben, per filter: blur() weichgezeichnet und mit der eingestellten Deckkraft. Beide liegen per z-index hinter dem Inhalt; das Element braucht position: relative.
• Output: CSS Output (Klasse .shadow-gradient samt ::before und ::after), Tailwind CSS (dieselbe Konstruktion mit before:- und after:-Varianten und Arbitrary-Werten; der Hinweis im Tool nennt Tailwind v3.1+) und ein Full HTML + CSS Snippet — ein fertiges, eigenständiges HTML-Dokument zum direkten Einfügen.

Box Shadow

Dieser Bereich hat zwei Sub-Tabs: Shadow Palette und Single Shadow. Beide lesen ihre Farben nur als HEX ein, in der Shadow Palette auch die Hintergrundfarbe, solange Tint shadow with background hue an ist — lass den Format-Umschalter der Coloris-Picker hier auf HEX. Auf RGB oder HSL umgestellt, entstehen unbrauchbare Werte in der Ausgabe. Den Alpha-Regler der Picker ignorieren beide; die Deckkraft stellst du über Alpha (Single Shadow) bzw. Oomph (Shadow Palette) ein.

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, Standard #1e293b) und Background Color (Preview) (Standard #f1f5f9). Der Schalter Tint shadow with background hue (standardmäßig an) übernimmt Farbton und Sättigung (mindestens 30 %) aus der Hintergrundfarbe und nur die Helligkeit aus der Schattenfarbe — das wirkt harmonischer 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 (Slider, angezeigt als 0,00–1,00, Standard 0,40) steuert die Länge: 0 = enger Kontaktschatten, 1 = lange, dramatische Schatten (bis ~130 px auf der höchsten Stufe).
• Tuning: Oomph (Gesamt-Intensität, Standard 0,50), Crispy (Schärfe, Standard 0,30) 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). Die erste Lage ist immer ein enger Kontaktschatten, die weiteren werden mit der Distanz größer, weicher und blasser.
• Preview: drei Demo-Kästen für die Stufen Low, Medium und High auf der gewählten Hintergrundfarbe.
• Output: CSS Custom Properties — --shadow-color (als HSL-Komponenten) und --shadow-elevation-low/medium/high in einem :root-Block, dazu Beispielklassen .card-low, .card-medium, .card-high; angewendet per box-shadow: var(--shadow-elevation-medium); —, plus ein Full HTML + CSS Snippet mit drei Demo-Karten.

Single Shadow

Der klassische, manuelle box-shadow-Editor mit bis zu zehn Lagen.

• Shadow Layers: Start sind zwei Lagen. Jede Lage hat X und Y (je −50…50 px), Blur (0…100 px), Spread (−50…50 px), Color (Coloris-Picker), Alpha (0,00–1,00) und einen Inset-Schalter (innenliegender Schatten). Über Add Layer kommen weitere hinzu (höchstens zehn); solange mehr als eine Lage existiert, lässt sich jede entfernen. Die erste Lage liegt oben, jede weitere dahinter — so malt CSS eine kommagetrennte box-shadow-Liste (der Hinweis im Tool beschreibt die Reihenfolge umgekehrt). So kombinierst du etwa einen weichen Ambient- mit einem scharfen Kontaktschatten.
• Demo Element: Form (Box/Card/Button/Circle), Border Radius (0–100 px, Standard 12) und Element Background (Standard #ffffff).
• Preview: heller oder dunkler Hintergrund.
• Output: CSS Output (der kommagetrennte box-shadow-String an einer Beispielklasse .my-element, Farben als rgba()), Tailwind CSS als Arbitrary-Wert shadow-[…] (Leerzeichen durch _ ersetzt) und ein Full HTML + CSS Snippet, dessen Seitenhintergrund sich nach dem Hell/Dunkel-Schalter der Vorschau richtet. Der Schalter allein erzeugt die Ausgabe allerdings nicht neu — das Snippet übernimmt ihn erst, sobald du eine weitere Einstellung änderst.

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; die Dominante taucht dabei nicht doppelt auf. Farbarme Bilder (ein Logo mit vier Farben etwa) liefern entsprechend weniger — leere Plätze blendet das Tool aus, statt Farben eines vorher geladenen Bildes stehen zu lassen. Beim Laden der Seite wird ein Standardbild ausgewertet, damit du sofort ein Ergebnis siehst; das ersetzt auch eine gespeicherte Palette.
• Extracted Palette: bis zu elf Zeilen (Dominante plus Color 1–10), jeweils mit Swatch und Copy-Button. Über die Sortier-Schalter im Kartenkopf ordnest du nach Original order (Reihenfolge der Extraktion, Dominante zuerst), Lightness (Helligkeit), Saturation (Sättigung) oder Hue (Farbton) — jeweils aufsteigend. Der Copy-Button daneben (Copy all colors) kopiert die ganze Liste, eine Farbe pro Zeile. Die erste Zeile der Liste wandert mit der Sortierung; die eigene Dominant Color-Karte rechts bleibt davon unberührt.
• Image Preview: zeigt das ausgewertete Bild.
• Export: Über das Auswahlmenü in der Karte Export wählst du die Ausgabe und kopierst sie mit Copy. Die Reihenfolge folgt der aktuellen Sortierung:
  • CSS Variables — :root { --color-1: …; }
  • SCSS Variables — $color-1: …;
  • Tailwind v4 (@theme) — @import "tailwindcss"; plus @theme { --color-palette-1: …; }, nutzbar als bg-palette-1, text-palette-2 usw.
  • Tailwind v3 (config) — ein tailwind.config.js mit theme.extend.colors.palette (Schlüssel 1, 2, 3 …)
  • JSON — ein Array der HEX-Werte
  • Array (JS) — const colors = [ … ];
  • Array (PHP) — $colors = [ … ];

Grenzen und Datenschutz — kompakt

• Rein clientseitig: kein Server, kein API, kein Upload; Bilder bleiben auf deinem Gerät (lokale Canvas-Auswertung).
• Persistenz: letzte Farbe, History der zehn zuletzt genutzten Farben und letzte Palette, ausschließlich im localStorage; die Palette wird beim Laden durch die Standardbild-Auswertung ersetzt.
• Bild-Limit: maximal 25 MB; akzeptierte Typen PNG, GIF, JPG, WebP, AVIF, BMP, SVG.
• Palette: dominante Farbe plus bis zu zehn weitere (bei farbarmen Bildern weniger).
• Gradienten: zwei bis zehn Color Stops (Gradient Generator und Shadow Gradient); Tailwind-Utility-Klassen nur für lineare Verläufe mit höchstens drei Stops in %, sonst Arbitrary-Wert.
• Single Shadow: eine bis zehn Lagen.
• Kontrast: WCAG 2.1 (AA/AAA) und APCA nebeneinander, Transparenz zusammengemischt, zusätzlich WCAG-Verhältnis unter vier Formen der Farbfehlsichtigkeit.

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.