Free Design & Colour Widgets
Colour contrast, colour conversion, gradient, palette, aspect-ratio and px-to-rem widgets for design tutorials and style guides.
Try them live
Real design widgets - exactly what your visitors would see.
The live example loads when it scrolls into view.
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.
-
Pixels to print size at any DPI and back, plus the largest sharp print at 300, 240 and 150 DPI.
-
Pixel density and dot pitch of any screen from its resolution and diagonal, with labelled presets.
-
Width, height and area of a screen from its diagonal and aspect ratio, and two screens compared.
-
Split any length by the golden ratio, find the missing side, and list golden sizes and type steps.
-
A modular type scale in px and rem from a base size and ratio, with a live preview and CSS variables.
-
How up to six colours look with protanopia, deuteranopia, tritanopia and achromatopsia, with clashes flagged.
No widget matches that search.
Other widget categories
- All calculators
- Finance
- Real Estate
- Business & Ecommerce
- Marketing
- Developer Tools
- SEO & Content
- Website & Security
- Electrical & Electronics
- Education & Math
- Time & Date
- Travel & Auto
- Health & Fitness
- QR & Generators
- Construction & DIY
- Solar & Energy
- HVAC & Climate
- Logistics & Shipping
- Manufacturing & Operations
- SaaS & Startups
- HR & Work
- Creators & Media
- Food & Restaurant
- Events & Weddings
- Pets
- Agriculture & Garden
- Networking & IT
- Business & Contact
- Announcements & Notices
- Page Components
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.