Design Tools
Free design tools — color palette generator, gradient maker, typography checker, and design utilities for creators.
About Design Tools
Design utilities — pick colors with eyedropper precision, generate harmonious palettes, preview typography, edit SVG, and subset fonts. All processing happens locally — free to start with no signup, fair daily limits apply.
HEX to RGB Converter
Convert 3- or 6-digit HEX colors to RGB values instantly. Translate #4F46E5 for CSS rgb() use — free, local, no signup.
Color Shades & Tints
Generate shade and tint scales from any base color — 10-step ramps for design systems. Build hover states systematically — free, local, no signup.
Contrast Ratio Checker
Check any color pair's WCAG contrast ratio with AA/AAA verdicts for normal and large text. Prove 4.5:1 before shipping — free, local, no signup.
Color Converter
Convert colors between HEX, RGB, and HSL with a type-and-convert text UI. Translate brand specs across formats — free, local, no signup.
Color Blindness Simulator
Simulate color blindness: preview designs through protanopia, deuteranopia, and tritanopia filters — catch invisible-to-some UI. Fix red-green errors before users suffer — local Canvas work, free, no signup.
Color Picker
Pick colors from a visual spectrum or enter hex values. Copy to clipboard — perfect for design palettes, CSS variables, and UI mockups. Work never leaves your device — everything renders locally in your browser.
Color Palette Generator
Generate a fixed 6-color palette from a base color at set hue offsets (+30/+60/+120/+180/+210). Click any swatch to copy its HEX. Work never leaves your device — everything renders locally in your browser.
Gradient Generator
Design CSS gradients — linear, radial, conic — with multi-stop color control and live preview. Ship mesh-grade backgrounds from code — local generation, free, no signup.
Typography Preview
Preview font size, line-height, letter-spacing, and weight combos live before committing CSS. Test a 32px/1.5 bold hero in seconds — free, local, no signup.
SVG Editor
Edit SVG code with live preview — paths, fills, transforms. Tweak icons without Illustrator — local editing, unlimited saves.
Favicon Generator
Generate favicon packages — PNG icons plus Apple touch icons — from one image. Note: the .ico file is PNG data renamed (modern browsers only). Ship every platform icon in one pass — local generation, unlimited saves.
Font Converter
Convert fonts between TTF, OTF, and WOFF (WOFF2 accepted as input) with custom-text preview before downloading. Ship web-ready WOFF in one pass — local opentype.js work, unlimited saves.
Font Subsetter
Subset TTF/OTF fonts to used characters and export TTF or WOFF — cut webfont weight by 90%. Ship 12 KB instead of 150 KB — local opentype.js work, unlimited saves.
Avatar Generator
Generate initial-based avatars with custom colors, fonts, and sizes — profile placeholders in seconds. Ship default user pics that look designed — local Canvas work, free, no signup.
Logo Placeholder Generator
Generate text-based logo placeholders with fonts and styling for mockups. Brand wireframes convincingly — local generation, free, no signup.
Image Placeholder Generator
Generate placeholder images by URL with custom size, text, and colors — wireframes that look intentional. Fill layouts before assets arrive — local generation, free, no signup.
Vector Pen Canvas
Draw freehand vectors plus rectangle, ellipse, and line shapes on canvas — color and stroke control included. Sketch icons and diagrams with SVG/PNG export — local Fabric work, unlimited saves.
More from Toolzum
✓ Colors, fonts and icons generated on-device, free.
Works fully offline after first load — nothing leaves your browser.
Design FAQs
Which color format should I copy — HEX, RGB, or HSL?
HEX for CSS shorthand (#3B82F6), RGB when you need alpha transparency (rgba), HSL when adjusting lightness/saturation systematically. The picker outputs all three plus CSS variables.
What contrast ratio passes WCAG?
4.5:1 for normal text (AA), 3:1 for large text and UI components, 7:1 for AAA. The checker tests foreground/background pairs and suggests the nearest passing shade.
How do I get CSS for a gradient?
Build it visually with color stops, then copy the linear-gradient or radial-gradient declaration — with fallbacks — straight into your stylesheet.
Can I export a palette for Figma?
Yes — palettes export as swatch lists and CSS custom properties you can paste into design tokens, plus PNG strips for mood boards.