# Colors — Tips & Tricks > Tricks for Colors: use wide-gamut formats well, read contrast under APCA, understand shadow layers, and combine it with other JPKCom tools. Source: https://www.jpkc.com/db/en/tools/colors/tips/ Back to the overview: [Colors](https://www.jpkc.com/db/en/tools/colors/) · Open the tool live: [www.jpkc.com/tools/colors/](https://www.jpkc.com/tools/colors/) The [manual](https://www.jpkc.com/db/en/tools/colors/manual/) describes every area, the [examples](https://www.jpkc.com/db/en/tools/colors/examples/) show the workflows. This page is about what both assume: when which format makes sense, how to read contrast correctly, and where the typical pitfalls are. ## Get more out of the Color Picker - **You can enter anything — not just HEX.** The input field accepts any valid CSS color. Type an `oklch(70% 0.15 250)` or a `color(display-p3 1 0 0)` to see how it looks in every other space. That makes the picker a **two-way color-space converter** as well. - **Perceptual over HSL for ramps.** When you need a lightness or saturation scale, take the OKLCh/OKLab values from the [Color Formats](https://www.jpkc.com/db/en/tools/colors/manual/#color-formats) — the steps feel even there, whereas the same percentage steps in HSL jump by different amounts depending on hue. That is exactly why the tool also computes the [Color Harmonies](https://www.jpkc.com/db/en/tools/colors/manual/#color-harmonies) in OKLCH. - **Wide gamut only where it lands.** Display P3, A98, ProPhoto and Rec. 2020 pay off on devices with an extended gamut. For an `@media (color-gamut: p3)` variant, copy the **P3** value; keep the HEX or sRGB value as a safe fallback. Don't assume every screen shows the wide gamut. - **Choose Precision deliberately.** Three decimals are a good default. For design tokens or docs, round to 2; if you need lossless round-trips, go to 5 or 8. The setting applies to all format fields at once. - **Web Safe Colors are a grid today, not a rule.** The 216-color table dates from the era of 8-bit displays. Use it as a quick, gridded choice — "web-safe" is no longer a technical necessity on modern devices. ## Read contrast correctly - **AA Small is the everyday bar.** For ordinary body text, the badge that counts in the [Contrast Checker](https://www.jpkc.com/db/en/tools/colors/manual/#contrast-checker) is **AA Small** (≥ 4.5:1). "Large" only applies to big or bold text — don't rely on a green "AA Large" when your text is small. - **WCAG 2.1 and APCA can disagree — that's normal.** The WCAG 2.x formula overstates some combinations and understates others; APCA weights lightness more realistically. When a light text on a mid-tone background barely fails WCAG but looks fine under APCA (or vice versa), take both values seriously and decide conservatively. - **Contrast and color blindness are two different things.** A pair of colors can have enough contrast and still be indistinguishable under red-green deficiency. The **Color Blindness Simulator** sits right next to the contrast checker for a reason — check both, especially when color alone carries meaning (status, charts). ## Gradients and shadows without surprises - **Tailwind doesn't cover every gradient.** The **Tailwind CSS** output in the Gradient Generator only works natively for linear gradients with two to three stops — exactly what the tool's note says. For radial, conic or many-stop gradients, use the **CSS Output** or arbitrary values. - **Shadow Gradient is a pseudo-element, not a `box-shadow`.** The soft color shadow is built from a `::before` with blur. That's why the Tailwind variant needs **`before:` utilities (v3.1+)**, and the element has to tolerate `position: relative`. If you want the effect verbatim, the **Full HTML + CSS Snippet** is the safe route — it ships the complete markup including the pseudo-element. - **Shadow Palette vs. Single Shadow — pick the right tool.** Need a **system** of graded shadows (cards, modals, dropdowns across three heights), use the [Shadow Palette](https://www.jpkc.com/db/en/tools/colors/manual/#shadow-palette) and its `--shadow-elevation-*` variables. Need a **single**, precisely hand-stacked shadow, **Single Shadow** is right — there you control every layer individually, including `inset`. - **"Tint shadow with background hue" makes the difference.** A pure black shadow quickly looks dirty. Leave the switch on in the Shadow Palette and the shadow picks up a hint of the background color and sits more harmoniously on the surface. - **More layers isn't automatically better.** Resolution **High** raises the layer count per tier (up to 9 in the highest) and gives very soft gradients but costs render effort. For most UIs, **Normal** (tiers of 2/3/6 layers) is enough — High pays off mainly for large, prominent surfaces. ## Image palettes — what to expect - **"Dominant" means most frequent, not prettiest.** Color Thief returns the computationally dominant color — for a photo with lots of sky that's blue, even if your eye sees the subject elsewhere. Always look at the whole palette, not just that one cell. - **Sorting brings structure.** The raw extraction order is arbitrary. Sort by **Lightness** for a light-to-dark scale, or by **Hue** to see which color families the image even contains. - **A big image ≠ a better palette.** Up to 25 MB is allowed, but the extraction doesn't get more accurate for it. A cleanly cropped, representative subject often yields a better palette than a huge original — and you can crop it beforehand in the Graphic Editor. ## Combine with other JPKCom tools - **Prepare the subject → pull the palette.** Crop, scale or convert the image with the **[Graphic Editor](https://www.jpkc.com/db/en/tools/graphic/)**, then drop the result into the [Image Color Scheme](https://www.jpkc.com/db/en/tools/colors/examples/#example-6-pull-a-palette-from-an-image-and-export-it) tab. - **Colors → background.** Feed the tones and gradients you found here straight into a **[GeoPattern](https://www.jpkc.com/db/en/tools/geopattern/)** or **[Trianglify UI](https://www.jpkc.com/db/en/tools/trianglify/)** background. - **Harden contrast → check live.** Secure a text/background combination in the contrast checker, then check the page with the **[SEO & GEO Analyzer](https://www.jpkc.com/db/en/tools/seo/)**, whose accessibility analysis looks at exactly such points. --- More context: the [overview](https://www.jpkc.com/db/en/tools/colors/) for the big picture, the [manual](https://www.jpkc.com/db/en/tools/colors/manual/) for every option, and the [examples](https://www.jpkc.com/db/en/tools/colors/examples/) for the step-by-step workflows. You can try all of it directly in the [tool](https://www.jpkc.com/tools/colors/).