Colors — Manual

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 — it is back in the picker on your next visit (as HEX);
• a history of the ten most recently used colors — while you type, a value only lands there after a one-second pause, not every intermediate keystroke; the tool currently has no view that lists this history;
• the last extracted palette — on every load, however, the tool analyzes its default image and replaces it in the process.

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): a color-space selector, below it one slider per channel of the chosen space — sRGB at startup — and an alpha slider. Below that 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. The default is #336699.

Picker and field stay in sync, with one courtesy to typing: while you write in the field, your value stays exactly as you entered it — an oklch() is not rewritten to HEX after the fact, and #3366cc is not shortened to #36c. If you pick the color in the picker, in the web-safe table or via the contrast checker's Swap button instead, the tool writes it into the field as HEX: always in full and mapped into sRGB. The copy button next to the field copies its current content — HEX, or whatever value you typed. The large Color Preview shows the color as a swatch, transparency included.

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 and the input field. 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 how precise the values are at the top via Precision (2, 3, 4, 5 or 8; default 3). Color.js counts significant digits, not decimals — the integer part counts too. So lch(41.5% 33.8 262) (Precision 3) becomes lch(42% 34 260) at 2: even the hue is rounded to tens. HEX and RGB (0–255) do not depend on the setting; for RGBA it only affects the alpha value (there as decimals). 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.

