设计与产品iamkate.com
12 位彩虹调色板
The 12-bit rainbow palette
2022 — 2025,它一次次回到首页
黑点是上首页(≥ 50 分)的那次投稿,空心点是没冲上去的投稿,点越大分数越高。
导读
这是一份为数据可视化设计的 12 色调色板:把 12 个色相均匀排布在色轮上,同时把每个颜色通道限制为 4 位(即取值为 0x11 的倍数),因而整体是一个紧凑的 12 位色彩方案,在低色深环境下也能稳定呈现。作者说明了它的构造方式与适用场景。
为什么经久不衰:它把“彩虹配色好看但不好用”这个老问题摆到台面上,给出一个简洁、可复用的折中方案,并引出关于感知均匀性与可辨识度的长期讨论。
HN 评论精选
请读者注意彩虹配色的已知缺陷,并引用 IBM 关于感知色图的研究作为依据。
对这类数据来说,彩虹配色确实还行,但如果要可视化更复杂或更密集的数据,就要小心彩虹色板的陷阱——它并不总是最佳选择。IBM 在 90 年代就研究过基于感知的色图,发现色相不是编码量级信息的好维度;处理高空间频率信息的是负责亮度的视觉通道,所以这类数据应选用亮度变化大的色图;对区间和比率数据,亮度型和饱和度型色图都应做到数据等步长对应感知等步长。原文链接已从 IBM 网站移除,有 PDF 存档。
splittingTimes查看英文原文
> rainbow palette for use in my data visualisations. Indeed for her kind of data the rainbow palette works okay. But if you have to visualize more complex / denser data, beware of the pitfalls of the rainbow color palette. It is not always the best choice. IBM did research back in the 90s on perceptually-based colormaps and how to best represent various types of data within the color dimensions of luminescence, saturation and hue [1]. For example, they found that, (1) Hue was not a good dimension for encoding magnitude information, i.e. rainbow color maps are bad. (2) The mechanisms in human vision responsible for high spatial frequency information processing are luminance channels. If the data to be represented have high spatial frequency, use a color map which has a strong luminance variation across the data range. (3) For interval and ratio data, both luminance- and saturation-varying color maps should produce the effect of having equal steps in data value correspond to equal perceptual steps, but the first will be most effective for high spatial frequency data variations and the second will be most effective for low spatial frequency variations. === [1] the original link got removed from IBMs website. Back in the day it was under https://www.research.ibm.com/people/l/lloydt/color/color.HTM A pdf copy is here: https://github.com/frankMilde/interesting-reads/blob/master/ibm-research__why-should-engineers-and-scientists-be-worried-about-color.pdf
首尾两色对部分人来说难以区分。
我很喜欢这个配色,但提醒一下:我很难分辨第一个和最后一个颜色,可能还有其他人也有同样的问题。
dqh查看英文原文
I really like this, but FYI I do struggle to tell the difference between the first and last colour. There are probably others out there with this problem.
补充了艺术家凭直觉构建彩虹色板的先例。
荷兰艺术家 Peter Struycken 用各种彩虹色板创作过绘画,他并不使用计算机算法,而是靠眼睛来选色(尽管他是知名的计算机艺术家);图案设计则用了程序。他为特定建筑和用途做过许多套色板。
fjfaase查看英文原文
The Dutch artist Peter Struycken has made paintings with various rainbow palette, not using some kind of computer based method (although he is a prominent computer artist), but just his eyes. See: https://www.pstruycken.nl/EnS20.html (A computer program was used to design of the pattern being used in the paintings.) He has created many colour palettes for specific buildings and applications. See: https://www.pstruycken.nl/EnDyn.html?Li,tag=q&w
旧概念仍有创新空间,表示会采用这套配色。
我是个色彩爱好者,很高兴看到即便 RGB 这样的概念已有 162 年历史,人们仍在寻找创新的机会。我喜欢这个配色,会用它。
nomagicbullet查看英文原文
I'm a color nerd and I love seeing how even with such an old concept (RGB is 162 years old), people are still interested in finding opportunities to innovate. I love this palette and will be adopting it. Thanks for sharing.
历次讨论
同类还值得读
贝塞尔曲线入门
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