Cómo elegir una paleta de color: guía paso a paso

Nunca jamás he empezado una paleta abriendo un selector de color y buscando "colores bonitos". Esa es la vía más rápida al problema exacto que esta guía existe para resolver: una pantalla llena de colores individualmente preciosos que no tienen razón para estar juntos. Elegir una paleta es un proceso, no un momento de inspiración, y el proceso es repetible. Hazlo en el mismo orden cada vez y obtendrás un esquema coherente y accesible en quince minutos en lugar de tres días ajustando valores hex.

Lo que sigue es el flujo de trabajo que de verdad uso, de principio a fin, con códigos hex reales y las concesiones de cada paso. Puedes ejecutarlo todo con una rueda de color y un verificador de contraste; señalaré dónde el generador de paletas de color hace la aritmética por ti, pero el método importa más que la herramienta.

Paso 1: Decide de dónde viene la paleta

Antes de elegir un solo color, responde a una pregunta: ¿qué ancla esta paleta? Solo hay cuatro respuestas honestas, y lo cambian todo aguas abajo.

• Marca. Ya tienes un color de logo, un primario fijo o la identidad existente de un cliente. La paleta tiene que vivir alrededor de un tono que no te toca elegir. Es el caso más común en el mundo real y el más restringido.
• Ambiente. Quieres que el producto transmita una sensación concreta: confianza, energía, calma, lujo. Aquí estás eligiendo colores para el diseño primero por la emoción, después por el tono. Una app fintech tiende a lo frío y contenido; una app de aprendizaje para niños tiende a lo cálido y saturado.
• Contenido. El propio producto lo dicta. Un porfolio de fotografía quiere un cromo casi neutro para que la obra aporte el color. Un dashboard de datos necesita un conjunto de colores de categoría distinguibles más que necesita una vibra.
• Un color ancla. Te has enamorado de un hex específico —digamos un verde azulado profundo #0F766E— y construyes hacia afuera a partir de él.

La mayoría de la gente se salta este paso y recurre en silencio por defecto a "color ancla" sin reconocerlo, lo cual está bien si es una elección deliberada. La trampa es elegir un color de ambiente emocionalmente y luego descubrir que pelea con tu marca. Nombra tu punto de partida en voz alta. Si es ambiente, merece la pena leer la psicología del color en el branding antes de comprometerte, porque las asociaciones son más específicas culturalmente de lo que la gente supone.

Paso 2: Elige un tono base y fíjalo

Sea cual sea tu punto de partida, redúcelo a un único tono base. Un color. Esta es la semilla de la que crece todo lo demás, y tratar de elegir tres o cuatro colores "principales" a la vez es precisamente por lo que las paletas salen mal: no hay columna vertebral.

Si tienes un color de marca, ese es tu base. Si trabajas desde el ambiente, elige el tono que carga con la sensación: azules y verdes azulados fríos para calma y confianza, naranjas y rojos cálidos para energía (la distinción entre cálido y frío es la palanca más rápida que tienes sobre el ambiente). Luego fija su HSL, porque el tono, la saturación y la luminosidad son los tres diales que realmente girarás durante el resto del proceso. Una base como #2563EB es aproximadamente H 217, S 91, L 60: un azul saturado, de medio-claro.

Aquí pienso deliberadamente en HSL en lugar de en hex, porque las reglas de armonía del siguiente paso son angulares: todas tratan de rotar el valor H alrededor de una rueda de 360 grados. Si hex, RGB y HSL todavía te parecen intercambiables, este desglose de los tres formatos merece diez minutos; HSL es el que hace intuitiva la construcción de paletas.

Paso 3: Elige una regla de armonía para *esta* situación

Ahora rotas alrededor de la rueda para encontrar colores que se relacionen con tu base por una distancia geométrica fija. Eso es todo lo que es una regla de armonía: una receta para elegir puntos en el círculo a ángulos específicos, de modo que el ojo los lea como una familia y no como un accidente. Hay siete reglas clásicas, y la verdad honesta es que la mayoría de las veces solo necesitas dos o tres de ellas.

