Free color & design tools — pickers, palettes, contrast, gradients
Practical color work for the web: a color picker with HEX/RGB/HSL, palette and gradient generators, a WCAG contrast checker to keep text readable, color-blindness simulation and CSS shadow tools. Built for designers and front-end developers who need the exact value and the accessible choice, copy-paste ready.
Color Converter (HEX, RGB, HSL — instant)
Convert colors between HEX, RGB, and HSL with a live preview swatch. Edit any field; the others update.
Contrast Checker (WCAG AA / AAA grades)
Check the color contrast ratio between text and background. Shows live preview and pass/fail badges for WCAG AA and AAA at normal and large text sizes.
CSS Gradient Generator (linear, radial, conic)
Build CSS gradients visually: linear, radial, and conic. Multiple color stops, angle control, presets. Copy ready-to-paste CSS.
Color Palette Generator (5 schemes from one base)
Generate harmonious color palettes from a base color: complementary, analogous, triadic, tetradic, monochromatic. Click any swatch to copy hex.
Color Blindness Simulator — See Colors as Others Do
Enter any hex color and instantly see how it appears to people with deuteranopia, protanopia, tritanopia, and achromatopsia.
CSS Box Shadow Generator (with live preview)
Build CSS box-shadow values visually. Adjust offset, blur, spread, color, opacity, and inset. Live preview, copy-paste CSS.
CSS Color Name Finder — Nearest Named Color from Hex
Enter any hex color to find the closest CSS named color. See the 5 nearest named colors with their exact hex values and distance score.
Color Shades Generator — Tailwind-Style Tints & Shades
Generate 11 tints and shades (50–950) for any color, styled after the Tailwind CSS scale. Click any shade to copy its hex code or export all as CSS custom properties.