Color Picker + Converter
HEX RGB HSL HSV CMYK with live preview + copy.
Color tools, palettes and CSS generators
Convert HEX, RGB, HSL and CMYK; check contrast, create palettes and gradients, and generate CSS for common layouts.
FreeFastPrivateNo signupRuns in your browser
Color
HEX ⇄ RGB
Both directions with validation.
RGB ⇄ HSL
Float-safe conversions with steps.
CMYK Converter
RGB→CMYK for print with gamut note.
WCAG Contrast Checker
Ratio + AA/AAA/large-text badges + swap + fix hint.
Color Blindness Simulator
Protan/deutan/tritan matrices on a color.
Palette Generator
Analogous/triadic/complementary preserving seed saturation + HEX + exports.
Shades & Tints
50–950 scale: tints toward white, shades toward black + CSS vars.
CSS
CSS Gradient Generator
Two-stop linear gradient → CSS + preview.
Box Shadow Generator
Single-layer box shadow with live preview.
Text Shadow Generator
Text shadow preview + copyable CSS.
Border Radius Generator
Any radius syntax (incl. 8-value elliptical) + preview.
CSS Filter Playground
blur/brightness/contrast/sepia chain.
CSS Transform Builder
rotate + scale composer with preview.
CSS clamp() Generator
Fluid type scale with px/rem.
CSS Grid Generator
Columns/gap template with preview.
Flexbox Generator
Direction + justify-content composer.
Button Generator
Color/padding/radius → copyable button CSS.
Glassmorphism Generator
blur + translucency + border CSS (light-bg preview).
Neumorphism Generator
Dual-shadow soft UI tuned for light backgrounds.
CSS Animation Generator
fade/slide-up/bounce/pulse keyframes + duration.
Mesh Gradient (CSS)
Layered radial-gradient recipe, copyable.
Easing Explorer
Named + spring cubic-bezier presets → CSS.
Export
Design Tokens Export
CSS vars + Tailwind config + JSON from a seed palette.
Favicon from Color
Letter/gradient PNG set (ZIP in PixelFlow).
Advertisement
In-content · after first value section
In-content · after first value section
Why DesignMatrix?
Move between color conversion, contrast checks, palettes, and CSS output. Verify contrast and generated styles in the context where you plan to use them.
Processed locally in your device. Your file is not uploaded.
FAQ
Is it free?
Yes — every tool is free with no signup and no credits.
Is my data uploaded?
Selected files are processed in your browser and are not sent to a Tolari processing endpoint. Configured third-party scripts or resources may still load.
Does it work offline?
The app shell and deterministic tools can work after they are cached. Some file engines need an initial connection, and browser storage can be cleared.
Does it work on mobile?
Yes — touch-friendly, one-tap download, adaptive workers for weak devices.
How do you make money?
Ads may appear only after configuration and the required consent signal. No paywall or fake download buttons.
Guides
Contrast ratios, demystified (WCAG) · Color harmony in 4 recipes · Shadows that look real — practical, original explainers with examples.