JPKCom DB

Colors

Color toolkit for web developers: picker with 14 formats, WCAG/APCA contrast and color blindness, gradients, CSS shadows, image palettes, Tailwind export.

A whole toolbox around color

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 — including semi-transparent colors and from the point of view of people with color-vision deficiency. No account, no install, free.

The five areas

The interface is split into five tabs (the labels are in English, like the rest of the tool):

  • 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. If a color lies outside sRGB, a notice tells you which formats are approximations and which stay exact. 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, with transparency composited correctly and the contrast under four forms of color-vision deficiency) and a color-blindness simulator with eight vision types, based on the model by Machado, Oliveira and Fernandes (2009).
  • Gradient Generator — linear, radial and conic CSS gradients with up to ten color stops, direction presets or a free angle, 16 ready-made presets, and output as CSS and as Tailwind classes for either Tailwind v4 or v3.
  • 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 box-shadow editor with up to ten layers and 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 seven formats (CSS, SCSS, Tailwind v4 as @theme, Tailwind v3 as a config, 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 (it is back in the picker on your next visit), a list of the ten most recently used colors, and the last extracted palette. On load, however, the tool replaces that palette with the analysis of its default image — so export your palette before you leave the page. 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 — pick a color, build a gradient, tune a shadow or drop in an image. No account, free, right in the browser.

  • Graphic Editor — crop, scale and convert images; the natural step before preparing a picture for palette extraction.
  • GeoPattern and Trianglify UI — geometric and low-poly SVG backgrounds you can fill with the colors and gradients you found here.
  • SEO & GEO Analyzer — 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 with every area and option in detail, Examples from practice, and collected Tips & Tricks.