OneKitTools logoOneKitTools
返回开发者

CSS 调色板生成器

Generate harmonious 调色板s from any base color — complementary, analogous, triadic, and more

关于 CSS 调色板生成器

Generate harmonious color palettes from any base color — export as CSS variables, SCSS variables, or Tailwind config, 全部在浏览器中完成.

如何使用 CSS 调色板生成器

  1. 1选择a base color using the color picker or enter a HEX value。
  2. 2选择a harmony type: Complementary, Analogous, Triadic, Split Complementary, Tetradic, or Monochromatic。
  3. 3查看generated palette with HEX, RGB, and HSL values for each color。
  4. 4点击任意色块复制其值。
  5. 5导出 entire palette as CSS Variables, SCSS Variables, or Tailwind Config.

提示

  • Monochromatic palettes are safest for beginners — they always look cohesive and professional.
  • Triadic palettes are vibrant but require careful balance — use one 颜色 as dominant, the others as accents.
  • 导出为 Tailwind Config to drop the palette directly into your tailwind.config.js.

相关工具

OneKitTools 团队更新于 2.21.4