Nouplo

CSS and colour tools

The design tools on Nouplo for front-end work in one place: CSS you can paste, colour conversion and contrast checks, palettes and colour pickers, and icons, SVG and placeholder text. All of it runs in your browser.

CSS generators

◒ CSS gradient generator Colours in, a declaration out. ◒ CSS box-shadow generator The declaration, not a canvas you drag. ∿ cubic-bezier easing The curve, as a table you can actually read.

Colour and contrast

◒ Colour converter HEX, RGB, HSL and CMYK — plus the contrast ratio that decides readability. ◐ Contrast checker Whether anyone can actually read it. ◒ Image tools Colour palette generator Press space for a new palette; lock the colours you love. ◉ Image tools Colour picker from image Click the picture for a colour code; get its main colours as a palette. ◉ Image tools Colour palette from an image The picture’s main colours, as hex codes. ◒ Image tools Colour blindness simulator About one man in twelve cannot read a red-on-green legend.

Icons, SVG and placeholder text

◰ Image tools Favicon generator One picture in; favicon.ico, apple-touch-icon, manifest icons and the tags to paste out. ⇄ Converters SVG to PNG Turn a vector into a sharp bitmap for platforms that do not accept SVG, without sending it anywhere. ◇ Converters Image to SVG A picture traced into outlines that stay sharp at any size. • Text tools Lorem Ipsum Placeholder text for layouts and mockups, as many paragraphs, sentences or words as you need.

Frequently asked questions

Can I paste the result straight into my stylesheet?
Yes. The gradient, box-shadow and cubic-bezier pages write the CSS declaration itself, ready to copy, and the colour converter gives the same colour in each CSS notation.
Which contrast standard does the checker use?
WCAG 2: it shows the contrast ratio and whether a pair passes AA and AAA for body text, large text and interface elements.
Why do some cards lead to another site?
The palette generator, the colour picker and the favicon maker work on images, so they are on Nouplo’s image site; SVG conversion is on the converter site and lorem ipsum on the text site. The cards say where they lead.
Are my images uploaded?
No. Images opened to pick colours or make a favicon are read in your browser and never leave your device.