Color & Design tools

Tap any pixel in a photo to read its HEX, RGB and HSL color, and build a small palette.

Convert any color between HEX, RGB, HSL, HSV and OKLCH. Live swatch and one-click copy for every format.

Generate harmonious color palettes — complementary, analogous, triadic and more. Copy HEX, RGB or CSS variables instantly.

Design linear, radial and conic CSS gradients with a live preview. Copy the CSS in one click.

Design CSS shadows visually with stacked layers, live preview and one-click copy.

Check WCAG AA and AAA color contrast between text and background, with a live preview.

Design rounded corners visually with per-corner control, live preview and a one-click CSS copy.

See your designs through protanopia, deuteranopia, tritanopia and more — check accessibility for everyone.

Design clip-path shapes — triangle, hexagon, star, arrow and more — with a live preview and one-click CSS.

Design frosted-glass cards with a live preview — blur, tint, border and shadow. Copy CSS or Tailwind in one tap.

Visual CSS Grid builder — pick columns, rows, gaps and tracks (fr, px, auto) with a live cell preview.

Generate smooth SVG waves for landing pages — control height, amplitude and gradient, then copy SVG or download.

Generate a full 50–950 Tailwind color scale from any base color. Copy the config snippet straight into your project.

Convert any hex color to oklch() and back — the modern perceptual CSS color space used by Tailwind v4. Free, private, in-browser.

Design bold mesh gradients with draggable color points. Copy CSS, or export a PNG or SVG at 4K, social or wallpaper sizes.

Design soft-UI (neumorphism) buttons and cards with a live preview and copy-ready CSS. Flat, pressed, concave or convex.