Color Palette Generator
Generate beautiful color palettes for your projects
Freedesigncolorpalette
17 browser-based tools
Online design tools for color, CSS, and images
Toolk design utilities turn visual decisions into production-ready values. Build color palettes, verify WCAG contrast, mix or convert colors, generate CSS layouts and effects, create favicon packages, or compress images. The working preview appears beside the controls, and every generator exposes the CSS or file output needed to move the result into a real project.
Tool inputs stay on your device. Page-view analytics never include tool input.
Browse design tools
Featured starting points appear first, followed by the complete category in alphabetical order. Every card links to one canonical tool page with its own working interface, examples, limitations, sources, and related utilities.
CSS Gradient Generator
Visual builder for linear, radial, and conic CSS gradients with live preview and Tailwind/SCSS export
Freedesigncssgradient
Aspect Ratio Calculator
Three-way calculator — lock any of ratio, width, or height and compute the other two. Visual rectangle preview, eleven preset ratios (YouTube/TikTok/Instagram/Open Graph/Cinemascope), and GCD-based reduction
Freedesignaspect ratio16:9
Border Radius Generator
Visual CSS border-radius builder with elliptical per-corner control and auto-shorthand output
Freedesigncssborder radius
Color Contrast Checker
Test color pairs against WCAG 2.2 AA/AAA accessibility standards with live preview
Freedesignaccessibilitywcag
Color Converter
Convert between HEX, RGB, HSL, and other color formats
Freedesigncolorhex
Color Mixer
Blend two colors with sRGB linear, HSL midpoint, or perceptually-uniform OKLCH interpolation. Live preview, 9-step gradient strip, HEX/RGB/HSL output. CSS Color 4 standard.
Freedesigncolor mixerblend colors
Color Picker
Pick exact pixel colors from any uploaded image with HEX, RGB, and HSL output, WCAG contrast ratios against black and white, and native EyeDropper API support for picking colors anywhere on screen (Chromium)
Freedesigncolor pickereyedropper
CSS Box Shadow Generator
Multi-layer box shadow builder with per-layer offset, blur, spread, color, alpha, and inset control plus Tailwind and Material presets
Freedesigncssbox shadow
CSS Clip Path Generator
Build polygon, inset, circle, and ellipse CSS clip-paths with a vertex editor and ten shape presets
Freedesigncssclip-path
CSS Filter Generator
Visual builder for the full CSS filter property — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia — with live before/after preview, six presets, and CSS plus Tailwind v4 output
Freedesigncss filterblur
CSS Specificity Calculator
Parse any CSS selector and compute its specificity (a, b, c) per CSS Selectors Level 4. Handles :is, :not, :has, :where, attribute selectors, pseudo-elements. Compare-two-selectors mode shows which wins the cascade.
Freedesigncss specificitycss cascade
Favicon Generator
Convert one image into every favicon size browsers, iOS, and Android need — 16, 32, 48, 96, 180 (Apple Touch), 192 and 512 (PWA). Includes copy-paste HTML head snippet and site.webmanifest
Freedesignfaviconfavicon generator
Flexbox Generator
Visual CSS flexbox playground with controls for flex-direction, justify-content, align-items, flex-wrap, and gap. Adjustable item count (1-12), four presets, live preview, and CSS plus Tailwind v4 output
Freedesignflexboxcss flex
Glassmorphism Generator
Visual builder for the iOS-style frosted-glass CSS effect with backdrop-filter blur, saturation, transparency, border, and shadow. Four presets, live preview over four background types, vanilla CSS and Tailwind v4 output
Freedesignglassmorphismfrosted glass
Grid Generator
Visual CSS Grid playground with editable column and row tracks, gap and alignment controls, four presets (3-Column Equal, Sidebar+Content, Holy Grail, Auto-Fit Cards), live preview, and CSS plus Tailwind v4 output
Freedesigncss gridgrid-template-columns
Image Compressor
Reduce JPG, PNG, and WebP file size by 50-90% via the Canvas API in your browser. Adjustable quality, max-width downscale, JPEG/WebP/PNG output, live before/after byte comparison, one-click download. No uploads.
Freedesignimage compressorreduce image size
What can you do with these tools?
This category groups tools by the job they complete, not by a search-keyword variation. Choose the smallest utility that matches the input and output you need.
- Generate palettes and convert, mix, pick, or test colors for contrast.
- Build gradients, shadows, filters, clip paths, radii, flexbox, and grid CSS.
- Compress images, generate favicons, and convert image data locally.
- Calculate aspect ratios and create QR codes for production assets.
Guides for this tool category
These guides explain the standards, formulas, and failure cases behind the working tools. Use them when the conversion result needs more context than a one-line output.
Design
HEX, RGB, HSL, and OKLCH Explained: A Practical Color Format Guide
HEX and RGB are the same sRGB color in different notation, HSL is a human-friendly transform, and OKLCH is perceptually uniform. Here is when to use each.
Read guideDesign
px vs em vs rem in CSS: Which Unit to Use and When
px is an absolute pixel, em is relative to the element's own font-size, rem is relative to the root. Default to rem for accessibility — here is why and when.
Read guideSEO
Open Graph & Meta Tags: The Complete Guide to Social Link Previews
The SEO title and meta description shape your SERP result; Open Graph and Twitter Card tags control how your link looks on Facebook, LinkedIn, X, and Slack.
Read guideFrequently asked questions
Can I copy production-ready CSS from the design tools?
Yes. CSS generators expose the generated declaration or utility value so you can copy it into a stylesheet. Each page also explains browser behavior and important edge cases.
Do image tools upload files to Toolk?
No. Image tools read selected files with browser APIs and process pixels locally. The file data is not posted to Toolk as part of compression, color picking, favicon generation, or Base64 conversion.
Which tool checks whether text colors are accessible?
Use Color Contrast Checker. It calculates the WCAG 2.2 contrast ratio and reports AA and AAA results for normal text, large text, and user-interface components.
Last updated: . Category membership and tool counts come directly from the current Toolk catalogue.
Need a different tool?
Browse all 90 browser-based tools (90 currently marked free), or tell us what useful utility we should build next.