Color & Design Tools
Convert between Hex, RGB, HSL, and CMYK. Generate color palettes, CSS gradients, box shadows, and border-radius. Check WCAG color contrast and simulate color blindness — all in your browser.
Most popular
- colorColor Converter● ready
Paste a color in any format (Hex, RGB, HSL, HSB) and instantly see all equivalent formats with a live color swatch.
- colorPalette● ready
Generate professional color palettes with different harmony rules. See contrast ratios and export as CSS, Tailwind config, or JSON.
- colorGradients● ready
Design CSS gradients visually. Add color stops, adjust angles and positions, and copy the generated CSS with vendor prefixes.
- colorContrast Check● ready
Enter foreground and background colors to check if they meet WCAG AA or AAA contrast requirements, with pass/fail for normal and large text.
- colorTailwind Palette● ready
Pick a base color and get a full Tailwind-style palette with 11 shade levels (50 through 950), ready to paste into your config.
Convert
- colorColor Converter● ready
Paste a color in any format (Hex, RGB, HSL, HSB) and instantly see all equivalent formats with a live color swatch.
- colorCMYK to RGB● ready
Convert RGB colors to CMYK for print and CMYK back to RGB. See gamut warnings when colors are out of range.
- colorNamed Colors● ready
Browse all 148 CSS named colors, search by name or value, and get the hex, RGB, and HSL equivalents with a color swatch.
- colorCSS Vars● ready
Convert a color palette into CSS custom properties with optional light/dark mode variants and :root or scoped selectors.
Generate
- colorPalette● ready
Generate professional color palettes with different harmony rules. See contrast ratios and export as CSS, Tailwind config, or JSON.
- colorGradients● ready
Design CSS gradients visually. Add color stops, adjust angles and positions, and copy the generated CSS with vendor prefixes.
- colorGradient Text● ready
Create eye-catching gradient text effects with linear or radial gradient fills. Preview and copy the cross-browser CSS.
- colorSchemes● ready
Pick a base color and get a full color scheme using classic color theory harmonies. Export all colors in Hex, RGB, and HSL.
- colorTailwind Palette● ready
Pick a base color and get a full Tailwind-style palette with 11 shade levels (50 through 950), ready to paste into your config.
CSS & Design
Accessibility
- colorContrast Check● ready
Enter foreground and background colors to check if they meet WCAG AA or AAA contrast requirements, with pass/fail for normal and large text.
- colorCB Simulator● ready
See how your colors or images appear to people with common types of color blindness. Essential for accessible design.
All tools
- colorColor Converter● ready
Paste a color in any format (Hex, RGB, HSL, HSB) and instantly see all equivalent formats with a live color swatch.
- colorPalette● ready
Generate professional color palettes with different harmony rules. See contrast ratios and export as CSS, Tailwind config, or JSON.
- colorGradients● ready
Design CSS gradients visually. Add color stops, adjust angles and positions, and copy the generated CSS with vendor prefixes.
- colorContrast Check● ready
Enter foreground and background colors to check if they meet WCAG AA or AAA contrast requirements, with pass/fail for normal and large text.
- colorCB Simulator● ready
See how your colors or images appear to people with common types of color blindness. Essential for accessible design.
- colorNamed Colors● ready
Browse all 148 CSS named colors, search by name or value, and get the hex, RGB, and HSL equivalents with a color swatch.
- colorBox Shadow● ready
Create inset and outset box shadows with blur, spread, color, and multiple layers. Preview in real time and copy the CSS.
- colorBorder Radius● ready
Set border-radius for all four corners with independent control. Preview the shape and copy the CSS.
- colorTailwind Palette● ready
Pick a base color and get a full Tailwind-style palette with 11 shade levels (50 through 950), ready to paste into your config.
- colorSchemes● ready
Pick a base color and get a full color scheme using classic color theory harmonies. Export all colors in Hex, RGB, and HSL.
- colorCMYK to RGB● ready
Convert RGB colors to CMYK for print and CMYK back to RGB. See gamut warnings when colors are out of range.
- colorCSS Vars● ready
Convert a color palette into CSS custom properties with optional light/dark mode variants and :root or scoped selectors.
- colorGradient Text● ready
Create eye-catching gradient text effects with linear or radial gradient fills. Preview and copy the cross-browser CSS.
About Color & Design Tools
Color & Design tools help developers and designers work with color in the browser. Convert formats, generate Tailwind palettes, test contrast for accessibility compliance, create CSS gradients, and export custom properties — no design software needed.
Related categories
Frequently asked questions
What is WCAG color contrast?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors. Our checker tests AA and AAA compliance at multiple text sizes.
Does the palette generator create accessible combos?
Yes — the palette generator flags combinations that pass WCAG AA contrast thresholds so your designs are usable by everyone.