Color Tools
Pick colors, build palettes, generate gradients, and check contrast — all in your browser.
Pick a color and get an instant palette, build a CSS linear-gradient visually, or check whether a text/background color pairing meets WCAG accessibility contrast requirements — all computed locally as you adjust each control.
Palette
How to use this tool
- 1Pick a color with the color swatch, or type a hex code directly.
- 2Its HEX, RGB, and HSL values appear as copyable cards below.
- 3A 5-step palette (darker to lighter shades of the same color) is generated automatically — click any swatch to copy its hex code.
Frequently asked questions
How is the palette generated?
Each swatch blends your chosen color toward black or white by a fixed percentage (-40% to +40%), giving you a consistent set of darker and lighter shades of the same hue.
What's the difference between HEX, RGB, and HSL?
HEX and RGB both describe red/green/blue channel values (in hex or decimal); HSL describes the same color by hue, saturation, and lightness, which is often more intuitive for adjusting a color's brightness or intensity.
Does picking a color send anything to a server?
No — all the color math runs locally in your browser.