Design, color and QR code tools

Palette Extractor pulls a color palette from an image with median cut or k-means, builds tint and shade ramps, checks the WCAG contrast of every pair and previews protan, deutan and tritan color blindness. It exports CSS custom properties, SCSS variables, a Tailwind theme, JSON, a hex list or a PNG sheet, and images never leave your browser.

1. Open a reference image and choose median cut or k-means extraction.
2. Review the palette, tint and shade ramps, pair contrast and color-blindness previews.
3. Export CSS, SCSS, Tailwind tokens, JSON, hex values or a PNG sheet.

A palette is a starting point. Check the actual foreground and background combinations you will use rather than assuming every extracted color pairs well.

Asset Maker generates blobs, layered waves, topographic contours, blurred gradients, low-poly backgrounds, repeating patterns, scatter confetti and halftones from a seed you can randomize and tune. It downloads them as SVG, or as PNG, JPG or WebP at up to 4×, all drawn in your browser.

1. Choose an asset type such as blobs, waves, contours or a repeating pattern.
2. Adjust colors and geometry, and change the seed to explore variations.
3. Download SVG for editable vectors or choose a raster image export.

Keep SVG when you need scalable shapes. Raster outputs have fixed pixel dimensions, so choose a suitable export scale.

Theme Gallery is a catalog of named UI design styles, from Swiss and Bauhaus to Windows 95 and Glassmorphism, each built as a complete landing page and component kit for one of three fictional products. Styles can be compared section by section and component by component, and each one's tokens, stylesheet, components and SVGs can be copied.

1. Browse named styles and open ones that match the direction you are exploring.
2. Compare the same sections and components across styles.
3. Copy the tokens, stylesheets, components or SVG assets you want to adapt.

The product pages inside the gallery are fictional demonstrations. The gallery is the reference; examples are not separate live products.

QR Studio designs QR codes for links, text, Wi-Fi, contacts, email, SMS, phone numbers, locations and events, with custom module shapes, colors and a center logo, and reads each code back from its own pixels to confirm it scans. It downloads PNG, JPG or SVG, makes a batch from a CSV as a ZIP, scans codes with the camera or from a file, and keeps everything in your browser.

1. Choose a QR content type and enter the link, contact, Wi-Fi or other data.
2. Customize colors, shapes and logo while checking the scan result.
3. Download PNG, JPG or SVG, then test the code with a phone at its intended printed or displayed size.

A readable preview is not a guarantee that a small printed code will scan. Keep contrast, quiet space and logo coverage in mind.