设计与产品refactoringui.com
构建你的配色方案
Building Your Color Palette
2018 — 2020，它一次次回到首页
黑点是上首页（≥ 50 分）的那次投稿，空心点是没冲上去的投稿，点越大分数越高。
导读
这篇来自 Refactoring UI 的教程讲解如何为界面设计搭建一套实用的颜色系统：不要依赖调色板生成器，而是选定一个主色后，按明度阶梯生成一整套由浅到深的色阶，并注意灰色文字与背景的对比度。文中用前后对比截图展示了同一组颜色如何让界面从杂乱变得统一专业。
为什么经久不衰：它把看似玄学的配色问题拆解成可操作的步骤，是少数经设计师和开发者双重验证、多年后仍被引用的配色入门经典。
HN 评论精选
专业设计系统从业者认可：配色无法公式化，受生物、潮流与文化影响
我日常做设计系统，这是我在 HN 上见过的第一篇真正讲清楚如何正确搭建调色板的文章。作者早期就指出调色板生成器不是万能方案，这一点很到位。颜色的含义与和谐无法用数学公式拆解，它深受生物学、潮流和文化的影响。RGB 与我们的生物感知并非一一对应，我们只能近似，没有完美体系。潮流也很少被讨论：如果某个市场习惯把某种红色视为危险色，设计时就应贴近它，就像美国所有停车标志都统一形状以降低认知负担一样。
jjcm查看英文原文
I work on design systems as my day-to-day job. This is the first post I've seen on HN that actually captures how to properly set up your color palette. The author's early call out on how palette generators are not a one-stop-shop for your color palette rings true. Color meaning and harmony cannot be broken down into a mathematical formula. It's too heavily influenced by a.) biology, b.) trends, and c.) culture. RGB simply does not map 1:1 with our biology. We can't say, "ok here's a simple formula that will create two color that have harmony with humans universally". We can approximate it, but there's no perfect system out there for it. Other color modes (such as HSL or LAB) help, but come with their own drawbacks as well. Trends is another matter that is rarely considered or talked about. We as society gravitate towards certain colors within each geographical market. As a UX designer, it's important to stay within the bounds of these. There are certain things in life that should follow trends, many of which are items that convey important meaning. Can you imagine if every city in America used a different stop sign? It would be disastrous. Having one universal shape/symbol reduces the mental load required to recognize the meaning of the object. Likewise if a market gravitates towards a certain shade of red as dangerous, then you should stay close to that color when choosing your design palette. Over time these colors will shift as the trends slowly evolve - this is not something that can be approximated by a formula. The last bit is culture. Color in each culture is widely different. Red in China conveys prosperity, which is why if you look at designs for stock portfolio apps in China, graphs are red when going up in price. In India it represents purity. In the Western world it's danger. None of this can be captured in a formula. The author breaks down what the correct approach is when choosing color - breaking down meaning and extrapolating shades in your ramp to create a useful, well supported palette.
配色协调与否难以理性解释，但直接影响产品的专业感
我以为自己审美不错，但给自己的应用配色时总是很挣扎——单独看都好看的颜色放在一起总觉得不对劲，作为分析型思维者很难解释为什么。这类文章和反复尝试帮了我，包括分析喜欢的应用的用色：CTA 通常饱和度更高，背景等想弱化的元素饱和度更低。最终，一套协调的调色板会让产品显得更精致专业，即使代码一行没改。就像电影中的沉浸感，一旦被打破，你就只看到一串镜头而非故事。
allenu查看英文原文
I thought I had a good sense of aesthetics, but I struggled with coming up with a color scheme for my own app. Once you pick colors that look nice, when you put them together, something always seems off! There isn't a unity and it's hard as an analytical thinker to explain why. You just can feel it. Articles like this helped me out a bit, as well as just trying different things. This includes taking an app or website you like and analyzing the colors they use. It helps to look at their use of saturation and lightness in specific elements (i.e. CTAs are typically more saturated and backgrounds and other elements you wish to mute are less saturated). In the end, if you can come up with a cohesive color palette, your product definitely looks more polished and professional. You have an overall feeling of confidence in it, even if the code has not changed one bit. It's like suspension of disbelief in a movie. When you hit something that shatters the illusion, you're taken out of the story and just look at the film as a series of filmed events played out in sequence and less like a narrative.
反对'纯黑文字太刺眼'的说法，坚持高对比度文字
我经常审计网站，最常见的问题是把文字当事后补丁。文中说白底黑字'不自然'的观点助长了糟糕的低对比度选择。请把这套说法扔掉，从 #333 到纯黑作为白底文字的最低对比度标准。在我经手的至少 100 个把字体改成 #000 的案例中，没有一例用户反馈灰色更好，也没有一例数据显示可读性提高导致停留时间或转化下降。这完全是设计迷思，应该被淘汰。
theartfuldodger查看英文原文
I audit sites frequently, the most common flaw is designers treating text as an afterthought. This article had one point that probably assists in the poor contrast choices that are so common. As I type in black on white in this text box I have trouble understanding why design professionals would call "black" on white unnatural. It is not. Unnatural isn't even an appropriate word to use for images and text displayed on a screen unless you are describing the entire experience. Do yourself ( and us) a favor and throw that whole idea out the window and start at #333 to pure black on white as your minimum contrast unless something particularly important in the overall aesthetic changes that priority. In at least 100 examples where one of the audit fixes was "change font to #000" was the follow up feedback by a client or user tester saying that the gray was better or that "its unnatural" or "way too legible" nor a single case of analytics showing less dwell or read time ( or conversions) from users. Complete design myth and it should die
配色应遵循 WCAG 无障碍对比度标准，并按使用场景组织调色板
其实这是有科学依据的，叫无障碍设计。WCAG 指南对如何组合颜色、满足对比度要求非常有用。还可以为调色板建立使用场景（文字+背景、UI 元素+背景等），确保添加的都是需要的颜色、避免膨胀。既然现在已有公司因无障碍问题被起诉，这理应从设计流程一开始就纳入。
pg_bot查看英文原文
Take this one step further and build the color palette into your stylesheets. If you're using Sass you can setup something like: $palettes: ( blue: ( lightest: hsl(201, 75%, 66%), lighter: hsl(201, 75%, 61%), light: hsl(201, 75%, 56%), base: hsl(201, 75%, 51%), dark: hsl(201, 75%, 46%), darker: hsl(201, 75%, 41%), darkest: hsl(201, 75%, 36%) ), red: (...), gray: (...) ) @function palette($palette, $tone: 'base') { @return map-get(map-get($palettes, $palette), $tone); } This ends up looking like: `background-color: palette(blue, "light")` in your codebase. I typically use hsl instead of hex codes because it is easier to understand and modify. You can quickly build up a palette by just modifying the lightness scale on each color by a constant percentage. (This is where I disagree with the author, all of design is just math) It is often useful to combine colors for your designs and Sass has you covered with the `mix` function. Using this setup you can call `mix(palette(blue), palette(gray))` to combine colors in your palette. You typically want to do this with text on a colored background to make it look more visually appealing. This is the only way I've found to stay sane managing your colors in a big project. In my experience, everything else goes off the rails when you introduce multiple people into the picture. Please steal this idea, your projects will be better because of it.
指出文章方法与生成器本质相同，强调单色+强调色的克制方案
有点讽刺：文章开头批评调色板生成器给你围绕主色的 5 个色值，结尾却也是选一个基色、从浅到深填 5 到 10 个色阶——这正是生成器做的事。大多数人的错误是滥用生成器。绝大多数时候你只需要单色方案加一个互补强调色，类似 Google：以白色为基底，四色 logo 仅作点缀。保持简单，多色方案要克制使用，主背景选中性白或灰。
nostrademons查看英文原文
Kinda ironic that he starts the article by decrying fancy color palette generators that give you 5 hex codes centered around a primary color, and then ends it by choosing a base color and filling in the gaps with 5 (possibly 10) shades from light to dark. That's exactly what color palette generators do! The mistake most people do is going hog-wild with color palette generators. The vast majority of the time, you want a monochromatic scheme with a complementary accent color. Adjacent, triad, and tetrad schemes are quite special purpose, and you use them differently. Think of Google - it's a tetrad scheme, but the base color for all Google sites is white, and all 4 colors of the logo are used as accents. You want to KISS - if you do have a multicolor palette, use the colors sparingly and pick a neutral white or grey as the primary background color.
历次讨论
同类还值得读
贝塞尔曲线入门
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