Free Design & Colour Widgets
Colour contrast, colour conversion, gradient, palette, aspect-ratio and px-to-rem widgets for design tutorials and style guides.
Who these are for
Designers, front-end developers and design-system documentation.
Common uses
- A WCAG contrast check in an accessibility guide
- A colour converter and palette generator in a style guide
- A px-to-rem table in CSS documentation
How embedding works
Pick a widget, set the theme and size, copy one line of HTML and paste it into your page. It runs in its own frame, so it cannot clash with your site's styles, and it resizes itself if you use the loader.
-
WCAG 2.x contrast ratio of two colours, AA/AAA results and the nearest passing shade.
-
Convert any colour between HEX, RGB, HSL, HSV and CMYK, with a swatch and copy buttons.
-
Build a linear or radial CSS gradient with 2-5 colour stops and copy the code.
-
Complementary, analogous, triadic, split, tetradic and monochrome palettes from one colour.
-
Simplify width x height to a ratio and resize to a new width or height without distortion.
-
Convert pixels to rem (and back) for any root font size, with a table of common sizes.
No widget matches that search.
Other widget categories
How to add a widget
Open a widget, choose the theme, width and style, check the live preview, then copy the code. Paste it into an HTML or "Custom code" block on your site - step-by-step instructions for each platform.