Color Palette Generator
Generate beautiful color palettes from a base color. Converts between HEX, RGB, HSL and OKLCH. Export as CSS variables or Tailwind config. Saves your favorite palettes locally.
Generate harmonious color palettes from any base color with SolveBar's Color Palette Generator. Create analogous, complementary, triadic, and monochromatic schemes. Convert colors between HEX, RGB, HSL, and OKLCH. Export as CSS variables or Tailwind config.
Color harmony types explained
Analogous colors sit adjacent on the color wheel and create calm, cohesive designs. Complementary colors are opposite — high contrast, energetic. Triadic uses three evenly spaced colors for vibrant, balanced schemes. Monochromatic uses tints and shades of one hue for sophisticated, elegant designs.
HEX vs RGB vs HSL vs OKLCH
HEX is the most common web format. RGB is useful for programming color manipulation. HSL is intuitive for designers. OKLCH is a modern perceptually uniform color space used in CSS Color Level 4 — adjusting lightness in OKLCH produces more consistent perceived brightness than HSL.
Building a design system color palette
A practical design system needs at minimum: a primary brand color with 9 shades (50-900), a neutral gray scale (for text and backgrounds), and semantic colors (success green, warning amber, error red, info blue).
Frequently Asked Questions
How do I export my palette for use in CSS?
Click Copy as CSS vars to get a :root {} block with CSS variables. Click Copy as Tailwind to get the colors object for tailwind.config.js.
What is the difference between a tint and a shade?
A tint is a color mixed with white (lighter). A shade is a color mixed with black (darker). The monochromatic generator creates tints and shades of your base color.
Can I check contrast ratios for accessibility?
Yes. The converter tab shows contrast ratios against white and black backgrounds. WCAG AA requires 4.5:1 for normal text.