Ffflux
FREE
Build free CSS liquid gradients with organic SVG blends—tune two colors, blend modes, blur, and optional animation.
95 opens
Color Tools
Pick colors, build harmonious palettes, and validate WCAG contrast without leaving the browser. This category lists 34 free color tools for product UI, branding, and accessible web design—pair pickers with tint/shade generators and compare tools before handoff.
Practice color skills with browser games
Pair palette and contrast tools with short color games. Memorize swatches on Color Recall, match harmonies on Method Color, then validate picks with converters and compare tools. For organic CSS mesh gradients, open Ffflux.
Color Recall
FREEPlay the free color memory game: memorize five swatches, then match hue, saturation, and brightness with HSB strips. No signup.
3.2k opens
Color
FREEPlay the color method game on color.method.ac: matching color games for hue, saturation, and harmony—color guessing with complementary and triadic rounds.
539 opens
Hex Test
FREEPlay Hex Test on madebyshape.co.uk: guess the hex code from swatches in this hex code game—10-level color code quiz and colour code game.
274 opens
Looking for external products and SaaS platforms? Browse curated products.
About Color Tools
Pick colors, build harmonious palettes, and validate WCAG contrast without leaving the browser. This category lists 34 free color tools for product UI, branding, and accessible web design—pair pickers with tint/shade generators and compare tools before handoff. You can explore each tool page to understand the use case, output format, and how to reuse results in design and frontend projects.
How teams use Color Tools
Workflows for palettes, WCAG contrast, and accessible UI color.
Accessible text and UI states
Run contrast checks on body copy, buttons, and focus rings before shipping—catch AA/AAA failures early in the design system.
Palette exploration for brand work
Generate tints, shades, and harmonies from a seed color, then export hex values into Figma variables or CSS custom properties.
Validate picks with browser games
Practice hue memory and harmony matching with color games in the Design Games category, then confirm choices with converters here.
Related tool categories
Browse other categories to find complementary tools for your workflow.
SVG Generators
Free SVG generators for gradients, patterns, waves, noise, and backgrounds—browser tools for web layouts and design exports.
Design Games
Interactive browser games for color, typography, layout skills, and visual thinking practice.
Image & Conversion
Image converters, resize and crop tools, GIF utilities, OCR, tracing, and format conversion in the browser.
Programming
CSS animation references, easing editors, grid generators, SVG coding guides, and Unicode tools for front-end work.
Icons & Graphics
Icon libraries, iconography sets, open-source illustrations, and SVG asset collections for product UI and marketing.
Font Tools
Font conversion, @font-face helpers, inspection utilities, and typography tools for web and print.
Frequently Asked Questions
Quick answers about this tool—open a question to read more.