Conceptos Básicos de Color CSS

Mediante la utilización de los colores en CSS (hojas de estilo en cascada) es en realidad bastante fácil. En este tutorial, te mostraré cómo usar todos los diversos formatos de color en CSS,incluyendo códigos de colores Hex, nombres de colores HTML, y RGB y HSL valores. Si eres nuevo en CSS, sólo la búsqueda introducción a CSS, hay un montón de tutoriales.

Cómo utilizar los códigos Hex de color en CSS

Los códigos Hex de color son el método más común de agregar color a un elemento HTML con CSS. En su hoja de estilos, se puede utilizar la propiedad CSS color para cambiar el color predeterminado del texto de su página web.

CSS
/* In your .css stylesheet */
body { color: #FF0000; }

Una segunda opción es incluir los estilos CSS en el <head> de un documento HTML usando <style> etiquetas, como las siguientes:

HTML
<!-- In your HTML document -->
<head>
  <style>
    body { color: #FF0000; }
  </style>
</head>

Fácil, ¿verdad? Puede utilizar la propiedad CSS color con un código Hex de cualquier elemento HTML, la etiqueta <body> es sólo un ejemplo. Se vuelve loco!

Cómo utilizar nombres de colores HTML en CSS

Nombres de colores HTML son otra forma de estilo el contenido en CSS, y a menudo puede ser más fácil de entender. Puede utilizar un nombre de color de la misma forma que un código Hex de color, se puede establecer como el valor de la propiedad CSS color en su hoja de estilos.

CSS
/* In your .css stylesheet */
body { color: red; }

Actualmente 140 los nombres de los colores son compatibles en todos los navegadores modernos, y hemos recopilado una lista de todos ellos aquí para referencia rápida.

Cómo utilizar los valores de los colores RGB en CSS

RGB, que significa rojo, verde y azul, es un sistema de color comúnmente encontrados en muchas aplicaciones de diseño y tecnologías, y más recientemente se ha convertido en una de los diseñadores web y programadores. En CSS, los colores RGB se puede utilizar mediante la envoltura los valores entre paréntesis y listados en una minúscula 'rgb'.

CSS
/* In your .css stylesheet */
body { color: rgb(255, 0, 0); }

Una de las ventajas de usar RGB en la CSS es la capacidad de controlar la opacidad además de los colores. Adición de una 'a' para el rgb() prefijo permite un cuarto valor que se debe asignar que determina la transparencia del color en una escala de 0 a 1. En este ejemplo, página HTML texto haría con un 50% de opacidad desde 0.5 a mitad de camino entre 0 y 1.

CSS
/* In your .css stylesheet */
body { color: rgba(255, 0, 0, 0.5); }

Si desea utilizar RGB pero no se sabe muy bien por dónde empezar, eche un vistazo a nuestro selector de color para generar rápidamente algunos códigos de color.

Cómo utilizar los valores HSL color en CSS

Es posible que haya escuchado hablar de HSL, que significa de tono, saturación y luminosidad, otro sistema de color usado en muchas aplicaciones. El tono es medido en grados de 0 a 360, mientras que saturación y luminosidad use una escala de 0% - 100%. En CSS, HSL pueden implementarse fácilmente después de una sintaxis similar a RGB pero como prefijo en lugar de 'hsl'.

CSS
/* In your .css stylesheet */
body { color: hsl(0, 100%, 50%); }

Del mismo modo, HSL también admite un canal alfa para controlar la transparencia del color. Su uso es idéntico a RGB, con un cuarto valor entre 0 y 1 está activado cuando se utiliza el prefijo 'hsla'.

CSS
/* In your .css stylesheet */
body { color: hsla(0, 100%, 50%, 0.5); }

Nota, rgba(), hsl() y hsla() son relativamente nuevas adiciones a CSS, y no son compatibles con algunos navegadores antiguos. Dependiendo de su situación, es posible que desee seleccionar diferentes métodos para manipular la opacidad de los colores.