JPKCom DB

Colors — Tipps & Tricks

Kniffe für Colors: Wide-Gamut-Formate richtig nutzen, Kontrast nach APCA lesen, Schatten-Layer verstehen und die Kombination mit anderen JPKCom-Tools.

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.
  • 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.
  • Precision bewusst wählen. Drei Nachkommastellen sind ein guter Default. Für Design-Tokens oder Doku rundest du auf 2; brauchst du verlustfreie Round-Trips, geh auf 5 oder 8. Die Einstellung gilt für alle Format-Felder gleichzeitig.
  • 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.
  • Kontrast und Farbfehlsichtigkeit sind zwei Paar Schuhe. Ein Paar Farben kann genug Kontrast haben und trotzdem für Rot-Grün-Schwäche ununterscheidbar sein. Der Color Blindness Simulator sitzt nicht zufällig direkt neben dem Contrast Checker — prüf beides, besonders wenn Farbe allein eine Bedeutung trägt (Status, Diagramme).

Gradienten und Schatten ohne Überraschungen

  • Tailwind deckt nicht jeden Gradient ab. Die Tailwind CSS-Ausgabe im Gradient Generator funktioniert nativ nur für lineare Verläufe mit zwei bis drei Stops — genau das sagt der Hinweis im Tool. Für radiale, konische oder vielstufige Verläufe nimm das CSS Output oder arbitrary values.
  • Shadow Gradient ist ein Pseudo-Element, kein box-shadow. Der weiche Farbschatten entsteht über ein ::before mit Blur. Deshalb braucht die Tailwind-Variante before:-Utilities (v3.1+), 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-Element 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 ist beliebig. Sortier nach Lightness für eine Hell-zu-Dunkel-Skala oder nach Hue, um zu sehen, welche Farbfamilien das Bild überhaupt enthält.
  • 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.

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.