概要
掲題の通り、CSSの色などで使用する%と16進数の対応表です。
1%ごとに+2〜+3されていき、10%は1A、20%は33となります。
例えば#FFFFFF4Dというカラーコードがデザインファイルで見つかった場合、これはrgba(255, 255, 255, 30%)とも書けることを調べられます。
現代的にはIE以外のモダンブラウザでは#RRGGBBAA形式の8桁の16進数を使用できますが、対応していないブラウザに対する安全性が必要な場合や、割合による色変更エフェクトなどが必要な場合などにご利用ください。
また、デザインの際、%指定で数値的なブレの少ない色指定を行いたい場合には10進小数の小数部が.00になっている色（20%刻み）を選ぶと狂いが生じにくくなります。
注意
※10進整数は小数部を四捨五入した値を記載しています。
※ブラウザが採用している色空間によっては同じ値でも違った色で表示されることがありますので、実際に複数のOSとブラウザで表示して色の確認をすることをおすすめします。
対応表
| % | 10進小数 | 10進整数 | 16進数 |
|---|---|---|---|
| 0% | 0.00 | 0 | 00 |
| 1% | 2.55 | 3 | 03 |
| 2% | 5.10 | 5 | 05 |
| 3% | 7.65 | 8 | 08 |
| 4% | 10.20 | 10 | 0A |
| 5% | 12.75 | 13 | 0D |
| 6% | 15.30 | 15 | 0F |
| 7% | 17.85 | 18 | 12 |
| 8% | 20.40 | 20 | 14 |
| 9% | 22.95 | 23 | 17 |
| 10% | 25.50 | 26 | 1A |
| 11% | 28.05 | 28 | 1C |
| 12% | 30.60 | 31 | 1F |
| 13% | 33.15 | 33 | 21 |
| 14% | 35.70 | 36 | 24 |
| 15% | 38.25 | 38 | 26 |
| 16% | 40.80 | 41 | 29 |
| 17% | 43.35 | 43 | 2B |
| 18% | 45.90 | 46 | 2E |
| 19% | 48.45 | 48 | 30 |
| 20% | 51.00 | 51 | 33 |
| 21% | 53.55 | 54 | 36 |
| 22% | 56.10 | 56 | 38 |
| 23% | 58.65 | 59 | 3B |
| 24% | 61.20 | 61 | 3D |
| 25% | 63.75 | 64 | 40 |
| 26% | 66.30 | 66 | 42 |
| 27% | 68.85 | 69 | 45 |
| 28% | 71.40 | 71 | 47 |
| 29% | 73.95 | 74 | 4A |
| 30% | 76.50 | 77 | 4D |
| 31% | 79.05 | 79 | 4F |
| 32% | 81.60 | 82 | 52 |
| 33% | 84.15 | 84 | 54 |
| 34% | 86.70 | 87 | 57 |
| 35% | 89.25 | 89 | 59 |
| 36% | 91.80 | 92 | 5C |
| 37% | 94.35 | 94 | 5E |
| 38% | 96.90 | 97 | 61 |
| 39% | 99.45 | 99 | 63 |
| 40% | 102.00 | 102 | 66 |
| 41% | 104.55 | 105 | 69 |
| 42% | 107.10 | 107 | 6B |
| 43% | 109.65 | 110 | 6E |
| 44% | 112.20 | 112 | 70 |
| 45% | 114.75 | 115 | 73 |
| 46% | 117.30 | 117 | 75 |
| 47% | 119.85 | 120 | 78 |
| 48% | 122.40 | 122 | 7A |
| 49% | 124.95 | 125 | 7D |
| 50% | 127.50 | 128 | 80 |
| 51% | 130.05 | 130 | 82 |
| 52% | 132.60 | 133 | 85 |
| 53% | 135.15 | 135 | 87 |
| 54% | 137.70 | 138 | 8A |
| 55% | 140.25 | 140 | 8C |
| 56% | 142.80 | 143 | 8F |
| 57% | 145.35 | 145 | 91 |
| 58% | 147.90 | 148 | 94 |
| 59% | 150.45 | 150 | 96 |
| 60% | 153.00 | 153 | 99 |
| 61% | 155.55 | 156 | 9C |
| 62% | 158.10 | 158 | 9E |
| 63% | 160.65 | 161 | A1 |
| 64% | 163.20 | 163 | A3 |
| 65% | 165.75 | 166 | A6 |
| 66% | 168.30 | 168 | A8 |
| 67% | 170.85 | 171 | AB |
| 68% | 173.40 | 173 | AD |
| 69% | 175.95 | 176 | B0 |
| 70% | 178.50 | 179 | B3 |
| 71% | 181.05 | 181 | B5 |
| 72% | 183.60 | 184 | B8 |
| 73% | 186.15 | 186 | BA |
| 74% | 188.70 | 189 | BD |
| 75% | 191.25 | 191 | BF |
| 76% | 193.80 | 194 | C2 |
| 77% | 196.35 | 196 | C4 |
| 78% | 198.90 | 199 | C7 |
| 79% | 201.45 | 201 | C9 |
| 80% | 204.00 | 204 | CC |
| 81% | 206.55 | 207 | CF |
| 82% | 209.10 | 209 | D1 |
| 83% | 211.65 | 212 | D4 |
| 84% | 214.20 | 214 | D6 |
| 85% | 216.75 | 217 | D9 |
| 86% | 219.30 | 219 | DB |
| 87% | 221.85 | 222 | DE |
| 88% | 224.40 | 224 | E0 |
| 89% | 226.95 | 227 | E3 |
| 90% | 229.50 | 230 | E6 |
| 91% | 232.05 | 232 | E8 |
| 92% | 234.60 | 235 | EB |
| 93% | 237.15 | 237 | ED |
| 94% | 239.70 | 240 | F0 |
| 95% | 242.25 | 242 | F2 |
| 96% | 244.80 | 245 | F5 |
| 97% | 247.35 | 247 | F7 |
| 98% | 249.90 | 250 | FA |
| 99% | 252.45 | 252 | FC |
| 100% | 255.00 | 255 | FF |
余談
特にCSSのコーディングをする方にとって謎の数値であった#808080などの頻出数値が、この表を見ると50%の指定であることが分かります。
他にも何となく見たことがあるけれど詳細が不明であったあの数値をこの表内で見つけることができ、デザイナーさんの思考や嗜好を垣間見ることができます。