Web Design Utilities & CSS Tools
Generate CSS, check contrast, and convert color palettes instantly. Streamline workflows with free, browser-native design tools.
Why check contrast and colours in the browser?
WCAG contrast compliance and colour palette work are tasks that designers return to constantly throughout a project. Having them available as browser tools with no account, no export limits, and no paywall means you can check a colour pair or generate a gradient at any point in your workflow without context-switching to a dedicated application.
The Contrast Checker uses the WCAG 2.1 relative luminance formula to compute contrast ratios and reports both AA (4.5:1 for normal text) and AAA (7:1) compliance. The Color Format Converter supports HEX, RGB, HSL, HSV, and OKLCH, the modern perceptual colour space increasingly used in CSS. All conversions happen locally with no round-trip.
Because these tools are statically served, they are also suitable for offline use during design sprints or workshops where internet access may be limited. Load them over a reliable connection beforehand and they remain available for the duration of your session.
Yes. All conversions and calculations run locally once the page loads. No network connection needed after that.
No. CapyToolkit doesn't require sign-up, login, or payment. All design tools are free with no usage limits.
WCAG 2.1, using the same relative luminance formula as WCAG 2.0. It reports both AA and AAA compliance for normal and large text.
HEX, RGB, HSL, HSV, OKLCH, and CSS named colours. All formats work across every tool in this category.
Yes. CSS generators produce output you can copy straight into your stylesheet. Contrast results can be copied as plain text.
Yes. CapyToolkit's design tools use standard formulas, reference published specifications, and produce results you can cite in an accessibility report or hand off to a developer.
Request a tool or share feedback
Have an idea for a new tool? Leave a message about what you'd like to see added.