Color Palette Tools
Build and verify palettes in your browser—convert HEX/RGB/HSL, sample images, derive scales, and check contrast.
Introduction
Palette work needs two halves: generating candidate colors and proving they are usable. These tools cover both—sample a color from an image, convert it between HEX, RGB, and HSL, derive complementary and analogous partners, generate tints and shades for a UI scale, and confirm each text pair against WCAG contrast thresholds before it becomes a design token.
Featured tools
Palette Generator
Generate complementary, analogous, and triadic palettes from a base HEX.
- color
- palette
- design
Color Picker
Sample image colors and copy hex/rgb locally.
- color
- picker
- palette
- hex
Color Converter
Convert HEX, RGB, and HSL locally with a live swatch.
- hex
- rgb
- hsl
- color
Complementary Color Finder
Find complementary and split-complementary colors.
- color
- palette
- design
Tint Shade Generator
Generate tints and shades from a base HEX color.
- color
- palette
- design
HSL Adjuster
Tune hue, saturation, and lightness from a base HEX.
- color
- palette
- design
Contrast Checker
Check WCAG AA/AAA contrast ratios for text colors.
- contrast
- wcag
- accessibility
- aa
Gradient Generator
Build CSS linear-gradient strings with a live preview.
- color
- palette
- design
Color Mixer
Blend two HEX colors with a mix ratio.
- color
- palette
- design
Categories
Collections
Learn more
Frequently asked questions
- How do I build a palette from one brand color?
- Enter the base in Palette Generator for complementary, analogous, and triadic partners, then use Tint Shade Generator to create the lighter and darker steps a UI needs.
- How many colors does a UI palette need?
- One base, one accent, and a neutral ramp cover most interfaces. Add hues only when a real state or data series requires one, since each hue multiplies your contrast checks.
- Do these tools check accessibility?
- Contrast Checker computes the WCAG ratio for a foreground and background pair and reports AA and AAA results for normal and large text. Generated palettes are not automatically accessible.
- Can I extract colors from a screenshot?
- Yes. Color Picker decodes an image locally so you can sample individual pixels or pull a dominant palette without uploading the file.
- Which format should I store palette values in?
- HEX travels well through design handoffs, while RGB or HSL channels are easier to compose with alpha. Pick one convention per project and convert at the boundary.