Color and design tools
Build palettes, convert between color formats, create gradients and check contrast ratios against WCAG. The math is small and repetitive, which makes it a good fit for a tool.
6 tools
- Box Shadow GeneratorDesign CSS box shadows with up to five layers, inset shadows and a glass card preset, see them live and copy the CSS.
- Color Blindness SimulatorSee how a picture looks with protanopia, deuteranopia, tritanopia and achromatopsia, side by side with the original, in your browser.
- Color ConverterConvert colors between HEX, RGB and HSL as you type, with a live preview swatch, a color picker and one-click copy for each format.
- Color Palette from ImagePick up to eight dominant colours from a photo on your device with median cut, and copy each one as a HEX code.
- Contrast CheckerCheck the WCAG 2.2 contrast ratio between a text colour and a background colour, with pass or fail for AA and AAA, large text and UI components.
- CSS Gradient GeneratorBuild linear, radial and conic CSS gradients with 2 to 6 colour stops, a live preview and the CSS ready to copy.