Design & Color Tools
Create color palettes, CSS gradients, and accessible color combinations.
Handiwork’s design and color tools help you choose, combine, and style visual interfaces. Generate coordinated palettes, create copy-ready CSS gradients, shadows, rounded corners, and glass effects, or check whether foreground and background colors meet accessibility guidelines.
Everything runs in your browser for quick, private results. Choose a tool below to start exploring color and design combinations.
Generate complementary, analogous, triadic, and other color harmonies from any base color.
Check the contrast ratio between two colors and test WCAG AA/AAA accessibility compliance.
Create linear and radial CSS gradients visually, then copy a ready-to-use background rule.
Create layered-looking CSS box shadows visually and copy the ready-to-use declaration.
Create rounded corners visually and copy a ready-to-use CSS border-radius declaration.
Create frosted-glass CSS effects with live controls for blur, opacity, borders, and shadows.