JPKCom DB

Colors

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

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. 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 — 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.