MEJOR SITIO PARA DESARROLLADORES WEB
HTML CSS JAVASCRIPT SQL PHP PYTHON JAVA KOTLIN GO C C++ C# AI Django CÓMO W3.CSS AI Más 🔍 ◑ Libros REFERENCIAS EJERCICIOS

CSS Tutorial

CSS HOGAR Introducción a CSS Sintaxis CSS Selectores CSS Cómo utilizar CSS Comentarios CSS Colores CSS
Colores RGB HEX HSL
CSS Antecedentes
Color de fondo Imagen de fondo Repetición de fondo Adjunto de fondo Taquigrafía de antecedentes
CSS Bordes
Bordes Ancho del borde Color del borde Lados fronterizos Taquigrafía de borde Bordes redondeados
CSS Márgenes
Márgenes Colapso de margen
Relleno CSS Alto/Ancho CSS Modelo de caja CSS Esquema CSS
Esquema Ancho del esquema Color del contorno Taquigrafía de esquema Desplazamiento del contorno
CSS Texto
Color del texto Alineación de texto Decoración de texto Transformación de texto Espaciado de texto Sombra de texto
CSS Fuentes
Familia de fuentes Fuente Web segura Fuentes alternativas Estilo de fuente Tamaño de fuente Fuente Google Emparejamientos de fuentes Taquigrafía de fuentes
Iconos CSS Enlaces CSS Listas CSS Tablas CSS
Bordes de tabla Tamaño de la tabla Alineación de tabla Estilo de tabla Responsivo de tabla
CSS Display CSS Max-width CSS Position CSS z-index CSS Overflow CSS Float
Float Clear Float Ejemplos
bloque CSS en línea Alineación CSS Combinadores CSS Pseudoclase CSS Pseudoelemento CSS Opacidad CSS Barra de navegación CSS
Navbar Barra de navegación vertical Barra de navegación horizontal
Despliegues CSS Galería de imágenes CSS Sprites de imagen CSS Selectores de atributos CSS Formularios CSS Contadores CSS Diseño de sitio web CSS Unidades CSS Especificidad de CSS CSS !important Funciones matemáticas CSS

CSS avanzado

CSS Esquinas redondeadas Imágenes de borde CSS Fondos CSS Colores CSS Palabras clave de color CSS Degradados CSS
Degradados lineales Gradientes radiales Degradados cónicos
CSS Oscuridad
Efectos de sombras Sombra de caja
Efectos de texto CSS Fuentes web CSS Transformaciones CSS 2D Transformaciones CSS 3D Transiciones CSS Animaciones CSS Información sobre herramientas CSS Imágenes de estilo CSS Reflejo de imagen CSS objeto CSS-fit posición-objeto CSS Enmascaramiento CSS Botones CSS Paginación CSS CSS múltiples columnas Interfaz de usuario CSS Variables CSS
La función var() Anulación de variables Variables y JavaScript Variables en Media Queries
CSS Box Sizing Consultas de medios CSS Ejemplos de CSS MQ CSS Flexbox
CSS Flexbox Contenedor CSS Flex Elementos CSS flexibles CSS Flex Responsive

CSS Responsivo

Introducción a RWD Vista RWD Vista de cuadrícula RWD Consultas de medios RWD Imágenes RWD Vídeos RWD Marcos RWD Plantillas RWD

CSS Grid

Grid Introducción Grid Container Grid Item

CSS SASS

SASS Tutorial

CSS Ejemplos

Plantillas CSS Ejemplos de CSS Fragmentos CSS Prueba CSS Ejercicios CSS Certificado CSS

CSS Referencias

Referencia CSS Selectores CSS Funciones CSS Referencia CSS auditiva Fuentes CSS web seguras CSS animable Unidades CSS Convertidor CSS PX-EM Colores CSS Valores de color CSS Valores predeterminados de CSS Compatibilidad con navegador CSS

CSS Lecciones para principiantes

Ua En De Fr

CSS Colores

❮ Prev Next ❯

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

CSS Nombres de colores

En CSS, un color se puede especificar utilizando un nombre de color predefinido:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

Try it Yourself »

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

CSS Color de fondo

Puede establecer el color de fondo para los elementos HTML:

Hello World


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Ejemplo

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

Try it Yourself »

CSS Color del texto

Puedes configurar el color del texto:

Hello World

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

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Ejemplo

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

CSS Color del borde

Puedes configurar el color de los bordes:

Hello World

Hello World

Hello World

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>
Try it Yourself »

CSS Valores de color

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

Lo mismo que el nombre del color "Tomato":

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

Igual que el nombre del color "Tomato", 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>
Try it Yourself »

Obtenga más información sobre los valores de color

Aprenderá más sobre RGB, HEX y HSL en los próximos capítulos.

CSS — Colores — Vídeo de W3Schools

Este vídeo es una introducción a los colores CSS.

¡Parte de una serie de videotutoriales para aprender CSS para principiantes!

❮ Prev Next ❯