JPKCom DB

Colors — Tipps & Tricks

Kniffe für Colors: Wide-Gamut und Gamut-Hinweis, Kontrast mit Transparenz und Farbenblindheit lesen, Tailwind v4/v3, Schatten-Layer und Bildpaletten.

Zurück zur Übersicht: Colors · Tool live öffnen: www.jpkc.com/tools/colors/

Das Manual beschreibt jeden Bereich, die Beispiele zeigen die Abläufe. Hier geht es um das, was beides voraussetzt: wann welches Format sinnvoll ist, wie du Kontrast richtig liest und wo die typischen Stolperfallen liegen.

Aus dem Color Picker mehr herausholen

  • Du gibst rein, was du willst — auch über HEX hinaus. Das Eingabefeld nimmt jeden gültigen CSS-Farbwert an. Tipp einfach ein oklch(70% 0.15 250) oder ein color(display-p3 1 0 0) ein, um zu sehen, wie es in allen anderen Räumen aussieht. Der Picker ist damit auch ein Farbraum-Konverter in beide Richtungen. Was du tippst, bleibt im Feld so stehen — der Copy-Button daneben kopiert also genau deinen Wert, nicht automatisch HEX. HEX brauchst du? Dann nimm den Copy-Button der Zeile HEX in den Color Formats.
  • Perceptual statt HSL für Abstufungen. Wenn du eine Helligkeits- oder Sättigungsskala brauchst, nimm die OKLCh-/OKLab-Werte aus den Color Formats — die Schritte wirken dort gleichmäßig, während dieselben Prozentschritte in HSL je nach Farbton unterschiedlich stark springen. Genau deshalb rechnet das Tool auch die Color Harmonies in OKLCH.
  • Wide-Gamut nur, wo es ankommt. Display P3, A98, ProPhoto und Rec. 2020 entfalten ihren Sinn auf Geräten mit erweitertem Farbraum. Für eine @media (color-gamut: p3)-Variante kopierst du den P3-Wert; als sicheren Fallback behältst du den HEX- oder sRGB-Wert. Verlass dich nicht darauf, dass jeder Bildschirm den weiten Gamut zeigt.
  • Den Gamut-Hinweis ernst nehmen. Erscheint über den Color Formats der gelbe Hinweis „Outside the sRGB gamut", sind HEX, RGB, HSL und HWB nur noch eine Annäherung. Genau dann lohnt sich das Pärchen aus sRGB-Fallback und P3- oder OKLCH-Wert — und genau dann solltest du nicht den HEX-Wert als „die" Farbe in den Styleguide übernehmen.
  • Precision bewusst wählen. Die Einstellung zählt signifikante Stellen, nicht Nachkommastellen — der Vorkommateil gehört dazu. Drei sind ein guter Default. Mit 2 rundet das Tool zweistellige Werte auf ganze Zahlen und dreistellige wie den Farbton sogar auf Zehner (aus lch(41.5% 33.8 262) wird lch(42% 34 260)); für Design-Tokens bleibst du deshalb besser bei 3. Brauchst du verlustfreie Round-Trips, geh auf 5 oder 8. Die Einstellung gilt für alle Felder außer HEX und RGB (0–255); bei RGBA betrifft sie nur den Alpha-Wert.
  • Web Safe Colors sind heute eher ein Raster als eine Pflicht. Die 216er-Tabelle stammt aus der Zeit der 8-Bit-Displays. Nutz sie als schnelle, gerasterte Auswahl — eine technische Notwendigkeit ist „websicher" auf modernen Geräten nicht mehr.

Kontrast richtig lesen

  • AA Small ist die Alltags-Messlatte. Für normalen Fließtext zählt im Contrast Checker das Badge AA Small (≥ 4,5:1). „Large" gilt erst ab großem bzw. fettem Text — verlass dich nicht auf das grüne „AA Large", wenn dein Text klein ist.
  • WCAG 2.1 und APCA können sich uneinig sein — das ist normal. Die WCAG-2.x-Formel überschätzt manche Kombinationen und unterschätzt andere; APCA gewichtet Helligkeit realistischer. Wenn ein heller Text auf mittlerem Grund bei WCAG knapp durchfällt, bei APCA aber gut dasteht (oder umgekehrt), nimm beide Werte ernst und entscheide konservativ.
  • Transparente Farben ehrlich messen. Die Kontrastformeln kennen keinen Alphakanal — naiv gerechnet hätte ein rgba(0, 0, 0, 0.1) auf Weiß denselben Kontrast wie reines Schwarz. Der Contrast Checker mischt deshalb erst Text- und Hintergrundfarbe zusammen (einen durchscheinenden Hintergrund legt er auf Weiß) und misst dann. Steht unter dem Verhältnis ein gelber Hinweis, weißt du: Hier wurde Transparenz verrechnet. Liegt dein echter Seitenhintergrund nicht auf Weiß, gib den Hintergrund besser deckend an.
  • Kontrast und Farbfehlsichtigkeit sind zwei Paar Schuhe. Ein Paar Farben kann genug Kontrast haben und trotzdem für Rot-Grün-Schwäche schwer unterscheidbar sein. Der Contrast Checker rechnet deshalb das WCAG-Verhältnis zusätzlich für Protanopie, Deuteranopie, Tritanopie und Achromatopsie aus (With color vision deficiency), und der Color Blindness Simulator direkt darunter zeigt dir die Farbe selbst durch diese Brillen. Prüf beides, besonders wenn Farbe allein eine Bedeutung trägt (Status, Diagramme).

