原创精选|如何利用 HSLuv 色彩模型创建人眼感知均匀的色彩系统!
三分设
共 6091字,需浏览 13分钟
·
2021-07-30 20:26
![](https://filescdn.proginn.com/2bf07ede197c5007a87d6c2ab2404018/6dca80842ad4314bfbb93121c8b475da.webp)
色彩对于品牌视觉形象来说至关重要,对设计师来说掌控色彩也非常关键。在设计团队中构建色彩系统,建立属于产品的调色板,是每个团队必须做的一件事。现有的方法大都是按照公式计算,得到逻辑上严谨的色板,但却忽略了人眼才是色彩最终面向的对象,具备视觉感知均匀性的色彩,才是更好的选择。作者通过文章一步步地教给我们如何利用 HSLuv 来创建一个感知均匀地色彩系统,一起来学习一下吧!
![](https://filescdn.proginn.com/02caed5b33dfcd027996a3ec0b84dee7/8d9466e0929a8fd7488651acd08299c0.webp)
HSLuv,你好!
1. 简要了解颜色模型
1)RGB 和 HSL
2)CIELUV 和 HSLuv
2. 真实颜色测试
![](https://filescdn.proginn.com/82cd8b9702a52203ec3694adee44e423/eeac16754b2eb0c738d6c66cd75da20c.webp)
3. 设计你的调色板
可接近性 灵活性 统一生态型
1)可接近性
2)灵活性
![](https://filescdn.proginn.com/b8c3a0714a3cd2c7e3be3e998fa0ba87/33b355e52fbabf122609b45dfd843c5f.webp)
3)统一生态性
4. 了解色彩成分
1)色相
![](https://filescdn.proginn.com/9923b9af518d1875ef139529dee6c213/e6724b186f4a53b403385f5bb3d62d57.webp)
2)饱和度
![](https://filescdn.proginn.com/6e1adf54d6b4e99268afe81c5fd0bb95/a58f1738de191c55c30a14c5e26eb724.webp)
3)亮度
![](https://filescdn.proginn.com/268ac4bb5f3fb8ae805d002849f7fc01/8f21d6c111aed3059bcc56e92b5f9bfb.webp)
5. 建立色阶
![](https://filescdn.proginn.com/5eac6cf1e9553941c5584df72a826466/6adff4fc5bc211d9940b9c1691475e0b.webp)
1)线性色彩范围
![](https://filescdn.proginn.com/704be059e90980ec57d6df447bbb0594/73c9f7975feeb9ea73f3b494142a725a.webp)
6. 学习 IBM 的流程
1)光能和人眼
2)与其他颜色结合
3)让颜色讲故事
7. 让色阶派上用场
1)对比度钟形图
![](https://filescdn.proginn.com/479e90f9a4969dfa14876bdcd02033a9/1cbe61471769702cfe0bddc2eb95314c.webp)
1 - 分析曲线
该范围在中间部分存在非常相似的对比度值,这不利于在彼此之间的色阶之间创建足够的对比度灵活性 深灰色的对比关系低于浅灰色,因此肉眼很难区分
2 - 手动调整曲线
![](https://filescdn.proginn.com/19e61967016a377f547d2ab29f931a51/cfe90e2afeb1284e9701ec50cf77e3f0.webp)
![](https://filescdn.proginn.com/73fbbfb55dd0652ea5070e1cf4803f27/9b1c8281d69978161e51b146eb3fdecd.webp)
随着亮度值的变化,我们不仅要改变周围色块之间的对比度,还要改变色彩与白色背景之间的对比度。这意味着,你有可能确实修复了曲线,但是颜色仍然不具有组合的灵活性。 每一个小变化都很重要。通常,我们不会将亮度值大幅度地从 80 移到 70,而是通过微小范围梯度(例如 69.5 vs 70)来实现,因为介于两者之间的两个十六进制代码可以轻松地改善或者破坏对比度曲线。 还记得我们的灵活性示意图吗,打算要在系统中使用一些主题 —— 使用非白色的背景。因此,我们并不是只通过最小的对比度建立峰值步幅(600,500),而是增加了一点对比度,因此可以与非白色背景(100)结合使用。
3 - 检查新色阶
![](https://filescdn.proginn.com/8c8c540eba224ef26d0fe3d08ac2e0f7/a54b9ee953a731bf07e71efbaac643bb.webp)
![](https://filescdn.proginn.com/a6298bdbba0b6407156faab056f87304/7f89cd9d05b81f57e69bf6a54b3c3f76.webp)
8. 灵活性才是力量
![](https://filescdn.proginn.com/0194835327731de001bb0958881107e9/f9eb759c93d2d196155e42cefaa630b0.webp)
我们的 light and light II 主题使用相同的色阶,以帮助我们加强用户和品牌统一体验。 所有这三个主题都具有我们计划用于主要 CTA(主要行动按钮)和图标的相同的颜色
![](https://filescdn.proginn.com/0622ca13b932392c4bc17f957939a8e3/98b1acd4fc05dd3f017281c00886463e.webp)
![](https://filescdn.proginn.com/332957993cbe4375236ede8ebc7dca9e/bda9b8e2ece155236c0751b1a4804087.webp)
9. 添加额外的色阶
![](https://filescdn.proginn.com/0378fc1019ff47ba53d9755b57e838b0/912b65c1b7f6803460d2c7188e5a888d.webp)
![](https://filescdn.proginn.com/9a6f345723637852bbc693a705375736/f7f7d3544c51719d2f8edb5eee988edb.webp)
10. 更多颜色,更多调整
![](https://filescdn.proginn.com/e752c95a7db5fec61c88be18660e52a2/6470fdbfa2557dc1b88a3cb44a82b6c0.webp)
![](https://filescdn.proginn.com/3a2b8a3403e1173fd0413a5161fda325/834eb9dfa9ce5219d54879809593648c.webp)
![](https://filescdn.proginn.com/eb0343ca54a96bbba1731d8080c79a6b/fd1eba8b39911edf6f6c60e2e18f5833.webp)
![](https://filescdn.proginn.com/7564a6ebc6909a8997e1e8882b5af6da/bacc8ff2a6a744cd366f76eb66eb268a.webp)
最后的话
![](https://filescdn.proginn.com/7bfcf932e01dfc45f9fd4e6f308e284a/69e805210ef2bcb69ecb5d886b57fad3.webp)
原文:https://uxdesign.cc/creating-accessible-colors-for-human-eyes-66ed6a083230
作者:Frantisek Kusovsky
译者:刘昱倩
审核:吴鹏飞、李泽慧、张聿彤
编辑:李凯悦
本文翻译已获得作者的正式授权(授权截图如下)
![](https://filescdn.proginn.com/7d1e5c7a58938c757559621a3ed4a761/e6f03bb4273c636cbb055a9fdc467f8d.webp)
![](https://filescdn.proginn.com/3c198eb29891ff78d680d3513887b8b5/918641cadf9bbae8bf113a3c79394877.webp)
![](https://filescdn.proginn.com/43ea4602238439e3ad7ec75d75b4ea70/eb9f25dbd9a73bd88ec6852aafae4e73.webp)
![](https://filescdn.proginn.com/2e67f90985158c5b11bfab743da004fb/4384f4c6dba0cfc3078ced7e64a6ae9a.webp)
评论