cómo usar una rueda de color · ángulos de tono · armonía · roles de paleta
Cómo usar una rueda de color para crear paletas prácticas
Elige un tono base, genera una relación deliberada y convierte los candidatos en roles reales de fondo, texto, acento y estado. La rueda inicia la composición; luminosidad, saturación, contraste y contexto la terminan.
cómo usar una rueda de color
cómo usar una rueda de color: ¿Cuál es la forma más sencilla de usar una rueda de color?
La forma más sencilla de usar una rueda de color consiste en elegir un tono base, seleccionar una relación análoga, complementaria, complementaria dividida, triádica o monocromática y tratar los resultados como candidatos, no como colores finales. Da a uno el papel dominante, reserva uno o dos para apoyo y acentos, añade superficies y textos neutros y ajusta saturación y luminosidad para el medio real. En una interfaz digital, mide cada primer plano contra el fondo que realmente toca. La geometría organiza el tono, pero por sí sola no demuestra legibilidad, significado emocional, precisión impresa ni accesibilidad.
cómo usar una rueda de color: Cuatro decisiones que hacen útil la rueda
- cómo usar una rueda de color: parte de una restricción real, como el color de marca, un rasgo del personaje, una muestra de imagen, un estado de interfaz o un ambiente previsto
- cómo usar una rueda de color: elige la relación por su función: análoga para continuidad, complementaria para tensión, dividida para contraste flexible o triádica para varios roles distintos
- cómo usar una rueda de color: modifica luminosidad y saturación después de escoger las posiciones porque una separación angular igual no produce el mismo peso visual ni texto legible
- cómo usar una rueda de color: asigna nombres como lienzo, superficie, texto, acento, foco, éxito y aviso; después verifica los pares reales y las señales que no dependen del color
cómo usar una rueda de color: Seis patrones de armonía reproducibles
cómo usar una rueda de color: Son ejemplos HSL reproducibles, no reglas universales.
| Armonía | Posiciones de ejemplo | Tonos candidatos | Uso inicial y precaución |
|---|---|---|---|
| Monocromática · cómo usar una rueda de color | 0°, con variantes de luminosidad y saturación | 1 familia de tono | interfaces enfocadas; separa suficientemente el valor de cada rol |
| Análoga · cómo usar una rueda de color | 330°, 0°, 30° | 3 tonos vecinos | superficies y degradados coherentes; sin neutrales o contraste de valor pueden fusionarse |
| Complementaria · cómo usar una rueda de color | 0° y 180° | 2 tonos opuestos | acentos fuertes; evita que ambos dominen grandes áreas con la misma intensidad |
| Complementaria dividida · cómo usar una rueda de color | 0°, 150°, 210° | 3 tonos | contraste vivo y flexible; asigna un dominante en lugar de repartir el peso |
| Triádica · cómo usar una rueda de color | 0°, 120°, 240° | 3 tonos equidistantes | personajes, categorías y gráficos; diferencia también rol, valor y etiqueta |
| Tétrada cuadrada · cómo usar una rueda de color | 0°, 90°, 180°, 270° | 4 tonos equidistantes | sistemas expresivos; controla la jerarquía para que no compitan cuatro colores saturados |
cómo usar una rueda de color: Elige el tono base a partir del trabajo, no del giro de la rueda
cómo usar una rueda de color: Empieza con la evidencia que ya contiene el diseño. Una paleta de personaje puede nacer del traje que el público reconoce primero. Una interfaz puede heredar el azul de la marca y un gráfico quizá deba mantener colores semánticos acordados. Un proyecto basado en fotografía puede comenzar por un píxel muestreado, aunque el color más frecuente no siempre es el mejor tono base. Anota qué debe comunicar, dónde aparecerá y qué colores están fijados antes de colocarlo en la rueda. Así la exploración sigue vinculada al encargo y puedes explicar por qué descartaste una opción. Si nada está fijado, crea dos o tres direcciones relacionadas con el tema y compáralas dentro del diseño real, no como círculos aislados. La rueda hace visible la relación; la decisión base sigue perteneciendo al producto y al mensaje.
cómo usar una rueda de color: Convierte la geometría armónica en roles desiguales
cómo usar una rueda de color: Una armonía generada no debe transformarse en franjas iguales de color saturado. Decide qué tono ocupará la mayor superficie, cuál apoyará la estructura y cuál aparecerá solo para dirigir la atención. En una paleta análoga, un tono puede definir el lienzo y sus vecinos los paneles o ilustraciones. En una complementaria, una base moderada puede sostener la interfaz mientras el opuesto señala la acción principal. Una tríada separa rasgos del personaje o series de datos, pero necesita luminosidades, saturaciones, etiquetas o patrones distintos. Añade neutrales pronto: texto, bordes y superficies legibles no tienen que salir de cada punto de la armonía. Prueba los acentos a su tamaño final, porque el equilibrio de una muestra grande puede desaparecer en un icono o anillo de foco fino. La jerarquía convierte la simetría matemática en una paleta utilizable.
cómo usar una rueda de color: Lista de control para una paleta de rueda de color
- cómo usar una rueda de color: registra el tono base y la restricción real que lo convirtió en punto de partida
- cómo usar una rueda de color: nombra la armonía y conserva los desplazamientos angulares para reproducir la exploración
- cómo usar una rueda de color: elige un tono dominante, una relación de apoyo y solo los acentos que necesita la composición
- cómo usar una rueda de color: ajusta luminosidad y saturación dentro del diseño en vez de aprobar muestras iguales y totalmente saturadas
- cómo usar una rueda de color: mide textos, controles, iconos, gráficos y focos frente al fondo o color adyacente que realmente tocan
- cómo usar una rueda de color: guarda valores finales, restricciones de uso, señales no cromáticas, revisión de visión del color y fecha de prueba
cómo usar una rueda de color: Construye la paleta en cuatro pasadas
cómo usar una rueda de color: 1. Fija la semilla
cómo usar una rueda de color: introduce el color de marca, imagen, personaje o función y anota su ángulo HSL sin alterar el valor original de referencia.
cómo usar una rueda de color: 2. Compara relaciones
cómo usar una rueda de color: genera opciones análogas, complementarias, divididas, triádicas y monocromáticas; descarta las que no encajen con los roles o la energía buscada.
cómo usar una rueda de color: 3. Asigna y ajusta roles
cómo usar una rueda de color: elige un dominante, reduce la saturación que compite, añade fondos y textos neutros y previsualiza los colores en el componente real.
cómo usar una rueda de color: 4. Verifica y exporta
cómo usar una rueda de color: comprueba contraste y señales redundantes, revisa simulaciones representativas y exporta valores nombrados con combinaciones seguras y usos restringidos.
cómo usar una rueda de color: Qué establecen las fuentes oficiales
cómo usar una rueda de color: Fuentes verificadas el 3 de agosto de 2026; ángulos HSL de Toon Tone.
- cómo usar una rueda de color: CSS Color Module Level 4 define el tono HSL como un círculo donde 0° o 360° es rojo sRGB, 120° es verde y 240° es azul. También advierte que el espaciado de tono y la luminosidad de HSL no son perceptualmente uniformes. Leer CSS Color Module Level 4 de W3C
- cómo usar una rueda de color: El flujo actual de Adobe Color consta de cinco pasos: partir de un color, imagen o rueda; aplicar una armonía; previsualizar visión del color y contraste; ajustar; y guardar la paleta. Abrir la rueda oficial de Adobe Color
- cómo usar una rueda de color: WCAG 2.2 nivel AA fija al menos 4,5:1 para texto normal y 3:1 para texto grande; el criterio 1.4.1 exige que la información expresada con color también tenga otra señal visual. Leer W3C Comprender contraste mínimo WCAG 2.2 SC 1.4.1
“When it comes to color theory, there’s no set list of ‘Don't do that,’”
cómo usar una rueda de color: Preguntas sobre la rueda de color
¿Qué armonía debería elegir primero una persona principiante?
cómo usar una rueda de color: Empieza por una análoga si buscas una familia tranquila o una complementaria si necesitas un acento claro frente a una base dominante. Ambas limitan los candidatos y son fáciles de explicar. Una tríada ayuda cuando existen tres categorías o roles de personaje reales, pero exige más jerarquía. La elección debe seguir el trabajo, no una clasificación universal de armonías.
¿Los colores opuestos siempre tienen mucho contraste?
cómo usar una rueda de color: No. Los ángulos opuestos forman una relación complementaria, no una relación garantizada de luminancia. Un rojo y un verde intensos pueden fallar como par de texto o confundirse bajo una condición de visión del color. Ajusta luminosidad y saturación, mide el primer plano contra el fondo final y repite el significado con etiquetas, formas, iconos o patrones.