CSS Color Palette Generator
Generate harmonious color palettes from any base color — complementary, analogous, triadic, and more
About CSS Color Palette Generator
Generate harmonious color palettes from any base color — export as CSS variables, SCSS variables, or Tailwind config, all in your browser.
How to use CSS Color Palette Generator
- 1Pick a base color using the color picker or enter a HEX value.
- 2Choose a harmony type: Complementary, Analogous, Triadic, Split Complementary, Tetradic, or Monochromatic.
- 3View the generated palette with HEX, RGB, and HSL values for each color.
- 4Click any color swatch to copy its value.
- 5Export the entire palette as CSS Variables, SCSS Variables, or Tailwind Config.
Tips
- Monochromatic palettes are safest for beginners — they always look cohesive and professional.
- Triadic palettes are vibrant but require careful balance — use one color as dominant, the others as accents.
- Export as Tailwind Config to drop the palette directly into your tailwind.config.js.
OneKitTools TeamUpdated 2.21.4