Gradienten und Schatten ohne Überraschungen

  • Erst die Tailwind-Version wählen, dann kopieren. Die Tailwind CSS-Karte im Gradient Generator hat einen Umschalter v4/v3. In v4 übernimmt bg-linear-<Winkel> jeden Winkel exakt; v3 kennt nur acht Richtungen und rundet — das Tool zeigt dir dann zusätzlich den exakten Arbitrary-Wert. Utility-Klassen gibt es nur für lineare Verläufe mit höchstens drei Stops in %; radiale, konische oder vielstufige Verläufe landen als bg-[…]-Klasse, die in beiden Versionen funktioniert. Lesbarer im Markup bleibt bei solchen Verläufen oft das CSS Output in einer eigenen Klasse.
  • Für eine Tailwind-v4-Palette den @theme-Export nehmen. Im Image Color Scheme erzeugt Tailwind v4 (@theme) Theme-Variablen --color-palette-N, die Tailwind automatisch zu bg-palette-N, text-palette-N usw. macht — ohne tailwind.config.js. Die Config-Variante Tailwind v3 (config) brauchst du nur noch für v3-Projekte.
  • Shadow Gradient ist ein Pseudo-Element-Paar, kein box-shadow. Der weiche Farbschatten entsteht über ein ::after mit dem Gradient, Blur und Deckkraft; das ::before malt die sichtbare Fläche des Elements. Deshalb braucht die Tailwind-Variante before:- und after:-Utilities mit Arbitrary-Werten, und das Element muss position: relative vertragen. Wenn du den Effekt 1:1 willst, ist das Full HTML + CSS Snippet der sichere Weg — es bringt das komplette Markup samt Pseudo-Elementen mit.
  • Shadow Palette vs. Single Shadow — das richtige Werkzeug wählen. Brauchst du ein System aus abgestuften Schatten (Cards, Modals, Dropdowns auf drei Höhen), nimm die Shadow Palette und ihre --shadow-elevation-*-Variablen. Brauchst du einen einzelnen, präzise von Hand gestapelten Schatten, ist Single Shadow richtig — dort hast du jede Lage einzeln in der Hand, inklusive inset.
  • „Tint shadow with background hue" macht den Unterschied. Ein rein schwarzer Schatten wirkt schnell schmutzig. Lass den Schalter in der Shadow Palette an, dann nimmt der Schatten einen Hauch der Hintergrundfarbe auf und sitzt harmonischer auf der Fläche.
  • Mehr Layer heißt nicht automatisch besser. Resolution High erhöht die Lagenzahl je Stufe (bis 9 in der höchsten) und gibt sehr weiche Verläufe, kostet aber Render-Aufwand. Für die meisten UIs reicht Normal (Stufen mit 2/3/6 Lagen) — High lohnt sich vor allem für große, prominente Flächen.

Bild-Paletten — was zu erwarten ist

  • „Dominant" heißt häufigste, nicht schönste Farbe. Color Thief liefert die rechnerisch dominante Farbe — bei einem Foto mit viel Himmel ist das eben Blau, auch wenn dein Auge das Motiv woanders sieht. Schau immer die ganze Palette an, nicht nur das eine Feld.
  • Sortieren bringt Struktur. Die rohe Extraktionsreihenfolge folgt der Auswertung, nicht deinem Auge. Sortier nach Lightness für eine Skala von dunkel nach hell oder nach Hue, um zu sehen, welche Farbfamilien das Bild überhaupt enthält. Der Export übernimmt die gewählte Reihenfolge.
  • Weniger Zeilen sind kein Fehler. Ein Logo oder eine Grafik mit wenigen Flächenfarben liefert nur so viele Farben, wie wirklich darin stecken; leere Plätze blendet das Tool aus. Für eine vollständige Zehner-Palette brauchst du ein farbreicheres Motiv.
  • Großes Bild ≠ bessere Palette. Bis 25 MB ist erlaubt, aber die Extraktion wird davon nicht treffsicherer. Ein sauber zugeschnittenes, repräsentatives Motiv liefert oft die bessere Palette als ein riesiges Originalfoto — zuschneiden kannst du vorab im Graphic Editor.
  • Palette sofort sichern. Die Farbe im Picker überlebt einen Neuladen, die Bildpalette nicht: Beim Aufruf wertet das Tool sein Standardbild aus. Kopier dir den Export also, bevor du den Tab schließt.

Mit anderen JPKCom-Tools kombinieren

  • Motiv vorbereiten → Palette ziehen. Bild zuschneiden, skalieren oder ins richtige Format bringen mit dem Graphic Editor, dann das Ergebnis in den Tab Image Color Scheme werfen.
  • Farben → Hintergrund. Die hier gefundenen Töne und Gradienten setzt du direkt in einen GeoPattern- oder Trianglify UI-Hintergrund ein.
  • Kontrast härten → live prüfen. Eine Text-/Hintergrund-Kombination im Contrast Checker absichern und die Seite anschließend mit dem SEO & GEO Analyzer prüfen, dessen Accessibility-Auswertung unter anderem auf solche Punkte schaut.

Noch mehr Kontext: die Übersicht zum großen Bild, das Manual für jede Option und die Beispiele für die Schritt-für-Schritt-Abläufe. Ausprobieren kannst du alles direkt im Tool.