Los colores se especifican utilizando nombres de color predefinidos o valores RGB, HEX, HSL, RGBA, HSLA.
Nombres de color
En CSS, un color se puede especificar usando un nombre de color predefinido:
Ejemplo:
TomatoOrangeDodgerBlueMediumSeaGreenGraySlateBlueVioletLightGray
Color de fondo
Puedes establecer un color de fondo para los elementos HTML:
Ejemplo:
<h1 style="background-color:DodgerBlue;">Hola Mundo</h1>
<p style="background-color:Tomato;">HTML es el lenguaje de marcado estándar para crear páginas web</p>
Color de texto
También puedes establecer el color al texto:
Ejemplo:
<h1 style="color:Tomato;">Hola mundo</h1>
<p style="color:DodgerBlue;">Mundo HTML</p>
<p style="color:MediumSeaGreen;">Mundo Frontend</p>
Color del borde
También puedes establecer un color a los bordes:
Ejemplo:
<h1 style="border:2px solid Tomato;">Hola mundo</h1>
<h1 style="border:2px solid DodgerBlue;">Mundo HTML</h1>
<h1 style="border:2px solid Violet;">Mundo Frontend</h1>
Valores de color
En CSS, los colores también se pueden especificar usando valores RGB, valores HEX, valores HSL, valores RGBA y valores HSLA:
Igual que el nombre del color tomato:
Ejemplo:
<h1 style="background-color:rgb(255, 99, 71);">Tomato</h1>
<h1 style="background-color:#ff6347;">Tomato</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">Tomato</h1>
Igual que el nombre del color tomato, pero 50% transparente:
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>
Resumen
Este documento presenta una guía sobre cómo especificar colores en CSS, incluyendo nombres de color predefinidos, valores RGB, HEX, HSL, RGBA y HSLA. También se muestra cómo establecer colores de fondo, texto y borde en elementos HTML.
Traducido con 💚 desde W3Schools.com