Professional Design Tools
Everything you need to build consistent, accessible user interfaces — color systems, gradients, contrast checking, QR codes, favicons and more. Free to use in your browser, with a free plan for downloads.
Generate accessible UI color palettes with real-time preview on desktop and mobile layouts. Export as CSS variables or JSON design tokens.
Extract colors, fonts, logos, and spacing from any live website and instantly generate a complete style guide.
Instantly convert between HEX, RGB, HSL, OKLCH, HSV, and CMYK color formats with live preview.
Check foreground/background color contrast ratios against WCAG 2.1 AA and AAA accessibility standards.
Build beautiful linear, radial, and conic CSS gradients with live preview and one-click copy.
Upload any image and automatically extract a dominant color palette. Export as HEX, CSS variables, or JSON tokens.
Create branded QR codes with custom colors, gradients, dot styles, logo embedding, and SVG export. Make any code trackable to count scans and change where it points after it is printed.
Generate favicon sets in ICO, PNG, and SVG formats from text, emoji, shapes, or uploaded images.
Extract and download all images from any webpage including backgrounds, srcset, and lazy-loaded images. Edit any of them in your browser and export as PNG, JPG or WebP.
Start with the Color Playground
Our flagship tool — generate a full UI color system and see it applied live to real interface components.
Open Color PlaygroundWhat runs in your browser and what needs a server
The color converter, contrast checker, gradient maker, favicon designer and palette extractor do their work entirely in your browser — your image never leaves the machine, and they keep working if the network drops after the page loads. Two tools cannot: the style guide extractor and the image downloader have to fetch someone else's page from a server, because a browser is not allowed to read a cross-origin site directly.
Which tool for which job
Starting from one brand color, use the converter for formats and the contrast checker to see what text can sit on it. Starting from an image, the palette extractor pulls the dominant colors out. Starting from a website you admire, the style guide extractor gives you its colors, fonts, logos and button styles in one pass. The QR generator and favicon designer are the two that produce files you ship rather than values you copy.
Frequently asked questions
Which tools are free without an account?
The color converter, contrast checker and gradient maker are free outright — no sign-in, no credits, nothing metered. Every tool is free to open and work in; an account is needed only at the point where a heavier tool produces a download.
What does a download cost?
Style guide extraction is 50 credits, a QR download 10 for PNG or 15 for SVG, an image extraction 5, and a palette or favicon 3 each. The free plan refills 50 credits every month and takes no card, so the light tools are effectively unmetered and the heavy one is about once a month.
Do my images get uploaded anywhere?
Not for the palette extractor or the favicon designer — both read your file with the browser's own APIs and process it on a canvas locally. The style guide extractor and image downloader work on a URL rather than your file, and fetch that page server-side; nothing from those runs is stored past the request.
Can I use the output commercially?
Yes, for anything the tools generate: palettes, gradients, favicons and QR codes are yours to use, with no watermark and no attribution. Material pulled off someone else's site with the style guide extractor or image downloader is a different matter — that stays under its owner's copyright, and those tools are for research, not redistribution.