freeCodeCamp/curriculum/challenges/espanol/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md

id, title, challengeType, videoUrl, forumTopicId, dashedName

id	title	challengeType	videoUrl	forumTopicId	dashedName
bad87fee1348bd9aedf08719	Usa código hexadecimal (hex code) abreviado	0	https://scrimba.com/c/cRkpKAm	18338	use-abbreviated-hex-code

--description--

Muchas personas se sienten abrumadas por tener más de 16 millones de colores posibles. Además, los códigos hexadecimales resultan difíciles de recordar. Afortunadamente, puedes abreviar gran parte de ellos.

Por ejemplo, el código hexadecimal #FF0000 del color rojo puede acortarse a #F00. Esta forma abreviada utiliza un dígito para el rojo, un dígito para el verde, y un dígito para el azul.

Esto reduce el número total de colores posibles a alrededor de 4.000. Sin embargo, los navegadores interpretarán que #FF0000 y #F00 son exactamente el mismo color.

--instructions--

¡Pruébalo! Intenta usar los códigos hexadecimales abreviados para asignar colores a los elementos como se indica a continuación.

Color	Hex code abreviado
Cyan (cian)	#0FF
Green (verde)	#0F0
Red (rojo)	#F00
Fuchsia (fucsia)	#F0F

--hints--

Debes asignar al elemento h1 que tiene el texto I am red! ("¡Soy de color rojo!) el color rojo.

assert($('.red-text').css('color') === 'rgb(255, 0, 0)');

Debes usar la abreviación hexadecimal para el color rojo en lugar del código hexadecimal #FF0000.

assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));

Debes asignar al elemento h1 que tiene el texto I am green! ("¡Soy de color verde!) el color verde.

assert($('.green-text').css('color') === 'rgb(0, 255, 0)');

Debes usar la abreviación hexadecimal para el color verde en lugar del código hexadecimal #00FF00.

assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));

Debes asignar al elemento h1 que tiene el texto I am cyan! ("¡Soy de color cian!) el color cian.

assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');

Debes usar la abreviación hexadecimal para el color gris en lugar del código hexadecimal #00FFFF.

assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));

Debes asignar al elemento h1 que tiene el texto I am fuchsia! ("¡Soy de color fucsia!) el color fucsia.

assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');

Debes usar la abreviación hexadecimal para el color fuchsia en lugar del código hexadecimal #FF00FF.

assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));

--seed--

--seed-contents--

<style>
  .red-text {
    color: #000000;
  }
  .fuchsia-text {
    color: #000000;
  }
  .cyan-text {
    color: #000000;
  }
  .green-text {
    color: #000000;
  }
</style>

<h1 class="red-text">I am red!</h1>

<h1 class="fuchsia-text">I am fuchsia!</h1>

<h1 class="cyan-text">I am cyan!</h1>

<h1 class="green-text">I am green!</h1>

--solutions--

<style>
  .red-text {
    color: #F00;
  }
  .fuchsia-text {
    color: #F0F;
  }
  .cyan-text {
    color: #0FF;
  }
  .green-text {
    color: #0F0;
  }
</style>

<h1 class="red-text">I am red!</h1>

<h1 class="fuchsia-text">I am fuchsia!</h1>

<h1 class="cyan-text">I am cyan!</h1>

<h1 class="green-text">I am green!</h1>