UX Pilot Gradient Generator – Gradients & Textured Backgrounds
A browser-based gradient studio with color, texture and motion controls, plus previews inside interface layouts.
About this resource
Colour Contrast Checker helps you assess a colour pair before bringing it into an interface. Set the background and foreground colours to see a contrast ratio and separate AA and AAA indicators for normal and large text. It is a useful quick check for labels, headings and copy placed on coloured surfaces. Both colours have HEX fields and RGB and HSL controls. You can copy values and use Reverse colours to swap the foreground and background. This makes it easy to compare alternatives without repeatedly returning to a design editor and to adjust a combination toward better legibility. A typeface selector and text previews at 16 px and 24 px show how the pair looks in different typographic settings. These examples add useful visual context to the numeric result. The tool fits into work on design systems, light and dark themes, and text styles for web pages. Save colours keeps selected pairs in the browser, while URLs containing background and foreground parameters let you revisit a particular combination or share it with a colleague. The core web tool is available without payment or registration. The site also links to a separate Chrome extension, although you do not need to install it to check two colours. The indicators concern the supplied colour pair and text contrast. They do not replace a wider accessibility review: component states, focus, images, keyboard navigation and other requirements still need attention. For results near a threshold, check the applicable WCAG criterion and verify the actual colours and text size in the finished interface.
Usage and licensing
The web tool is free to use. Its published source code is MIT-licensed; redistribution of copies or substantial portions requires retaining the copyright and license notice. A contrast result does not certify the accessibility of an entire product.
Check the creator’s current terms before using this resource.Similar resources
Colorsinspo — Color Palettes, Gradients & Design Tools
A free platform with thousands of curated color palettes, generators, gradients, contrast tools, tutorials and other resources for designers.
Light Rails — Generative Pattern Studio
A browser-based studio for geometric patterns, glowing lines, gradients and motion. Explore shapes and timing, preview compositions in mockups, and prepare visuals for your next design.