Design Tools
Generate colors, spacing scales, and design utilities.
Featured tools
The high-traffic ones in this category.
Color Converter
Convert HEX colors to RGB and HSL values.
Contrast Checker
Check WCAG contrast ratios for text and backgrounds.
Gradient Generator
Create CSS linear gradient backgrounds.
Spacing Scale Generator
Generate consistent spacing scales for design systems.
REM to PX Converter
Convert rem units to pixels at any base font size.
PX to REM Converter
Convert pixel values to rem for responsive CSS.
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