iOS 十六进制颜色转换

1. 介绍

1. 在iOS日常开发中UIColor 是我们很常用的一个类,用来呈现出各种颜色,色彩搭配得当,可以绘制出很漂亮的UI界面.另外颜色也可以用来作为日常开发调试UI的一种方式.

2. 颜色的表示形式有很多种.

   • 十进制表示rgb(255,255,255)
   • 十六进制 0xC1C1C1
   • 十六进制字符串 #C1C1C1

• RGB 代表三原色,其中R(Red),G(Green),B(Blue) ,分别代表三个颜色通道.每个颜色通道的最大值是,也就是256.注意( = 1) 这里是从1开始 256-1 = 255;共有255中取值.
• 所以说我们常见的RGB取值范围是(0~255).

3. 数值表示

• 一个颜色显示的描述是由三个数值控制的，他分别为R、G、B。但三个数值位为最大时，显示为白色，当三个数值最小时，显示为黑色。

• 数值表示可以使用以下几种不同的方式:

从0到1之间可用的数来表示----浮点 从0%到100%----百分比 使用0到255之间的整数，八位数字表示，通常表示为十进制和十六进制的数值 高端数字图像设备通常会使用更大的整数来表示，比如0 . . 1023(10位),0 . . 65535(16位)或更大 例如红色在不同方式下的表示

方式	RGB 表示
浮点	(1.0, 0.0, 0.0)
百分比	(100%, 0%, 0%)
八位数字	(255, 0, 0) 或#FF0000 (十六进制)
十六位数字	(65535, 0, 0)

• 我们日常开发中作为常用的是浮点数和八位数字表示.

注: 这里只是简单的介绍RGB,作为快速了解,详细请参考维基百科

2. 如何使用十六进制颜色?

• 在iOS日常开发中你很有可能写出这样的代码[UIColor colorWithRed:red/255.0 green:green/255.0 blue:blue/255.0 alpha:alpha];
• red,green,blue 代表传入参数,分别是三种颜色通道的取值,除以最大值255(red/255),是以小数的形式传入的,分子的取值不能超过255.
• apha:代表颜色的透明度取值范围是(0-1)
• 在日常开发中我们经常见到 #F86340 或者0xF86340 一个是十六进制字符串的形式,一个是十六进制数值的形式,用来表示颜色的,那我们如何使用,如果转换成十进制的表示形式呢?
• 要完成颜色转换成十进制的数,我们需要使用到位运算和位移运算.

2.1 一个十六进制数如何表示RGB三原色的?

• 比如F86340 我们都知道RGB,三个颜色通道,每个颜色通道的最大取值是255,如果十进制255用十六进制表示是FF.
• 所以我们可以知道每个颜色通道需要用两个十六进制数表示.
• 一个完整的十六进制表示颜色需要6位.

2.2 如何使用十六进制的颜色?

2.2.1 使用演示
[UIColor colorWithRed:((0xF86340 & 0xFF00) >> 8)/255.0 green:((0xF86340 & 0xFF00) >> 8)/255.0 blue:((0xF86340 & 0xFF))/255.0 alpha:1];
或者

+ (UIColor *)ml_colorWithHex:(UInt32)hex alpha:(CGFloat)alpha{
    
    CGFloat score_R = (hex & 0xFF0000) >> 16;
    
    CGFloat score_G = (hex & 0xFF00) >> 8;
    
    CGFloat score_B = (hex & 0xFF);
   
    return [UIColor colorWithRed:score_R/255.0 green:score_G/255.0 blue:score_B/255.0 alpha:alpha];
}

2.2.2 如何计算的?

1. 0xF86340 & 0xFF0000, 0xF86340 & 0xFF00 ,0xF86340 & 0xFF 分别是什么意思?
2. 0xF86340 & 0xFF0000 ,表示 F86340 和 0xFF0000 进行与运算,目的是要取出F86340的前两位F8,因为F8表示red颜色通道的值.

---

3. 0xF86340的二进制

十六进制:	F	8	6	3	4	0
二进制:	1111	1000	0110	0011	0100	0000

4. 0xFF0000 的二进制

十六进制:	F	F	0	0	0	0
二进制:	1111	1111	0000	0000	0000	0000

5. 位运算

0xF86340二进制:	1111	1000	0110	0011	0100	0000
运算符:	&
0xFF0000二进制:	1111	1111	0000	0000	0000	0000
(计算结果)二进制:	1111	1000	0000	0000	0000	0000

通过位运算得到结果的1111 1000 0000 0000 0000 0000,如果将此二进制数转换为十进制数,是一个非常大的数,而每个颜色通道的最大值是255,所以还需要通过位移运算,将得到的结果控制到最大范围内.

---

6. 如何位移运算?

• 首先我们先看下面一个二进制数:
  0000 0000 0000 0000 1111 1111 ===> 该数最大的值是 255(十进制).
• 所以所我们只要将之前计算的结果位移到最后的八个二进制位的位置上即可.

1111   1000     0000     0000      0000     0000  >> 16   右移16位
-------------------------------------------------------------------
0000   0000     0000     0000      1111     1000     (位移后的结果)

7.0xF86340 & 0xFF00 和 F86340 & 0xFF分别取出十六进制的63 和 40 通过位运算和位移运算 转换为十进制，进行颜色值的计算(这里就不在详解，计算原理和上述一样).