Design & Color tools
QR codes, color conversion, palettes and contrast, gradients and shadows, favicons, and sizing math.
Turn any width and height into a simplified aspect ratio, lock a preset like 16:9 to auto-compute the other dimension, and browse common resolutions.
Make UPC-A, UPC-E, EAN-13, EAN-8, Code 128, Code 39 and ITF-14 barcodes free with check digits added.
Design multi-layer CSS box shadows with live preview — offsets, blur, spread, color, opacity and inset — start from soft, layered or neumorphic presets, and copy CSS or a Tailwind class.
Generate complementary, split-complementary, analogous, triadic, tetradic, and monochromatic palettes from any base color, with click-to-copy swatches.
Pick any color and get its hex, rgb(), and hsl() values, 10 tints and 10 shades, and WCAG contrast ratios against white and black.
Check text and background colors against WCAG 2.2 AA and AAA for normal text, large text and UI components, see the APCA Lc value, and get the nearest passing color.
Generate CSS clamp() values for fluid font sizes and spacing from min/max sizes and viewports, build a fluid type scale, preview it live, and check WCAG zoom safety.
Design linear, radial, and conic CSS gradients with up to five color stops, a live preview, and copy-ready background-image code.
Make a favicon from one or two characters or an emoji: pick colors and shape, then download PNGs at 512/180/32/16 px plus a packed favicon.ico.
Convert colors between hex, rgb(), and hsl() with linked live inputs — paste any format, including CSS color names, and get all the others.
Extract the dominant color palette from a photo or screenshot with each color's share, pick exact pixels with a loupe, and copy HEX, RGB, HSL, CSS variables or Tailwind config.
Convert px to rem and back with a configurable root font size, plus a reference table of common pixel values in rem.
Generate QR codes for URLs, Wi-Fi credentials, phone numbers, and email — with custom colors, size, and error correction, downloadable as PNG or SVG.
About Design & Color tools
Color sits at the center of this category: pick any color and get its hex, rgb(), and hsl() values with tints, shades, and WCAG contrast ratios; convert between formats (CSS color names included) with linked live inputs; generate complementary, analogous, triadic, and monochromatic palettes from a base color; or design linear, radial, and conic CSS gradients with a live preview and copy-ready code. The image color extractor pulls a dominant palette out of any photo or screenshot, and the contrast checker scores text and background pairs against WCAG 2.2 AA and AAA (with APCA for reference) and suggests the nearest passing color.
Around it are the practical generators and calculators of day-to-day design work. The QR code generator encodes URLs, Wi-Fi credentials, phone numbers, and email addresses with custom colors and error correction, exporting PNG or SVG. The favicon generator turns a character or emoji into a full icon set — PNGs at standard sizes plus a packed favicon.ico. The aspect ratio calculator simplifies any dimensions and locks presets like 16:9 to compute a missing side, and the px-to-rem converter translates against a configurable root font size. For CSS, the box shadow generator builds layered, neumorphic, and inset shadows as CSS or Tailwind classes, and the clamp generator writes fluid font sizes and type scales with a check for zoom accessibility.
Everything renders and computes locally: QR codes and favicons are generated in your browser and downloaded straight from it, with nothing uploaded to a server. The tools are free, with no watermarks on anything you export.