Mezclador de colores
Introduce dos colores HEX, elige cuántos pasos quieres y el mezclador muestra el color inicial, el color final y los colores repartidos de forma uniforme entre ambos. Es útil para rampas rápidas de interfaz, planificar degradados, estados de iconos y comprobar los códigos HEX exactos antes de llevarlos a CSS o a una herramienta de diseño.
Cómo se calcula la mezcla HEX
-
1
Introduce dos colores HEX
Usa HEX de 3 o 6 dígitos, con o sin #. Ejemplos: #FF6B35, #1E3A8A, F60.
-
2
Elige 2-20 pasos
La primera muestra es el primer color y la última es el segundo; las muestras centrales se calculan entre ambos.
-
3
Interpola los canales RGB
La herramienta convierte HEX a canales rojo, verde y azul, interpola cada canal de forma lineal y redondea al entero más cercano.
-
4
Lee los pasos HEX
Cada muestra aparece con un código HEX de 6 dígitos en mayúsculas que puedes seleccionar y reutilizar en tu diseño o hoja de estilos.
Qué hace esta herramienta
El mezclador trabaja solo con notación de color HEX estándar. Acepta HEX corto como #F60 y HEX completo como #FF6B35, normaliza los valores internamente y muestra cada resultado como código HEX de 6 dígitos en mayúsculas.
La mezcla usa una interpolación lineal sencilla en canales RGB/sRGB:
- Convierte cada color HEX en valores
R,GyBde 0 a 255. - Para cada paso, calcula
tdesde0hasta1. - Para cada canal, aplica
inicio + (fin - inicio) * t. - Redondea cada canal al número entero más cercano y vuelve a convertir el resultado a HEX.
Como los extremos están incluidos, 2 pasos significa “solo inicio y fin”. Con 7 pasos de #FF6B35 a #1E3A8A, el resultado es:
| Paso | Posición | HEX |
|---|---|---|
| 1 | 0% | #FF6B35 |
| 2 | 16,67% | #DA6343 |
| 3 | 33,33% | #B45B51 |
| 4 | 50% | #8F5360 |
| 5 | 66,67% | #694A6E |
| 6 | 83,33% | #44427C |
| 7 | 100% | #1E3A8A |
Usos recomendados
- Rampas de estado de UI: crea colores intermedios para hover, activo, seleccionado o deshabilitado.
- Planificación de degradados: decide las paradas HEX exactas antes de escribir un degradado CSS en otra herramienta.
- Variantes de iconos e ilustraciones: mantén coherente un pequeño conjunto de colores relacionados.
- Revisión de diseño: compara el punto medio calculado por canal en lugar de estimarlo a ojo.
Límites que conviene recordar
Este mezclador no acepta rgb(), hsl(), nombres de color, valores alpha ni HEX de 8 dígitos. No exporta RGB, HSL, LAB, LCH, fragmentos CSS, comprobaciones de contraste ni valoraciones de accesibilidad. Si necesitas eso, usa un conversor, un comprobador de contraste o un generador de degradados después de obtener los pasos HEX.
Preguntas frecuentes
Solo HEX: 3 o 6 dígitos, con o sin # inicial. La herramienta no lee rgb(), hsl(), canales alpha ni nombres de color.
Sí. El primer paso es el primer color y el último paso es el segundo color. Los demás pasos son los colores interpolados entre ambos.
La mezcla se calcula canal por canal en RGB/sRGB. Es predecible y fácil de reutilizar en código, pero no equivale a una interpolación perceptual LAB o LCH.
No. Solo muestra muestras y códigos HEX. Usa esos valores en tu CSS o pásalos a un comprobador de contraste si necesitas ratios de accesibilidad.
Herramientas relacionadas
Referencia de la tabla ASCII
Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.
Generador de letras aleatorias
Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.
Referencia de caracteres HTML
Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.
Formateador de JSON
Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.
Referencia de atajos de teclado
Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.
Simplificador de Álgebra Booleana
Evalúa una expresión booleana para cada combinación de entradas y muestra la tabla de verdad completa. Admite hasta cinco variables y los operadores &, |, ! y ^.