DISEÑO VISUAL · 03
El color necesita contexto.
Explora tonos, compara paletas y distribuye cada color por función. Una marca necesita intención, consistencia y legibilidad.
DISEÑO QUE PUEDES PROBAR
Cada tono puede sugerir algo.
Las asociaciones varían con cultura, audiencia, luz y saturación. Son hipótesis que debes probar, no mensajes universales.
MARCA DE EJEMPLO
Una idea. Otra sensación.
La estructura permanece. Cambia el tono del acento y observa la voz visual de la marca.
Las muestras son educativas. Los colores hex de este laboratorio no representan especificaciones oficiales de las marcas citadas.
DISEÑO QUE PUEDES PROBAR
Teoría de color aplicada.
Distingue tono, saturación y luminosidad. Elegir una combinación es decidir relaciones, no acumular colores.
Tono
La posición en un círculo cromático: rojo, verde, azul… En HSL se expresa como un ángulo.
Saturación
Intensidad del tono. Al reducirla, la muestra se acerca a un gris con la misma luminosidad HSL.
Luminosidad
En HSL, va de negro a blanco. No equivale a la luminancia relativa usada para comprobar contraste.
Una armonía no garantiza legibilidad ni accesibilidad. El círculo HSL es útil para experimentar, pero no es una escala perceptualmente uniforme.
DISEÑO QUE PUEDES PROBAR
La misma idea, otro negocio.
Mantén la composición y cambia base, superficie y acento. Después ajusta la paleta a tu marca: no hay un color obligatorio para cada sector.
Restaurante
Tu próxima experiencia
Una propuesta clara, una experiencia cuidada y un siguiente paso sencillo.
Lo que nos diferencia
Detalles que ayudan a decidir sin perder el foco.
DISEÑO QUE PUEDES PROBAR
60–30–10: asigna funciones.
Una pauta aproximada de predominio: base dominante, secundario de apoyo y acento pequeño. No se trata de medir cada píxel ni de incluir el color del texto en la proporción.
60 % · Base
Fondo y grandes superficies. Aporta estabilidad y deja respirar el contenido.
30 % · Secundario
Tarjetas, secciones o bandas que agrupen información. Debe convivir con la base.
10 % · Acento
Acción principal, selección y detalles clave. Si todas las acciones llevan acento, la prioridad desaparece.
La proporción se aplica a la intención de las superficies. Una interfaz puede necesitar menos acento o más neutros; primero comprueba la tarea y la legibilidad.
DISEÑO QUE PUEDES PROBAR
Comprueba el contraste, no lo adivines.
El contraste mide luminancia relativa entre texto y fondo. El cálculo no sustituye pruebas de lectura, tamaño, peso y estados.
Un texto que se puede leer.
Lee esta frase en un tamaño normal. Prueba blanco sobre amarillo y compara con un texto oscuro.
WCAG AA requiere al menos 4.5:1 para texto normal y 3:1 para texto grande (24 px normal o aproximadamente 18.67 px en negrita). No redondees al decidir si cumple. Consultar el criterio oficial.
Los estados necesitan más que color
Una alerta debe tener texto claro. Un filtro seleccionado puede tener borde, icono y estado accesible. El color puede apoyar el mensaje, pero no debe ser la única señal.
PIENSA ANTES DE APLICAR
Comprueba tu criterio.
Da el siguiente paso: una página completa.
Aplica tu paleta a 31 tipos de página y modifica los colores en tiempo real.
Abrir creador de paletas