Valores de color: nombres, hexadecimal, RGB y HSL
Aprenda todos los formatos de color de CSS: colores con nombre, códigos hexadecimales y las funciones rgb() y hsl().
Valores de color: nombres, hexadecimal, RGB y HSL es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
Formatos de color de CSS
CSS admite varios formatos de color. Elegir el adecuado depende de su flujo de trabajo, las herramientas que utilice y de si necesita transparencia o manipulación dinámica.
Colores con nombre
CSS define más de 140 colores con nombre, como red, tomato y cornflowerblue. Son ideales para crear prototipos rápidamente, pero ofrecen poca precisión.
<h1>Named Colors</h1>
<button>cornflowerblue button</button>
Colores hexadecimales
Los colores hexadecimales usan un # seguido de 6 dígitos hexadecimales (o 3 en la forma abreviada). Cada par de dígitos representa el rojo, el verde y el azul (0–255).
<p class="full-hex">Full hex: #ff6347</p>
<p class="shorthand-hex">Shorthand hex: #f64</p>
Hexadecimal con alfa
Añada un cuarto par de dígitos hexadecimales (o un cuarto dígito en la forma abreviada) para indicar la transparencia alfa:
<div class="hex-alpha-full">8-digit hex alpha</div>
<div class="hex-alpha-short">4-digit shorthand alpha</div>
Colores RGB
rgb() acepta tres enteros (0–255) para los canales rojo, verde y azul. Es muy legible y facilita el razonamiento mediante programación.
<p class="rgb-tomato">rgb(255, 99, 71)</p>
<p class="rgb-black">rgb(0, 0, 0)</p>
<p class="rgb-white">rgb(255, 255, 255)</p>
Colores RGBA
Añada un cuarto parámetro (0–1) a rgb() para la transparencia alfa. Esto equivale a la sintaxis más reciente de rgb() con una barra.
<p class="rgba-legacy">rgba(255, 99, 71, 0.5)</p>
<p class="rgba-modern">rgb(255 99 71 / 0.5)</p>
Colores HSL
hsl() define el color mediante el tono (0–360°), la saturación (0–100 %) y la luminosidad (0–100 %). Es mucho más intuitivo para crear paletas y variantes de color.
<p class="hsl-tomato">hsl(9, 100%, 64%)</p>
<p class="hsl-steelblue">hsl(210, 70%, 50%)</p>
Colores HSLA
Al igual que rgba(), hsla() añade un canal alfa. El CSS moderno permite usar un separador de barra en su lugar:
<p class="hsla-legacy">hsla(9, 100%, 64%, 0.5)</p>
<p class="hsla-modern">hsl(9 100% 64% / 0.5)</p>
Creación de variantes de color con HSL
HSL resulta ideal para generar variantes más claras y más oscuras. Mantenga constantes el tono y la saturación, y cambie la luminosidad:
<button class="btn-light">Light</button>
<button class="btn">Base</button>
<button class="btn-dark">Dark</button>
Palabra clave currentColor
currentColor es un valor dinámico igual a la propiedad color actual del elemento. Utilícelo para que los bordes, las sombras o los rellenos SVG hereden automáticamente el color del texto.
<a href="#">Link with currentColor border</a>
Palabra clave transparent
La palabra clave transparent equivale a rgba(0,0,0,0): es totalmente transparente. Resulta útil para los efectos al pasar el cursor, cuando se realiza una transición de transparente a un color.
<button>Transparent background</button>
Comprobación rápida
¿Qué formato de color facilita más la creación de tonos más claros y más oscuros del mismo tono?
Resumen
CSS ofrece formatos de color con nombre, hexadecimales, RGB y HSL. HSL es ideal para manipular colores mediante programación. Todos los formatos aceptan un canal alfa para la transparencia. currentColor y transparent son palabras clave especiales muy útiles.
Preguntas frecuentes
¿La lección «Valores de color: nombres, hexadecimal, RGB y HSL» es gratis?
Sí — el texto completo de «Valores de color: nombres, hexadecimal, RGB y HSL» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Valores de color: nombres, hexadecimal, RGB y HSL»?
Aprenda todos los formatos de color de CSS: colores con nombre, códigos hexadecimales y las funciones rgb() y hsl(). Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Valores de color: nombres, hexadecimal, RGB y HSL»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Valores de color: nombres, hexadecimal, RGB y HSL
- Color e imagen de fondo
- Degradados: lineales y radiales
- Opacidad y transparencia RGBA