Color y accesibilidad
Elige un HEX base, compara reglas de armonía y revisa el contraste del texto blanco sobre cada muestra.
Todo se calcula en esta pestaña del navegador; los colores no se suben.
Se muestran 5 de 5 colores
Cuando ya tienes el azul de una marca, aún queda decidir fondos, bordes y acentos. Un generador de paletas de colores permite conservar ese azul y probar relaciones análogas, complementarias o triádicas sin empezar de nuevo cada vez. Si buscabas un generador de paleta de colores, aquí las propuestas salen de reglas visibles, no de una nota subjetiva sobre cuál combinación es más bonita.
Este generador de paletas de colores también convierte el color base en una escala de tonos de nueve pasos, calcula una mezcla con otro color y muestra el contraste de colores para texto blanco. Tras filtrar, las variables CSS reflejan exactamente las muestras que siguen visibles; la escala y la mezcla se conservan completas.
La armonía de matiz propone candidatos; el contraste dice si el texto blanco se lee.
Con el mismo HEX puedes pasar de vecinos análogos al tono opuesto complementario o a los tres puntos de una tríada. El generador de paletas de colores no sustituye a escondidas tu azul de marca por uno aleatorio. La escala de nueve tonos permanece vinculada a ese color.
Cada muestra enseña su proporción de contraste con texto blanco. Si activas el filtro de 4,5:1, los tonos que no alcanzan AA para texto normal salen de la paleta visible y del CSS. La armonía de colores no garantiza por sí sola la lectura.
Introduce tres o seis dígitos HEX o usa el selector nativo. El ejemplo comienza en #3B82F6 y el resultado se actualiza tras una breve pausa. Si prefieres ajustar varias opciones antes de calcular, desactiva la generación automática y usa Ctrl o Cmd más Intro.
La regla análoga es la inicial y busca tonos cercanos. Complementaria, tríada y las demás cambian los ángulos y, según la regla, el número de muestras. La mezcla tiene otro HEX y arranca al 50 %; RGB y HSL pueden dar puntos medios distintos.
Mira la proporción de texto blanco y el recuento visible. El filtro AA puede dejar cero colores sin modificar los originales. Copia un HEX concreto o exporta las muestras visibles, los nueve tonos y la mezcla en variables CSS.
Análoga, complementaria, triádica, complementaria dividida, tetrádica y monocromática derivan del mismo color base. Cambia la geometría del círculo, no tu color de marca.
Cuatro mezclas hacia blanco, el color original y cuatro hacia negro sirven para explorar fondos, bordes, estados de interacción y texto. La escala se calcula en RGB y no promete intervalos perceptivos uniformes.
Un segundo HEX y un control de 0 a 100 % determinan el resultado. RGB interpola canales; HSL recorre el arco más corto del matiz. Es mezcla numérica para pantalla, no simulación de pintura.
El cálculo usa los valores sRGB definitivos y muestra el cociente junto a cada muestra. Puedes ocultar las que queden por debajo de 4,5:1 sin alterar los colores de origen.
Copia o descarga un bloque :root con la paleta visible, toda la escala de tonos y el color mezclado. Las muestras excluidas por el filtro no se exportan como si hubieran pasado.
Puedes elegir análoga, complementaria, triádica, complementaria dividida, tetrádica o monocromática. Cada regla coloca tonos a ángulos fijos del círculo y produce entre dos y cinco muestras principales.
Empieza por el color que ya representa a tu marca y compara una regla tranquila, como la análoga, con otra de acento, como la complementaria. Prueba las muestras en una interfaz real y verifica por separado la lectura del texto.
Desde el color base se hacen cuatro mezclas progresivas hacia blanco y otras cuatro hacia negro; el HEX original queda en medio. El resultado es una escala digital RGB de nueve pasos, no una copia de la escala oficial de otro sistema.
Sí, puedes copiar los códigos HEX y el CSS generado para emplearlos en un proyecto personal o comercial. La herramienta no concede derechos sobre marcas ajenas ni evalúa si la combinación se ajusta a su identidad.
Piensa primero en la función de cada color y deja que un color domine mientras las demás apoyan o destacan acciones. Una paleta agradable en muestras puede fallar como fondo de texto; el filtro de 4,5:1 solo comprueba el caso de letras blancas.
¿Te queda alguna duda de color?
Usa el generador de paletas de colores para comparar reglas, revisar la legibilidad del blanco y copiar los valores CSS que de verdad necesitas.