Free Color & Design Tools
Pick and convert colors, build palettes, check text contrast for accessibility, and generate CSS gradients, shadows and rounded corners with a live preview.
31 free tools · No sign-up · Works on phones and computers
Start here
Popular design tools
- Color PickerPick a color and get its HEX, RGB and HSL codes instantly.
- Color ConverterConvert colors between HEX, RGB, HSL, HSV and CMYK.
- Contrast Checker (WCAG)Check text and background colors against WCAG accessibility rules.
- Flowchart MakerType steps and arrows, get a clean flowchart — download as SVG or PNG.
- Code Screenshot GeneratorTurn code into a beautiful image with syntax highlighting, themes, window chrome and gradients.
All design tools
31 tools
- Color PickerPopularPick a color and get its HEX, RGB and HSL codes instantly.
- Color ConverterPopularConvert colors between HEX, RGB, HSL, HSV and CMYK.
- Color Palette GeneratorBuild harmonious palettes: complementary, analogous, triadic and more.
- Tints & Shades GeneratorGenerate lighter tints and darker shades of any color.
- Contrast Checker (WCAG)PopularCheck text and background colors against WCAG accessibility rules.
- CSS Gradient GeneratorDesign linear and radial gradients and copy the CSS.
- Box Shadow GeneratorDesign CSS box shadows visually and copy the code.
- Border Radius GeneratorShape rounded corners per corner and copy the CSS.
- Fluid Font Size (clamp) GeneratorCreate responsive font sizes with CSS clamp() between two screen widths.
- Aspect Ratio CalculatorFind an image or video's aspect ratio and resize it without distortion.
- Golden Ratio CalculatorSplit any length by the golden ratio φ ≈ 1.618 for layouts and design.
- Type Scale GeneratorA harmonious set of font sizes from a base size and ratio, as CSS variables.
- Glassmorphism CSS GeneratorFrosted-glass cards with backdrop blur — live preview and copy-ready CSS.
- Neumorphism CSS GeneratorSoft, extruded UI shapes with double shadows — live preview and CSS.
- CSS Button GeneratorDesign buttons with colours, gradients, radius, shadows and hover effects — copy the CSS.
- Font Pairing ToolPreview 24 hand-picked Google Font pairs for headings and body text.
- SVG OptimizerShrink SVG files by removing editor junk and rounding numbers — with a safe preview.
- Flowchart MakerPopularType steps and arrows, get a clean flowchart — download as SVG or PNG.
- Mind Map MakerTurn an indented outline into a colourful mind map — SVG or PNG.
- Timeline MakerCreate vertical or horizontal timelines from a simple list — SVG or PNG.
- CSS Animation GeneratorPick and tweak keyframe animations — bounce, fade, pulse, shake — with a live preview and CSS.
- Cubic Bezier Easing GeneratorDesign CSS easing curves by dragging handles, compare them with linear, and copy cubic-bezier().
- CSS Clip-Path GeneratorClip images into polygons, circles and stars by dragging points, and copy the clip-path CSS.
- CSS Flexbox GeneratorLearn and build flexbox layouts visually — direction, wrap, alignment, gap and per-item flex.
- CSS Grid GeneratorBuild CSS grid layouts with template columns, gaps, auto-fit and spanning items, then copy the CSS.
- Design Token ConverterConvert design tokens JSON into CSS variables, Tailwind v3/v4 themes, SCSS, Less or TypeScript.
- SVG Path EditorVisualise and edit SVG path data: drag points, convert absolute/relative, flip, scale and minify.
- Code Screenshot GeneratorPopularTurn code into a beautiful image with syntax highlighting, themes, window chrome and gradients.
- Device Mockup GeneratorPut a screenshot into a phone, tablet, laptop or browser frame and download a PNG.
- Color Blindness SimulatorSee how images and palettes look with protanopia, deuteranopia, tritanopia and achromatopsia.
- Placeholder Image GeneratorMake placeholder images of any size and colour — PNG, JPG, WebP or an inline SVG data URI.
Good to know
What contrast ratio do I need?
WCAG 2.2 level AA asks for at least 4.5:1 between normal body text and its background, and 3:1 for large text (about 24px regular or 19px bold). Level AAA raises those to 7:1 and 4.5:1. The contrast checker reports all four results at once.
Design guides
Step-by-step help that goes with these tools.
Design tools: common questions
Which color formats are supported?
HEX, RGB, HSL, HSV and CMYK. CMYK values are a mathematical conversion; real print colors depend on the printer and paper profile.
Explore other categories
- 41 tools
Calculators
Percentages, algebra, statistics, geometry and everyday math.
- 22 tools
Finance
Loans, mortgages, interest, savings and salary in plain numbers.
- 30 tools
Converters
Length, weight, temperature, area, volume, speed and more.
- 42 tools
Text
Count words, change case, clean up and compare text.
- 61 tools
Developer
Format, validate, convert and encode code and data.
- 33 tools
Images
Compress, resize, crop and convert photos in your browser.
- 35 tools
PDF
Merge, split, rotate and convert PDF files.
- 15 tools
Audio
Trim, join, speed up and clean up audio, and record your voice.
- 11 tools
Files
Zip, unzip, compress, rename and inspect files.
- 9 tools
SEO
Meta tags, schema, robots.txt, sitemaps and SERP previews.
- 16 tools
Web
QR codes, URL tools, UTM links and browser info.
- 29 tools
Business
Invoices, receipts, margins, markup, VAT and ROI.
- 29 tools
Date & Time
Age, date differences, time zones, timers and clocks.
- 9 tools
Security
Strong passwords, passphrases, hashes and secure tokens.
- 8 tools
Health
BMI, calories, body fat, water intake and sleep.
- 52 tools
Education
Grades, GPA, physics, chemistry, engineering and biology.
- 15 tools
Everyday
Random pickers, dice, a notepad, typing test and more.
- 5 tools
Smart Text
Summarize, extract keywords, analyze tone and count tokens.