Mezclador de colores

Mezcla colores visualmente con vasos medidores. Elige colores, ajusta las cantidades y consulta el resultado en RGB, HSL y HEX.

Zona de mezcla

Vaso 1

5

Vaso 2

5

Resultado de la mezcla

Proporciones de entrada

50%

Desglose RGB

Rojo: 142 (35.9%)

Verde: 114 (28.8%)

Azul: 140 (35.4%)

Color mezclado

Detalles del color

HEX

#8E728C

RGB

rgb(142, 114, 140)

HSL

hsl(304, 11%, 50%)

Mezclador de colores – Cómo funciona

Por qué funciona la mezcla de colores

Existen dos formas principales de mezclar colores:

La mezcla aditiva se usa en pantallas y sistemas basados en luz. Cuando luces de colores se superponen, la luz se suma. Rojo + Verde = Amarillo, Rojo + Azul = Magenta, Verde + Azul = Cian. Al combinar los tres colores a máxima intensidad, el resultado es blanco.

La mezcla sustractiva se usa con pinturas, tintas y pigmentos. Los materiales absorben ciertas longitudes de onda y reflejan el resto. Los colores primarios sustractivos son el Cian, el Magenta y el Amarillo (CMY). Al mezclarlos en grandes cantidades, el resultado se acerca al negro.

Esta herramienta utiliza el modelo aditivo RGB, el estándar para pantallas digitales y diseño web.

El modelo de color RGB

RGB define un color a través de tres canales:

Rojo (R): 0–255
Verde (G): 0–255
Azul (B): 0–255

Cada píxel de una pantalla contiene subpíxeles rojo, verde y azul. Al variar la intensidad de cada canal, una pantalla puede reproducir más de 16,7 millones de colores ( $256^3 = 16{,}777{,}216$ ).

Formatos de color habituales

Formato	Ejemplo	Descripción
HEX	#FF6B35	Formato hexadecimal de 6 dígitos, muy usado en CSS
RGB	rgb(255, 107, 53)	Valores de rojo, verde y azul en notación decimal
HSL	hsl(16, 100%, 60%)	Tono, saturación y luminosidad; más intuitivo para ajustar visualmente

Cómo calcula el resultado el mezclador

El mezclador obtiene el resultado calculando la media ponderada de cada canal RGB. Si hay $N$ colores de entrada con cantidades $a_1, a_2, \ldots, a_N$ y valores RGB $(r_i, g_i, b_i)$ , el resultado es:

R_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot r_i}{\sum_{i=1}^{N} a_i}

G_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot g_i}{\sum_{i=1}^{N} a_i}

B_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot b_i}{\sum_{i=1}^{N} a_i}

En pocas palabras, los colores con mayor nivel influyen más en el resultado final.

Por ejemplo, mezclando 3 partes de rojo (#FF0000) con 1 parte de azul (#0000FF):

R = \frac{3 \times 255 + 1 \times 0}{4} = 191

G = \frac{3 \times 0 + 1 \times 0}{4} = 0

B = \frac{3 \times 0 + 1 \times 255}{4} = 64

El color resultante es aproximadamente #BF0040, un rojo violáceo intenso.

Usos prácticos

Diseño web e interfaces de usuario

Usa el mezclador para construir paletas, probar superposiciones con transparencia y crear colores de acento a partir de un color base.

Educación

Es una forma sencilla de entender cómo se relacionan la luz, la percepción humana del color y las matemáticas del color.

Arte digital

Ayuda a los artistas a anticipar cómo se combinarán los colores en pantalla en ilustración, diseño y edición de imágenes.

Consejos para mezclar mejor los colores

Empieza con los colores primarios — Rojo, verde y azul son la base de la mezcla RGB.
Ajusta los niveles — Cuanto mayor sea el nivel de un color, más influencia tendrá en la mezcla final.
Compara los formatos de salida — Según trabajes en CSS, herramientas de diseño o código, elige HEX, RGB o HSL.
Valores RGB iguales dan gris — Si los tres canales tienen el mismo valor, el resultado es un gris neutro.

Preguntas frecuentes

¿Cuál es la diferencia entre mezcla aditiva y sustractiva? La mezcla aditiva usa luz y se vuelve más brillante al añadir colores, terminando en blanco. La mezcla sustractiva usa pigmentos y se oscurece al añadir colores, acercándose al negro.

¿Por qué el resultado no se parece a la mezcla de pinturas? Porque esta herramienta utiliza el modelo de luz RGB, no el de pigmentos. En pantalla, rojo + azul = magenta. Con pinturas, los pigmentos absorben la luz de forma distinta, por lo que el resultado visual es diferente.

¿Puedo usar directamente los códigos de color resultantes en CSS? Sí. Los valores HEX, RGB y HSL obtenidos se pueden usar directamente en CSS y en la mayoría de herramientas de diseño.

¿Qué representa el "nivel" en cada vaso? Indica la cantidad relativa de ese color en la mezcla. Un vaso con nivel 8 aporta el doble que el mismo color con nivel 4.