# 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. Source: https://www.jpkc.com/db/tools/colors/tips/ Zurück zur Übersicht: [Colors](https://www.jpkc.com/db/tools/colors/) · Tool live öffnen: [www.jpkc.com/tools/colors/](https://www.jpkc.com/tools/colors/) Das [Manual](https://www.jpkc.com/db/tools/colors/manual/) beschreibt jeden Bereich, die [Beispiele](https://www.jpkc.com/db/tools/colors/examples/) 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](https://www.jpkc.com/db/tools/colors/manual/#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](https://www.jpkc.com/db/tools/colors/manual/#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](https://www.jpkc.com/db/tools/colors/manual/#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](https://www.jpkc.com/db/tools/colors/manual/#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](https://www.jpkc.com/db/tools/graphic/)**, dann das Ergebnis in den Tab [Image Color Scheme](https://www.jpkc.com/db/tools/colors/examples/#beispiel-6-eine-palette-aus-einem-bild-ziehen-und-exportieren) werfen. - **Farben → Hintergrund.** Die hier gefundenen Töne und Gradienten setzt du direkt in einen **[GeoPattern](https://www.jpkc.com/db/tools/geopattern/)**- oder **[Trianglify UI](https://www.jpkc.com/db/tools/trianglify/)**-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](https://www.jpkc.com/db/tools/seo/)** prüfen, dessen Accessibility-Auswertung unter anderem auf solche Punkte schaut. --- Noch mehr Kontext: die [Übersicht](https://www.jpkc.com/db/tools/colors/) zum großen Bild, das [Manual](https://www.jpkc.com/db/tools/colors/manual/) für jede Option und die [Beispiele](https://www.jpkc.com/db/tools/colors/examples/) für die Schritt-für-Schritt-Abläufe. Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/colors/).