Color & design tools
Tools for using colour well: build palettes, shades and tints, convert between HEX, RGB and HSL, check text contrast for accessibility, simulate colour blindness, and generate CSS gradients, box shadows, border radius, glassmorphism and neumorphism styles.
Copy the values or the ready-made CSS straight into your project.
All 13 tools
- Palette GeneratorGenerate colour palettes, lock favourites, preview them on a layout and export.
- Gradient GeneratorBuild linear, radial and conic CSS gradients with draggable colour stops.
- HEX to RGBConvert HEX colour codes to RGB and RGBA, plus every other format.
- Contrast CheckerCheck colour contrast against WCAG AA and AAA, with passing colour suggestions.
- Box Shadow GeneratorCreate layered CSS box shadows with a live preview and copy the code.
- Border RadiusRound each corner in px, % or rem, or drag handles to make blob shapes.
- GlassmorphismDesign frosted glass cards with backdrop blur and copy the CSS.
- NeumorphismCreate soft UI neumorphism shapes from any colour and copy the CSS.
- Shades & TintsMake a 50–950 colour scale, tints, shades and tones from one colour.
- Random ColorGenerate random colours by mood or range, as HEX, RGB, HSL or OKLCH.
- Color Blindness SimSee images and designs as people with colour blindness see them.
- HEX to HSL ConverterConvert HEX colour codes to HSL and HSLA, plus every other format.
- RGB to HEX ConverterConvert RGB and RGBA values to HEX colour codes, plus every other format.