JPKCom DB

Colors — Manual

Full reference for Colors: color picker with 14 formats and 12 harmonies, contrast checker, gradient and shadow builders, and image palette extraction.

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

This manual describes each of the five areas of Colors with all of its options. The tool's interface is in English, so the tab, field and button labels below match what you see on screen.

Architecture and operation

Colors runs entirely in your browser. There is no server round-trip, no API and no upload — not even for the image palette: the image is read locally through FileReader and analyzed in the browser via canvas, and it never leaves your device. Only a little is stored, and only in the browser's localStorage: your last picked color and the last extracted palette. The color math is handled by the libraries Color.js (including the Color.js Elements for the visual picker), Coloris, TinyColor2 and Color Thief.

The five areas sit in a tab bar at the top: Color Picker, Gradient Generator, Shadow Gradient, Box Shadow and Image Color Scheme. Each gets its own section below.

Color Picker

The most extensive area. Here you pick a color, read it back in many formats, derive harmonies, and check contrast and color-vision deficiency.

Color Input and Preview

At the top sits a visual color picker (the <color-picker> element from the Color.js Elements, in the sRGB space, with an alpha slider). Below it is a text field (Enter a color value) that accepts any valid CSS color — hex, rgb(), hsl(), oklch(), lab(), color(display-p3 …) and so on. Picker and field stay in sync: change one and the other follows. The default is #336699. A copy button copies the HEX value. The large Color Preview shows the color as a swatch.

Web Safe Colors

To the right is the classic 216-color web-safe table (the "browser-safe" colors built from the steps 00/33/66/99/CC/FF). Clicking a cell loads that color into the picker. Nostalgic, but handy as a quick, gridded color choice.

Color Formats

The Color Formats card outputs the current color in 14 formats, each with its own copy button. You set the number of decimals at the top via Precision (2, 3, 4, 5 or 8; default 3). The formats are grouped as:

  • CSS Traditional: HEX, RGB % (modern percentage syntax), RGB (0–255, legacy comma syntax), RGBA (legacy comma syntax), HSL, HWB.
  • Perceptual (CIE): Lab, LCH, OKLab, OKLCh — the perceptually based spaces that give even lightness and saturation steps.
  • Wide Gamut: Display P3, A98 RGB, ProPhoto RGB, Rec. 2020 — for displays with an extended gamut.

The conversion is done by Color.js; you copy whichever value your CSS needs right now.

Color Harmonies

The Color Harmonies card derives 12 harmony sets from the chosen color. They are computed in the OKLCH space (hue rotation, or adjustment of lightness L and chroma C). Clicking a swatch copies its HEX value. The sets:

  • Complementary — the opposite color (180°).
  • Analogous — the base plus its two neighbors (−30°/+30°).
  • Triadic — three colors 120° apart.
  • Split-Complementary — the base plus the two neighbors of the complement (150°/210°).
  • Tetradic (Square) — four colors 90° apart.
  • Rectangle — four colors in a rectangle (0°/60°/180°/240°).
  • Monochromatic — the same color at three lightnesses.
  • Shades — darker variants (lower lightness).
  • Tints — lighter variants (toward white).
  • Tones — desaturated variants (lower chroma).
  • Compound — a mix of analogous and complementary logic.
  • Clash — a deliberately jarring combination (90°/270°).

Contrast Checker

Spanning the full width, the Contrast Checker tests two colors against each other: the currently picked color as the foreground and the Background Color field (its own Coloris picker) as the background. A Swap button exchanges the two. The live preview shows large and small text on the background. It is scored by two systems:

  • WCAG 2.1: the contrast ratio (e.g. 4.7 : 1) plus four badges — AA Large (requires ≥ 3:1), AA Small (≥ 4.5:1), AAA Large (≥ 4.5:1) and AAA Small (≥ 7:1).
  • APCA (Proposed WCAG 3): the Lc value of the newer algorithm, with Body Text (requires Lc ≥ 75) and Large Text (Lc ≥ 60). APCA is the proposed successor to the WCAG 2.x formula and weights lightness more realistically.

Color Blindness Simulator

The Color Blindness Simulator shows the chosen color as it appears to people with various forms of color-vision deficiency (matrix simulation). Eight cells: Normal, Protanopia (red-blind, ~1% of men), Deuteranopia (green-blind, ~1%), Tritanopia (blue-blind, rare), Protanomaly (red-weak, ~1%), Deuteranomaly (green-weak, ~5%), Tritanomaly (blue-weak, rare) and Achromatopsia (full color blindness, very rare). Useful to check whether two colors stay distinguishable for everyone.

Gradient Generator

Builds CSS gradients and outputs them as CSS and Tailwind.

  • Gradient Type: Linear, Radial or Conic.
  • Direction (depending on type): for Linear, eight preset directions (to right, to left, to bottom, to top plus four diagonals) or a free Custom Angle via slider and number field (0–360 deg). For Radial, you choose the shape (ellipse/circle) and one of nine positions. For Conic, you set a start angle and a position.
  • Color Stops: any number of stops (starting with two, #336699 at 0% and #66ccff at 100%). Add Stop adds more; from three stops on, each one can be removed. Every stop has a color value (Coloris picker) and a position with a freely chosen unit: %, px, em, rem, vw, vh, vmin, vmax (absolute units are accepted too; a bare number is treated as %).
  • Presets: 16 ready-made gradients (Purple Dream, Ocean Blue, Fire, Tropical …) as a starting point.
  • Output: CSS Output (background: linear-gradient(…)) and Tailwind CSS (e.g. bg-gradient-to-r from-[#336699] to-[#66ccff]). The tool notes that Tailwind natively supports only linear gradients with two to three stops — for anything more complex, use arbitrary values or the raw CSS.

Shadow Gradient

Creates a gradient used as a soft, colored drop shadow beneath an element — the fashionable "glow" shadow that picks up the element's color. The gradient controls (type, direction, color stops, 12 presets) match those of the Gradient Generator. On top of that:

  • Shadow Properties (sliders): X Offset and Y Offset (−100…100 px, Y defaults to 20), Spread (−50…100 px), Blur (0…150 px) and Opacity (0…100%).
  • Demo Element: the preview shape — Box, Card, Button or Circle —, a Border Radius (0–100 px) and an Element Background color. The Mirror gradient on element switch additionally paints the same gradient onto the element's surface (overriding the background color).
  • Preview background: toggle between light and dark to judge the shadow on both surfaces.
  • Output: CSS Output, Tailwind CSS (uses before: pseudo-element utilities with arbitrary values, Tailwind v3.1+) and a Full HTML + CSS Snippet — a ready, standalone HTML document to paste in. Technically the effect is built from a ::before element with gradient, blur and opacity.

Box Shadow

This area has two sub-tabs: Shadow Palette and Single Shadow.

Shadow Palette

Generates soft, layered elevation shadows across three height tiers at once — the "smooth shadow" look where one shadow is built from several stacked layers.

  • Color: Shadow Color and a Background Color for the preview. The Tint shadow with background hue switch (on by default) derives the shadow's hue from the background color, which feels more harmonious than pure black.
  • Light Position: Angle (0–360°, default 135) sets the light direction — 0° = light from above, shadow downward; 90° = from the right, shadow to the left; 315° = from top-left, shadow to bottom-right. Distance (0–100) controls length: 0 = tight contact shadow, high values = long, dramatic shadows (up to ~130 px on the highest tier).
  • Tuning: Oomph (overall intensity), Crispy (sharpness of the contact layer) and Resolution (Low/Normal/High slider) — the number of stacked layers per tier. At Normal, the Low/Medium/High tiers use 2 / 3 / 6 layers (Resolution Low → 1/2/3, High → 3/5/9).
  • Preview: three demo boxes for the Low, Medium and High tiers.
  • Output: CSS Custom Properties (--shadow-elevation-low/medium/high), applied via box-shadow: var(--shadow-elevation-medium);, plus a Full HTML + CSS Snippet.

Single Shadow

The classic, manual box-shadow editor with any number of layers.

  • Shadow Layers: it starts with two layers. Each layer has X/Y offset, blur, spread, a color with alpha, and an inset switch (inner shadow). Add Layer adds more; layers stack from the first (bottom) to the last (top). This lets you combine, say, a soft ambient shadow with a sharp contact shadow.
  • Demo Element: shape (box/card/button/circle), Border Radius and Element Background.
  • Preview: light or dark background.
  • Output: CSS Output (the comma-separated box-shadow string), Tailwind CSS and a Full HTML + CSS Snippet.

Image Color Scheme

Extracts a color palette from an image — entirely in the browser.

  • Upload: by drag & drop into the zone or via Browse files. Accepted types are PNG, GIF, JPG, WebP, AVIF, BMP and SVG, up to a maximum of 25 MB. A progress bar accompanies the read.
  • Extraction: Color Thief determines the dominant color and up to ten further palette colors. A default image is already analyzed on page load so you see a result immediately.
  • Extracted Palette: dominant plus Color 1–10, each with a swatch and copy button. The Sort switches order them by Original (extraction order), Lightness, Saturation or Hue. Copy all copies the whole list. The separate Dominant Color card is unaffected by sorting.
  • Export: the Format menu selects the output — CSS Variables (--color-N), SCSS Variables, Tailwind Config, JSON, Array (JS) or Array (PHP) — and you copy it with one click.

Limits and privacy — at a glance

  • Purely client-side: no server, no API, no upload; images stay on your device (local canvas analysis).
  • Persistence: only the last color and last palette, in localStorage alone.
  • Image limit: maximum 25 MB; accepted types PNG, GIF, JPG, WebP, AVIF, BMP, SVG.
  • Palette: dominant color plus up to ten more.
  • Contrast: WCAG 2.1 (AA/AAA) and APCA — both systems side by side.

For the introduction and the big picture, see the overview. Concrete workflows are in the examples, collected tricks in the tips & tricks. You can try all of it directly in the tool.