Mezclar colores
Con esta herramienta puedes mezclar colores y leer al instante el color resultante en HEX, RGB y HSL. También puedes aclarar, oscurecer o apagar un color y crear un degradado de hasta 15 pasos.
Fuente: CSS Color 5, W3C – CSS Color Module Level 5: color-mix(). Actualizado: .
Cómo se calcula
La herramienta mezcla colores de pantalla, es decir, valores de luz; no pintura hecha de pigmentos. Por eso el rojo y el azul dan violeta (#800080), mientras que el azul y el amarillo dan un gris neutro y no verde como con acuarelas.
Cómo se mezcla
Para cada canal de color se calcula un valor intermedio. El espacio de mezcla decide cómo:
- sRGB: la media simple de los valores de los canales; así mezcla CSS por defecto y así calculan la mayoría de los programas gráficos.
- Luz lineal: mezcla cantidades físicas de luz. El resultado es más claro y corresponde a dos fuentes de luz superpuestas.
- Oklab: un espacio de color perceptual. Los degradados se ven más uniformes, sin un centro grisáceo entre colores vivos.
Aclarar, oscurecer, apagar
Al mezclar un color con blanco se aclara (tinte); con negro se oscurece (sombra) y con gris se apaga (tono). El porcentaje regula la intensidad y los pasos dan una serie completa, útil para estados de hover o escalas de color.
La expresión color-mix() se copia directamente a la hoja de estilos. Paletas a juego salen de la paleta de colores, los formatos se convierten con el convertidor de colores y el comprobador de contraste verifica que el texto siga legible.
Preguntas frecuentes
¿Qué resulta de mezclar azul y amarillo?
En pantalla, un gris neutro (media sRGB #808080), porque se mezclan colores de luz. Con acuarela o acrílico, azul y amarillo dan verde, ya que los pigmentos actúan por sustracción.
¿Cómo mezclo dos colores a partes iguales?
Introduce ambos colores y deja la proporción del segundo en 50 %. Para un tercio del color 2, escribe 33.
¿Cómo aclaro u oscurezco un color?
Elige «Aclarar un color» u «Oscurecer un color» y ajusta el porcentaje: con un 20 % de blanco el color se aclara un poco; con un 80 %, queda casi blanco.
¿Qué espacio de mezcla elijo?
sRGB coincide con el comportamiento por defecto de CSS y de la mayoría de los programas. Oklab da degradados más uniformes y la luz lineal corresponde a fuentes de luz superpuestas.
¿Cómo uso el resultado en CSS?
Copia el valor de «CSS (color-mix)» y úsalo como color en cualquier navegador moderno, o toma simplemente el valor HEX.
Fuentes y base legal
- CSS Color 5: W3C – CSS Color Module Level 5: color-mix()
- Björn Ottosson – A perceptual color space for image processing (Oklab)
- CSS Color 4: W3C – CSS Color Module Level 4: función de transferencia sRGB y luz lineal
Última actualización: · Principios editoriales
Herramientas relacionadas
- Generador de paletas de coloresCrea colores que combinan a partir de un color base: complementarios, análogos, triádicos, cuadrado, complementario dividido o monocromo, con HEX, RGB y HSL.
- Convertidor de colores: HEX, RGB, HSL, HSV, CMYKConvierte colores de HEX a RGB, de RGB a HEX, HSL, HSV, HWB y CMYK: escribe el color en cualquier formato o elígelo y copia el resultado. En tu navegador.
- Comprobador de contraste de colores según WCAG 2.2Comprueba el contraste entre el color del texto y el del fondo: relación de contraste WCAG 2.2, niveles AA/AAA para texto normal, texto grande y componentes.
- Obtener el color de una imagen (cuentagotas)Saca el código de color de una imagen: carga la foto, haz clic en un punto y copia el valor HEX, RGB y HSL, además de los colores principales. Sin subir nada.
- Calculadora de IMC según la OMSCalculadora de IMC: índice de masa corporal con estatura y peso, categoría de la OMS en una escala de colores, peso normal para tu estatura y BMI Prime.
- Temporizador de boxeo con rondas, descanso y campanaTemporizador de boxeo gratis: elige duración de la ronda, descanso y rondas; la campana suena al empezar y terminar cada ronda. Modelos amateur, pro y MMA.
- Cuánta comida darle a un perroCalcula cuánta comida darle a un perro al día: gramos de pienso y comida húmeda según su peso y etapa de vida, con cantidad por comida y rango, sin registro.
- Calculadora zakat: cuánto zakat debesCalculadora zakat online: introduce efectivo, ahorros, oro, plata y deudas, elige el nisab y ve tu zakat (2,5 %) al instante. Con el cálculo detallado, gratis.
- Distancia entre trastes: posiciones según la longitud de escalaCalcula la distancia entre trastes: indica la longitud de escala y obtén la posición de cada traste desde la cejuela y el puente, para guitarra y bajo.