Herramienta gratuita · Color
Colores en vivo
Elige cinco colores por rol y míralos aplicados sobre una web de verdad: navegación, titular, botones, tarjetas y pie. Con el contraste WCAG calculado al instante para que sepas si tu paleta se lee o solo se ve bonita.
Editor de colores
Vista previa en una web real
Todo el texto de la maqueta usa tu color de texto al 100%, sin atenuar: lo que ves aquí es exactamente lo que mide el test de contraste.
Maqueta de demostración: sus botones y enlaces no son funcionales.
Marcas que se recuerdan, no que se olvidan
Diseñamos identidad, sitios web y campañas para negocios que ya no quieren parecerse a su competencia. Menos ruido, más criterio.
Identidad visual
Naming, logotipo y un sistema gráfico que aguanta el paso del tiempo.
Diseño y desarrollo web
Sitios rápidos, accesibles y pensados para convertir, no solo para lucir.
Campañas
Piezas para redes y anuncios con una dirección de arte que se sostiene.
Contraste WCAG
Los tres pares que deciden si tu web se lee. El mínimo para texto normal es 4.5:1 (nivel AA); 7:1 alcanza AAA.
Criterio, no suerte
Cómo elegir colores para una web
Empieza por el fondo y el texto, siempre. Son el 90% de los píxeles de tu web y definen la sensación antes de que nadie lea una palabra: claro y aireado, u oscuro y editorial. Decide primero esa pareja y compruébala: necesitas 4.5:1 como mínimo para texto normal, y 3:1 para texto grande (24 px o más, o 18.66 px en negrita). Si esa base falla, ningún acento bonito va a salvarla.
El color primario ocupa poquísimo espacio y aun así manda. Vive en el botón que quieres que pulsen, en el enlace importante y en el estado activo del menú; por eso lo que importa no es cómo se ve en una muestra grande, sino si su etiqueta se lee. Esta herramienta calcula sola el color de texto del botón (blanco o negro, el que gane) y te enseña el ratio. Si además vas a usar el primario para enlaces dentro de un párrafo, comprueba también el primario sobre el fondo: es el error más común.
La superficie es el color de las tarjetas y los paneles. Su trabajo es separar bloques sin gritar: un 4-8% más claro o más oscuro que el fondo suele bastar. Si la diferencia es tan sutil que no se distingue, no subas el contraste, añade un borde de 1 px. Y ojo: el texto también tiene que pasar el test encima de la superficie, no solo encima del fondo. Por eso son dos comprobaciones separadas en el panel de arriba.
El acento es el 10%. Etiquetas, subrayados, un icono, un dato destacado, el estado de "nuevo". Si lo pones en todas partes deja de destacar nada y la interfaz se vuelve ruido. Cuando tengas la combinación que te convence, genera la escala completa de tonos en el generador de paletas, guarda las variables CSS y sigue con el resto del sistema: en el blog hay guías de diseño web paso a paso, y en todas las herramientas tienes generadores de favicons y componentes SVG listos para pegar.
Dudas frecuentes
Preguntas frecuentes
¿Qué es el ratio de contraste?
Es la relación entre la luminancia del texto y la del fondo, calculada con la fórmula oficial de la WCAG. Va de 1:1 (dos colores idénticos, texto invisible) a 21:1 (negro puro sobre blanco puro). No mide cuánto se diferencian los tonos, sino cuánta luz refleja cada uno: por eso dos colores muy distintos pueden dar un ratio bajísimo. Para texto normal el mínimo recomendado es 4.5:1.
¿Cuál es la diferencia entre AA y AAA?
AA es el nivel que se pide en la mayoría de normativas de accesibilidad: 4.5:1 para texto normal y 3:1 para texto grande (24 px o más, o 18.66 px en negrita). AAA es el nivel exigente: 7:1 para texto normal y 4.5:1 para texto grande. Apunta siempre a AA en toda la interfaz y reserva AAA para bloques de lectura larga, formularios y contenido crítico.
¿Por qué mi color favorito no pasa el test?
Porque el contraste depende de la luminancia, no de la saturación ni del tono. Los amarillos, turquesas, verdes lima y naranjas son muy luminosos: sobre blanco casi nunca llegan a 4.5:1 por muy vibrantes que se vean. La solución no es renunciar al color, es cambiarle el trabajo: úsalo como fondo de un botón con etiqueta oscura, como acento o como superficie, y para el texto usa una versión más oscura del mismo tono.
¿Puedo usar estos colores en un proyecto de cliente?
Sí. Un color hexadecimal es un dato, no una obra: no tiene derechos de autor ni licencia, y puedes usar cualquier combinación en proyectos personales o comerciales sin atribución. Lo único que conviene evitar es replicar la identidad completa de una marca existente (su color junto a su tipografía, su símbolo y su sector), porque ahí sí puede haber una marca registrada de por medio.
Sigue creando
Más herramientas y guías
Generador de paletas
Armonías, escala de tonos 50–950 y exportación a CSS, Tailwind y PNG desde un solo color.
SVGGalería de favicons
Más de 55 favicons SVG listos para copiar como etiqueta <link>, más generadores de emoji y monograma.
Guías del blog
Tutoriales de diseño, SVG, motion y marketing digital que complementan cada video del canal.