---
id: bad87fee1348bd9aedf08719
title: 使用缩写的十六进制编码
challengeType: 0
videoUrl: 'https://scrimba.com/c/cRkpKAm'
forumTopicId: 18338
dashedName: use-abbreviated-hex-code
---
# --description--
许多人对超过 1600 万种颜色感到不知所措, 并且很难记住十六进制编码。 幸运的是,你可以使用缩写形式。
例如,红色的 `#FF0000` 十六进制编码可以缩写成 `#F00`。 在这种缩写形式里,三个数字分别代表着红(R)、绿(G)、蓝(B)三原色。
这样,颜色的数量减少到了大约 4000 种。 且在浏览器里 `#FF0000` 和 `#F00` 是完全相同的颜色。
# --instructions--
接下来,使用缩写的十六进制编码给元素设置正确的颜色。
颜色 | 十六进制编码缩写形式 |
---|
蓝绿色 | #0FF |
绿色 | #0F0 |
红色 | #F00 |
紫红色 | #F0F |
# --hints--
文本内容为 `I am red!` 的 `h1` 元素的字体颜色 `color` 应该为红色。
```js
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
```
应使用红色的 `hex code` 缩写形式,不应使用 `#FF0000`。
```js
assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));
```
文本内容为 `I am green!` 的 `h1` 元素的字体颜色 `color` 应该为绿色。
```js
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
```
应使用绿色的 `hex code` 缩写形式,不应使用 `#00FF00`。
```js
assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));
```
文本内容为 `I am cyan!` 的 `h1` 元素的字体颜色 `color` 应该为蓝绿色。
```js
assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
```
应使用蓝绿色的 `hex code` 缩写形式,不应使用 `#00FFFF`。
```js
assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));
```
文本内容为 `I am fuchsia!` 的 `h1` 元素的字体颜色 `color` 应该为紫红色。
```js
assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
```
应使用紫红色的 `hex code` 缩写形式,不应使用 `#FF00FF`。
```js
assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));
```
# --seed--
## --seed-contents--
```html
I am red!
I am fuchsia!
I am cyan!
I am green!
```
# --solutions--
```html
I am red!
I am fuchsia!
I am cyan!
I am green!
```