# Colors — Manual

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

Source: https://www.jpkc.com/db/en/tools/colors/manual/

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/)

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](https://www.jpkc.com/db/en/tools/colors/). Concrete workflows are in the [examples](https://www.jpkc.com/db/en/tools/colors/examples/), collected tricks in the [tips & tricks](https://www.jpkc.com/db/en/tools/colors/tips/). You can try all of it directly in the [tool](https://www.jpkc.com/tools/colors/).