Así es como elijo de verdad, por situación en lugar de listando definiciones:

• Sitio de marketing, página de aterrizaje o cualquier cosa que necesite una llamada a la acción segura: empieza con complementario (base más su opuesto a 180 grados) o, mejor, complementario dividido (los dos tonos que flanquean ese opuesto). El complementario te da el máximo contraste para un botón que tiene que destacar; el complementario dividido te da la mayor parte de ese impacto con menos fatiga visual y un segundo acento gratis.
• App con mucho contenido, dashboard o experiencia de lectura: ve a por el análogo: dos o tres vecinos dentro de unos 30 grados, como #0EA5E9 a #0D9488. Es tranquilo y casi imposible de afear. El coste es el contraste, así que normalmente tomarás prestado un tono opuesto puramente para la CTA.
• **Necesitas colores que carguen con significados distintos (éxito, advertencia, error; o categorías de gráfico): tríadico (tres tonos a 120 grados) o cuadrado** (cuatro a 90 grados). Índigo #6366F1, esmeralda #10B981, ámbar #F59E0B es una tríada haciendo trabajo semántico.
• Un producto de marca única que debe sentirse inequívocamente "de un solo color": monocromático: un tono expandido a lo largo de la luminosidad y la saturación.

Mi recomendación por defecto para una primera paleta seria es el complementario dividido, por exactamente las razones de esta comparación con el tríadico: es más indulgente que el complementario directo y más contenido que un esquema de tres tonos. Si quieres la geometría completa de cada regla, entender la armonía de color en el diseño de interfaces expone las siete. Ajusta la rueda a tu regla elegida, y el generador escupirá los códigos hex relacionados al instante; pero ahora sabes por qué aparecieron esos colores en concreto.

Paso 4: Asigna proporciones antes de asignar colores

Este es el paso que separa las paletas que funcionan de las que solo "combinan", y es el que casi todo el mundo se salta. La armonía te dice qué colores tienen permiso para estar en la sala. No dice nada sobre cuánto usar de cada uno, y tres colores perfectamente armoniosos usados en cantidades iguales son su propio tipo de fealdad: una discusión equilibrada donde todos gritan al mismo volumen.

Asigna roles usando aproximadamente una división 60/30/10:

• Dominante (~60 %) es tu columna vertebral: superficies de página, grandes rellenos, el color en el que el ojo aterriza más. Algo crucial: normalmente este no es tu tono base saturado. Es un casi-neutro derivado de él: un blanco roto tintado como #F8FAFC para modo claro, o un oscuro desaturado como #1E293B.
• Secundario (~30 %) lo apoya: fondos de sección, tarjetas, botones secundarios, estados de hover. Este carga con más de tu tono real.
• Acento (~10 %, e idealmente mucho menos) es el ruidoso: el botón primario, la pestaña activa, el punto de notificación. Aquí es donde vive tu color base saturado o su complementario. Cuanto más raro lo hagas, más fuerte trabaja.

El error más común que veo, con diferencia, es usar los tonos armoniosos a plena saturación en grandes áreas. Tu base #2563EB es preciosa en un botón y agotadora como fondo a página completa. Las grandes superficies quieren la versión desaturada y aclarada; el tono puro se reserva para el 10 %. Si quieres las proporciones explicadas en profundidad, la regla 60/30/10 va más allá, pero el titular es simple: elige tus colores y luego decide sin piedad con cuán poco del ruidoso puedes apañártelas.

Paso 5: Comprueba el contraste; la armonía no garantiza la legibilidad

Aquí está el hecho que pilla a la gente: la rueda de color no dice nada sobre el contraste. Dos colores pueden ser perfectamente armoniosos y completamente ilegibles juntos. La armonía y la accesibilidad son problemas independientes, y tienes que resolver ambos.

