## 理论文章 看了一篇文章说，7 个阶梯就够了，觉得蛮有道理的。 [Open Source Color System](https://www.opensourcecolorsystem.design/palettes) ![[Pasted image 20220303170309.png]] ### 阿里 [Pixel-如何建立设计系统中的色彩体系](https://mp.weixin.qq.com/s/k2Y8zMrp4xCAoIK7DaHIVQ) 阿里云的 ![[Pasted image 20220223105157.png]] ## 利用 Figma 插件完成 ### Supa palette 202209 后来 DEX 团过一个 supa palette, 应该不错，花了 20 + 激活码：查看 Elpass ![|275](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20220923205644.png) ### UI color palette https://www.ui-color-palette.com/ ![[CleanShot 2023-12-26 at [email protected]]] ![[CleanShot 2023-12-26 at [email protected]]] ## 网友讨论 LCH 吧，虽然有的地方没看懂，但是我这里有几个文章： Accessible Palette: stop using HSL for color systems： [https://wildbit.com/blog/accessible-palette-stop-using-hsl-for-color-systems>](https://wildbit.com/blog/accessible-palette-stop-using-hsl-for-color-systems>) LCH colors and why you should be using them (plus a package to help)： [https://dev.to/vinaypillai/lch-colors-and-why-you-should-be-using-them-plus-a-package-to-help-bbc](https://dev.to/vinaypillai/lch-colors-and-why-you-should-be-using-them-plus-a-package-to-help-bbc>) LCH colors in CSS: what, why, and how?：[https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/>) ## 在线工具 ### Palette generator [Palette Generator | Significa](https://palette-generator.significa.co/?c=%23005EE9&s=10&cs=0&cm=0) ![[paletteGeneratelor.png]] ### Accessible Palette [Accessible Palette: Create color systems with consistent lightness and contrast](https://accessiblepalette.com/) ![CleanShot 2023-09-12 at [email protected]](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/CleanShot%202023-09-12%20at%[email protected]) ### Tailwind 相关工具 #### UI Colors - [Tailwind CSS Color Generator - UI Examples & WCAG Contrast Ratios](https://uicolors.app/create) - 20231118 又试了一下，生成的颜色不脏，挺好的。![CleanShot 2023-11-18 at 15.15.44.jpg](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/CleanShot%202023-11-18%20at%2015.15.44.jpg) - 有点意思 - ![image.png](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230328123500.png) - ![image.png](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230328123549.png) #### Palette [Palette](https://palette.tone-row.com/) 手动输入颜色，生产色阶。![image.png](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230221122707.png) ### Semi ⭐️ - 通过[创建](https://semi.design/dsm/create)一个新的设计系统，可以配套生成中性色的色阶，目前是最佳的。 ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20220705100244.png) - 可以根据品牌色自动算出别的梯度，目前感觉最靠谱的。 - 理论文章 [Semi 主题：颜色算法背后的故事 - 飞书云文档](https://bytedance.feishu.cn/docx/doxcnepV6q3dZypIcxAL4J0ZUjd) ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20220619144612.png) ### Atoms - [Atmos | Create UI color palettes with ease](https://atmos.style/) 一个专门生成色板的产品，体验了一下感觉挺厉害的，还没有收费，但是以后会收。20220518 ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20220518212658.png) ### Arco Arco 的。[Arco Color Palette](https://arco.design/palette/list) ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20220406215645.png) 点击颜色可以直接改色值。![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20220705095716.png) ### Eva [Eva Design System: Deep learning color generator](https://colors.eva.design/) 没法生产中性色的色彩。![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20220821160719.png) ### 谷歌 [Color Tool - Material Design](https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=D4E157) 基本所有颜色的，色阶都有，但是没法通过一个颜色生产其他配套的颜色 202302。![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20220821160742.png) ### Huey [Huey | Color Palette Generator](https://huey.design/) 可以直接生成代码![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20220821160802.png)