1. Introducción al Color en Diseño y Branding

El color es uno de los elementos más potentes del diseño. Afecta a la visibilidad, la percepción, el estado de ánimo del usuario y, en última instancia, a la efectividad de un producto digital o físico.

¿Por qué es crucial dominarlo?

✅ Legibilidad: Facilita el consumo de información.
✅ Jerarquía visual: Guía el ojo del usuario a lo importante.
✅ Identidad de marca: Crea reconocimiento inmediato (piensa en el rojo de Coca-Cola).
✅ Conversión: Un botón bien coloreado se pulsa más.

Esta guía está diseñada para llevarte desde los fundamentos hasta la aplicación profesional.

2. Fundamentos Teóricos del Color

2.1 El Círculo Cromático

La herramienta base de todo diseñador. Organiza los colores para entender sus relaciones:

Primarios
Rojo, Amarillo, Azul
Secundarios
Verde, Naranja, Violeta
Terciarios
Mezclas intermedias

2.2 El Modelo HSL (La Clave Digital)

Olvídate de adivinar códigos HEX. Para diseñar interfaces coherentes, usa HSL:

Valor	Descripción	Rango
H (Hue)	El "color" puro o matiz.	0° - 360°
S (Saturation)	Intensidad. De gris a vívido.	0% - 100%
L (Lightness)	Luz. De negro a blanco.	0% - 100%

💡 Pro Tip: Para crear estados hover, simplemente reduce 'L' (Lightness) un 10-15% manteniendo el mismo 'H' y 'S'.

2

Selecciona Regla de Armonía:

Complementario: Alto contraste. Ideal para llamadas a la acción.

3. Sistemas de Color: Pantalla vs Impresión

Elegir el sistema incorrecto puede arruinar tu diseño. Aquí la comparativa definitiva:

