zoukankan      html  css  js  c++  java
  • 16进制颜色与RGB颜色

    参考: http://tianle.name/wlyy/275

    网页中表示颜色的常见方法有:
    1.Color Name(颜色名称) 用颜色名称来指定颜色,这种方法简洁直观,一看就知道是什么颜色,但最大的缺点是颜色的名称太少,不能有效的表示一些较丰富的颜色
    2.RGB(RGB记法)
    3.HEX(十六进制记法)
    RGB记法和十六进制记法都能很好的表示出一些较为丰富的颜色,但是我们用到16进制的比较多,语法为#RRGGBB,下面说下我刚研究出来的转换方法:
    我们都知道
    RGB记法rgb(255,255,255)=十六进制记法#FFFFFF,都表示白色
    RGB记法rgb(0,0,0)=十六进制记法#000000,都表示黑色
    那么RGB记法rgb(100,150,245)=十六进制记法#??????
    RGB的取值都是0~255,HEX的取值为0123456789ABCDEF这16个字符,下面看看RGB-HEX对照表:

    RGB HEX
    0 00
    1 01
    2 02
    3 03
    4 04
    5 05
    6 06
    7 07
    8 08
    9 09
    10 0A
    11 0B
    12 0C
    13 0D
    14 0E
    15 0F
    16 10
    17 11
    18 12
    19 13
    20 14
    21 15
    22 16
    23 17
    24 18
    25 19
    26 1A
    27 1B
    28 1C
    29 1D
    30 1E
    31 1F
    32 20
    33 21
    34 22
    35 23
    36 24
    37 25
    38 26
    39 27
    40 28
    41 29
    42 2A
    43 2B
    44 2C
    45 2D
    46 2E
    47 2F
    48 30
    49 31
    50 32
    51 33
    52 34
    53 35
    54 36
    55 37
    56 38
    57 39
    58 3A
    59 3B
    60 3C
    61 3D
    62 3E
    63 3F
    64 40
    65 41
    66 42
    67 43
    68 44
    69 45
    70 46
    71 47
    72 48
    73 49
    74 4A
    75 4B
    76 4C
    77 4D
    78 4E
    79 4F
    80 50
    81 51
    82 52
    83 53
    84 54
    85 55
    86 56
    87 57
    88 58
    89 59
    90 5A
    91 5B
    92 5C
    93 5D
    94 5E
    95 5F
    96 60
    97 61
    98 62
    99 63
    100 64
    101 65
    102 66
    103 67
    104 68
    105 69
    106 6A
    107 6B
    108 6C
    109 6D
    110 6E
    111 6F
    112 70
    113 71
    114 72
    115 73
    116 74
    117 75
    118 76
    119 77
    120 78
    121 79
    122 7A
    123 7B
    124 7C
    125 7D
    126 7E
    127 7F
    128 80
    129 81
    130 82
    131 83
    132 84
    133 85
    134 86
    135 87
    136 88
    137 89
    138 8A
    139 8B
    140 8C
    141 8D
    142 8E
    143 8F
    144 90
    145 91
    146 92
    147 93
    148 94
    149 95
    150 96
    151 97
    152 98
    153 99
    154 9A
    155 9B
    156 9C
    157 9D
    158 9E
    159 9F
    160 A0
    161 A1
    162 A2
    163 A3
    164 A4
    165 A5
    166 A6
    167 A7
    168 A8
    169 A9
    170 AA
    171 AB
    172 AC
    173 AD
    174 AE
    175 AF
    176 B0
    177 B1
    178 B2
    179 B3
    180 B4
    181 B5
    182 B6
    183 B7
    184 B8
    185 B9
    186 BA
    187 BB
    188 BC
    189 BD
    190 BE
    191 BF
    192 C0
    193 C1
    194 C2
    195 C3
    196 C4
    197 C5
    198 C6
    199 C7
    200 C8
    201 C9
    202 CA
    203 CB
    204 CC
    205 CD
    206 CE
    207 CF
    208 D0
    209 D1
    210 D2
    211 D3
    212 D4
    213 D5
    214 D6
    215 D7
    216 D8
    217 D9
    218 DA
    219 DB
    220 DC
    221 DD
    222 DE
    223 DF
    224 E0
    225 E1
    226 E2
    227 E3
    228 E4
    229 E5
    230 E6
    231 E7
    232 E8
    233 E9
    234 EA
    235 EB
    236 EC
    237 ED
    238 EE
    239 EF
    240 F0
    241 F1
    242 F2
    243 F3
    244 F4
    245 F5
    246 F6
    247 F7
    248 F8
    249 F9
    250 FA
    251 FB
    252 FC
    253 FD
    254 FE
    255 FF

    通过这张表我们可以发现rgb中的0对应HEX的00,1对应01……9对应09
    10则对应0A,11对应0B……15对应0F
    16对应了10
    这里总共17对,除去一对特殊的0对应00,剩下的16对
    大家都应该发现规律了吧,rgb的数值是16乘以HEX的第一位加上HEX的第二位,数字10一下的RGB和HEX都是相同的,不同的是HEX是两位数,在前面补0就可以了,10对应A,11对应B,12对应C,13对应D,14对应E,15对应F,下面通过例子来说明RGB到HEX的换算办法
    例1:rgb(11,111,222)=#??????
    11÷16=0余11   11对应B  前面补0  那么HEX的数据为0B
    111÷16=6余15  15对应F   那么HEX的数据为6F
    222÷16=13余14  13对应D  14对应E   那么HEX的数据为DE
    合起来HEX的数据就为#0B6FDE
     
    例2:rgb(0,16,255)=#??????
    0直接对应00
    16÷16=1余0  则HEX的数据为10
    255÷16=15余15  15对应F  则HEX的数据为FF
    合起来HEX的数据就为#0010FF
    HEX转换RGB不用说了吧,倒过来就行了

  • 相关阅读:
    在页面生命周期执行时 Page 对象在 SaveState 阶段都发生了什么事?
    接收Firfox RESTClient #Post请求
    c# 单例模式[Singleton]之深夜闲聊
    JQuery 之 Ajax 异步和同步浅谈
    [模板]数学整合
    Yandex插件使用说明——Slager_Z
    模板练习(LUOGU)
    数学整合 新(LUOGU)
    [NOI.AC]DELETE(LIS)
    [NOI.AC]COUNT(数学)
  • 原文地址:https://www.cnblogs.com/nygfcn1234/p/3171751.html
Copyright © 2011-2022 走看看