Design Tools
Generate colour palettes, check WCAG contrast, convert PX to REM and build CSS clamp() values.
Color Palette Generator
Generate harmonious 5–8 colour palettes: random, complementary, analogous, monochromatic or triadic.
Open toolRandom Color Generator
Generate random colours as HEX, RGB and HSL; one at a time or up to 50, in pastel, vivid or dark styles.
Open toolPX to REM and EM Converter
Convert pixels to rem and em (and back) based on your root and parent font sizes.
Open toolWCAG Contrast Checker
Check the contrast ratio of text and background colours against WCAG AA and AAA.
Open toolCSS clamp() Generator
Create a fluid CSS clamp() value that scales between a minimum and maximum size with the viewport width.
Open toolGolden Ratio Calculator
Divide a length by the golden ratio (φ ≈ 1.618) and build a φ-based scale for layout and typography.
Open toolColor Scale Generator (50–950)
Turn one base colour into a Tailwind-style 50–950 shade scale with CSS variables and config output.
Open toolTouch Target Size Checker
Check a button or link size against WCAG 2.2, Apple HIG and Material Design touch target guidance.
Open toolTools for UI and web designers
Create harmonious colour palettes, derive a Tailwind-style 50–950 scale from a single brand colour and check whether text and background colours meet WCAG AA and AAA contrast requirements.
Responsive typography
Convert between PX, REM and EM and let the CSS clamp() generator calculate fluid font sizes that scale with the viewport.
Accessibility and proportion
The touch target checker shows whether buttons are large enough to tap comfortably on mobile; the golden ratio calculator creates balanced sizes for layouts and type scales.