Color

本课程从什么是色调空间和色度图谈起，介绍了常见的SDR和HDR色彩空间规范以及ACES色调治理的根本流程，最初介绍UE4引擎是如何集成ACES和HDR显示到其相干的渲染管线中。

本文首发于我的博客在开发公司UI组件库的过程中，颜色组件ColorPicker由于时间关系没有去深入研究，看着花花绿绿的色谱图，以为实现起来会很复杂，就直接将一个开源的颜色选择器封装了一下。这大概是半年以前的事了，这篇文章也在我的博客中以草稿形式（只有标题没有内容，当时是做了一个记录，想着后来有时间了去研究，目前这种草稿还有很多????）存放了半年了。前段时间请教了公司UI同事一些颜色相关的概念，又去搜索了下这方面的知识，收获还是蛮大的，尤其是知乎色彩空间中的 HSL、HSV、HSB 有什么区别？这篇提问中，@Forrest近乎大白话的回答，超赞????。 在了解了相关概念之后，再去审视这个组件的话，就不会有那种陌生行业的抵触感了。最终也实现了这个这个组件，DEMO，并将实现过程记录如下： 【解析Photoshop调色器】小章节是基于维基百科和知乎文章对一些颜色概念的总结。开发视角总结的可能并不太专业，了解即可。 解析Photoshop调色器 HSL、HSV、HSB的区别作为前端，我们了解HEX，了解RGB，但对于HSL、HSV、HSB这几个颜色概念往往是模糊不清的。如上图Photoshop的调色器，其中下部分别有H、S、B、R、G、B等几个输入框，R、G、B分别代表红绿蓝三原色的颜色通道，通过对这三个颜色通道的变化以及相互之间的叠加可以得到各种不同的颜色，这是我们所熟知的。那么H、S、B又是什么呢？ 事实上，HSB同RGB一样，也是一种颜色模式，其中H(hue)表示色相(什么颜色)，S(saturation)表示饱和度(颜色的纯度)，B(brightness)表示明度亮度(颜色的明亮程度)。相较于RGB模式，HSB颜色模式更加人性化，它定义了颜色“是什么颜色？颜色艳不艳？颜色亮不亮？”。 什么是色相色相就是在不同的光照下，人眼所感觉不同的颜色。 ”赤橙黄绿青蓝紫，谁持彩练当空舞?“，伟人的诗词早就描绘过了。在HSV/HSL色彩模式下， 色相是以红色为0度（360度），黄色为60度，绿色为120度，青色为180度，蓝色为240度，品红色为300度的表现，其值范围为0 - 360度，如下图： 什么是饱和度饱和度是指颜色的强度或纯度。饱和度表示色相中彩色成分所占的比例，用从 0 (透明) ~ 100% (完全饱和)的百分比来度量。纯度是色彩感觉强弱的标志，纯度高的颜色人眼看上去显得比较鲜艳。 什么是明度明度是颜色的相对明暗程度。通常是从 0 (黑) ~ 100% (白)的百分比来度量的。 同样的，HSL、HSV和HSB一样，都是基于色相、饱和度、明度三方面对色彩的解释。其中HSB 和 HSV 是同一个东西，只是叫法上不同。后面我们统一使用HSV来表示。 对三种颜色模式的区别，知乎上(文末附链接)有个很浅显易懂的回答: 在原理和表现上，HSL 和 HSB 中的 H（色相） 完全一致，但二者的 S（饱和度）不一样， L 和 B （明度 ）也不一样： HSB 中的 S 控制纯色中混入白色的量，值越大，白色越少，颜色越纯；HSB 中的 B 控制纯色中混入黑色的量，值越大，黑色越少，明度越高HSL 中的 S 和黑白没有关系，饱和度不控制颜色中混入黑白的多寡；HSL 中的 L 控制纯色中的混入的黑白两种颜色。HSV的三个值表达范围分别为： H [0-360] float S [0-1] float V [0-1] float 上述概念，可能并不太专业，了解即可。 用程序思维来解释上述概念的话，就是说我们在一个颜色中混入不同程度的黑和白就能变为另外一种颜色值，如下图：也就是说，抛开R、G、B三个颜色通道之外，还可以通过色相H、饱和度S、明度V另外三个通道来表达颜色。 ...

今天利用webpack-theme-color-replacer插件，为ant-design实现了在运行时动态切换主题色的功能，无需在页面进行less的编译，提升了切换速度。有需要的同学可以参考下。 源码：https://github.com/hzsrc/ant-... 效果预览：https://deploy-preview-4289--...在右侧中央的配置按钮点开可以切换主题色。 实现方案：方案是统一的，见之前的文章：https://segmentfault.com/a/11... 基本步骤：基于 ant-design-pro 这个项目上进行修改： 1、webpack加入插件配置：查看修改：https://github.com/hzsrc/ant-... 2、运行时动态切换主题色，查看修改：https://github.com/hzsrc/ant-... （因笔者时间有限，color.less文件中的colorPalette变换函数所涉及的颜色值没有纳入） 实现效果：初始主题色： 切换后主题色：

今天利用webpack-theme-color-replacer插件，为ant-design-vue实现了在运行时动态切换主题色的功能，无需在页面进行less的编译，提升了切换速度。有需要的同学可以参考下。 源码：https://github.com/hzsrc/ant-... 效果预览：http://test.hz300.com/ant-des...在右侧中央的配置按钮点开可以切换主题色。 实现方案：方案是统一的，见之前的文章：https://segmentfault.com/a/11... 基本步骤：基于 ant-design-pro-vue 这个项目上进行修改： 1、webpack加入插件配置：查看修改：https://github.com/hzsrc/ant-... 2、运行时动态切换主题色，查看修改：https://github.com/hzsrc/ant-...新增文件：https://github.com/hzsrc/ant-... 实现效果：初始主题色： 切换后主题色：