Color Palette Generator
Generate color palettes for website and interface projects. Compare the swatches and copy color values into your design or stylesheet.
Freedesigncolorpalette
17 browser-based tools
Online design tools for color, CSS, and images
Build color palettes, compare contrast, generate CSS declarations, and prepare image assets. Use the preview to explore settings, then test the output with the actual content and background in your project. Color contrast checks cover specified pairs, CSS generators provide editable starting points, and compression savings depend on the source image and selected format. None of these results establishes that an entire design is accessible or ready to release.
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
Build a CSS gradient, adjust its stops, and copy the generated code. Compare the preview with the background where you plan to use it.
Freedesigncssgradient
Aspect Ratio Calculator
Calculate a missing width or height while keeping an aspect ratio. Compare common ratios or reduce a pair of dimensions to a ratio.
Freedesignaspect ratio16:9
Border Radius Generator
Adjust corner radii and copy the CSS border-radius declaration. Use the preview to compare uniform, individual, and elliptical corners.
Freedesigncssborder radius
Color Contrast Checker
Compare foreground and background colors and inspect their contrast ratio. Review the displayed AA and AAA results for the selected text size.
Freedesignaccessibilitywcag
Color Converter
Convert a color between supported formats such as HEX, RGB, and HSL. Use equivalent values when moving between design tools and CSS.
Freedesigncolorhex
Color Mixer
Mix two colors using the available interpolation methods. Compare the resulting colors and copy a value for your design.
Freedesigncolor mixerblend colors
Color Picker
Select a color from an image and inspect its HEX, RGB, or HSL value. Use the available screen-picking control where your browser supports it.
Freedesigncolor pickereyedropper
CSS Box Shadow Generator
Build a CSS box-shadow using offset, blur, spread, color, and layer settings. Preview the effect and copy the generated declaration.
Freedesigncssbox shadow
CSS Clip Path Generator
Create a CSS clip-path using the available shape controls and presets. Preview the clipping region and copy the CSS into your project.
Freedesigncssclip-path
CSS Filter Generator
Adjust CSS image filters such as blur, brightness, contrast, and saturation. Compare the preview and copy the filter declaration.
Freedesigncss filterblur
CSS Specificity Calculator
Calculate selector specificity and compare two selectors. Inspect how classes, attributes, pseudo-classes, and elements contribute to the result.
Freedesigncss specificitycss cascade
Favicon Generator
Create favicon and app-icon image sizes from one source image. Download the outputs and review the generated HTML and manifest examples.
Freedesignfaviconfavicon generator
Flexbox Generator
Adjust flex direction, alignment, wrapping, and gaps in a visual playground. Copy the CSS and test it with your own content.
Freedesignflexboxcss flex
Glassmorphism Generator
Adjust blur, transparency, border, and shadow to create a frosted-glass CSS effect. Preview the settings and copy the generated styles.
Freedesignglassmorphismfrosted glass
Grid Generator
Build a CSS Grid layout with row tracks, column tracks, gaps, and alignment controls. Copy the generated CSS and test it in your page.
Freedesigncss gridgrid-template-columns
Image Compressor
Compress an image with adjustable output settings and dimensions. Compare the before-and-after file size, inspect the preview, and download the result.
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 vs RGB vs HSL vs OKLCH: CSS Color Formats Explained
Compare CSS color formats, conversion rules, gamut limits, and interpolation. Choose a notation for editing colors and check contrast separately.
Read guideDesign
px vs em vs rem in CSS: Sizing Rules and Examples
Compare CSS pixels, element-relative em, and root-relative rem. Understand nested sizing, font preferences, browser zoom, and conversion assumptions.
Read guideSEO
Open Graph Meta Tags: Social Preview Setup and Debugging
Set title, description, Open Graph, and social-card metadata. Check image URLs, crawler access, and cached previews without assuming a fixed appearance.
Read guideFrequently asked questions
How should I use CSS generated by these tools?
Copy the generated declaration or utility into your stylesheet, then test it with real content and responsive sizes. A preview is a starting point; check browser support, contrast, overflow, and interaction states in your own interface.
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 103 browser-based tools (103 currently marked free), or tell us what useful utility we should build next.