# Design Tools

25 free tools for designers and developers

## Color Tools

### Create, extract, and optimize colors

- [**Color Palette Generator**](/content/tools/color-palette-generator/index.html) \- Generate beautiful AI-powered color schemes from text descriptions  
- [**Image Color Extractor**](/content/tools/image-color-extractor/index.html) \- Extract dominant color palettes from any image instantly  
- [**Color Contrast Checker**](/content/tools/color-contrast-checker/index.html) \- Check WCAG accessibility standards and contrast ratios  
- [**Gradient Generator**](/content/tools/gradient-generator/index.html) \- Create beautiful CSS gradients with live preview and export  
- [**Color Converter**](/content/tools/color-converter/index.html) \- Convert between HEX, RGB, and HSL formats with one click  
- [**Color Picker**](/content/tools/color-picker/index.html) \- Pick colors and explore harmonies in multiple formats  
- [**Color Name Finder**](/content/tools/color-name-finder/index.html) \- Find the closest named color for any HEX, RGB, or HSL value

## Image Tools

### Resize, compress, and transform images

- [**Image Compressor**](/content/tools/image-compressor/index.html) \- Reduce image file sizes by up to 90% while maintaining quality  
- [**Image Format Converter**](/content/tools/image-format-converter/index.html) \- Convert images between PNG, JPEG, and WEBP formats  
- [**Image Resizer**](/content/tools/image-resizer/index.html) \- Resize images with social media presets and custom dimensions  
- [**Image Cropper**](/content/tools/image-cropper/index.html) \- Crop images with aspect ratio presets, rotate and zoom  
- [**Image to Base64**](/content/tools/image-to-base64/index.html) \- Convert images to Base64 encoded strings for embedding  
- [**Background Remover**](/content/tools/background-remover/index.html) \- Remove backgrounds from images with AI technology

## SVG Tools

### View, edit, and optimize SVG files

- [**SVG Viewer & Editor**](/content/tools/svg-viewer/index.html) \- Upload, view and edit SVG files with live preview

## Typography Tools

### Create typography scales and transform text

- [**Typography Scale Generator**](/content/tools/typography-scale-generator/index.html) \- Generate harmonious type scales with base size and ratio  
- [**Text Case Converter**](/content/tools/text-case-converter/index.html) \- Convert text to UPPERCASE, lowercase, camelCase, and more

## CSS Tools

### Generate CSS with visual editors

- [**Box Shadow Generator**](/content/tools/box-shadow-generator/index.html) \- Create CSS box shadows with visual editor and presets  
- [**Border Radius Generator**](/content/tools/border-radius-generator/index.html) \- Generate custom border radius with individual corner controls  
- [**CSS Filter Generator**](/content/tools/css-filter-generator/index.html) \- Apply CSS filters with live preview and presets  
- [**Flexbox Generator**](/content/tools/flexbox-generator/index.html) \- Visual Flexbox layout builder with live preview

## Layout & Spacing Tools

### Calculate layouts, spacing, and units

- [**Unit Converter**](/content/tools/unit-converter/index.html) \- Convert between px, rem, em, %, vh, vw, and pt  
- [**Spacing Scale Generator**](/content/tools/spacing-scale-generator/index.html) \- Generate consistent spacing scales for design systems  
- [**Grid Calculator**](/content/tools/grid-calculator/index.html) \- Calculate CSS Grid layouts with columns and gutters  
- [**Aspect Ratio Calculator**](/content/tools/aspect-ratio-calculator/index.html) \- Calculate aspect ratios and missing dimensions  
- [**Lorem Ipsum Generator**](/content/tools/lorem-ipsum-generator/index.html) \- Generate placeholder text for design mockups