Mello

Design

Color converters, palettes, gradients, contrast checks.

9 tools · sorted by popularity

The design tools cover the everyday visual decisions that shape an interface: choosing colors, building palettes, sketching CSS gradients and box shadows, checking accessibility contrast, generating favicons, shaping border radii, designing easing curves, and dialing in modern glassmorphism effects.

Each tool produces ready-to-paste CSS or downloadable assets, and is meant to complement a real design tool (Figma, Sketch) rather than replace it — the small targeted utilities you reach for to grab a specific value or check a single constraint. The WCAG contrast checker, in particular, is the one tool every designer should run before shipping a palette: text that does not meet the contrast ratio is invisible to a meaningful slice of users, and that is a real accessibility violation under modern web regulations rather than a nice-to-have.

Color Converter (HEX, RGB, HSL)
Convert colors between HEX, RGB, and HSL with a live preview.
Design
CSS Gradient Generator
Build CSS linear and radial gradients with a live preview.
Design
Color Palette Generator
Generate complementary, analogous, and triadic palettes from any base color.
Design
WCAG Contrast Checker
Check whether text and background pass WCAG AA and AAA contrast ratios.
Design
CSS Box Shadow Generator
Design a box-shadow visually and grab the CSS.
Design
Favicon Generator
Upload an image to get favicons at standard sizes.
Design
CSS Border Radius Generator
Round corners visually — per-corner and elliptical — and copy the CSS.
Design
Cubic Bezier Easing Generator
Drag the curve to craft a cubic-bezier() easing — with a live motion preview.
Design
Glassmorphism CSS Generator
Design a frosted-glass card and copy the backdrop-filter CSS.
Design

Other categories

{}Developer 20¤Finance 13Math & Units 4Image 49Text 10PDF 5Security 3Date & Time 7Data 2