颜色明暗生成器

从任意十六进制颜色生成完整的11级色阶。可导出为CSS变量、Tailwind配置、SCSS或JSON。

:root {
  --color-brand-50: #f7f5ff;
  --color-brand-100: #ede8fe;
  --color-brand-200: #dad2fc;
  --color-brand-300: #beb3fa;
  --color-brand-400: #998ff6;
  --color-brand-500: #6366f1;
  --color-brand-600: #4e52bc;
  --color-brand-700: #3c408d;
  --color-brand-800: #2d3269;
  --color-brand-900: #21264a;
  --color-brand-950: #191f38;
}

常见问题

暗色调和亮色调有什么区别？

暗色调是与黑色混合的颜色（更深），亮色调是与白色混合的颜色（更浅）。

如何使用导出的CSS变量？

复制CSS标签的输出并粘贴到全局CSS文件中，用var(--brand-500)引用。

色阶与Tailwind CSS兼容吗？

是的。切换到Tailwind标签，将colors对象复制到tailwind.config.js中。