¿Cómo hacer colores CSS?

Colores CSS

❮ AnteriorSiguiente ❯

---

Los colores se especifican utilizando nombres de colores predefinidos, o valores RGB, HEX, HSL, RGBA, HSLA.

---

Nombres de colores

En HTML, se puede especificar un color usando un nombre de color:

Tomate

naranja

DodgerBlue

MediumSeaGreen

gris

SlateBlue

Violeta

Gris claro

Inténtalo tú mismo "

HTML admite 140 nombres de colores estándar .

---

Color de fondo

Puede configurar el color de fondo para los elementos HTML:

Hola Mundo

Lorem ipsum dolor sit amet, consultor adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. No es necesario mencionar el mínimo de tiempo, sino también el ejercicio ulterior y suscípulos lobortis, pero no el alícuota de cualquier otro.

Ejemplo

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Inténtalo tú mismo "

---

Color de texto

Puedes configurar el color del texto:

Hola Mundo

Lorem ipsum dolor sit amet, consultor adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

No es necesario mencionar el mínimo de tiempo, sino también el ejercicio ulterior y suscípulos lobortis, pero no el alícuota de cualquier otro.

Ejemplo

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Inténtalo tú mismo "

---

Color del borde

Puedes configurar el color de los bordes:

Hola Mundo

Hola Mundo

Hola Mundo

Ejemplo

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Inténtalo tú mismo "

---

Valores de color

En HTML, los colores también se pueden especificar utilizando valores RGB, valores HEX, valores HSL, valores RGBA y valores HSLA:

Igual que el nombre de color "Tomate":

rgb (255, 99, 71)

# ff6347

hsl (9, 100%, 64%)

Igual que el nombre de color "Tomate", pero 50% transparente:

rgba (255, 99, 71, 0.5)

hsla (9, 100%, 64%, 0.5)

Ejemplo

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Inténtalo tú mismo "

---

Valor RGB

En HTML, un color se puede especificar como un valor RGB, utilizando esta fórmula:

rgb ( rojo, verde , azul )

Cada parámetro (rojo, verde y azul) define la intensidad del color entre 0 y 255.

Por ejemplo, rgb (255, 0, 0) se muestra en rojo, porque el rojo se establece en su valor más alto (255) y los demás se establecen en 0.

Para mostrar el color negro, todos los parámetros de color deben establecerse en 0, como este: rgb (0, 0, 0).

Para mostrar el color blanco, todos los parámetros de color deben configurarse en 255, de esta manera: rgb (255, 255, 255).

Experimente mezclando los valores RGB a continuación:

rgb (255, 99, 71)

ROJO

255

VERDE

99

AZUL

71

Ejemplo

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

Inténtalo tú mismo "

Los tonos de gris a menudo se definen usando valores iguales para las 3 fuentes de luz:

Ejemplo

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

rgb(180, 180, 180)

rgb(240, 240, 240)

rgb(255, 255, 255)

Inténtalo tú mismo "

---

Valor HEX

En HTML, se puede especificar un color usando un valor hexadecimal en la forma:

# rrggbb

Donde rr (rojo), gg (verde) y bb (azul) son valores hexadecimales entre 00 y ff (igual que el decimal 0-255).

Por ejemplo, # ff0000 se muestra en rojo, porque el rojo se establece en su valor más alto (ff) y los demás se establecen en el valor más bajo (00).

Ejemplo

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd

Inténtalo tú mismo "

Los tonos de gris a menudo se definen usando valores iguales para las 3 fuentes de luz:

Ejemplo

#000000

#3c3c3c

#787878

#b4b4b4

#f0f0f0

#ffffff

Inténtalo tú mismo "

---

Valor HSL

En HTML, se puede especificar un color utilizando el tono, la saturación y la luminosidad (HSL) en la forma:

hsl ( tono , saturación , luminosidad )

El tono es un grado en la rueda de color de 0 a 360. 0 es rojo, 120 es verde y 240 es azul.

La saturación es un valor porcentual, 0% significa un tono de gris y 100% es el color completo.

La luminosidad también es un porcentaje, el 0% es negro, el 50% no es ni claro ni oscuro, el 100% es blanco

Ejemplo

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

Inténtalo tú mismo "

---

Saturación

La saturación se puede describir como la intensidad de un color.

100% es color puro, sin matices de gris.

50% es 50% de gris, pero aún puedes ver el color.

0% es completamente gris, ya no puedes ver el color.

Ejemplo

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

Inténtalo tú mismo "

---

Ligereza

La luminosidad de un color se puede describir como la cantidad de luz que desea darle al color, donde 0% significa que no hay luz (negro), 50% significa 50% de luz (ni oscuro ni claro) 100% significa claridad completa (blanco).

Ejemplo

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

Inténtalo tú mismo "

---

Los tonos de gris a menudo se definen al establecer el tono y la saturación en 0, y ajustar la claridad del 0% al 100% para obtener tonos más oscuros / claros:

Ejemplo

hsl(0, 0%, 0%)

hsl(0, 0%, 24%)

hsl(0, 0%, 47%)

hsl(0, 0%, 71%)

hsl(0, 0%, 94%)

hsl(0, 0%, 100%)

Inténtalo tú mismo "

---

Valor RGBA

Los valores de color RGBA son una extensión de los valores de color RGB con un canal alfa, que especifica la opacidad de un color.

Un valor de color RGBA se especifica con:

rgba ( rojo, verde , azul, alfa )

El parámetro alfa es un número entre 0.0 (totalmente transparente) y 1.0 (no es transparente en absoluto):

Ejemplo

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

Inténtalo tú mismo "

---

Valor HSLA

Los valores de color HSLA son una extensión de los valores de color HSL con un canal alfa, que especifica la opacidad de un color.

Un valor de color HSLA se especifica con:

hsla ( matiz, saturación , luminosidad, alfa )

El parámetro alfa es un número entre 0.0 (totalmente transparente) y 1.0 (no es transparente en absoluto):

Ejemplo

hsla(9, 100%, 64%, 0)

hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)

Inténtalo tú mismo "

❮ AnteriorSiguiente ❯