Free Color & Design Tools
Generate palettes, gradients, and CSS snippets.
Tools for designers and front-end developers to pick colors, build gradients, and generate CSS for shadows, borders, and modern UI effects like glassmorphism.
Problems color & design solve
- Converting a brand color between HEX, RGB, and HSL without a color picker app
- Checking whether text color meets WCAG AA or AAA contrast against a background
- Building a smooth multi-stop gradient without hand-writing CSS
- Generating realistic box-shadow CSS for cards and modals
- Picking accessible text/background combinations for a design system
- Creating consistent color variations (lighter, darker, complementary)
Recommended color & design
Our most-used tools in this category — start here.
HEX to RGB
Instant HEX to RGB conversion with alpha support
Contrast Checker
WCAG AA/AAA checks with pass/fail for text and large text
Gradient Generator
Visual gradient builder with multi-stop support and CSS output
Color Picker
Pick colors across HEX/RGB/HSL with live preview
Box Shadow Generator
Visual shadow editor with x/y/blur/spread and copy-ready CSS
All color & design (10)
HEX to RGB
Convert HEX color codes to RGB.
RGB to HEX
Convert RGB/RGBA values to HEX.
Color Picker
Pick colors visually and grab their codes.
Gradient Generator
Design CSS linear and radial gradients.
Box Shadow Generator
Visually design CSS box shadows.
Border Radius Generator
Design complex CSS border radii.
Contrast Checker
Check WCAG contrast for color pairs.
Color Shades Generator
Generate tints and shades from any HEX color.
Random Color Generator
Roll random HEX colors with HEX, RGB, and HSL values per swatch.
Color Palette Generator
Build harmonized palettes from a single base color.
Who uses color & design?
- UI and UX designers building design systems
- Front-end developers writing CSS by hand
- Accessibility auditors checking WCAG compliance
- Brand designers translating print colors to web
- Indie makers styling landing pages
- Students learning color theory and CSS
Read more on the blog
Tutorials and guides about color & design.
Frequently asked questions
Your files never leave your device
Every tool on Xevon Tools runs 100% in your browser. No uploads, no servers, no tracking. Free forever.