Built for designers — pixel-perfect, private, instant.

Convert colors, check WCAG contrast, build gradients, shadows and easing curves, sample palettes from images, and clean up assets — all client-side.

Why this set

Designers move between Figma, the browser DevTools panel, and the codebase all day. This set replaces the dozen tabs you'd otherwise keep open: a color converter that speaks HEX/RGB/HSL/OKLCH, accessible contrast checking, CSS generators that output copy-paste ready code, and image utilities that compress without re-uploading sensitive comps to a third-party host.

Color

Color Converter (HEX/RGB/HSL/OKLCH)

HEX, RGB, HSL and modern OKLCH — instantly.

Contrast Checker (WCAG)

Check WCAG AA / AAA contrast — pass or fail.

Tailwind Color Finder

Closest Tailwind class for any HEX color.

Image Color Picker & Palette

Drop an image, extract its palette.

CSS generators

Gradient Generator

Linear, radial and conic CSS gradients.

Box Shadow Generator

Visual CSS box-shadow editor.

Border Radius Generator

Per-corner CSS border-radius editor.

Cubic Bezier Editor

Design CSS easing curves visually.

Layout & assets

CSS Units Converter

Convert px, rem, em, pt and more.

Aspect Ratio Calculator

Compute ratios and resize dimensions.

Image Resizer

Resize images to exact pixel dimensions.

Image Compressor

Shrink image file size with one click.

Image Format Converter

Convert PNG, JPG and WebP — in your browser.

Favicon Generator

Generate full favicon and PWA icon sets.

SVG to PNG Converter

Render SVG markup to a high-resolution PNG.

PNG to SVG Vector Tracer

Vector-trace PNG, JPG or WebP into a scalable SVG.

More audiencesFor developers For iphone users For writers & editors For finance & accounting For travelers