Modelo de color HEX: explicación de la notación #RRGGBB
La notación de color HEX es una abreviatura hexadecimal para los valores RGB. El formato es #RRGGBB donde:
- RR = canal rojo (00 a FF = 0 a 255)
- GG = canal verde (00 a FF = 0 a 255)
- BB = canal azul (00 a FF = 0 a 255)
| Color | HEX | Significado |
|---|---|---|
| Puro rojo | #FF0000 | R=255 G=0 B=0 |
| Puro verde | #00FF00 | R=0 G=255 B=0 |
| Puro azul | #0000FF | R=0 G=0 B=255 |
| Blanco | #FFFFFF | R=255 G=255 B=255 |
| Negro | #000000 | R=0 G=0 B=0 |
| HerramientaDolfen azul | #3B82F6 | R=59 G=130 B=246 |
Taquigrafía HEX: Cuando ambos dígitos son idénticos para cada canal, una taquigrafía de 3 caracteres funciona: #F00 = #FF0000.
Modelo de color RGB: canales rojo, verde y azul
rgb(rojo, verde, azul) — cada canal varía de 0 a 255.
RGB es un modelo de color aditivo: al agregar canales se avanza hacia el blanco. Así funciona la luz (pantallas de TV, monitores).
En CSS:
color: rgb(59, 130, 246); /* Blue */
color: rgba(59, 130, 246, 0.5); /* Blue at 50% opacity */Modelo de color HSL: tono, saturación, luminosidad
HSL separa el color en tres dimensiones perceptualmente significativas:
- Tono (0–360°): El color en sí: rojo a 0°, verde a 120°, azul a 240°
- Saturación (0–100%): Intensidad de color: 0% es gris, 100% es color puro y vivo
- Luminosidad (0–100%): Brillo: 0% es negro, 100% es blanco, 50% es el más puro color
En CSS:
color: hsl(217, 91%, 60%); /* Blue */
color: hsla(217, 91%, 60%, 0.5); /* Blue at 50% opacity */Ventaja del flujo de trabajo del diseñador: Para crear una paleta de 5 tonos a partir de un solo color:
- 90% de luminosidad → tinte muy claro
- 75% de luminosidad → tinte claro
- 50% de luminosidad → color base
- 35% de luminosidad → oscuro tono
- 20% de luminosidad → tono muy oscuro
Simplemente ajuste el valor L mientras mantiene H y S constantes.
Cuándo usar HEX, RGB o HSL en CSS
Usa HEX: Para referencias de un solo color donde necesitas el valor de un sistema de diseño o guía de marca. HEX es el formato más común en las especificaciones de diseño.
Usa RGB: Cuando necesites manipular dinámicamente canales de color en JavaScript: rgb(${r}, ${g}, ${b}).
Usa HSL: Al crear sistemas temáticos, generar paletas dinámicamente o trabajar con propiedades personalizadas de CSS para cambiar de modo claro/oscuro accesible.
Conversión de colores en ToolDolfen
Utiliza el Selector y Conversor de Colores (Color Picker) para:
- Elige cualquier color visualmente en una rueda de colores y un espectro
- Ingresa cualquier valor HEX, RGB o HSL y ve instantáneamente los tres formatos equivalentes
- Copia cualquier formato al portapapeles con uno haga clic en
- Utilice el cuentagotas para probar los colores de su pantalla (solo Chrome y Edge)
Guías complementarias recomendadas
Explore tutoriales y utilidades complementarios de este grupo de temas para mejorar su flujo de trabajo digital: