Escoger colores en CSS
CSS nos permite cambiar el color de muchos elementos (fondos, bordes, texto, sombras,...). Por ejemplo, así podríamos poner rojo el texto de los botones:
button{
color:red;
}
Para escoger el color nos ofrece varias opciones
- Por nombre (en inglés).
- HSL: tono, saturación y luminosidad.
- RGB: componentes rojo, verde y azul.
- Hexadecimal: RGB pero más corto.
¿Como encontrar el código del color?
Antes de entrar en detalles, puedes usar la siguiente herramienta en algunos navegadores para descubrir los distintos códigos de color:
Arriba escoges el color, y abajo puedes cambiar el tipo de código.
Nombres de los colores
La forma más fácil de escoger el color es escribir su nombre en inglés. Aquí puedes ver la lista de colores completa. Es fácil para escoger colores simples como blanco, negro, gris, amarillo,... pero es difícil encontrar matices más concretos.
HSL: Tono, saturación y luminosidad
HSL son las siglas de hue, saturation y light (tono, saturación y luminosidad) y es una manera muy intuitiva de escoger el color:
- El tono va de 0 a 360 y sigue el orden del arco iris: rojo, naranja, amarillo, verde,...
- La saturación va de 0% a 100%. El 100% es el color más vivo, y cuanto más baja, más gris es.
- La luminosidad va de 0% a 100%. Cuanto más bajo, más oscuro, y cuanto más alto, más claro.
Por ejemplo, el color rojo sería:
button{
color:hsl(0,100%,50%);
}
Esta es la forma más recomendada de mostrar colores.
RGB: rojo, verde y azul
RGB son las siglas de red, green y blue (rojo, verde y azul) y se basa en los colores que usan las pantallas. Los valores van de 0 a 255 debido a el almacenamiento de números en memoria.
Por ejemplo, el color rojo sería:
button{
color:rgb(255,0,0);
}
Hexadecimal
Los valores hexadecimales son una manera de representar números en ordenadores. En lugar de ir de 1 a 10, va de 1 a 16, y para los números después de 9 se usan letras (a=10, b=11, c=12,...)
Por ejemplo, el color rojo sería:
button{
color:#ff0000;
}