35 free color & design tools

Every color tool a designer needs, in one fast toolkit.

Palette generators, gradient builders, contrast checkers, converters and more — all free, all client-side, all running instantly in your browser. Nothing you upload ever leaves your device.

35Color & design tools
100%Client-side, private
$0Free, no sign-up
Color & Design Tools

All color tools

Every tool below runs entirely in your browser using JavaScript — nothing is ever sent to a server. Pick one to get started.

Color Palette Generator

Generate beautiful 5-color palettes instantly, lock colors you like and re-roll the rest.

Open tool

Gradient Generator

Build linear, radial and conic CSS gradients visually and copy the code.

Open tool

Contrast Checker (WCAG)

Check text/background color contrast against WCAG AA and AAA accessibility standards.

Open tool

HEX / RGB / HSL Converter

Convert colors instantly between HEX, RGB, HSL and CSS keyword formats.

Open tool

Color Picker From Image

Upload an image and pick exact HEX/RGB values from any pixel.

Open tool

Color Blindness Simulator

See how any color or uploaded image looks under different types of color blindness.

Open tool

Shades & Tints Generator

Generate a full tonal ramp of shades, tints and tones from a single base color.

Open tool

Complementary Color Finder

Find complementary, triadic, analogous and split-complementary color harmonies.

Open tool

CSS Box-Shadow Generator

Design multi-layer box-shadows visually and copy production-ready CSS.

Open tool

CSS Border-Radius Generator

Craft asymmetric rounded corners and organic blob shapes with live CSS output.

Open tool

Favicon Generator

Turn text, an emoji or an uploaded image into a downloadable favicon.

Open tool

Logo Maker (Basic)

Create a simple wordmark or icon-based logo and export it as PNG/SVG.

Open tool

Font Pairing Tool

Preview heading + body Google Font combinations side by side.

Open tool

Pattern / Texture Generator

Generate seamless dot, stripe, grid and noise background patterns as CSS or PNG.

Open tool

Gradient Text CSS Generator

Create eye-catching gradient text effects with copy-paste CSS.

Open tool

Color Name Identifier

Enter any HEX/RGB value and get the closest human-readable color name.

Open tool

Image Color Palette Extractor

Upload a photo and automatically extract its dominant color palette.

Open tool

Material Design Color Generator

Generate a full Material Design color system (50-900 tones) from one base color.

Open tool

Tailwind Color Generator

Turn any brand color into a ready-to-paste Tailwind CSS 50-950 color scale.

Open tool

SVG Pattern Generator

Design tileable SVG background patterns and export clean SVG markup.

Open tool

CMYK Color Converter

Convert colors between CMYK (print) and HEX/RGB (screen) for print-ready design work.

Open tool

Color Mixer

Blend two colors together at any ratio to find the exact color in between.

Open tool

Random Color Generator

Instantly roll a single random color in HEX, RGB, and HSL — great for quick inspiration.

Open tool

CSS Filter Generator

Design brightness, contrast, saturation, blur and hue-rotate CSS filters visually.

Open tool

Duotone Image Generator

Turn any photo into a stylish two-color duotone effect and export it as an image.

Open tool

CSS Variables Generator

Turn a palette into ready-to-paste :root CSS custom properties (CSS variables).

Open tool

Color Contrast Grid

Check WCAG contrast ratios across an entire palette at once in a color-by-color grid.

Open tool

Glassmorphism CSS Generator

Design frosted-glass UI cards with blur, transparency and border highlights, visually.

Open tool

Neumorphism (Soft UI) Generator

Create soft, extruded neumorphic shadows for buttons and cards with live preview.

Open tool

CSS Text-Shadow Generator

Build layered text shadows, glows and 3D text effects with copy-ready CSS.

Open tool

CSS Clip-Path Generator

Design triangles, polygons and custom shapes visually and export clip-path CSS.

Open tool

Accessible Text Color Suggester

Automatically adjust a color's lightness until it passes WCAG contrast on your background.

Open tool

HSB Color Wheel Picker

Pick colors visually from an interactive hue wheel with saturation/brightness square.

Open tool

SVG Color Replacer

Paste SVG markup and recolor every fill and stroke instantly without an editor.

Open tool

Warm / Cool Tone Adjuster

Shift an uploaded photo's white balance warmer or cooler with a single slider.

Open tool

Why Idiot Color Tools?

Runs in your browser

Every tool works entirely client-side with JavaScript. Nothing you type, upload, or generate is ever sent to a server.

Free, no sign-up

No accounts, no email walls, no watermarks. Open a tool and start using it immediately.

Built for real workflows

Every tool exports copy-ready CSS, hex codes, or downloadable files — not just a pretty preview.