Color tools
Convert color formats and build CSS gradients with a live preview.
Color Converter
Convert between HEX, RGB, HSL, HSV and CMYK in real time. Pick a color or paste any value — every format updates as you type.
Open →CSS Gradient Generator
Build linear and radial gradients visually. Tweak stops and angle, copy ready-to-paste CSS.
Open →CSS Box Shadow Generator
Stack multiple shadow layers, tune offset, blur, spread, and alpha, copy the CSS or Tailwind class.
Open →CSS Clamp Generator (Fluid Typography)
Type-scale that grows with the viewport. Pick min and max font sizes, pick min and max screen widths — get a copy-paste clamp() rule with a live preview slider.
Open →CSS Easing & Cubic-Bezier Visualizer
Drag the SVG handles, type values, or pick from 30+ named curves. Live animation preview and copy-ready output for vanilla CSS, GSAP, and Framer Motion.
Open →Contrast Checker
Check WCAG contrast ratios between any two colors. See pass/fail badges for AA and AAA at normal and large text sizes, with a live preview.
Open →Color Blindness Simulator
Preview any color through eight color-vision deficiencies. See exactly what users with protanopia, deuteranopia, tritanopia, achromatopsia and their milder forms will perceive.
Open →Tint, Tone & Shade Generator
Generate ten lighter tints, ten darker shades, and ten gray-blended tones from any base color. Click a swatch to copy its hex.
Open →Color Harmony Generator
Generate complementary, analogous, triadic, tetradic, square, split-complementary, and monochromatic palettes from any base color, with copyable CSS variables.
Open →CSS Named Colors
Searchable reference for all 147 CSS named colors. Click any swatch to copy its name; sort by name, hue, or lightness.
Open →Color Mixer
Blend two colors at any ratio with linear-light interpolation. Optionally show 11 evenly spaced gradient stops between them.
Open →Color Palette Generator
Generate beautiful 5-color palettes that actually look good — curated seeds, smart harmony rules, lock and re-roll.
Open →