06-Colores en CSS

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

Cuando en css queremos defenir un color por el nombre, pues le ponemos el nombre del color, como red, blue, green etc

O tambien lo podemos defenir por sus valores como #ff6347

---

Nombre de colores

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

---

...

Nota: CSS/HTML admite 140 nombres de colores estándar .

Color de fondo

CSS puede restabelecer un fondo para los elementos html

Para hacer eso usamos la propriedad background-color seguido del nombre del color que queramos poner

Ejemplo

Una cabecera con fondo DodgerBlue

Hola Mundo

un parrafo con fondo tomato

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil qui quisquam quae, excepturi doloribus vel doloremque dolorem voluptates officia, cum ex repellendus? Maxime unde quo dolore praesentium autem qui sapiente!

codigo fuente de los ejemplos anteriores

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

---

Color de texto

Tambien le podemos dar color al texto que escribimos

Hola Mundo

Texto en color DodgerBlue

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio ducimus sapiente, dolores suscipit aperiam maiores harum quaerat impedit? Harum mollitia, minima sint consectetur dolore eligendi tempore blanditiis dolorum quo adipisci.

Texto en color MediumSeaGreen

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum asperiores fugit, fugiat impedit atque, exercitationem eius culpa aliquam ab ducimus vitae aspernatur architecto. Officiis voluptatum consequatur quisquam deserunt, quo libero.

codigo fuente de los ejemplos anteriores

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

---

Color del borde

Podemos poner un borde colorido a nuestro texto,

Hola Mundo

Hola Mundo

Hola Mundo

codigo fuente de los ejemplos anteriores

    <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>  
    

---

Valores de color

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

En vez de colocarmos tomato le colocamos su valor

ejemplo

RGB (255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

ahora el mismo color con 50% de transparencia

rgba(255, 99, 71, 0.5)

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

Codigo fuente de los ejemplos anteriores

    <h1 style="background-color:rgba(255, 99, 71); padding: 10px;">RGB (255, 99, 71)</h1>
    <h1 style="background-color:#ff6347 ; padding: 10px;">#ff6347 </h1>
    <h1 style="background-color:hsl(9, 100%, 64%); padding: 10px;">hsl(9, 100%, 64%)</h1>
    <p>ahora el mismo color con 50% de transparencia</p>
    <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> 

---

Ir al indice