This article is mainly taught today we design and implement a practical ColorPicker, we want to help!
Foreword
The ColorPicker, color picker, referred Color Picker.
When it comes to the color picker, you might think of Photoshop, the most frequently used should be designed for developers, the opportunity to use the usual color picker much.
If one day, the project needs a color picker (more for custom colors), where to start? Today to share with you and to design and implement the Color Picker.
Color space
To achieve practical Color Picker, it is necessary to understand the next color space. Color space is also called a color model (also known as color space or color system), whose purpose is described in some of the color standard to be used generally acceptable manner. This section excerpts from some of the major expressions of God, and collated.
RGB space
RGB color light emission from a given design principle, the popular point that it acts as if there color mixture of red, green and blue lights, if they are superimposed on each other, when light, mixed colors, and the brightness was equal to the sum of both the luminance, the higher the brightness mixing, i.e. the addition mixing.
Red, green, and blue colors of the three color channels of each stage is divided into 256 brightness at 0 "light" weakest - is turned off, and in the 255 "light" is the brightest.
When a three-color gray-scale values are the same, to produce different gray gradation values, i.e., three-color gray are 0, it is the darkest black tone; three-color gradation are 255, the brightest white tone .
HSB space
RGB is a color mode the machine very friendly, but not human, because our understanding of color is often "What color? Bright not bright? Light or dark?." For example, we usually describe color, "purple", "light green", "bright yellow", "dark" and the like, one account base color, the second is the color itself be described. HSB (HSV) based on RGB, is a more humane method of representation.
- H (Hue) of hue, value range: 0-360 °, the base color.
- S (Saturation) is the saturation range: 0 - 1 (0% --100%) represents the purity of color.
-
B (Brightness) is the lightness, in the range: 0 - 1 (0% --100%) represents the amount of light perceived.
Brightness in some places, also known as Value, so there HSV, HSV and HSB are the same, but it is called on lightness just not the same.
- Each color hue circle, in the RGB space, a maximum of only two color channels (r, g, b) is greater than 0, so the color hue circle is the most pure.
- RBG brightness determines the size of three components, that is, determines the size of the light, at the level of perception, is the difference between light and dark.
- Saturation of color 0, r, g, b are equal to zero when the lightness is black, the lightness of white is 1, greater than 0 and less than 1 gray;
- 1 when the saturation, hue and color value depends only on the brightness, size and brightness control only the RGB components, so the color is pure;
- Saturation is between 0 to 1, 0 to saturation of color (black gray) and color saturation of a linear interpolation, the purer the closer a color.
brightness
Look at the HSB color model Photoshop color picker, as shown below, HSB and B (brightness) control amount mixed in solid black, the higher up, the larger the value, the less black, the color of higher lightness.
saturation
As shown below, the HSB the S (saturation) to control the amount of white solid is mixed, the right, the larger the value, the less white color, the higher the color purity.
Hue
Hue refers to the color of the external phase, under the irradiation of light of different wavelengths, human eyes sense different colors, such as red, yellow, blue and the like. In HSV and HSL color space, H refers to the hue of red is 0 ° (360 °); yellow 60 °; green 120 °; cyan is 180 °; blue 240 °; magenta 300 °.
As can be seen from the figure, from 0 ° to 360 °, a piecewise function, wherein each segment has a color component is 0, 1 is a component, another component, or from 0 to 1, or from 1 to 0.
HSB to RGB
For users, HSB space is easier to adjust, but for computers, rendering an RGB space will be more convenient. The following are HSB to RGB conversion formula:
FIG, h, s, v are the hue, saturation, lightness. With this set of equations, we can understand the hue of Article 2.5 is how to come up. First, see the first formula, [] is a symbol rounding, i.e. hi = (int) (h / 60)% 6.
So s = 1, v = 1, then p = 0, q = 1-f, t = f.
当i=0（第一段），(r, g, b) = (v, t, p) = (1, f, 0), 而f=h/60-hi =h/60，
也就是，第一段中，r=1, g=h/60, b=0；特例：当h=60， r=1,g=1,b=0, 混合出黄色。以此类推。另外我们还注意到，当h选定之后，颜色和s，v成线性关系，这一点对后面拾色器的实现很重要。
##拾色器的设计
条形拾色器
需要用到自定义颜色的APP不多，网易APP是其中一个。点击“个性换肤->自选颜色”，会弹出这样的界面：
页面中间是预览，底部是预定义的调色板。调色板的最后，是一张多彩的图片，点击后切换成两个颜色条，如下图：
第一个颜色条很眼熟了，就是前面提到的色相；底下这条，应该是以选取的色相为基础，饱和度为1，明度从0到1渐变。这两个颜色条组合起来，颜色的取值范围为2.2节中的圆柱的侧面。取值范围虽然只占颜色空间的一部分，但是也是很有价值的一部分。
可能网易的设计师只想让用户选取鲜明的颜色，所以舍弃了饱和度的调节，同时换来了极大的简洁性。
环形拾色器
开源的Android拾色器有不少，其中HoloColorPicker是star比较多的一个项目：
该项目把色相做成一个环，底下辅以饱和度和明度的调节，可以说是一个完整的拾色器了（可以选取整个颜色空间的颜色）。把色相做成色相环，看起来比色相条要更加炫酷一些，但是占用面积变大了。像网易云音乐的颜色选取，因为要给预览图足够的空间，所以只能用空间占用少的拾色器；像这种一下占用大半个屏幕的设计，不适合网易云音乐这种选色场景。
PS拾色器
Photoshop的常规拾色器是矩形构成的“饱和度-明度”选取面板，以及色相条（然后也可以通过设置换成色相轮）。
Photoshop作为专业的图像编辑软件，拾色器无疑是很强大的。
同时电脑显示器的面积毕竟比手机要大很多，鼠标的选取精确度也比手指触摸屏幕要精确，所以Photoshop的拾色器可以大开大合，提供各种面板，显示全面的参数。
技术实现
通过前面三个小节的分析，我们可以看出，拾色器的实现要点为：
以HSB颜色空间为基础，通过条形，环形，矩形等坐标来调节HSB各分量的值，达成颜色的选取。
首先第一个要解决的问题就是，颜色空间的转换计算。 幸运的是，SDK 的 Color 类提供HSB(HSV)和RGB之间的转换方法：
public static void colorToHSV(@ColorInt int color, @Size(3) float hsv[])
public static int HSVToColor(@Size(3) float hsv[])然后要解决的第二个问题是，坐标的绘制。 同样，SDK也提供了各种Shader, 使得我们可以轻松的绘制各种坐标。接下来我们结合实例看一下。
仿网易云音乐
也不卖关子了，先上效果图吧：
和网易云音乐一样，都是在下方显示面板，有预置的调色板，调色板最后的方块可以跳转去自定义暗色；不同之处在于，比之多了透明度和纯度的调节，如此，可以选择整个颜色空间，以及alpha通道。以上实现的关键点在于，色相、饱和度（为了字体长度相同，以“纯度”作为title），以及明度的绘制。
前面我们提到，色相是分段线性变化的，因此，我们可以利用 LinearGradient 来绘制。
public LinearGradient(float x0, float y0, float x1, float y1, @NonNull @ColorInt int colors[],
@Nullable float positions[], @NonNull TileMode tile) 给LinearGradient的color数组福祉，只需列出色相在分段交界的颜色即可：
private static final int[] COLORS = new int[] {
0xFFFF0000,
0xFFFFFF00,
0xFF00FF00,
0xFF00FFFF,
0xFF0000FF,
0xFFFF00FF,
0xFFFF0000,
};前面提到，h确定之后， 颜色和s,v成线性关系，因此，也可以通过LinearGradient来绘制饱和度和明度。例如，绘制饱和度时，只需计算hsv第二分量（hsv[1], 也就是s）等于0和等于1时的颜色值，作为LinearGradient的colors的参数，即可绘制在当前h, v值对应的s的变化（也就是饱和度对应的颜色条）。
hsv[1] = 0f;
colors[0] = Color.HSVToColor(hsv);
hsv[1] = 1f;
colors[1] = Color.HSVToColor(hsv);明度的绘制以此类推。
仿Photoshop
色相在0°和360°对应的都是红色，首位相接，所以很多时候会被做成色相环（Photoshop中叫色相轮）。饱和度和明度，如果合成一个二维坐标，会更加直观，这样也是Photoshop的方案。要绘制色相环，需要用到另一个Shader：
public SweepGradient(float cx, float cy,
@NonNull @ColorInt int colors[], @Nullable float positions[])用法很简单，把上一节给出的 COLORS 代入 SweepGradient 的 colors 即可。而要合成饱和度和明度，可以用ComposeShader:
private Shader getSVShader() {
if (mValShader == null) {
mValShader = new LinearGradient(
mSVRect.left, mSVRect.top,
mSVRect.left, mSVRect.bottom,
Color.WHITE, Color.BLACK, Shader.TileMode.CLAMP);
}
if (mShaderHSV[0] != mHSV[0] || mComposeShader == null) {
mShaderHSV[0] = mHSV[0];
Shader satShader = new LinearGradient(
mSVRect.left, mSVRect.top,
mSVRect.right, mSVRect.top,
Color.WHITE, Color.HSVToColor(mShaderHSV), Shader.TileMode.CLAMP);
mComposeShader = new ComposeShader(mValShader, satShader, PorterDuff.Mode.MULTIPLY);
}
return mComposeShader;
}ComposeShader可以组合两个Shader, 因为颜色和s, v是线性关系，所以需要组合两个LinearGradient。第一个LinearGradient从左上角到左下角，从白到黑；第二个LinearGradient从左上角到右上角，从白到色相的颜色。效果如下：
既然拾色部分已经占了这么多空间了，所以干脆把剩下的空间也用上，来做数据面板；还加一个编辑框，可以手动输入RGB颜色，同时限制编辑框只能输入十六进制，限制输入长度。
总结
两类拾色器中，通过条形坐标来选取颜色比较节约空间，通过环形和矩形则相对直观。具体使用哪一种，要视情况而定：
如果要实时预览效果，那拾色器就不能占太多空间，这时候第一种方案会比较适合；如果要制作调色板之类的，用第二种方案就比较高效。
限于篇幅，在实现方面没有讲的很细，读者可以具体看项目代码，代码链接：
最后对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，从来都是我们去适应环境，而不是环境来适应我们！
这里附上上述的技术体系图相关的几十套腾讯、头条、阿里、美团等公司19年的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。
相信它会给大家带来很多收获：
上述【高清技术脑图】以及【配套的架构技术PDF】可以 加我wx：X1524478394 免费获取！
When programmers easily, when a good programmer is a need to learn from junior programmer to senior programmer, architect from primary to senior architect, or to management, technical director from technical manager to each stage We need to have different capabilities. Early to determine their career direction, in order to throw off their peers at work and in capacity building.