🎨 Designer Toolkit
Tools built for
designers
Color contrast, typography pairing, aspect ratios, hex converters, shadow builders — everything a UI/UX or graphic designer reaches for daily. All free, all instant.
UI/UX Designers
Graphic Designers
Brand Designers
Web Designers
Contrast Checker
WCAG AA/AAA
Font Pairing
Live preview
Aspect Ratio
Any dimension
Hex ↔ RGB
Color converter
Tint & Shade
Color scale gen
Shadow Builder
CSS box-shadow
01
Color Tools
Contrast Checker
WCAG AA & AAA accessibility
Text Color
Background Color
Large text preview
Small text preview — can you read this clearly?
21.0 : 1
Contrast ratio
Hex ↔ RGB ↔ HSL
Color format converter
Enter any format
Tint & Shade Generator
Generate a full color scale from any hex color
Base Color
Steps
02
Typography Tools
Font Pairing Preview
See heading + body combinations live
Heading Font
Body Font
Preview Text
The quick brown fox
The quick brown fox jumps over the lazy dog. Good typography creates harmony between heading and body text — this combination feels balanced and readable.
Type Scale Generator
Generate a harmonic typographic scale
Base Size (px)
Scale Ratio
03
Layout & Spacing Tools
Aspect Ratio Calculator
Find missing dimension for any ratio
Width (px)
Height (px)
Common ratios
CSS Shadow Builder
Visual box-shadow generator
Offset X: 4px
Offset Y: 4px
Blur: 12px
Spread: 0px
Color
Opacity: 20%
Preview
box-shadow: 4px 4px 12px 0px rgba(26,22,18,0.20);