Color & Design
Convert colors, check contrast, and build palettes.
Convert HEX/RGB/HSL, check WCAG contrast, and build CSS gradients for design tokens and UI polish.
All Color & Design tools
Color Converter
Convert between HEX, RGB, and HSL with a live swatch.
Contrast Checker
Check WCAG contrast between foreground and background colors.
CSS Gradient Generator
Build linear CSS gradients and copy the code.
Color Blind Simulator
Preview how a color may look with common deficiencies.
Tint & Shade Generator
Generate lighter tints and darker shades of a color.
Random Hex Color
Generate random HEX colors.
Gradient Text CSS
Generate CSS for gradient-filled text.
Box Shadow Generator
Build a CSS box-shadow declaration.
Border Radius Preview
Preview CSS border-radius values.
FAQ
- What color & design tools are free on Odin?
- Every tool in Color & Design is free to use—open a tool and get a result without creating an account.
- How do I find the right color & design tool?
- Browse the list below, use the catalog, or press ⌘K to search by name or task.