微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。
本文 GitHub github.com/qq449245884… 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
快来免费体验ChatGpt plus版本的，我们出的钱 体验地址:chat.waixingyun.cn 可以加入网站底部技术群，一起找bug，另外新版作图神器已上线 cube.waixingyun.cn/home
这篇文章深入探讨了CSS颜色架构的重要性和实践方法，以帮助开发人员和设计师创建更具吸引力和一致性的网页设计。作者首先介绍了CSS颜色的基础知识，包括颜色表示法、颜色值和颜色选择工具。接着，他强调了良好的颜色架构对于网页的视觉吸引力和用户体验的重要性。
作者提供了一些实用的技巧和指导原则，帮助读者建立和组织有效的颜色架构。他讨论了颜色调色板的设计，包括主色、辅助色和中性色的选择和配对。此外，他强调了在不同设备和主题模式下保持一致性的重要性，并分享了一些工具和资源，帮助读者更好地管理和调整颜色方案。
最后，作者总结了文章的主要观点，并鼓励读者在设计和开发过程中重视颜色架构的重要性。他强调了良好的颜色选择和组织对于网页的整体外观和用户体验的影响。
下面是正文~~~
编程语言中最困难的事情之一就是以易于理解和维护的方式组织代码。
在这篇文章中，我想解释一下我是如何在我们的 Pink Design 项目中工作和组织颜色的。
就像生活中的一切，我们有许多正确的方法，更多的错误的方法来做同样的事情。在我向你展示如何组织我们的CSS变量之前，让我们先讨论在CSS中组织颜色的错误方法。
注意：我们的一些颜色架构使用Sass预处理。
定义 CSS 颜色变量的错误方法
审查其他CSS架构时，尝试思考哪些低效会使其难以维护。
使用全局变量来代替没有语义意义的所有内容
作者从LinkedIn网站上的:root元素中，通过使用inspect功能，拿了这个小例子。
正如你在下面的示例中所看到的，一个 :root 选择器上有超过 900 个 CSS 变量！在如此广泛的变量列表中找到某些东西几乎是不可能的。
将颜色与语义名称关联
我经常看到的第二个选项是具有语义名称的全局变量颜色，例如 --header-background-color 。
定义逻辑全局命名的问题首先在于你有太多的命名。
创建深色模式主题的第二个问题是，网页设计师不遵循特定颜色需要在深色模式下更改为其他颜色的逻辑。这可能会导致创建过多类型的变量，这些变量难以理解或维护。
来自旧版Appwrite控制台1.0的示例：
此外，全局颜色的覆盖会使代码的调试变得不清晰，在 Chrome 的检查元素中会出现所有覆盖的交叉线。
了解了这些问题之后，作者考虑如何更好地构建我们的CSS颜色变量。
我们如何决定管理我们的CSS颜色变量
作者主要想法是为色调谱上的每个颜色组家族创建一个CSS变量，以连接每个颜色组（例如蓝色、绿色、橙色和红色）。通过这种方式，我可以更改每个颜色组的主色调，并轻松替换该颜色家族的所有色调。
作者表示，他对这种方法的唯一疑虑在于，设计团队定义的颜色是用十六进制代码表示的，这种代码实际上代表了RGB颜色。当我们需要创建同一色调的不同深浅时，使用这种表示方式会变得比较困难。
在处理这个问题时，作者选择将HEX/RGB颜色转换为HSL颜色，然后尝试找出每一组颜色的典型色调。
从 HEX/RGB 转换为 HSL
如果我们将信息（蓝色）颜色转换为HSL颜色，我们可以看到所有色调（第一个值）都不同；它们的范围在 188 和 192 之间。
主要思想是将第一个值保留为另一个CSS变量。
为了应对这个挑战，作者决定利用CSS的calc()函数，通过对基础色调值进行加减运算来解决问题。
从每个家族组的主色中取基色色调；在我们的情况下，主色是“100”颜色，信息（蓝色）家族组的色调是189。
background-color: hsl( var(--color-info-100) );作者并未将hsl()函数直接加入到变量中，这是因为他希望在需要的时候能够方便地控制颜色的透明度。
background-color: hsl( var(--color-info-100) / 0.5 ); /* with 50% opacity */私有本地变量逻辑
由于存在不同的颜色模式（明亮模式和暗黑模式），在大多数情况下，每个部分的颜色在切换模式后都会变化。
在作者的方法中，所有的颜色都是全局的，包括明亮模式和暗黑模式的颜色。为了管理这两种模式的颜色，他添加了本地颜色变量，这些变量会根据当前模式引用全局颜色变量。为了避免全局变量过多导致混乱，他使用了为每个部分设置私有变量的方法。他用 p- 作为前缀来表示一个变量是私有的。
.partial {
--p-variable-name: value;
}作者以按钮部分为例，解释了他如何为文本颜色、background-color和 border-color 设置主要的私有变量。
.button {
/* Light-mode Theme */
--p-text-color: value;
--p-button-color: value;
--p-border-color: value;
}这些变量的使用方式如下：
.button {
color: hsl( var(--p-text-color) );
background-color: hsl( var(--p-button-color) );
border-color: hsl( var(--p-border-color) );
}复杂部分中的变量可以有很多状态。例如，按钮可以有默认、 :hover 、 :focus 、 :active 或 :disabled 状态。这些基本内部变量使用其他内部变量来呈现任何状态。
按钮变量的代码如下：
$theme-dark: ".theme-dark";.theme-dark 类最好直接定义在 <html> 元素上，当然，仅在使用暗模式状态时才这样做。
如果在 <html> 元素上定义它有问题，可以在 <body> 元素上定义。
<body class="theme-dark"> </body>这样做是为了实现对所有HTML元素的简单全局控制。
局部内的暗模式处理
为了在按钮部分创建暗模式的定义，作者在部分底部添加了这段代码片段：
.button { /* regular styles and light-mode definitions */ }
.theme-dark .button { /* definitions for dark-mode / }
因为所有按钮状态已经声明，唯一剩下的就是在暗模式“部分”中定义状态的私有颜色变量。
如果某些颜色保持不变，则无需在深色模式下进行覆盖。
:root {
/* Global Logic Colors - Light Mode */
--color-text-info: var(--color-info-100);
--color-text-danger: var(--color-danger-100);
--color-text-warning: var(--color-warning-100);
--color-text-success: var(--color-success-100);
<span class="hljs-attr">--color-border</span>: var(--color-neutral-<span class="hljs-number">10</span>);
<span class="hljs-attr">--scroll-color</span>: var(--color-neutral-<span class="hljs-number">50</span>);
#{<span class="hljs-variable">$theme-dark</span>} {
<span class="hljs-comment">/* Global Logic Colors - Dark Mode */</span>
<span class="hljs-attr">--color-text-info</span>: var(--color-info-<span class="hljs-number">120</span>);
<span class="hljs-attr">--color-text-danger</span>: var(--color-danger-<span class="hljs-number">120</span>);
<span class="hljs-attr">--color-text-warning</span>: var(--color-warning-<span class="hljs-number">120</span>);
<span class="hljs-attr">--color-text-success</span>: var(--color-success-<span class="hljs-number">120</span>);
<span class="hljs-attr">--color-border</span>: var(--color-neutral-<span class="hljs-number">200</span>);
<span class="hljs-attr">--scroll-color</span>: var(--color-neutral-<span class="hljs-number">150</span>);
}
}</pre><p>这些 CSS 变量有两种用法：</p><h4>部分内部的直接使用</h4><div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<button type="button" class="btn btn-dark far fa-copy rounded-0 sflex-center copyCode" data-toggle="tooltip" data-placement="top" data-clipboard-text=".icon-checked { color: hsl( var(--color-text-success) ); }" aria-label="复制" data-bs-original-title="复制"></button>
</div>
</div><pre class="hljs language-css"><span class="hljs-selector-class">.icon-checked</span> { <span class="hljs-attribute">color</span>: <span class="hljs-built_in">hsl</span>( <span class="hljs-built_in">var</span>(--color-text-success) ); }</pre><h4>作为全局工具类</h4><div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<button type="button" class="btn btn-dark far fa-copy rounded-0 sflex-center copyCode" data-toggle="tooltip" data-placement="top" data-clipboard-text="/* Global Utilities colors classes */
.u-color-text-disabled { color: hsl( var(--color-text-disabled) ); }
.u-color-text-offline { color: hsl( var(--color-text-offline) ); }
.u-color-text-info { color: hsl( var(--color-text-info). ); }
.u-color-text-danger { color: hsl( var(--color-text-danger). ); }
.u-color-text-warning { color: hsl( var(--color-text-warning). ); }
.u-color-text-success { color: hsl( var(--color-text-success) ); }" aria-label="复制" data-bs-original-title="复制"></button>
</div>
</div><pre class="hljs language-css"><span class="hljs-comment">/* Global Utilities colors classes */</span>
<span class="hljs-selector-class">.u-color-text-disabled</span> { <span class="hljs-attribute">color</span>: <span class="hljs-built_in">hsl</span>( <span class="hljs-built_in">var</span>(--color-text-disabled) ); }
<span class="hljs-selector-class">.u-color-text-offline</span> { <span class="hljs-attribute">color</span>: <span class="hljs-built_in">hsl</span>( <span class="hljs-built_in">var</span>(--color-text-offline) ); }
<span class="hljs-selector-class">.u-color-text-info</span> { <span class="hljs-attribute">color</span>: <span class="hljs-built_in">hsl</span>( <span class="hljs-built_in">var</span>(--color-text-info). ); }
<span class="hljs-selector-class">.u-color-text-danger</span> { <span class="hljs-attribute">color</span>: <span class="hljs-built_in">hsl</span>( <span class="hljs-built_in">var</span>(--color-text-danger). ); }
<span class="hljs-selector-class">.u-color-text-warning</span> { <span class="hljs-attribute">color</span>: <span class="hljs-built_in">hsl</span>( <span class="hljs-built_in">var</span>(--color-text-warning). ); }
<span class="hljs-selector-class">.u-color-text-success</span> { <span class="hljs-attribute">color</span>: <span class="hljs-built_in">hsl</span>( <span class="hljs-built_in">var</span>(--color-text-success) ); }</pre><p>全局工具类可以直接应用在元素上，而且会根据明亮模式或暗黑模式的主题提供不同的颜色。无论是哪种方式，颜色都会根据颜色模式方案的状态进行更新。</p><h2 id="item-0-11">总结</h2><p>本文主要讨论了定义CSS颜色变量的常见方法以及这些方法存在的问题。在此基础上，我们探讨了如何利用私有变量重新组织CSS变量，从而创建出一个颜色组织良好的CSS架构。</p><h2 id="item-0-12">HSL函数介绍</h2><p>CSS中的HSL函数是一种表示颜色的方法，它使用色相（Hue）、饱和度（Saturation）和亮度（Lightness）三个参数来定义颜色。这种表示方法相对于使用RGB（红、绿、蓝）或十六进制代码来表示颜色更加直观和易于理解。</p><p>HSL函数的语法如下：<br>hsl(hue, saturation, lightness)</p><p>色相（Hue）是一个0到360之间的角度值，表示颜色在色轮上的位置。0度对应红色，120度对应绿色，240度对应蓝色。<br>饱和度（Saturation）是一个0到100之间的百分比值，表示颜色的鲜艳程度。0%表示灰色，100%表示全彩色。<br>亮度（Lightness）是一个0到100之间的百分比值，表示颜色的亮度。0%表示黑色，100%表示白色。<br>例如，hsl(0, 100%, 50%)表示纯红色。在色轮上的位置是0度（红色），饱和度为100%（全彩色），亮度为50%（半亮度）。</p><p>HSL函数在CSS中常用于定义背景颜色、文本颜色和边框颜色等属性。它提供了一种更直观和灵活的方式来表示颜色，使得调整和控制颜色更加方便。</p><p><strong>代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 <a href="https://link.segmentfault.com/?enc=vjYRia9unKJ6A94B22csBg%3D%3D.8GrZM1%2F0aq9jA83BkfSwdEqjMKyRsOLmcgMe5pVBIG3gF0Wo7DG%2F%2BGfOJpP4Z6k6" rel="nofollow" target="_blank">Fundebug</a>。</strong></p><h3 id="item-0-13">交流</h3><blockquote><p>有梦想，有干货，微信搜索 <strong>【大迁世界】</strong> 关注这个在凌晨还在刷碗的刷碗智。</p><p>本文 GitHub <a href="https://link.segmentfault.com/?enc=oiF5S8QiqYp9elDjTjFPZw%3D%3D.Sj%2B3WaV0c2M6GAJSxHzM3sfttUwh19ZL4oe08CpfcWroc81q9efKXDFMRX4GNoJY" rel="nofollow" target="_blank">https://github.com/qq449245884/xiaozhi</a> 已收录，有一线大厂面试完整考点、资料以及我的系列文章。</p></blockquote><p></p>
