JPKCom DB

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.

Back to the overview: Colors · Open the tool live: www.jpkc.com/tools/colors/

The manual describes every area, the 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 — 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 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 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 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, then drop the result into the Image Color Scheme tab.
  • Colors → background. Feed the tones and gradients you found here straight into a GeoPattern or Trianglify UI background.
  • Harden contrast → check live. Secure a text/background combination in the contrast checker, then check the page with the SEO & GEO Analyzer, whose accessibility analysis looks at exactly such points.

More context: the overview for the big picture, the manual for every option, and the examples for the step-by-step workflows. You can try all of it directly in the tool.