12 design tools · 3 groups
Design Tools
Check contrast, convert colors, build palettes, and generate small CSS snippets—fast utilities for UI and brand work.
Design tool groups
Color
- Contrast CheckerTest foreground and background colors against WCAG AA and AAA contrast requirements.
- Color ConverterConvert any color between HEX, RGB, and HSL with a live swatch.
- Color Palette GeneratorBuild harmonious palettes from one base color using classic color-theory modes.
- Image Color PickerExtract colors from any image instantly — click a pixel for HEX, RGB, HSL, and HSV. No signup. No uploads.
Assets
CSS
- Box Shadow GeneratorTune a box shadow visually and copy the CSS in one click.
- Gradient GeneratorBuild linear or radial gradients and copy ready-to-use CSS.
- Border Radius GeneratorTune each corner independently and copy the border-radius CSS in one click.
- CSS Filter GeneratorAdjust filter properties visually on a gradient preview and copy the CSS.
- CSS Unit ConverterConvert a CSS length to all common units using your root font size and viewport settings.
- Text Shadow GeneratorTune text shadow offset, blur, and color with a live preview and copy the CSS.
- Typography Scale GeneratorPick a base size and scale ratio to generate type steps and export CSS variables.
How these design tools work
Calculations and previews run in your browser. Contrast checks reference WCAG guidance; always verify against your full design system. Read our Privacy Policy.
Who these tools are for
Designers and front-end developers who need quick accessibility and color utilities without opening a full design app.
FAQ
Is contrast checking WCAG-accurate?expand_more
We compute contrast ratios against WCAG AA/AAA thresholds. Final compliance still depends on your full UI context.
Do I need an account?expand_more
No.
Looking for something else? Browse all tools.