10 working tools
Design & Color tools
Explore colors, gradients, contrast and visual design values.
- Convert and inspect color values
- Check contrast and relationships
- Build gradients, shadows and proportions
10browser-based toolsNo account required
HEX to RGB ConverterConvert a HEX color into RGB and HSL values.RGB to HEX ConverterConvert RGB channel values to a HEX color.Color Contrast CheckerCheck WCAG contrast ratio for two colors.Color MixerMix two colors at a chosen ratio.Color Shades GeneratorGenerate lighter and darker shades from one color.Complementary Color FinderFind the opposite color on the color wheel.CSS Gradient BuilderBuild a customizable two-color CSS gradient.Golden Ratio CalculatorCreate proportional dimensions using the golden ratio.Aspect Ratio CalculatorCalculate proportional image or screen dimensions.CSS Box Shadow GeneratorCreate a ready-to-use CSS box-shadow value.
About this collection
Practical design & color tools, without the clutter.
Design decisions become easier when the underlying values are visible. Color formats, contrast ratios, proportions and shadow settings can all be checked before they are committed to a component or stylesheet.
These tools turn visual choices into copyable values. Use them alongside the real interface, because surrounding colors, font weight and display conditions can change how a result feels.
Worth checking: A passing number is a useful checkpoint, not a complete accessibility review. Test the finished component at realistic sizes and interaction states.