Design Tools
Generate colors, spacing scales, and design utilities.
Flagship tools
Start with the strongest tools in design tools.
Resources
Concept explainers that link back to the tools.
Hex vs RGB Color Explained
Hex and RGB are equivalent ways to express sRGB colors—#RRGGBB vs rgb(r,g,b) each channel 0–255.
WCAG Contrast Basics
WCAG contrast ratio compares foreground and background luminance—4.5:1 minimum for normal text, 3:1 for large text.
Aspect Ratio Reference for Images
Aspect ratio is width divided by height—common ratios include 16:9 video, 4:3 photos, 1:1 social squares, and 1.91:1 Open Graph.
About design tools
Free design utilities for color conversion, WCAG contrast checks, CSS spacing scales, rem/px math, and gradient generation.
- Convert hex colors to RGB for CSS
- Verify text contrast for accessibility
- Build consistent spacing tokens
- Convert rem values to pixels
Subcategories
Drill in by use case.
Related categories
More toolboxes you might need.
Developer Tools
Convert, format, validate, and clean developer data formats.
29
tools
Unit Converters
Convert area, length, weight, and other measurement units.
52
tools
Text Tools
Clean, transform, and format text quickly in your browser.
11
tools
Real Estate Calculators
Estimate cap rate, NOI, and other real estate metrics.
11
tools
Finance / Percentage Calculators
Calculate percentages, discounts, tips, and financial ratios.
9
tools
Construction Calculators
Estimate materials, dimensions, and construction quantities.
16
tools