500、600、700 usw 分别是多少？ Figma 中的颜色步骤

Question

我想为顺风风格的配色方案制作 SASS Mixins。

我想为每种颜色生成 400、300、200 和 100 等版本。

现在很高兴知道有多少顺风因素影响了这一点。

我在互联网上找不到任何关于此问题的信息。

Answer 1

Tailwind 的默认颜色都是精心挑选的，他们没有生成调色板的工具，因此您也必须这样做。

来自docs：

正在生成自定义调色板

A common question we get is "how do I generate the 100–900 shades of my own custom colors?".

Bad news: color is complicated and we've yet to find a tool that does a good job generating these sorts of color palettes. We picked all of Tailwind's default colors by hand, balancing them by eye. Sorry!

Answer 2

我实际上使用 https://javisperez.github.io/tailwindcolorshades/#/ 生成阴影，它会输出如下内容：

  concrete: {
    100: '#FEFEFE',
    200: '#FCFCFC',
    300: '#FAFAFA',
    400: '#F6F6F6',
    500: '#F2F2F2',
    600: '#DADADA',
    700: '#919191',
    800: '#6D6D6D',
    900: '#494949',
  },

您可以将其包含在 tailwind.config.js 文件中。

Answer 3

我找到了这个 figma 插件：https://www.figma.com/community/plugin/815578663120885543/Tailwind-Color-Generator

生成自定义调色板供您在设计中使用，然后您可以将其导出到 SCSS 文件中 - 结果应该是相同的。

500、600、700 usw 分别是多少？ Figma 中的颜色步骤

How much are the 500, 600, 700 usw. steps in Figma for colors

css

sass

tailwind-css

figma