Design tools for color, palettes and contrast
Turn a brand color into a full scale, find its harmonies, build a gradient, derive a dark theme and check every pairing against WCAG — no app to open.
The small calculations between having an idea and shipping it
Design work is full of tiny conversions that break flow. A brand guide gives you HEX and the CSS you are writing wants HSL. A client asks whether the new button passes accessibility. A hero image needs to hold its proportions at three breakpoints. None of these deserve a subscription or a desktop app — they deserve a page that loads instantly and gives you a number.
Contrast is the one worth getting right
WCAG asks for a contrast ratio of at least 4.5:1 for body text and 3:1 for large text, and it is very easy to miss by a little. The contrast checker gives you the ratio and the AA/AAA pass or fail for both sizes at once, so you can nudge a lightness value until it clears rather than guessing. Paired with the color converter, adjusting a shade and re-checking it is a few seconds of work — which is what it takes for accessibility to actually get checked rather than deferred. Run it on the scale you generated before it reaches a component, not after.
One brand color, a whole system
Most design systems start from a single hex value, and everything after it is mechanical. The palette generator expands that color into a tinted and shaded scale, the kind of 50-to-900 ramp a UI needs for backgrounds, borders and hover states. The color harmonies tool reads the color wheel for you — complementary, analogous, triadic — when you need a second hue that does not fight the first. The gradient generator turns two or more of those stops into CSS you can paste, and the dark mode palette converter maps a light theme onto a dark one without simply inverting it, which is what makes dark themes look muddy. The color converter sits underneath all of it, moving a value between HEX, RGB and HSL whenever a tool or a stylesheet wants another notation.
Placeholders and proportions
The lorem ipsum generator produces however many paragraphs a mockup needs, so text blocks have realistic weight before real copy exists. The aspect ratio calculator solves for the missing dimension — give it a width and a target ratio and it returns the height, which is what you need for responsive image containers and video embeds. The QR code generator turns a URL into a downloadable image for print work, generated locally rather than by a service that might redirect it later.
Looking for something else? Browse all Toolz tools.