快速计算hsv染色的方法

目录


通常计算hsv染色时的方法是先把先把源rgb颜色转为源hsv颜色,然后对源hsv颜色做颜色变换,转换为目标hsv颜色后,再把目标hsv颜色转换回目标rgb颜色,最后输出这个目标rgb颜色。(因为rgb与hsv颜色空间的转换是非线性的,所以不能直接得到一个能直接再rgb空间上操作的变换矩阵)。
但是这种方法计算量会比较大,有一种方法可以绕过转换为hsv颜色空间的步骤,而只把hsv颜色的变化应用到rgb颜色空间。这里用到了YIQ颜色空间。因为rgb颜色空间与YIQ颜色空间的转换非常简单,而且在YIQ颜色空间中能直接通过变换矩阵改变颜色的色相(H),饱和度(S),明度(S)。所以只需要把源颜色从rgb颜色空间转换到YIQ颜色空间,再把在HSV颜色空间中的变化应用到YIQ颜色空间中,得到YIQ颜色空间中的目标颜色,最后再把目标颜色从YIQ颜色空间转换回RGB颜色空间就可以得到最终的目标颜色的RGB值。

设现在要在把颜色从RGB颜色空间应用HSV颜色空间的变化(H, S, V)
具体步骤如下:

步骤1:源颜色从RGB颜色空间转换到YIQ颜色空间:

\( T_{rgb->yiq} = \left\{ \begin{matrix} 0.299 & 0.587 & 0.144 \\ 0.596 & -0.274 & -0.321 \\ 0.211 & -0.523 & 0.311 \end{matrix} \right\} \)
\(Color_{yiq} = T_{rgb->yiq}Color_{rgb}\)

步骤2:在YIQ颜色空间转换色相(H):

\(\theta = \frac{H\pi}{180}\)
\(U = \cos\theta\)
\(W = \sin\theta\)
\(T_h = \left\{ \begin{matrix} 1 & 0 & 0 \\ 0 & U & -W \\ 0 & W & U \end{matrix} \right\}\)
\(TargetColor_{yiq} = T_h Color_{yiq}\)

步骤3:在YIQ颜色空间转换饱和度(S):

\(T_s = \left\{ \begin{matrix} 1 & 0 & 0 \\ 0 & S & 0 \\ 0 & 0 & S \end{matrix} \right\}\)
\(TargetColor_{yiq} = T_s Color_{yiq}\)

步骤4:在YIQ颜色空间转换明度(V):

\(T_v = \left\{ \begin{matrix} V & 0 & 0 \\ 0 & V & 0 \\ 0 & 0 & V \end{matrix} \right\}\)
\(TargetColor_{yiq} = T_v Color_{yiq}\)

步骤5:最后把最终得到的YIQ颜色空间的目标颜色转换回RGB颜色空间:

其实这个矩阵就是\(T_{rgb->yiq}\)的逆矩阵
\(T_{yiq->rgb} = T_{rgb->yiq}^{-1} = \left\{ \begin{matrix} 1 & 0.956 & 0.621 \\ 1 & −0.272 & −0.647 \\ 1 & −1.107 & 1.705 \end{matrix} \right\}\)
\(TargetColor_{rgb} = T_{yiq->rgb} TargetColor_{yiq}\)

整合

最后,把以上步骤关联在一起,其实就是
\(TargeColor_{rgb} = T_{yiq->rgb}T_vT_sT_hT_{rgb->yiq}Color_{rgb}\)
其中有矩阵:
\(T_{tans} = T_{yiq->rgb}T_vT_sT_hT_{rgb->yiq} = \left\{ \begin{matrix} 1 & 0.956 & 0.621 \\ 1 & −0.272 & −0.647 \\ 1 & −1.107 & 1.705 \end{matrix} \right\} \left\{ \begin{matrix} V & 0 & 0 \\ 0 & VSU & -VSW \\ 0 & VSW & VSU \end{matrix} \right\} \left\{ \begin{matrix} 0.299 & 0.587 & 0.144 \\ 0.596 & -0.274 & -0.321 \\ 0.211 & -0.523 & 0.311 \end{matrix} \right\} = \left\{ \begin{matrix} 0.299V + 0.701VSU + 0.168VSW & 0.587V − 0.587VSU + 0.330VSW & 0.114V − 0.114VSU − 0.497VSW \\ 0.299V − 0.299VSU − 0.328VSW & 0.587V + 0.413VSU + 0.035VSW & 0.114V − 0.114VSU + 0.292VSW \\ 0.299V − 0.3VSU + 1.25VSW & 0.587V − 0.588VSU − 1.05VSW & 0.114V + 0.886VSU − 0.203VSW \end{matrix} \right\} \)
那么\(TargeColor_{rgb} = T_{trans}Color_{rgb}\)

*参考Affine HSV color manipulation

上一篇:详情功能


下一篇:你知道 react-color 的实现原理吗