Mezclador de color: guía de inicio rápido

Todo lo necesario para un primer uso correcto: qué pegar, qué opción importa de verdad y cómo leer el resultado.

Entrada Mezclador de color Salida Funciona 100% en tu navegador: tus datos nunca salen del dispositivo.
Mezclador de color — Entrada → Salida. Funciona 100% en tu navegador: tus datos nunca salen del dispositivo.

Cómo usar

  1. Abre la herramienta y pega tu entrada en el panel izquierdo.
  2. Ajusta solo las opciones que tu tarea necesita de verdad; los valores por defecto sirven para la mayoría de los casos.
  3. Lee el resultado en el panel derecho; se actualiza mientras escribes.
  4. Usa Copiar para llevarte el resultado o Descargar para guardarlo como archivo.
Cómo usar · Mezclador de color 1 Pega tus datos en lacaja de entrada (ocarga el ejemplo). 2 Ajusta las opciones alformato o escenariodeseado. 3 Copia, descarga orevisa la salida: seactualiza mientrasescribes.
Cómo usar — 3

Ejemplos

Mix against #ffffff at 50% and switch the space to CIE Lab for a perceptually even ramp.

Entrada

#0ea5b7

Salida — Resultados

#0ea5b7 + #ffffff at 50% (mixed in RGB)

Result
  HEX   #87d2db
  RGB   rgb(135, 210, 219)
  HSL   hsl(186.4, 54.0%, 69.3%)

Contrast against white : 1.71:1
Contrast against black : 12.26:1

Ramp (9 steps)
    0%  #0ea5b7
   13%  #2cb0c0
   25%  #4abcc9
   38%  #68c7d2
   50%  #87d2db
   63%  #a5dde4
   75%  #c3e9ed
   88%  #e1f4f6
  100%  #ffffff

CSS
  --mix: #87d2db;
  background: linear-gradient(90deg, #0ea5b7, #ffffff);

Ejecutar

Descripción

Blend two colours in sRGB, HSL or perceptual CIE Lab and generate a ramp with contrast ratios.

Mezclador de color → · Cómo usar → · Herramientas de color →

Herramientas relacionadas

Selector de hexadecimal colorInteractive picker with HEX, RGB and HSL output.Conversor de color CodeConvert between HEX, RGB, HSL and named colors.color contraste Comprobador (WCAG)Verify text contrast ratios against WCAG AA/AAA.Generador de color paletaShades, tints and complementary schemes from one color.Generador de aleatorios colorBatch random colors with copyable codes.Referencia de CSS Con nombre ColoresAll 148 CSS color names with codes and previews.