Lección 3 de 16 · Nivel 1: Básico
Teoría del color para diseñadores: paletas, RGB, CMYK y contraste
- ⏱ 9 min de lectura
- ❓ 3 preguntas de repaso
- ✍️ Ejercicio con solución
En esta lección
- Entender cómo se describe un color: tono, saturación y luminosidad.
- Crear paletas armoniosas con la rueda de color y la regla 60-30-10.
- Distinguir RGB, HEX, CMYK y Pantone, y saber cuándo usar cada uno.
- Comprobar el contraste para que tus diseños se lean y sean accesibles.
El color es lo primero que percibimos de una pieza y uno de los elementos que más influye en cómo nos sentimos ante ella. Bien usado, guía la mirada, crea identidad y transmite emociones. Mal usado, confunde, cansa o hace ilegible el texto. En esta lección aprenderás a elegir colores con método, no al azar.
Cómo se describe un color
| Propiedad | Qué es | Ejemplo |
|---|---|---|
| Tono (matiz, hue) | El color en sí, su posición en la rueda (0° a 360°) | Rojo, naranja, azul |
| Saturación | La intensidad o pureza; a menor saturación, más gris | Rojo intenso frente a rojo apagado |
| Luminosidad (brillo, valor) | Cuán claro u oscuro es | Azul marino frente a celeste |
Los programas de diseño permiten elegir colores con el modelo HSB o HSL (tono, saturación, brillo o luminosidad), que es el más intuitivo para crear variaciones: mantienes el tono y cambias la luminosidad para obtener una gama del mismo color. Más sobre la clasificación de los colores en nuestro artículo cuántos tipos de colores existen.
La rueda de color y las armonías
La rueda de color organiza los tonos en círculo: primarios, secundarios y terciarios. A partir de ella se construyen esquemas que suelen funcionar:
| Armonía | Cómo se forma | Efecto | Ejemplo de uso |
|---|---|---|---|
| Monocromática | Un tono con distintas luminosidades y saturaciones | Elegante, coherente, tranquila | Marca de bienestar en verdes |
| Análoga | Tonos vecinos en la rueda (amarillo, naranja, rojo) | Armoniosa, natural | Marca de alimentos cálida |
| Complementaria | Tonos opuestos (azul y naranja) | Alto contraste, energía | Botones que deben destacar |
| Complementaria dividida | Un tono y los dos vecinos de su opuesto | Contraste con más equilibrio | Ilustraciones, campañas |
| Triádica | Tres tonos equidistantes | Vibrante, juvenil | Marcas infantiles, eventos |
La regla 60-30-10
Una forma sencilla de equilibrar una paleta: un color dominante en alrededor del 60% de la superficie (a menudo un neutro: blanco, crema, gris o azul oscuro), un color secundario en el 30% y un color de acento en el 10%, reservado para lo que debe destacar (botones, ofertas, datos clave). Si el acento aparece en todas partes, deja de destacar.
Una paleta profesional suele tener 1 o 2 colores de marca, 1 de acento y una escala de neutros (del casi blanco al casi negro). Los neutros hacen la mayor parte del trabajo; los colores de marca, la identidad.
1. Quieres que el botón "Comprar" destaque en una web cuyos colores principales son azules. ¿Qué color eliges?
El complementario genera el máximo contraste; reservarlo para las acciones (el 10% de acento) lo hace eficaz.
Color y emoción: con cuidado
Los colores tienen asociaciones frecuentes: azul con confianza y calma (por eso lo usan bancos y tecnológicas), verde con naturaleza y salud, rojo con energía, urgencia o pasión, amarillo con optimismo, negro con lujo y elegancia. Pero estas asociaciones dependen de la cultura, el contexto y la combinación: el blanco es luto en algunos países de Asia; el rojo es suerte en China. Usa la psicología del color como una pista, no como una regla, y mira qué colores usa tu competencia para diferenciarte.
Modelos de color: pantalla frente a impresión
| Modelo | Cómo funciona | Dónde se usa | Ejemplo |
|---|---|---|---|
| RGB | Luz: rojo, verde y azul se suman (todos al máximo = blanco) | Pantallas: web, redes, apps, video | rgb(249, 115, 22) |
| HEX | El mismo RGB escrito en hexadecimal | Web y herramientas digitales | #F97316 |
| CMYK | Tintas: cian, magenta, amarillo y negro se restan sobre el papel | Impresión en imprenta | C0 M55 Y90 K0 (aproximado: depende del perfil de color) |
| Pantone | Tintas planas estandarizadas con un código | Impresión de color exacto de marca, empaques, textiles | Un código de la guía Pantone |
El RGB abarca colores (naranjas y verdes muy brillantes, azules eléctricos) que las tintas CMYK no pueden reproducir: al imprimir salen más apagados. Si una pieza va a imprenta, diseña en CMYK desde el principio o convierte y revisa los colores antes de enviar (lección 10). Y recuerda que cada pantalla muestra los colores un poco distinto.
Contraste y accesibilidad
Un texto debe leerse bien para todos, incluidas las personas con baja visión o que miran el celular a pleno sol. Las pautas de accesibilidad web (WCAG) miden el contraste entre texto y fondo con una relación que va de 1:1 (sin contraste) a 21:1 (negro sobre blanco). Para el nivel AA recomiendan al menos 4,5:1 para texto normal y 3:1 para texto grande.
| Texto | Fondo | Contraste | ¿Cumple para texto normal? |
|---|---|---|---|
| Gris oscuro #1F2937 | Blanco | 14,7:1 | Sí |
| Gris medio #6B7280 | Blanco | 4,8:1 | Sí, justo |
| Gris claro #9CA3AF | Blanco | 2,5:1 | No |
| Blanco | Naranja #F97316 | 2,8:1 | No (solo con texto muy grande y grueso, y aun así queda por debajo de 3:1) |
| Blanco | Naranja oscuro #C2410C | 5,2:1 | Sí |
Herramientas gratuitas como el verificador de contraste de WebAIM o los complementos de Figma calculan la relación al instante. Además, cerca de 1 de cada 12 hombres tiene alguna forma de daltonismo, la más común con el rojo y el verde: no comuniques solo con color (por ejemplo, "en rojo los errores"); añade iconos, texto o patrones.
2. Diseñas un botón naranja brillante (#F97316) con texto blanco. ¿Qué problema tiene?
Un tono más oscuro (#C2410C) llega a 5,2:1 y mantiene el carácter del color.
Cómo crear una paleta paso a paso
- Parte del brief: ¿qué debe transmitir la marca? ¿Qué colores usa la competencia?
- Elige el color principal y define su versión en HEX, RGB y CMYK.
- Elige el acento con una armonía (complementario o complementario dividido suelen funcionar bien para acciones).
- Crea la escala de neutros: 5 a 8 grises (o neutros con un toque del color principal).
- Genera variaciones del principal más claras y más oscuras (fondos, estados de botones).
- Comprueba el contraste de cada combinación de texto y fondo que vayas a usar.
- Pruébala en piezas reales: una publicación, un botón, un afiche. Ajusta.
Herramientas como Adobe Color o Coolors ayudan a explorar combinaciones; también puedes extraer paletas de fotografías que te inspiren.
3. Un cliente te pide su logo para un letrero impreso y para su web. ¿Qué códigos de color le entregas?
Cada medio necesita su modelo de color. Un manual de marca incluye todos los códigos de cada color (lección 9).
Ejercicio práctico: la paleta de una marca
Crea la paleta para una marca ficticia: una cafetería de especialidad que quiere transmitir calidez, calidad y cercanía.
- Elige el color principal, el secundario y el de acento con una armonía.
- Crea una escala de 6 neutros.
- Anota cada color en HEX, RGB y CMYK aproximado.
- Comprueba el contraste de tres combinaciones de texto y fondo.
- Diseña una publicación aplicando la regla 60-30-10.
Ver una propuesta
Principal (marrón café): #7C2D12
Secundario (crema): #FED7AA
Acento (verde salvia): #4D7C0F
Neutros: #FFFBF5 · #F5EFE6 · #D6CFC4 · #A8A29E · #57534E · #292524
Armonía: marrón y crema son análogos (cálidos); el verde aporta contraste
como complementario dividido y evoca la planta del café.
60-30-10: fondo crema muy claro (#FFFBF5) 60%, marrón en títulos e
imágenes 30%, verde en el botón "Pide aquí" y detalles 10%.
Contraste: marrón #7C2D12 sobre crema #FED7AA = 6,9:1 (cumple).Resumen
- Un color se describe por su tono, saturación y luminosidad.
- Las armonías (monocromática, análoga, complementaria, triádica) y la regla 60-30-10 ayudan a crear paletas equilibradas.
- Las asociaciones emocionales del color dependen de la cultura y el contexto.
- RGB y HEX para pantallas; CMYK y Pantone para impresión.
- Comprueba el contraste (al menos 4,5:1 para texto normal) y no comuniques solo con color.
En la próxima lección aprenderás tipografía: cómo elegir, combinar y componer textos que se lean bien y tengan personalidad.
Crea tu cuenta en 30 segundos, marca tus lecciones y descarga el certificado al terminar.