If the color lies outside the sRGB gamut — a vivid color(display-p3 1 0 0), say, or an oklch() with high chroma — the card shows a yellow notice at the top. All sRGB-based fields are then only approximations, each in its own way: HEX and RGB % are gamut-mapped. HSL and HWB are mapped within their own space and can therefore differ from HEX in hue. RGB (0–255) and RGBA do not map at all but clip each channel at 0 or 255 — so they too can differ from HEX. OKLCH and Lab (as well as LCH and OKLab) keep the exact value, and so do Display P3 and Rec. 2020 as long as the color can be displayed in those spaces; if it also lies outside P3, the P3 field shows a gamut-mapped value as well.

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 color from the input field as the foreground (text color) and the Background Color field (its own Coloris picker, default #ffffff; like every Coloris field in the tool, it has an alpha slider, a HEX/RGB/HSL format toggle and ten quick swatches) as the background. A Swap button exchanges the two. The live preview shows large and small text on the background.

Transparency is taken into account. The contrast formulas themselves know nothing about an alpha channel, so before every measurement the tool composites what you actually see: the text color over the background, and a translucent background over white. An rgba(0, 0, 0, 0.1) on white thus yields the realistic ratio of about 1.25:1 instead of an apparent 21:1. Below the ratio, a note explains what happened — for instance "The text color is 10% opaque — measured as it appears on the background (…)" with the composited HEX color, or "The background is translucent — assumed on white."

The result is scored in three blocks:

• WCAG 2.1: the contrast ratio (with two decimals, e.g. 4.70 : 1) plus four badges — AA Large (requires ≥ 3:1), AA Small (≥ 4.5:1), AAA Large (≥ 4.5:1) and AAA Small (≥ 7:1), each showing Pass or Fail.
• APCA (Proposed WCAG 3): the Lc value of the newer algorithm (as an absolute value, one decimal), 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.
• With color vision deficiency (WCAG ratio): the WCAG ratio of the same color pair as people with Protanopia, Deuteranopia, Tritanopia and Achromatopsia see it — simulated with the same model as the Color Blindness Simulator. Each row carries a badge: AA (≥ 4.5:1), AA Large (≥ 3:1) or Fail. That shows you at a glance whether a combination that reads well with normal vision collapses under a color-vision deficiency.

Color Blindness Simulator

The Color Blindness Simulator shows the chosen color as it appears to people with various forms of color-vision deficiency. It uses the physiologically based model by Machado, Oliveira and Fernandes (2009) — applied to linear sRGB values, with the complete forms (dichromacy) at severity 1.0 and the milder forms (anomalies) at 0.6; achromatopsia maps to relative luminance. 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 as Tailwind classes (v4 or v3).

• 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; default to right) or a free Custom Angle via slider and number field (0–360 deg, default 90). A preset sets the matching angle — with one exception: to top ends up at 90° (to the right) instead of 0° in the tool, so CSS and Tailwind then show a gradient to the right. For a gradient pointing up, set the Custom Angle to 0. A custom angle clears the preset selection. For Radial, you choose the shape (ellipse/circle) and one of nine positions. For Conic, you set a start angle (0–360) and one of nine positions.
• Color Stops: two to ten color stops (starting with #336699 at 0% and #66ccff at 100%). Add Stop inserts a new stop before the last one — with a 50:50 mix of the last two colors, halfway between their positions (at 50% if their units differ). From three stops on, each one can be removed. Every stop has a color value (Coloris picker) and a position. Allowed units: %, px, em, rem, vw, vh, vmin, vmax, cm, mm, in, pt and pc; a bare number is treated as %. An invalid entry turns the field red and reports "Invalid position. Use formats like: 50%, 100px, 2em". For the output, the tool sorts the stops by position.
• Presets: 16 ready-made two-color gradients (Purple Dream, Ocean Blue, Fire, Tropical …) as a starting point; a click replaces the stops with the preset's two colors at 0% and 100%.
• Preview: shows the gradient live, just as the CSS Output describes it.
• CSS Output: e.g. background: linear-gradient(90deg, #336699 0%, #66ccff 100%); — linear gradients are always written with a degree value, even if you chose a direction preset. Radial: radial-gradient(ellipse at center, …), Conic: conic-gradient(from 45deg at center, …) (the from is dropped at 0°).
• Tailwind CSS with a v4/v3 toggle (default v4):
  • Linear gradients with at most three stops and positions in % become utility classes including the positions, e.g. from-[#336699] from-0% via-[#4d99cc] via-50% to-[#66ccff] to-100%.
  • v4 takes any angle: multiples of 45° as a readable direction (bg-linear-to-r, bg-linear-to-br …), everything else as bg-linear-<angle>, e.g. bg-linear-110.
  • v3 only knows the eight directions bg-gradient-to-*. If the angle differs from them, the tool first gives the exact gradient as an arbitrary value and below it the variant rounded to the nearest direction — both with an explanatory comment.
  • Everything else — radial and conic gradients, more than three stops, positions in units other than % — comes out as an arbitrary value bg-[…] (spaces replaced by _), with a comment stating the reason. This route works in both v3 and v4.

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 largely match those of the Gradient Generator: Gradient Type (Linear/Radial/Conic), Direction with eight preset directions or a Custom Angle (default 135°, i.e. to bottom right), shape and position for Radial, start angle and position for Conic. The Color Stops start with #667eea and #764ba2; Add Stop appends stops up to a maximum of ten and redistributes all positions evenly across 0–100%; from three stops on you can remove individual ones. Twelve presets set colors, angle, blur, spread and Y offset in one step. On top of that:

• Shadow Properties (sliders): X Offset and Y Offset (−100…100 px, default 0 and 20), Spread (−50…100 px, default 10), Blur (0…150 px, default 30) and Opacity (0…100, displayed as 0.00–1.00, default 0.70).
• Demo Element: the preview shape — Box, Card, Button or Circle —, a Border Radius (0–100 px, default 12; no effect on the circle) and an Element Background color (default #1e1e2f). 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.
• Technique: the element itself stays transparent. Its ::before paints the visible surface (background color or mirrored gradient); its ::after carries the gradient — enlarged by the spread, shifted by X/Y, softened with filter: blur() and set to the chosen opacity. Both sit behind the content via z-index; the element needs position: relative.
• Output: CSS Output (class .shadow-gradient with ::before and ::after), Tailwind CSS (the same construction with before: and after: variants and arbitrary values; the note in the tool mentions Tailwind v3.1+) and a Full HTML + CSS Snippet — a ready, standalone HTML document to paste in.

Box Shadow

This area has two sub-tabs: Shadow Palette and Single Shadow. Both read their colors as HEX only, and in Shadow Palette that includes the background color as long as Tint shadow with background hue is on — keep the Coloris pickers' format toggle on HEX here. Switched to RGB or HSL, the output ends up with unusable values. Both ignore the pickers' alpha slider; you set the opacity via Alpha (Single Shadow) or Oomph (Shadow Palette).

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 (default #1e293b) and Background Color (Preview) (default #f1f5f9). The Tint shadow with background hue switch (on by default) takes hue and saturation (at least 30%) from the background color and only the lightness from the shadow 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 (slider, displayed as 0.00–1.00, default 0.40) controls length: 0 = tight contact shadow, 1 = long, dramatic shadows (up to ~130 px on the highest tier).
• Tuning: Oomph (overall intensity, default 0.50), Crispy (sharpness, default 0.30) 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). The first layer is always a tight contact shadow; the others grow larger, softer and fainter with the distance.
• Preview: three demo boxes for the Low, Medium and High tiers on the chosen background color.
• Output: CSS Custom Properties — --shadow-color (as HSL components) and --shadow-elevation-low/medium/high in a :root block, plus example classes .card-low, .card-medium, .card-high; applied via box-shadow: var(--shadow-elevation-medium); —, and a Full HTML + CSS Snippet with three demo cards.

Single Shadow

The classic, manual box-shadow editor with up to ten layers.

• Shadow Layers: it starts with two layers. Each layer has X and Y (−50…50 px each), Blur (0…100 px), Spread (−50…50 px), Color (Coloris picker), Alpha (0.00–1.00) and an Inset switch (inner shadow). Add Layer adds more (ten at most); as long as more than one layer exists, each can be removed. The first layer sits on top, each further one behind it — that is how CSS paints a comma-separated box-shadow list (the note in the tool describes the order the other way round). This lets you combine, say, a soft ambient shadow with a sharp contact shadow.
• Demo Element: shape (Box/Card/Button/Circle), Border Radius (0–100 px, default 12) and Element Background (default #ffffff).
• Preview: light or dark background.
• Output: CSS Output (the comma-separated box-shadow string on an example class .my-element, colors as rgba()), Tailwind CSS as an arbitrary value shadow-[…] (spaces replaced by _) and a Full HTML + CSS Snippet whose page background is based on the preview's light/dark toggle. The toggle alone does not regenerate the output, though — the snippet picks it up as soon as you change another setting.

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; the dominant color does not appear twice. Images with few colors (a logo with four colors, say) yield correspondingly fewer — the tool hides empty slots instead of leaving the colors of a previously loaded image in place. On page load, a default image is analyzed so you see a result immediately; that also replaces a saved palette.
• Extracted Palette: up to eleven rows (dominant plus Color 1–10), each with a swatch and copy button. The sort buttons in the card header order them by Original order (extraction order, dominant first), Lightness, Saturation or Hue — each ascending. The copy button next to them (Copy all colors) copies the whole list, one color per line. The first row of the list moves with the sorting; the separate Dominant Color card on the right is unaffected.
• Image Preview: shows the analyzed image.
• Export: pick the output from the dropdown in the Export card and copy it with Copy. The order follows the current sorting:
  • CSS Variables — :root { --color-1: …; }
  • SCSS Variables — $color-1: …;
  • Tailwind v4 (@theme) — @import "tailwindcss"; plus @theme { --color-palette-1: …; }, usable as bg-palette-1, text-palette-2 and so on
  • Tailwind v3 (config) — a tailwind.config.js with theme.extend.colors.palette (keys 1, 2, 3 …)
  • JSON — an array of the HEX values
  • Array (JS) — const colors = [ … ];
  • Array (PHP) — $colors = [ … ];

Limits and privacy — at a glance

• Purely client-side: no server, no API, no upload; images stay on your device (local canvas analysis).
• Persistence: last color, a history of the ten most recently used colors and the last palette, in localStorage alone; the palette is replaced on load by the default-image analysis.
• Image limit: maximum 25 MB; accepted types PNG, GIF, JPG, WebP, AVIF, BMP, SVG.
• Palette: dominant color plus up to ten more (fewer for images with few colors).
• Gradients: two to ten color stops (Gradient Generator and Shadow Gradient); Tailwind utility classes only for linear gradients with at most three stops in %, otherwise an arbitrary value.
• Single Shadow: one to ten layers.
• Contrast: WCAG 2.1 (AA/AAA) and APCA side by side, transparency composited, plus the WCAG ratio under four forms of color-vision deficiency.

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.