Los colores en CSS se pueden indicar de cinco formas diferentes:
- Palabras clave
- Colores del sistema
- RGB hexadecimal
- RGB numérico
- RGB porcentual
Palabras clave
CSS define 17 palabras clave para referirse a los colores básicos. Las palabras se corresponden con el nombre en inglés de cada color
RGB decimal
En CSS, las componentes de los colores definidos mediante RGB decimal pueden tomar valores entre 0 y 255.
|
1 |
p { color: rgb(71, 98, 176); } |
RGB porcentual
El funcionamiento y la sintaxis de este método es el mismo que el del RGB decimal. La única diferencia en este caso es que el valor de las componentes RGB puede tomar valores entre 0% y 100%
|
1 |
p { color: rgb(27%, 38%, 69%); } |
RGB hexadecimal
Para definir un color en CSS con RGB hexadecimal se realizan los siguientes pasos:
- Se determinan las componentes RGB del color original, por ejemplo: R = 71, G = 98, B = 176.
- El valor numérico de cada componente se transforma al sistema numérico hexadecimal. Se trata de una operación exclusivamente matemática, por lo que puedes utilizar una calculadora. En el ejemplo anterior, el valor hexadecimal de cada componente es: R = 47, G = 62, B = B0.
- Para obtener el color completo en formato RGB hexadecimal, se concatenan los valores de las componentes RGB en ese orden y se les añade el prefijo #. De esta forma, el color del ejemplo anterior es #4762B0 en formato RGB hexadecimal.
|
1 |
p { color: #4762B0; } |
Una de las ventajas del formato RGB hexadecimal es que se pueden comprimir sus valores cuando todas sus componentes son iguales de dos en dos
#AAA = #AAAAAA
#FFF = #FFFFFF
#A0F = #AA00FF
#369 = #336699
|
1 2 |
body { background-color: #FFF; color: #000; } h1, h2, h3, h4, h5, h6 { color: #C00; } |
Colores del sistema
Los colores del sistema son similares a los colores indicados mediante su nombre, pero en este caso hacen referencia al color que muestran algunos elementos del sistema operativo del usuario.
En este enlace puedes encontrar la lista de los colores definidos.
¿Te gustó este artículo?
Si te gustó este artículo, te ha servido o aprendiste algo nuevo; compártelo en tus redes sociales o invítame un cafe.
