设计与产品tallys.github.io
写给程序员的实用色彩理论
Practical Color Theory for People Who Code
2017 — 2021，它一次次回到首页
黑点是上首页（≥ 50 分）的那次投稿，空心点是没冲上去的投稿，点越大分数越高。
导读
这是一篇面向程序员的实用色彩理论教程，讲解色轮、互补色、HSL 等基础概念，并教开发者如何为界面配色。文章多次登上 HN，但评论区对其中“翻转色相 180° 生成互补色”等做法提出了不少质疑。
为什么经久不衰：它把色彩理论翻译成程序员熟悉的数学语言，是入门配色思维的经典起点；即使结论有争议，也能帮你理解为什么“公式化配色”行不通。
HN 评论精选
建议用 CIELAB 而非 RGB/HSL，因为前者的距离更接近人眼的感知差异
如果你想认真处理颜色，别用 RGB，也别用基于 RGB 的 HSL，这些色彩空间问题很大。比如 RGB 中的纯蓝和纯绿亮度差异悬殊。如果 RGB 空间符合人眼感知，它在色度图上应该是个完美的六边形，但实际上它被明显扭曲了。请改用 CIELAB——它是为匹配人眼感知而设计的，其中的距离近似感知差异，而 RGB 中的距离做不到这一点。
justinpombrio查看英文原文
If you want to do something meaningful with colors, don't use RGB, and don't use HSL (which is based on RGB). These spaces are problematic. For instance, pure blue and pure green in RGB space have very different lightness. Here's a picture of the region of colors covered by RGB: https://en.wikipedia.org/wiki/HSL_and_HSV#/media/File:Srgb-in-cielab.png If RGB space corresponded to what our eyes saw, that would be a perfect hexagon. It isn't. It's warped, and the warping isn't subtle. Use CIELAB. CIELAB is designed to match what our eyes see. https://en.wikipedia.org/wiki/Lab_color_space In a little more detail, distances in the CIELAB colorspace approximate perceptual distance (how different two colors look). Distances in the RGB colorspace do not.
互补色公式化生成不可靠，配色没有公式，只能靠实践
这篇文章相当有缺陷。首先，千万别用互补色作为设计基础——红绿配色会产生“震颤”效果，比如红底绿字，难以辨认、刺眼。其次，在 HSL 色轮上旋转并不会得到真正的互补色：红黄蓝三原色在 HSL 中并不等距，红(0°)的对面是青色而非纯绿，黄(60°)的对面是纯蓝而非紫色。这是因为色彩理论基于颜料（红黄蓝），而常见色彩模型都基于 RGB。没有任何计算能生成和谐的配色，色彩理论和一切创意技能一样，只能靠练习和实验来磨练。
b3rry查看英文原文
This is pretty flawed. First off, never, ever use complementary colors as the foundation for your design. A red green color scheme (for example) will produce a result that "vibrates." Open your image editor of choice and look at green text (#00FF00) on a red background (#FF0000). Illegible. Painful to the eye. Don't do it. Read more here: https://webdesign.tutsplus.com/articles/why-you-should-avoid-vibrating-color-combinations--cms-25621 Secondly, rotating around HSL will not produce true complementary colors. Quick: what are the primary colors? Red, Yellow, and Blue. Here is where the problem lies; In an HSL rotation the primaries occupy the following H values: red (0°), yellow (60°), and blue (240°). These colors are not equidistant. The opposite of red SHOULD be pure green, yet 0°+(360/2)=180° which is #00FFFF (blue-green). The opposite of yellow SHOULD be pure purple, yet 60°+(360/2)=240° which is #0000FF (pure blue). Which means... you guessed it: the opposite of blue SHOULD be orange, but (240°+(360/2))%360)=60° which is #FFFF00 (yellow). This is because color theory is based on pigmented color. ALL of the most common color models used are equidistant between the Red Green Blue values when rotated, instead of the Red Yellow Blue values. No calculation will produce harmonious color schemes. Color theory, like any "creative" skill, is something you can hone through practice and experimentation. There is no formulaic solution. Tl;dr: light and pigment do not have the same "primary" colors. Color theory is based on pigmented colors. RGB, HSB/HSL, etc do not allow for equal transformations between RYB, so you cannot use them to calculate accurate complements.
180° 翻转生成互补色只是数学上方便，并非审美上合理
为什么这些色彩理论网站都只用色相翻转 180° 来生成互补色？我觉得原因只是这样计算简单，而不是因为这种组合真的好看。
klodolph查看英文原文
Why do all these color theory sites generate a complementary color just by flipping the hue 180°? I feel like the reason we do that is just because the math is easy, not because these color combinations look good.
数学模型生成的配色实际效果混乱，推荐 Refactoring UI 的方法
我认为这篇教程掉入了 RefactoringUI 那篇文章描述的陷阱：数学模型给出的颜色理论上应该和谐，实际上却导致刺眼的主色和混乱的界面。《Refactoring UI》一书提供了实用得多的配色模型，能通过清晰和谐的视觉层级帮助最终用户。
null_object查看英文原文
I think this guide falls into the trap described in this article: https://refactoringui.com/previews/building-your-color-palette/ where the mathematical model gives us colors that we should believe are harmonious, but which actually lead to clashing primaries, and a chaotic-looking interface. The RefactoringUI book (from which the preview above is an extract) gives a much more useful model to work with, when creating a palette that helps the end-user by establishing a clear and harmonious hierarchy of visual information.
历次讨论
同类还值得读
贝塞尔曲线入门
A Primer on Bézier Curves
Pomax 编写的贝塞尔曲线在线教程，从基础概念一路讲到曲线求交、投影、曲率等进阶内容，并配有可交互的示例和配套的 bezier.js 库。
设计与产品上首页 7 次 · 2014–2022pomax.github.io编辑精选WebGL 水面模拟
WebGL Water
Evan Wallace 制作的 WebGL Water 演示：在浏览器里实时渲染一片水面，展示折射、反射和焦散等 GPU 图形效果。
设计与产品上首页 6 次 · 2011–2025madebyevan.com设计建议：永远不要使用黑色
Design Tip: Never Use Black
设计随笔提出“永远不要用纯黑”的建议，主张在界面和绘画中改用深灰或带色相的暗色，并借阴影与色彩关系来论证。
设计与产品上首页 5 次 · 2012–2021ianstormtaylor.com用于思考不可想象之物的媒介
Media for Thinking the Unthinkable
Bret Victor 的这个页面围绕《Media for Thinking the Unthinkable》展开，探讨我们用来思考和表达复杂问题的媒介，以及以文字/符号为主的传…
设计与产品上首页 5 次 · 2013–2020worrydream.com编辑精选页面重量很重要
Page Weight Matters
博文讲 YouTube 工程师 Chris Zacharias 的一次页面瘦身实验：团队做了一个更轻量的页面版本，起初从整体平均加载时间看反而更慢；按地理区域分层后才发现，轻量版…
设计与产品上首页 4 次 · 2012–2022blog.chriszacharias.com