ToolsRift studio · 90 tools

Design Studio — free design tools that run in your browser

91 free design tools: colour converters, contrast checks, CSS generators, gradients and SVG shapes, with live previews and code to copy.

Start here

All Design tools

About Design Studio

Design Studio gathers 91 tools for colour, CSS and vector graphics. Check whether text is readable on its background with the Color Contrast Checker, move between HEX, RGB, HSL, LAB and OKLCH with the Color Converter, and preview a palette through common types of colour blindness with the Color Blindness Simulator. CSS generators build gradients, shadows, glassmorphism panels and easing curves with a live preview, and the CSS Gradient Generator supports linear, radial and conic gradients. For backgrounds, the SVG Wave Generator and blob, pattern and mesh-gradient makers output clean SVG.

The colour maths follows the CSS Color 4 specification, including gamut mapping for colours outside sRGB, and conversions are tested against an established colour library on a grid of 216 colours. Contrast results follow WCAG 2 ratios, with the newer APCA value shown for reference. Previews are complete, script-free documents shown in a sandboxed frame, so what you see is exactly what the copied CSS does. Everything runs in the browser, and SVG generators can recreate a design from the same seed.

Frequently asked questions

Which contrast standard does the checker use?
WCAG 2 contrast ratios, with pass or fail for AA and AAA at normal and large text sizes. The APCA lightness contrast is shown as extra information because it is not yet a formal standard.
What is OKLCH and why would I use it?
OKLCH is a CSS colour format where equal steps in lightness look roughly equal to the eye, which makes it easier to build even shades. The OKLCH Converter turns HEX or RGB into OKLCH and back.
Can I use the generated CSS and SVG in client work?
Yes. The code is generated for you and you can use it however you like, without attribution.
Do the CSS generators work in all browsers?
The output is standard CSS. A few newer properties, such as backdrop-filter, need a recent browser, so check support if your visitors use older devices.

Other studios

Start typing to search every tool.

↑ ↓ to moveEnter to openEsc to close