Pasa cada combinación de texto-sobre-fondo y de elemento de interfaz por un verificador de contraste. Los objetivos, directamente del W3C, no son negociables si te importan tus usuarios:

• 4,5:1 como mínimo para el texto de cuerpo normal contra su fondo.
• 3:1 para el texto grande (aproximadamente 18pt, o 14pt en negrita) y para el resto.
• 3:1 para componentes de interfaz y gráficos con significado —contornos de botón, bordes de formulario, iconos— contra los colores adyacentes.

Estos son valores umbral, así que no redondees hacia arriba: un 4.49:1 calculado no supera la barra de 4,5:1. El verificador WCAG del generador lo señala en vivo a medida que emparejas colores, que es el momento de descubrir que tu preciosa combinación de acento-sobre-secundario es ilegible, no después de haberla publicado. Para la imagen completa de AA frente a AAA y de dónde salen los ratios, consulta los ratios de contraste WCAG explicados y el canónico criterio de éxito 1.4.3 de la WCAG.

Una comprobación más que no cuesta nada: no dejes que el color sea lo único que carga con el significado. Aproximadamente 1 de cada 12 hombres tiene alguna forma de deficiencia en la visión del color, lo más común el rojo-verde, así que un error rojo y un éxito verde que solo difieren en el tono son invisibles para una porción real de tu audiencia. Acompaña el color con un icono, una etiqueta o una posición. Un enfoque amigable con el daltonismo va sobre todo de redundancia, no de evitar colores.

Paso 6: Pruébalo en contexto real, luego itera

Las muestras mienten. Una paleta que se ve equilibrada como cinco rectángulos uno al lado del otro se comporta de forma completamente distinta una vez que es una maqueta real, porque el área, la adyacencia y la cantidad de espacio en blanco cambian cómo se leen los colores. El ejemplo clásico: un acento que se ve manso como una pequeña ficha se vuelve abrumador como un banner a todo lo ancho, y una pareja que superó el contraste como bloques grandes falla una vez que el texto es de 14px.

Así que antes de comprometerte, suelta la paleta en algo que se parezca al producto real: un botón, una tarjeta, una cabecera, un párrafo de texto real. Míralo en la pantalla de un móvil barato a la luz del día, no solo en tu monitor calibrado. Luego itera ajustando saturación y luminosidad, casi nunca el tono. Si algo se siente raro, tu armonía suele estar bien; son las proporciones o los valores tonales los que necesitan trabajo. Aclara el dominante, quítale saturación a una superficie, profundiza un acento hasta que el contraste pase.

Si estás construyendo para claro y oscuro a la vez, planifícalo ahora en lugar de invertir después: el modo oscuro no es "la misma paleta volteada", y las paletas de color para modo oscuro explica por qué importa desaturar tus acentos para fondos oscuros. Y en el momento en que tu paleta supere un puñado de muestras, gradúa cada color a una escala tonal en condiciones y nómbralos por rol, que es toda la premisa de los tokens de color escalables.

La versión corta

Elegir una paleta son seis decisiones en orden, no una conjetura afortunada. Nombra tu punto de partida. Redúcelo a un solo tono base. Rota la rueda con una regla de armonía que encaje con el trabajo: complementario dividido si tienes dudas. Asigna proporciones 60/30/10 antes de enamorarte de cualquier color. Comprueba el contraste contra los números de la WCAG, porque la rueda no lo hará. Luego pruébalo en una maqueta real y ajusta la luminosidad, no el tono.

Haz eso en secuencia y el problema de "cómo escoger colores que combinen" se disuelve en gran medida; no porque hayas tenido suerte con el gusto, sino porque cada color del conjunto se ganó su lugar por relación, rol y ratio. Esa es la diferencia entre una paleta y un montón de colores que resultan ser bonitos.