Colour & Design

Add transparency to any hex colour with a slider and get the 8-digit HEX and CSS rgba() equivalent instantly.

Turn any colour into a full shade ramp (50 to 900), like a Tailwind colour scale, and copy it as CSS variables.

Pick a colour from your light theme and get its dark-mode counterpart — lightness inverted and saturation tamed for a dark background.

Enter any hex or RGB colour and find its closest standard colour name — great for design handoff and quick reference.

Convert a colour between HEX, RGB and HSL, all kept in sync with each other and a live colour picker.

Convert a colour with transparency between 8-digit CSS HEX, Android's #AARRGGBB format and RGBA, with a live checkerboard preview.

Generate a tint-to-shade ramp from any colour, see its nearest colour name, and preview it applied to a mobile app mock-up.

Preview a primary, secondary, accent and hover colour applied to a mobile or desktop app mock-up, then export as JSON, CSS or PNG.

Check whether a text and background colour pair meets WCAG AA or AAA contrast, for normal and large text.

Pull the dominant colours out of any photo.

Convert a colour between HEX, HSL and CMYK.

Generate a random colour, or a random palette.

Pick a base colour and get complementary, analogous, triadic, split-complementary, square and monochromatic palette suggestions.

Build a linear or radial CSS gradient visually, with a live preview and one-click copy of the CSS.

Build a CSS box-shadow visually with sliders for offset, blur, spread, colour and opacity, then copy the CSS.

Build a shadow visually and copy it as a ready-to-use Flutter BoxShadow widget.

Build a shadow visually and copy it as ready-to-use React Native shadow and elevation style props.

Build a CSS border-radius visually, including per-corner values.

Build a glassmorphism or neumorphism CSS effect visually.