# Colors

> Color toolkit for web developers: color picker with 14 formats, gradient generator, CSS box-shadow and shadow-gradient builders, image palette extractor.

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

## A whole toolbox around color

[Colors](https://www.jpkc.com/tools/colors/) is not a single tool but a full toolbox for everything that touches color in day-to-day web work: pick a color and read it back in 14 CSS formats, build a CSS gradient, generate soft layered drop shadows — and pull a ready-made palette out of an uploaded image. Five areas, one shared frame, all of it right in the browser.

It is built for anyone who designs and builds interfaces: **developers** who need a valid `rgb()`, `oklch()` or a `box-shadow` string fast; **designers** who want to explore harmonies, tints and tones around a base color; and everyone who takes **accessibility** seriously and wants to check a contrast against WCAG and APCA before it ships. No account, no install, free.

## The five areas

The interface is split into five tabs:

- **Color Picker** — the richest area. Enter a color through the visual picker or as any CSS value (`hex`, `rgb`, `hsl`, `oklch`, `lab`, `p3` …) and read it back in **14 formats**: HEX, RGB (%), RGB (0–255), RGBA, HSL, HWB, Lab, LCH, OKLab, OKLCh plus the wide-gamut spaces Display P3, A98 RGB, ProPhoto and Rec. 2020. On top of that come **12 color harmonies** (complementary, analogous, triadic, tetradic and more), a **216-color web-safe table**, a **contrast checker** (WCAG 2.1 plus APCA) and a **color-blindness simulator** with eight vision types.
- **Gradient Generator** — linear, radial and conic CSS gradients with any number of color stops, direction presets or a free angle, 16 ready-made presets, and output as CSS and Tailwind.
- **Shadow Gradient** — a gradient used as a soft, colored drop shadow beneath an element, finely tunable via offset, spread, blur and opacity, with a live demo and export as CSS, Tailwind and a ready-to-paste HTML snippet.
- **Box Shadow** — two builders in one: **Shadow Palette** generates soft, layered elevation shadows as CSS custom properties across three height tiers; **Single Shadow** is the classic, multi-layer `box-shadow` editor with an `inset` option.
- **Image Color Scheme** — drop in an image and extract its dominant color plus up to ten palette colors, sort them, and export in six formats (CSS, SCSS, Tailwind, JSON, JS array, PHP array).

## Everything in the browser — nothing leaves your device

Colors is **purely client-side**: no server round-trip, no API, no upload. Even the image for palette extraction stays on your machine — it is read locally through `FileReader` and analyzed in the browser via canvas (Color Thief), not uploaded. Only a little is persisted, and only locally in **localStorage**: your last picked color and the last extracted palette. When you come back, both are still there. Under the hood, established open-source libraries do the color math — Color.js (including the Color.js Elements), Coloris, TinyColor2 and Color Thief.

## Try it now

**[→ Open Colors](https://www.jpkc.com/tools/colors/)** — pick a color, build a gradient, tune a shadow or drop in an image. No account, free, right in the browser.

## Related JPKCom tools

- **[Graphic Editor](https://www.jpkc.com/db/en/tools/graphic/)** — crop, scale and convert images; the natural step before preparing a picture for palette extraction.
- **[GeoPattern](https://www.jpkc.com/db/en/tools/geopattern/)** and **[Trianglify UI](https://www.jpkc.com/db/en/tools/trianglify/)** — geometric and low-poly SVG backgrounds you can fill with the colors and gradients you found here.
- **[SEO & GEO Analyzer](https://www.jpkc.com/db/en/tools/seo/)** — checks, among other things, the accessibility of a live page; harden the color contrast for it beforehand in the contrast checker.

---

Go deeper on the sub-pages: the **[Manual](https://www.jpkc.com/db/en/tools/colors/manual/)** with every area and option in detail, **[Examples](https://www.jpkc.com/db/en/tools/colors/examples/)** from practice, and collected **[Tips & Tricks](https://www.jpkc.com/db/en/tools/colors/tips/)**.