Sistema	Tipo	Uso Principal	Características
RGB	Aditivo (Luz)	Pantallas, Web, App	Millones de colores. Posibles neones.
CMYK	Sustractivo (Tinta)	Impresión, Packaging	Rango limitado. Sin neones. Negro (K) ahorra tinta.
HEX	Código	CSS / HTML	Sintaxis corta para RGB (#FF0000).
LAB	Perceptual	Software Pro	Independiente del dispositivo. Cómo ve el ojo humano.

Tokens del Sistema de Diseño

Vista Previa UI

Card Component

This component consumes design tokens. Change the theme to see how semantic values update automatically.

ID: #8821

Estructura de Tokens (JSON)

{
  "theme": "light",
  "tokens": {
    "primary-main": "#3B82F6",
    "bg-surface": "#FFFFFF",
    "text-primary": "#1F2937",
    "text-secondary": "#6B7280",
    "border-subtle": "#E5E7EB"
  }
}

4. Armonías de Color Profesionales

Las armonías son fórmulas matemáticas basadas en el círculo cromático para combinar colores sin error. Cada tipo crea una sensación diferente:

🎨 Monocromática

Un solo matiz (Hue) con variaciones de saturación y luminosidad. La más segura y elegante.

Fórmula: Mismo H, variar S y L
Base: hsl(220, 80%, 50%) → Claro: hsl(220, 60%, 80%) → Oscuro: hsl(220, 90%, 30%)

Ideal para: Apps minimalistas, dashboards, interfaces corporativas

Marcas: Facebook, LinkedIn, Dropbox

Ejemplo: Azul Corporativo

🌿 Análoga

Colores vecinos en el círculo (±30°). Crea armonía natural sin tensión visual.

Fórmula: H base ± 30°
Base: 120° (verde) → 90° (verde-amarillo) → 150° (verde-azul)

Ideal para: Naturaleza, bienestar, apps de meditación, ecología

Marcas: Spotify (verde-negro), BP, Animal Planet

Ejemplo: Bosque

⚡ Complementaria

Colores opuestos en el círculo (180°). Máximo contraste y tensión visual. Perfecta para CTAs.

Fórmula: H base + 180°
Azul: 220° → Naranja: 40° | Rojo: 0° → Cyan: 180°

Ideal para: Botones de acción, ofertas, llamadas a la acción

Marcas: Firefox (naranja/azul), IKEA (amarillo/azul), Lakers

⚠️ Cuidado: No uses ambos colores al 50%. Usa 80% dominante + 20% acento.

Ejemplo: Azul + Naranja

🔺 Triádica

Tres colores equidistantes (120° entre sí). Vibrante, equilibrada y dinámica.

Fórmula: H, H+120°, H+240°
Rojo: 0° → Verde: 120° → Azul: 240° (RGB primarios)

Ideal para: Marcas juveniles, juegos, entretenimiento, creatividad

Marcas: Google, Burger King, Superman

Ejemplo: Primarios

🔀 Split-Complementaria

El color base + los dos adyacentes a su complementario. Contraste alto pero más sutil.

Fórmula: H, H+150°, H+210°
Azul: 220° → Naranja-rojo: 10° → Amarillo-naranja: 50°

Ideal para: Cuando complementaria es demasiado agresiva

Marcas: FedEx, Fanta, Mozilla

Ejemplo: Azul Split

◆ Tetrádica (Cuadrada)

Cuatro colores equidistantes (90° entre sí). Muy rica pero difícil de equilibrar.

Fórmula: H, H+90°, H+180°, H+270°
Rojo: 0° → Amarillo-verde: 90° → Cyan: 180° → Violeta: 270°

Ideal para: Ilustraciones, juegos, interfaces muy coloridas

Marcas: eBay, Windows (antiguo), NBC

⚠️ Consejo: Elige 1 dominante, 1 secundario, 2 acentos. Nunca uses los 4 al mismo peso.

Ejemplo: Cuadrada

💡 Regla de Oro para Armonías

Independientemente de la armonía que elijas, siempre aplica la Regla 60-30-10:

• 60% - Color dominante (fondos, áreas grandes)
• 30% - Color secundario (elementos de soporte)
• 10% - Color de acento (CTAs, highlights)

5. Psicología Estratégica del Color

El color modifica la intención de compra, la confianza y las emociones del usuario. Estudios demuestran que hasta el 90% de las decisiones de compra rápidas se basan en el color.

Azul

Confianza • Seguridad • Profesionalismo

Reduce el ritmo cardíaco un 5-10%. El color más popular del mundo (40% lo elige como favorito).

✅ Usar en: Fintech, bancos, salud, corporativo, tech

❌ Evitar en: Comida (suprime apetito), urgencia

🏢 Marcas: Facebook, PayPal, IBM, Samsung, Ford

Rojo

Urgencia • Pasión • Apetito • Energía

Aumenta el pulso un 9%. Estimula el apetito y crea sensación de urgencia.

✅ Usar en: CTAs, ofertas, comida rápida, entretenimiento

❌ Evitar en: Salud, finanzas, apps de calma

🏢 Marcas: Netflix, YouTube, Coca-Cola, McDonald's

Verde

Naturaleza • Salud • Dinero • Crecimiento

El color más fácil de procesar para el ojo humano. Asociado con "ir adelante" (semáforos).

✅ Usar en: Eco, salud, finanzas, éxito, confirmación

❌ Evitar en: Lujo, urgencia, industria pesada

🏢 Marcas: Spotify, WhatsApp, Starbucks, BP

Amarillo

Optimismo • Alegría • Atención • Precaución

El color más visible. Activa la ansiedad en exceso. Perfecto para captar atención.

✅ Usar en: Ofertas, warnings, infantil, creatividad

❌ Evitar en: Textos largos, fondos grandes, lujo

🏢 Marcas: IKEA, McDonald's, Snapchat, DHL

Naranja

Entusiasmo • Creatividad • Accesibilidad

Combina la energía del rojo con la alegría del amarillo. Muy efectivo en CTAs.

✅ Usar en: CTAs, suscripciones, deportes, juvenil

❌ Evitar en: Lujo, corporativo serio, finanzas

🏢 Marcas: Amazon (botón), Fanta, Firefox, Nickelodeon

Púrpura

Lujo • Creatividad • Sabiduría • Misterio

Históricamente el color más caro (tinte de caracol). Asociado con realeza y premium.

✅ Usar en: Belleza, lujo, creatividad, espiritualidad

❌ Evitar en: Agricultura, deportes, comida

🏢 Marcas: Twitch, Cadbury, Hallmark, Yahoo

Rosa

Romance • Dulzura • Feminidad • Juventud

Tiene efecto calmante comprobado. "Baker-Miller Pink" reduce agresividad en prisiones.

✅ Usar en: Belleza, moda, romance, dulces, infantil

❌ Evitar en: B2B, finanzas, industria, masculino

🏢 Marcas: Barbie, Victoria's Secret, T-Mobile, Lyft

Negro

Lujo • Elegancia • Poder • Sofisticación

Ausencia de color = ausencia de ruido. Justifica precios premium hasta un 20% más.

✅ Usar en: Lujo, moda, tech premium, tipografía

❌ Evitar en: Infantil, salud, eco, accesibilidad

🏢 Marcas: Apple, Chanel, Nike, Uber, Prada

📊 Datos Científicos

• El 85% de los consumidores citan el color como razón principal de compra
• El color aumenta el reconocimiento de marca un 80%
• Los anuncios en color son leídos un 42% más que en B/N
• El color correcto puede aumentar conversiones hasta un 24%

Mapa Emocional del Color

Azul

El color favorito del mundo. No amenazante y profesional.

EmocionesConfianza, Calma, Estabilidad, Lógica

Mejor para SectoresFinanzas, Tecnología, Salud

6. Construcción de Paletas UI

Para UI, necesitas más de 5 colores. Necesitas un Sistema:

1. Color Primario (Brand)

El color principal de la marca. Úsalo en cabeceras y elementos clave, pero no satures.

2. Color de Acento (Action)

Reservado para la acción principal (Botón "Comprar"). Debe contrastar mucho con el primario.

3. Escala de Neutros (Estructura)

Lo más importante. Necesitas al menos 5-9 tonos de gris para bordes, fondos, textos secundarios y sombras.

4. Paleta Semántica (Feedback)

Verde (Éxito), Rojo (Error), Amarillo (Aviso). Asegura que no choquen con tu marca.

7. Color en Diseño Web y UI/UX

7.1 Regla 60-30-10

Equilibrio perfecto: 60% Neutro (Fondo), 30% Primario (Marca), 10% Acento (CTA).

7.2 Modos Claro y Oscuro

No inviertas los colores tal cual. En modo oscuro, evita el negro puro (#000000) para evitar "smearing", usa grises muy oscuros (#121212). Desatura los colores brillantes para no cansar la vista.

8. Accesibilidad: Diseñar para Todos

La accesibilidad no es un "extra", es un requisito legal y ético (WCAG 2.2).

Ratios de Contraste Mínimos

Texto Normal 4.5:1
Texto Grande / Bold 3:1
UI (Bordes inputs) 3:1

Daltonismo

El 8% de los hombres tienen alguna deficiencia visual. Evita:

❌ Rojo sobre Verde
❌ Verde sobre Rojo
❌ Azul sobre Amarillo (menos común)

👉 Regla de Oro: Nunca uses el color como única forma de transmitir información crítica. Acompáñalo de un icono o texto.

Simulador de Contraste

Color de Texto

Color de Fondo

Texto de Ejemplo

Pequeño texto de detalle

RATIO

21.00:1

AA

AAA

9. Mantenimiento y Naming Semántico

El mayor error en equipos grandes es nombrar colores por su apariencia. Usa Tokens Semánticos:

Nivel	Mal Nombre ❌	Buen Nombre ✅	Por qué
Base	`#0055FF`	`blue-500`	Abstrae el valor HEX.
Semántico	`$blue-500`	`$primary-main`	Permite cambiar el branding a rojo sin renombrar variables.
Componente	`$red-error`	`$button-bg-danger`	Contexto específico del componente.

10. Errores Comunes a Evitar

❌
Demasiados Colores: Más de 3-4 colores principales crean ruido visual y confusión.
❌
Negro Puro (#000000): En pantallas modernas, el contraste con blanco es doloroso. Usa gris oscuro (#111111).
❌
Texto Gris Claro: El gris #999 o más claro sobre blanco suele ser ilegible en pantallas con brillo bajo.

11. Casos de Uso Reales

🛒

E-commerce

Necesitas confianza (Azul/Negro) y urgencia (Naranja/Rojo). El fondo debe ser limpio (blanco) para que el producto resalte. Amazon es el rey aquí.

🏥

Salud / Farma

Verdes azulados (Teal), azules claros y mucho blanco. Transmiten higiene, calma y esperanza. Evita rojos sangre o negros oscuros.

⚡

Tech / SaaS

Morados oscuros, gradientes neón y Modo Oscuro por defecto. Transmiten innovación, modernidad y "high-tech".

Caso Práctico: E-commerce de Moda

Problema: Botones con bajo contraste y precios ilegibles.

👟

NUEVO

Ultra Run Pro 2025

Zapatillas de running de alto rendimiento.

Precio

$129.99

Análisis:

Ratio de contraste 1.4:1 (Falla). El precio amarillo y el botón cyan con texto blanco son invisibles para muchos usuarios.

12. Recursos Descargables

Hemos preparado materiales para acelerar tu flujo de trabajo:

📄

Design System Template (Figma)

Plantilla con estilos de color, tipografía y sombras predefinidos.

📊

WCAG Contrast Cheatsheet (PDF)

Guía rápida de referencia para ratios de contraste AA y AAA.

13. Flujo de Trabajo con PaletaColor Pro

Optimiza tu tiempo usando nuestra herramienta en el orden correcto:

1
Generar Base

Usa el Generador IA o extrae de una imagen para obtener tus 5 colores base.
2
Auditar Accesibilidad

Ve a la pestaña "Accesibilidad" y verifica si hay errores de contraste.
3
Exportar Código

Copia el CSS, Tailwind Config o descarga el PDF para entregar a tu cliente.

14. Glosario Técnico de Color (Bonus)

Gamut: El rango total de colores que un dispositivo puede mostrar. sRGB es el estándar web, P3 es más amplio (Apple), y Adobe RGB es para impresión.
Dithering: Técnica para simular colores no disponibles mezclando píxeles de colores disponibles. Evita el "banding" en degradados.
Banding: Efecto visual indeseado en degradados donde se ven "franjas" de color en lugar de una transición suave.
Anti-aliasing: Suavizado de bordes en tipografía y vectores usando píxeles semitransparentes.

15. Checklist Final para Diseñadores

¿Tengo un color primario claro? ¿He definido mis neutros (grises) para textos y fondos? ¿Los contrastes cumplen WCAG AA (4.5:1)? ¿He definido estados (hover, active, focus) para botones? ¿Funciona bien en Modo Oscuro? ¿He usado naming semántico para mis variables?

📝 Checklist de Validación

Marca todos los puntos antes de publicar tu diseño.

16. Explorador de Emociones y Color

Cada color evoca emociones específicas. Usa este explorador interactivo para descubrir qué colores transmiten cada emoción:

💡 Cómo usar el explorador

• Selecciona una emoción para ver qué colores la transmiten mejor
• Pasa el cursor sobre un color para ver su perfil emocional completo
• Usa esta información para elegir colores que refuercen el mensaje de tu marca

Explorador Color-Emoción

Pasa el cursor sobre los colores para ver su impacto emocional, o filtra por emoción

Filtrar por Emoción

Pasa el cursor sobre un color para ver su desglose de intensidad emocional

17. Quiz: ¿Cuánto sabes de Psicología del Color?

Pon a prueba tus conocimientos con este quiz interactivo. ¿Eres un experto en psicología del color?

🎯 Objetivo del Quiz

10 preguntas sobre psicología del color, datos científicos y aplicaciones en marketing. Al final verás tu puntuación y las explicaciones de cada respuesta.

Quiz de Psicología del Color

0/10

Pregunta 1 de 10

¿Qué color aumenta el ritmo cardíaco aproximadamente un 9%?

18. Analizador de Colores de Marcas Famosas

Aprende de los mejores. Analiza las estrategias de color de las marcas más exitosas del mundo:

🥤

Coca-Cola

📘

Facebook

🎵

Spotify

🍎

Apple

Busca cualquier marca famosa y descubre por qué eligieron esos colores específicos.

Analizador de Colores de Marca

Descubre la psicología detrás de los colores de marcas famosas

Marcas Populares

Selecciona una marca arriba para analizar su estrategia de color

19. Tendencias de Color 2025-2026

Las tendencias de color evolucionan cada año. Aquí las más relevantes para diseño digital en 2025-2026:

Mocha Mousse (Pantone 2025)

El color del año de Pantone 2025. Un marrón cálido y acogedor que evoca confort, sofisticación y conexión con la naturaleza. Perfecto para marcas que buscan transmitir autenticidad.

Gradientes Aurora

Degradados inspirados en auroras boreales con transiciones suaves entre azules, púrpuras y rosas. Vercel, Linear y Raycast lideran esta tendencia.

Dark Mode 2.0

Evolución del modo oscuro con capas de profundidad, sutiles gradientes y colores de acento más vibrantes. Ya no es solo negro, sino composiciones ricas.

Tech Green

Verdes tecnológicos y sostenibles dominan las interfaces de IA, fintech y apps eco-friendly. Transmiten innovación responsable.

Warm Metallics

Dorados, cobres y bronces cálidos para transmitir premium y exclusividad. Muy usados en apps de finanzas y lujo.

Soft Pastels AI

Pasteles suaves y etéreos dominan las interfaces de IA generativa. ChatGPT, Claude y Midjourney usan paletas calmadas que transmiten inteligencia sin intimidar.

Gradientes Cónicos

Los gradientes radiales y cónicos ganan terreno frente a los lineales. Crean efectos de luz más naturales y dinámicos.

🔮 Predicción 2026

Se espera que los colores generados por IA y las paletas adaptativas (que cambian según el contexto del usuario) sean la próxima gran tendencia.

20. Color y Cultura: Significados Globales

El mismo color puede significar cosas opuestas en diferentes culturas. Crucial para marcas globales:

Color	Occidente	China	India	Medio Oriente
Rojo	Peligro, Pasión	Suerte, Prosperidad	Pureza, Fertilidad	Peligro, Precaución
Blanco	Pureza, Bodas	Luto, Muerte	Paz, Pureza	Pureza, Paz
Amarillo	Alegría, Precaución	Realeza, Poder	Comercio, Sagrado	Felicidad, Prosperidad
Verde	Naturaleza, Dinero	Infidelidad	Fertilidad, Islam	Sagrado, Islam
Negro	Luto, Elegancia	Poder, Misterio	Maldad, Negatividad	Misterio, Renacimiento

⚠️ Consejo para Marcas Globales

Antes de lanzar en un nuevo mercado, investiga los significados culturales de tus colores. Un color que funciona en Europa puede ser ofensivo en Asia.

21. El Arte de los Gradientes

Los degradados añaden profundidad y modernidad. Pero hay reglas para usarlos bien:

✅ Buenas Prácticas

• Usa colores análogos (vecinos en el círculo cromático)
• Máximo 3 colores por degradado
• Añade un punto medio para transiciones suaves
• Usa ángulos de 45° o 135° para dinamismo

❌ Errores Comunes

• Mezclar colores complementarios (crean marrón/gris)
• Usar degradados en textos pequeños
• Demasiados colores = arcoíris caótico
• Ignorar el contraste con el texto encima

Análogo ✅

Cálido ✅

Frío ✅

Complementario ❌

22. Diseño Inclusivo: Más Allá del Daltonismo

El 8% de los hombres y el 0.5% de las mujeres tienen algún tipo de daltonismo. Pero hay más condiciones visuales a considerar:

Protanopia (1% hombres)

No perciben el rojo. Lo ven como verde oscuro o marrón.

Deuteranopia (6% hombres)

No perciben el verde. El más común. Confunden rojo y verde.

Tritanopia (0.01%)

No perciben el azul. Muy raro. Confunden azul y amarillo.

Acromatopsia (0.003%)

Ceguera total al color. Solo ven en escala de grises.

🎯 Regla de Oro

Nunca uses solo el color para transmitir información crítica. Acompaña siempre con iconos, patrones o texto.

Simulador de Visión

Modo de Visión

Confirmar

Cancelar

Info

Alerta

Visualización Simulada

24. Generador de Armonías en Vivo

Experimenta con las armonías de color en tiempo real. Selecciona un color base y observa cómo se generan automáticamente todas las combinaciones armónicas:

🎯 Cómo usar este generador

• Selecciona un color base con el selector o escribe un código HEX
• Filtra por tipo de armonía o visualiza todas a la vez
• Haz clic en cualquier color para copiarlo
• Copia las variables CSS generadas automáticamente

Color Base

Tipo de Armonía

Complementaria

Opuesto en el círculo (180°)

#3B82F6#F6AF3B

Análoga

Vecinos en el círculo (±30°)

#3BDFF6#3B82F6#513BF6

Triádica

Tres equidistantes (120°)

#3B82F6#F63B82#82F63B

Split-Complementaria

Base + adyacentes al complemento

#3B82F6#F6513B#DFF63B

Tetrádica

Cuatro equidistantes (90°)

#3B82F6#F63BDF#F6AF3B#3BF651

Monocromática

Mismo tono, diferente luminosidad

#CDDFFD#84B1F9#3B82F6#0A59DA#073B91

CSS Variables

:root {
  /* Complementaria */
  --complementary-1: #3B82F6;
  --complementary-2: #f6af3b;

  /* Análoga */
  --analogous-1: #3bdff6;
  --analogous-2: #3B82F6;
  --analogous-3: #513bf6;

  /* Triádica */
  --triadic-1: #3B82F6;
  --triadic-2: #f63b82;
  --triadic-3: #82f63b;

  /* Split-Complementaria */
  --splitComplementary-1: #3B82F6;
  --splitComplementary-2: #f6513b;
  --splitComplementary-3: #dff63b;

  /* Tetrádica */
  --tetradic-1: #3B82F6;
  --tetradic-2: #f63bdf;
  --tetradic-3: #f6af3b;
  --tetradic-4: #3bf651;

  /* Monocromática */
  --monochromatic-1: #cddffd;
  --monochromatic-2: #84b1f9;
  --monochromatic-3: #3B82F6;
  --monochromatic-4: #0a59da;
  --monochromatic-5: #073b91;
}

25. Simulador Regla 60-30-10

La regla 60-30-10 es el secreto de los diseñadores profesionales para crear interfaces equilibradas. Experimenta con diferentes combinaciones y ve el resultado en tiempo real:

60%

Dominante

Fondos, áreas grandes

30%

Secundario

Marca, cabeceras

10%

Acento

CTAs, highlights

60%

Dominante

Fondos, áreas grandes

30%

Secundario

Marca, cabeceras, tarjetas

10%

Acento

CTAs, destacados, alertas

Presets Rápidos

Tipo de Vista

Proporción Visual

60%

30%

10%

Brand

FuncionesPreciosNosotros

Crea algo increíble

La mejor plataforma para dar vida a tus ideas con herramientas potentes.

26. Color en Visualización de Datos

Las visualizaciones de datos requieren paletas especiales. Un color mal elegido puede distorsionar la interpretación de los datos:

⚠️ Importante

En visualización de datos, el color no es decoración. Cada elección de color comunica información y puede afectar cómo los usuarios interpretan los datos.

📊

Categóricas

Grupos distintos

📈

Secuenciales

Bajo → Alto

↔️

Divergentes

Punto medio

🎯

Semánticas

Significado fijo

Para categorías distintas. Los colores deben ser fácilmente distinguibles.

Vibrante (Alto Contraste)

Dashboards, gráficos de tarta, leyendas

#3B82F6

#EF4444

#22C55E

#F59E0B

#8B5CF6

#EC4899

#06B6D4

#F97316

Vista previa

Pastel (Suave)

Fondos claros, infografías

#93C5FD

#FCA5A5

#86EFAC

#FCD34D

#C4B5FD

#F9A8D4

#67E8F9

#FDBA74

Vista previa

Seguro para Daltónicos

Visualizaciones accesibles

#0077BB

#EE7733

#009988

#CC3311

#33BBEE

#EE3377

#BBBBBB

#000000

Vista previa

✅ Buenas Prácticas

• Limitar a 6-8 colores máximo
• Probar con simuladores de daltonismo
• Usar colores consistentes entre gráficos
• Añadir patrones para accesibilidad

❌ Errores Comunes

• Paletas arcoíris (difíciles de leer)
• Solo rojo/verde para estados
• Demasiados colores similares
• Ignorar significados culturales

27. Micro-interacciones con Color

Los estados de un botón (hover, active, focus, disabled) no son aleatorios. Siguen reglas matemáticas basadas en el color base:

🔬 La ciencia detrás de los estados

Hover: Oscurecer 8-10% (reducir Lightness en HSL)
Active: Oscurecer 15% (el usuario está presionando)
Focus: Anillo con 50% saturación del color base
Disabled: Reducir saturación 70%, aumentar luminosidad 20%

Usa el generador interactivo para crear estados consistentes para cualquier color:

Color Base

Default

#3B82F6

Hover

#1469f4

Active

#0a59da

Focus

#c7d5ea

Disabled

#bdc8da

Prueba a interactuar con este botón:

CSS

/* Button States */
.btn-primary {
  background-color: #3B82F6;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background-color: #1469f4;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #3B82F640;
}

.btn-primary:active {
  background-color: #0a59da;
  transform: translateY(0);
}

.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #c7d5ea;
}

.btn-primary:disabled {
  background-color: #bdc8da;
  color: #8695ac;
  cursor: not-allowed;
}

Tailwind CSS

<!-- Tailwind CSS -->
<button class="
  bg-[#3B82F6]
  hover:bg-[#1469f4]
  active:bg-[#0a59da]
  focus-visible:ring-4
  focus-visible:ring-[#c7d5ea]
  disabled:bg-[#bdc8da]
  disabled:text-[#8695ac]
  transition-all duration-200
  hover:-translate-y-0.5
  active:translate-y-0
">
  Button
</button>

Hover

Oscurecer 8-10% y añadir elevación sutil (-1px) con sombra.

Focus

Usar un anillo de 3-4px con 50% de saturación del color base.

Disabled

Reducir saturación 70% y aumentar luminosidad 20%.

28. Herramientas Profesionales Recomendadas

Las mejores herramientas para trabajar con color como un profesional:

🎨 Generación de Paletas

• PaletaColor Pro - Esta herramienta 😉
• Coolors - Generador rápido
• Adobe Color - Integración con CC
• Khroma - IA para preferencias

♿ Accesibilidad

• Contrast Checker - WebAIM
• Stark - Plugin Figma/Sketch
• Color Oracle - Simulador daltonismo
• axe DevTools - Auditoría web

📊 Análisis de Color

• ImageColorPicker - Extracción de imagen
• ColorZilla - Extensión navegador
• Sip - macOS color picker
• Just Color Picker - Windows

🔧 Design Systems

• Figma Tokens - Variables de color
• Style Dictionary - Tokens multiplataforma
• Tailwind CSS - Utilidades de color
• Open Props - CSS custom properties

La Súper Guía del Color

1. Introducción al Color en Diseño y Branding

¿Por qué es crucial dominarlo?

2. Fundamentos Teóricos del Color

2.1 El Círculo Cromático

2.2 El Modelo HSL (La Clave Digital)

Selecciona Regla de Armonía:

3. Sistemas de Color: Pantalla vs Impresión

Tokens del Sistema de Diseño

Card Component

4. Armonías de Color Profesionales

🎨 Monocromática

🌿 Análoga

⚡ Complementaria

🔺 Triádica

🔀 Split-Complementaria

◆ Tetrádica (Cuadrada)

💡 Regla de Oro para Armonías

5. Psicología Estratégica del Color

Azul

Rojo

Verde

Amarillo

Naranja

Púrpura

Rosa

Negro

📊 Datos Científicos

Mapa Emocional del Color

Azul

6. Construcción de Paletas UI

1. Color Primario (Brand)

2. Color de Acento (Action)

3. Escala de Neutros (Estructura)

4. Paleta Semántica (Feedback)

7. Color en Diseño Web y UI/UX

7.1 Regla 60-30-10

7.2 Modos Claro y Oscuro

8. Accesibilidad: Diseñar para Todos

Ratios de Contraste Mínimos

Daltonismo

Simulador de Contraste

9. Mantenimiento y Naming Semántico

10. Errores Comunes a Evitar

11. Casos de Uso Reales

E-commerce

Salud / Farma

Tech / SaaS

Caso Práctico: E-commerce de Moda

Ultra Run Pro 2025

12. Recursos Descargables

13. Flujo de Trabajo con PaletaColor Pro

Generar Base

Auditar Accesibilidad

Exportar Código

14. Glosario Técnico de Color (Bonus)

15. Checklist Final para Diseñadores

📝 Checklist de Validación

16. Explorador de Emociones y Color

💡 Cómo usar el explorador

Explorador Color-Emoción

17. Quiz: ¿Cuánto sabes de Psicología del Color?

🎯 Objetivo del Quiz

Quiz de Psicología del Color

¿Qué color aumenta el ritmo cardíaco aproximadamente un 9%?

18. Analizador de Colores de Marcas Famosas

Analizador de Colores de Marca

19. Tendencias de Color 2025-2026

Mocha Mousse (Pantone 2025)

Gradientes Aurora

Dark Mode 2.0

Tech Green

Warm Metallics

Soft Pastels AI

Gradientes Cónicos

🔮 Predicción 2026

20. Color y Cultura: Significados Globales

⚠️ Consejo para Marcas Globales

21. El Arte de los Gradientes

✅ Buenas Prácticas