JPKCom DB

Colors — Tips & Tricks

Tricks for Colors: wide gamut and the gamut notice, reading contrast with transparency and color blindness, Tailwind v4/v3, shadow layers, image palettes.

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. Whatever you type stays in the field as typed — so the copy button next to it copies exactly your value, not automatically HEX. Need HEX? Use the copy button on the HEX row in the Color Formats.
  • 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.
  • Take the gamut notice seriously. When the yellow "Outside the sRGB gamut" notice appears above the Color Formats, HEX, RGB, HSL and HWB are only approximations. That is exactly when the pairing of an sRGB fallback with a P3 or OKLCH value pays off — and exactly when you shouldn't copy the HEX value into the style guide as "the" color.
  • Choose Precision deliberately. The setting counts significant digits, not decimals — the integer part is included. Three is a good default. At 2 the tool rounds two-digit values to whole numbers and three-digit ones such as the hue even to tens (lch(41.5% 33.8 262) becomes lch(42% 34 260)), so for design tokens you are better off staying at 3. If you need lossless round-trips, go to 5 or 8. The setting applies to every field except HEX and RGB (0–255); for RGBA it only affects the alpha value.
  • 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.
  • Measure transparent colors honestly. The contrast formulas know nothing about alpha — computed naively, an rgba(0, 0, 0, 0.1) on white would have the same contrast as solid black. So the contrast checker first composites text and background (a translucent background is placed on white) and only then measures. If a yellow note appears below the ratio, you know transparency was factored in. If your real page background isn't white, enter the background as an opaque color.
  • Contrast and color blindness are two different things. A pair of colors can have enough contrast and still be hard to tell apart under red-green deficiency. That's why the contrast checker also computes the WCAG ratio for protanopia, deuteranopia, tritanopia and achromatopsia (With color vision deficiency), and the Color Blindness Simulator right below shows you the color itself through those lenses. Check both, especially when color alone carries meaning (status, charts).

Gradients and shadows without surprises

  • Choose the Tailwind version first, then copy. The Tailwind CSS card in the Gradient Generator has a v4/v3 toggle. In v4, bg-linear-<angle> reproduces any angle exactly; v3 only knows eight directions and rounds — in that case the tool also shows you the exact arbitrary value. Utility classes exist only for linear gradients with at most three stops in %; radial, conic or many-stop gradients end up as a bg-[…] class that works in both versions. For such gradients, the CSS Output in a class of its own often keeps your markup more readable.
  • For a Tailwind v4 palette, use the @theme export. In the Image Color Scheme, Tailwind v4 (@theme) produces theme variables --color-palette-N, which Tailwind automatically turns into bg-palette-N, text-palette-N and so on — no tailwind.config.js needed. You only need the Tailwind v3 (config) variant for v3 projects.
  • Shadow Gradient is a pair of pseudo-elements, not a box-shadow. The soft color shadow comes from an ::after carrying the gradient, blur and opacity; the ::before paints the element's visible surface. That's why the Tailwind variant needs before: and after: utilities with arbitrary values, 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 both pseudo-elements.
  • 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 follows the analysis, not your eye. Sort by Lightness for a dark-to-light scale, or by Hue to see which color families the image even contains. The export follows the chosen order.
  • Fewer rows are not a bug. A logo or graphic with only a few flat colors yields only as many colors as it really contains; the tool hides empty slots. For a full palette of ten, you need a more colorful subject.
  • 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.
  • Save the palette right away. The color in the picker survives a reload, the image palette doesn't: on load, the tool analyzes its default image. So copy the export before you close the tab.

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.