Color Converter
Convert HEX, RGB, and HSL locally with a live swatch.
Color Toolkit
Convert, mix, and audit colors—HEX/RGB/HSL conversion, palettes, gradients, tints, and WCAG contrast checks. Browse this curated wowTools collection of local
Overview
Color Toolkit covers the loop between picking a color and proving it works: convert between HEX, RGB, and HSL, sample colors from an image, derive palettes and tint scales, build gradient declarations, and check contrast ratios before a token ships. Everything runs in the browser, so screenshots and brand assets stay on your device.
Recommended tools
Color Picker
Sample image colors and copy hex/rgb locally.
Palette Generator
Generate complementary, analogous, and triadic palettes from a base HEX.
Contrast Checker
Check WCAG AA/AAA contrast ratios for text colors.
Tint Shade Generator
Generate tints and shades from a base HEX color.
HSL Adjuster
Tune hue, saturation, and lightness from a base HEX.
Gradient Generator
Build CSS linear-gradient strings with a live preview.
Color Mixer
Blend two HEX colors with a mix ratio.
Complementary Color Finder
Find complementary and split-complementary colors.
CSS Color Name Converter
Map CSS color names to HEX and back.
Random Color Generator
Generate random HEX colors with crypto randomness.
Why these tools
Design work rarely stops at one color. These utilities follow the real sequence—choose a base, generate variants, then verify the pairs you plan to ship against WCAG contrast thresholds instead of trusting how they look on one screen.
Related articles
- Color and contrast: making palettes readableHow WCAG contrast ratios work, why lightness is not brightness, and how to build a palette that passes accessibility checks.
- Color Converter: a practical guideConvert HEX, RGB, and HSL locally with a live swatch. A practical guide to Color Converter: when it fits, how to get a reliable result, and the mistakes worth avoiding.
Related collections
Frequently asked questions
- Which color tool should I open first?
- Start with Color Converter if you have a value to translate, or Color Picker if the color lives inside an image. Once you have a base, Palette Generator and Tint Shade Generator build the surrounding scale.
- How do I know a color pair is accessible?
- Run the foreground and background through Contrast Checker. It reports the WCAG ratio and whether the pair passes AA or AAA for normal and large text, which is the only reliable answer.
- Are my images uploaded when sampling colors?
- No. Color Picker decodes the image locally with Canvas APIs to read pixels. The file never leaves your browser as part of the sampling workflow.
- What is the difference between a tint and a shade?
- A tint mixes the base color toward white and a shade mixes it toward black. Generating both gives you the light surfaces and dark emphasis steps a UI scale needs.
- Can I export CSS directly?
- Gradient Generator produces a ready CSS linear-gradient declaration, and the converters output HEX, RGB, and HSL strings you can paste straight into stylesheets or design tokens.