Tema 2 · El color en el diseño y la comunicación visual

La síntesis aditiva (RGB) y sustractiva (CMYK), el código hexadecimal y el valor entero del color, la profundidad de color, el contraste y la legibilidad, los colores complementarios y la psicología del color en la identidad visual.

1. Síntesis aditiva: RGB

La síntesis aditiva mezcla luces. Sus primarios son rojo, verde y azul (RGB); su suma da blanco. Es el modelo de pantallas (monitores, móviles).
Cada canal toma valores de 0 a 255. La combinación define más de 16 millones de colores en 8 bits por canal.

2. Síntesis sustractiva: CMYK

La síntesis sustractiva mezcla pigmentos que restan luz. Sus primarios de impresión son cian, magenta, amarillo y negro (CMYK); su suma teórica tiende al negro.
RGB para pantalla, CMYK para imprenta. Un diseño debe prepararse en el modo de su soporte.

3. El código hexadecimal

En la web el color RGB se escribe en hexadecimal #RRGGBB: dos dígitos (00–FF, es decir 0–255) por canal.
El valor entero de un color es R·65536 + G·256 + B. Ej.: el rojo puro (255,0,0) = 16711680, que en hex es #FF0000.

4. Profundidad de color

La profundidad de color es el nº de bits por píxel. Con b bits por canal y 3 canales hay 2^(3·b) colores.
8 bits/canal (24 bits/píxel) → 2²⁴ = 16.777.216 colores («color verdadero»).

5. Contraste y legibilidad

El contraste de luminosidad (claro/oscuro) garantiza la legibilidad. El de complementarios es muy vibrante pero puede fatigar para textos largos.
Texto oscuro sobre fondo claro (o viceversa) maximiza la lectura; evitar combinaciones de luminosidad similar.

6. Psicología y simbología del color

El color comunica: el rojo (energía, alarma), el azul (confianza, tecnología), el verde (naturaleza, salud), el amarillo (optimismo). La identidad visual de marca elige una paleta coherente.

Problemas y análisis paso a paso

Combina análisis guiado (identificar recurso, ley, técnica, área) y cálculos de proporción, color, formato y resolución, auto-corregidos.

1. Modelo de color de las pantallas análisis

Vas a diseñar la interfaz de una app que se verá en móviles. ¿En qué modelo de color debes trabajar: RGB o CMYK?
1
Indica el modelo.
Ver solución completa
RGB (síntesis aditiva): es el modelo de las pantallas, que emiten luz.

2. Modelo de color de la imprenta análisis

Preparas un cartel para imprenta offset. ¿En qué modelo de color entregas el arte final?
1
Indica el modelo.
Ver solución completa
CMYK (síntesis sustractiva): cian, magenta, amarillo y negro, los tintes de impresión.

3. Valor entero del rojo puro cálculo

Calcula el valor entero del rojo puro RGB (255, 0, 0), sabiendo que valor = R·65536 + G·256 + B.
1
Valor = 255·65536 + 0 + 0.
Ver solución completa
255·65536 = 16711680, que en hexadecimal es #FF0000.

4. Valor entero de un gris cálculo

¿Cuál es el valor entero del color RGB (128, 128, 128)?
1
Valor = 128·65536 + 128·256 + 128.
Ver solución completa
128·65536 + 128·256 + 128 = 8388608 + 32768 + 128 = 8421504 (#808080).

5. Colores con 8 bits por canal cálculo

Una imagen RGB usa 8 bits por canal. ¿Cuántos colores distintos puede representar? (2 elevado a 3·bits)
1
Colores = 2^(3·8).
Ver solución completa
2²⁴ = 16.777.216 colores: el llamado «color verdadero».

6. Suma de las luces primarias análisis

En la síntesis aditiva, si proyectas a la vez luz roja, verde y azul al máximo, ¿qué color obtienes?
1
Nombra el color.
Ver solución completa
Blanco: la suma de las tres luces primarias da blanco (aditiva).

7. Colores con 4 bits por canal cálculo

Una imagen de 4 bits por canal (RGB), ¿cuántos colores admite?
1
Colores = 2^(3·4).
Ver solución completa
2¹² = 4096 colores.

8. Valor entero del azul puro cálculo

Calcula el valor entero del azul puro RGB (0, 0, 255).
1
Valor = 0 + 0 + 255.
Ver solución completa
0·65536 + 0·256 + 255 = 255 (#0000FF).

9. Color de la confianza tecnológica análisis

Muchas marcas tecnológicas y bancarias usan un mismo color por transmitir confianza, seriedad y tecnología. ¿Cuál es?
1
Nombra el color.
Ver solución completa
El azul: se asocia a confianza, calma y tecnología; de ahí su uso en banca y tecnología.

10. Complementario para máximo contraste cálculo

Para destacar un botón sobre un fondo de matiz 210° eliges su complementario. ¿En qué ángulo está? ((210 + 180) mód 360)
1
Complementario = (210 + 180) mód 360.
Ver solución completa
(210 + 180) mód 360 = 390 mód 360 = 30°: el complementario del azul es el naranja.

11. Suma de pigmentos CMY análisis

En la síntesis sustractiva, mezclar cian, magenta y amarillo al máximo tiende teóricamente a un color. ¿Cuál?
1
Nombra el color.
Ver solución completa
Tiende al negro (en la práctica un pardo sucio, por eso se añade el negro K).

12. Profundidad de 1 bit por canal cálculo

¿Cuántos colores admite una imagen de 1 bit por canal RGB?
1
Colores = 2^(3·1).
Ver solución completa
2³ = 8 colores (las ocho esquinas del cubo RGB).

13. Clave de la legibilidad análisis

Para que un texto se lea bien, ¿qué debe ser alto entre el texto y el fondo: el contraste de luminosidad o la semejanza de matiz?
1
Indica cuál.
Ver solución completa
El contraste de luminosidad (claro/oscuro): garantiza la legibilidad.

14. Bytes de un píxel de color verdadero cálculo

Un píxel de 24 bits (8 por canal), ¿cuántos bytes ocupa? (8 bits = 1 byte)
1
Bytes = 24 / 8.
Ver solución completa
24 / 8 = 3 bytes por píxel (uno por canal R, G y B).

15. Identidad visual de marca análisis

El conjunto coherente de color, tipografía y logotipo que hace reconocible a una empresa se denomina identidad visual o de marca. ¿Cómo se llama el documento que fija sus normas de uso?
1
Nómbralo.
Ver solución completa
El manual de identidad corporativa (o de marca): fija usos del logo, paleta y tipografía.

Test de autoevaluación

1. El modelo de color de las pantallas es:

2. El valor entero del rojo puro RGB (255,0,0) es:

3. Con 8 bits por canal el nº de colores es:

4. La suma de las tres luces primarias (aditiva) da:

5. Para impresión offset el arte final se entrega en:

Simuladores

🌈 Profundidad de color

Cada bit por canal duplica los niveles; con 8 bits/canal se alcanzan 16,7 millones de colores.

🎨 Color complementario

El complementario está al otro lado del círculo cromático: 180° de distancia.

Banco de exámenes (Diseño)

Cargando…

Ver banco completo →

Generador aleatorio

El generador construye items aleatorios por bloque (proporción, color, formato, resolución y análisis tipo test). Cada plantilla incluye su solución.