Cómo elegir y convertir colores para diseño web
Traduce cualquier color entre HEX, RGB, HSL y OKLCH; construye pares con contraste accesible; y exporta una paleta en la que pueda confiar tu sistema de diseño.
Más utilidades que combinan bien con esta guía:
Por qué importa
Un diseñador entrega al ingeniero un archivo Figma con #5B2A6F. El ingeniero lo mete en una variable CSS. Dos semanas después QA reporta que el botón CTA no pasa WCAG AA sobre el fondo apagado. El arreglo es un pequeño bump de luminosidad en HSL — pero a ojo no sabes si el contraste cruza 4,5:1. Una herramienta de color que muestra modelos numéricos junto a puntuación de contraste cierra el ciclo entre «se ve bonito» y «pasa auditoría».
Tres escenarios reales
Pega primer plano y fondo, lee la relación de contraste, ajusta luminosidad hasta ≥4,5.
UI accesible
Parte del color de marca, genera pasos más claros y oscuros en OKLCH para tonos perceptualmente uniformes.
Tonos coherentes
Convierte la referencia Pantone a RGB y afina en HSL hasta que la muestra en pantalla coincida con la muestra impresa.
Campaña acorde a marca
Guía paso a paso
Abre el editor de color.
Elige o pega un color
Pulsa la muestra y usa el selector, o pega cualquiera de
#5B2A6F,rgb(91 42 111),hsl(280 45% 30%),oklch(35.5% 0.12 304).Lee cada modelo
Campos lado a lado para HEX, RGB, HSL, HSV, OKLCH. Edita cualquiera; los demás se actualizan.
Construye un par de contraste
Coloca un segundo color en la ranura «fondo». Aparece la relación de contraste con insignias WCAG AA / AAA.
Genera variantes
Usa el selector OKLCH para dar pasos de luminosidad manteniendo tono y croma constantes — la forma más limpia de derivar tokens de sistema de diseño.
Exporta
Copia en CSS, Sass, JSON o formato de design tokens.
HEX
#5B2A6FOtros modelos
RGB: rgb(91, 42, 111)
HSL: hsl(280, 45%, 30%)
OKLCH: oklch(35.5% 0.12 304)
Consejos útiles
- Usa OKLCH para design tokens. Ajustar luminosidad en HSL produce pasos perceptualmente desiguales; OKLCH se acerca más a cómo los humanos perciben cambios de brillo.
- No confíes en tu monitor para precisión de impresión. Pantallas calibradas son necesarias para igualar Pantone o CMYK.
- Genera pares modo oscuro invirtiendo luminosidad en OKLCH manteniendo el croma algo más bajo para evitar fatiga visual.
- Documenta el hex y los valores perceptuales en tu sistema de diseño. Los mantenedores futuros te lo agradecerán.
Trampas comunes
Error frecuente
El mismo hex se ve distinto en teléfono vs portátil
Gamuts distintos (sRGB vs Display P3) y brillo hacen que las muestras se sientan diferentes. Marca explícitamente colores que deben estar en gamut P3 más ancho con color(display-p3 ...).
Error frecuente
El probador de contraste dice fallo pero visualmente se ve bien
La relación de contraste es una medida matemática. El contraste óptico varía con el contexto circundante. La matemática es la línea base legal/de auditoría; apunta por encima de 4,5:1 para cuerpo de texto cuando puedas.
Error frecuente
Los colores derivan entre componentes en variables CSS
Define el token canónico una vez y referencia en todas partes. Los colores variantes deben derivarse (oklch(from var(--brand) calc(l + 0.1) c h)) en lugar de volver a teclearlos.
Cuándo no es la herramienta adecuada
- Gestión de color para impresión — usa Adobe con flujo calibrado.
- Análisis masivo de color en imágenes — script con librería tipo
chroma.jsoculori. - Simulación de daltonismo — herramientas dedicadas (p. ej. axe DevTools) simulan deuteranopia/protanopia, más allá de ratios simples.
Preguntas frecuentes
¿Diferencia entre HSL y OKLCH?
HSL no es perceptualmente uniforme: un cambio de 10° en tono puede parecer otro color según la luminosidad. OKLCH (forma polar de OKLab) corrige eso para ajustes más predecibles.
¿La herramienta soporta funciones CSS Color 5?
Sí — color-mix() y oklch(from ...) están soportadas en navegadores modernos. La herramienta emite valores compatibles con la bandera de características elegida.
¿Se guardan mis colores?
No. Todo es local; copiar al portapapeles es opcional.
Próximos pasos
- Valida colores elegidos contra la paleta general del activo de imagen con el Convertidor de imágenes.
- Exporta favicon o logo final con el convertidor SVG a PNG.
- Convierte colores de imagen para casos de uso incrustados vía Imagen a Base64.