Linear Gradient Generator
Linear gradients transition colors along a line. Adjust the angle from 0° to 360° for horizontal, vertical, or diagonal effects.
background: linear-gradient(90deg, #5B21B6 0%, #7C3AED 50%, #C4B5FD 100%); background: -webkit-linear-gradient(90deg, #5B21B6 0%, #7C3AED 50%, #C4B5FD 100%); background: linear-gradient(90deg, #5B21B6 0%, #7C3AED 50%, #C4B5FD 100%);
Import colors from the palette generator. Bright RGB gradients may shift in CMYK print — verify before production.
Color tools
More free color tools
Palettes, gradients, accessibility checks, and print-ready conversions — all in one place.
- Color Palette Generator
Generate harmonious palettes from one color — complementary, triadic, analogous, and more. CMYK values and print gamut warnings included.
- WCAG Contrast Checker
Check color contrast ratios against WCAG 2.1 AA and AAA. Includes palette matrix mode and auto-fix suggestions.
- Tint & Shade Generator
Turn one brand color into a Tailwind-compatible 50–950 scale with WCAG contrast badges on every swatch.
- Palette from Image
Extract dominant colors from any photo — runs entirely in your browser. Send colors to converters or palette tools.
- Color Blindness Simulator
Preview palettes as seen with protanopia, deuteranopia, or tritanopia. Essential for accessible design.
- Interactive Color Wheel
Drag to pick a hue and see complementary, triadic, and analogous harmonies live — with HEX, RGB, and CMYK values.
- Print Gamut Checker
See exactly how a screen color shifts when printed in CMYK. Side-by-side press preview with shift warnings.
- Compare Colors (Delta E)
Measure the perceptual difference between two colors with ΔE2000 — plus HEX, RGB, CMYK, and HSL values for both.
Explore all gradient types in the main CSS gradient generator.