Conversor de colores
Convierte un mismo color entre HEX, HEXA, RGB, RGBA, HSL, HWB, Lab, LCH, OKLab y OKLCH, además de espacios amplios como Display P3, Rec. 2020 y CMYK. Pega un valor, revisa la vista previa y copia el formato que encaja con tus tokens, CSS, documentación o entrega de diseño. El análisis ocurre localmente en el navegador.
- Formatos CSS comunes y espacios modernos en una sola vista
- Vista previa en vivo con errores de sintaxis visibles
- Transparencia preservada en HEXA, RGBA, HSLA y OKLCH
- Formatos comunes y avanzados agrupados para escanear rápido
- Procesamiento local para colores de marca y activos internos
Admite HEX, HEXA, RGB, RGBA, HSL, HWB, Lab, LCH, OKLab y OKLCH, además de varios espacios avanzados.
Resumen
Pega un color una vez y obtén los valores que suelen necesitar diseño, CSS, tokens y documentación, sin que el mismo tono derive entre herramientas.
- 01
Varios formatos CSS a la vez
HEX, RGB y HSL aparecen junto a HWB, Lab, LCH, OKLab y OKLCH para escoger la sintaxis adecuada.
- 02
Entrada flexible
Reconoce HEX de seis u ocho dígitos, RGB con comas, HSL con espacios y OKLCH con slash alpha.
- 03
Alpha conservado
Si el color trae transparencia, el canal alpha se mantiene en HEXA, RGBA, HSLA y salidas modernas.
- 04
Espacios avanzados agrupados
Display P3, Rec. 2020, Adobe RGB, ProPhoto, XYZ y Jzazbz quedan separados para revisión wide-gamut y print handoff.
- 05
Vista previa junto al texto
El swatch cambia mientras escribes para detectar errores de lectura o diferencias de entrega antes de copiar.
- 06
Copiado por fila
Cada formato tiene su propio botón, así copias HEX donde necesitas HEX y OKLCH donde necesitas OKLCH.
Cómo usarla
El flujo completo va de pegar un valor a copiar el formato objetivo, sin salir del panel.
- 01
Pega o escribe un color, por ejemplo un HEX del archivo de diseño o un OKLCH de una especificación.
- 02
Comprueba que la vista previa coincide con el diseño fuente o con el resultado esperado.
- 03
Revisa los grupos común y avanzado para encontrar la sintaxis que pide el contexto actual.
- 04
Pulsa copiar en esa fila y pega el valor normalizado en CSS, tokens o documentación.
- 05
Para probar otro valor, elige una muestra o limpia el campo y repite.
Detalles
Un solo panel cubre conversión diaria, alpha, tokens y comunicación entre diseño y frontend.
- Conversión online de HEX, RGB, HSL, HWB, Lab, LCH, OKLab y OKLCH
- Entrada flexible con comas, espacios y slash alpha
- Formatos comunes y avanzados separados para lectura rápida
- Vista previa en vivo que revela errores de sintaxis
- Botones de copiado por fila
- Alpha preservado en HEXA, RGBA, HSLA y OKLCH
- Colores de muestra para pruebas rápidas
- Ayuda a alinear archivos de diseño y tokens frontend
- Útil para temas claros, oscuros y estados de interfaz
- Ayuda a gobernar colores de marca con valores de referencia unificados y normalizados
- Ofrece salidas Display P3 y Rec. 2020 para revisión wide-gamut
- Incluye CMYK para colaboración con impresión
Casos de uso
Cuando un color viaja entre diseño, CSS, tokens, documentación y materiales de marca, una referencia normalizada reduce ambigüedad.
-
Entrega de diseño a frontend
Convierte colores de una herramienta de diseño al formato que prefiere tu base de código.
-
Tokens y variables CSS
Genera valores equivalentes para el mismo nombre semántico y elige la convención correcta.
-
Mantenimiento de temas
Compara colores primarios, accent y estados en temas claros, oscuros o temporales.
-
Gobernanza de marca
Evita que un color de marca aparezca con valores distintos en diseño, docs y producto.
-
Bibliotecas de componentes
Explora variantes hover, active, disabled, info y warning ajustando luminosidad o croma.
-
Revisión wide-gamut
Contrasta Display P3, Rec. 2020 y Adobe RGB para pantallas y pipelines modernos.
-
Páginas de campaña
Traduce colores puntuales al formato permitido por el sistema de diseño.
-
Refinamiento de accesibilidad
Normaliza foreground y background antes de validarlos con un contrast checker.
-
Entrega a impresión
Convierte colores de pantalla a CMYK como punto de partida para print y packaging.
-
Paletas de visualización de datos
Unifica colores de series, estados y acentos antes de llevarlos a librerías de charts.
Ver también
Después de convertir un color de marca o token, usa Generador de paletas para ampliarlo a una escala útil para superficies, botones y estados. Antes de aplicarlo en texto real, botones o badges, pasa la combinación por Comprobador de contraste para confirmar que no solo es correcta en papel, sino legible en pantalla.
Referencia de formatos de color
Definiciones breves de los formatos que aparecen con más frecuencia en frontend, sistemas de diseño, marca y colaboración con impresión.
| Formato | Descripción | Ejemplo |
|---|---|---|
| HEX | Canales rojo, verde y azul en hexadecimal. Compacto y habitual en tokens y variables CSS. | #6366f1 |
| HEXA | HEX con canal alpha añadido. Útil para incluir transparencia en un solo valor corto. | #6366f180 |
| RGB | Canales rojo, verde y azul en decimal. Cómodo para ajustar canales o generar valores desde scripts. | rgb(99, 102, 241) |
| RGBA | RGB con transparencia. Frecuente en overlays, focus states, sombras y superficies por capas. | rgba(99, 102, 241, 0.6) |
| HSL | Matiz, saturación y luminosidad. Se acerca más a cómo se razonan variantes de paleta. | hsl(239 84% 67%) |
| HSLA | HSL con alpha, útil para colores semitransparentes con semántica clara. | hsl(239 84% 67% / 0.6) |
| HSV | Matiz, saturación y valor. Coincide con muchos selectores de color. | hsv(239 59.3% 94.5%) |
| HWB | Matiz, blancura y negrura. Sirve para aclarar u oscurecer sin salir del matiz. | hwb(239 39% 5%) |
| Lab | Espacio perceptual útil para medir distancia de color y tolerancias de marca. | lab(53.59% 22.06 -66.53) |
| LCH | Lab cilíndrico con luminosidad, croma y matiz para controlar dirección y saturación. | lch(53.59% 70.10 288deg) |
| OKLab | Modelo perceptual moderno con interpolaciones más suaves para interfaces digitales. | oklab(58.56% 0.0255 -0.1639) |
| OKLCH | OKLab cilíndrico, cada vez más usado para escalas de tema, familias de marca y gradientes. | oklch(58.56% 0.1659 278deg) |
| CMYK | Canales de tinta cian, magenta, amarillo y negro para colaborar con impresión y packaging. | cmyk(58.9% 56.8% 0% 5.5%) |
Buenas prácticas
La conversión es solo el primer paso; conviene acompañarla con nombres, contraste y revisión visual.
- Define un formato principal por equipo, por ejemplo HEX para tokens y OKLCH para rampas de tema.
- Documenta origen e intención junto a cada token de color.
- Valida temas claros y oscuros por separado.
- Usa capturas o regresión visual después de cambios grandes de paleta.
- Trata conversión y contraste como pasos distintos.
- Migra paletas grandes de forma gradual.
- Mantén alineados el nombre semántico de diseño y el nombre técnico del token.
Limitaciones
La conversión es matemática, pero la apariencia final depende de pantalla, renderizado y contexto de diseño.
- El mismo valor puede verse distinto entre monitores.
- Algunos espacios avanzados no tienen soporte uniforme en navegadores antiguos.
- Normalizar color no reemplaza revisión de contraste, daltonismo o accesibilidad completa.
- El uso real depende también de estado, tipografía, tamaño y espacio alrededor.
- Haz copia y verifica páginas clave antes de reemplazar paletas heredadas en bloque.
- Un valor técnicamente correcto no garantiza una jerarquía visual correcta.
- En impresión, CMYK depende de tinta, papel y proceso.
Preguntas frecuentes
Preguntas frecuentes al implementar colores entre frontend, diseño y marca.
¿Qué formatos admite el convertidor?
Produce HEX, HEXA, RGB, RGBA, HSL, HSLA, HWB, Lab, LCH, OKLab, OKLCH, HSV y CMYK, además de espacios avanzados como Display P3, Rec. 2020, Adobe RGB, ProPhoto, XYZ y Jzazbz.
¿Por qué no se interpreta mi color?
Casi siempre es un problema de sintaxis: falta la almohadilla, hay paréntesis sin cerrar, se usaron comillas tipográficas, el separador no es el correcto, la unidad está mal escrita o un canal se sale de rango. Debajo del campo se indican los formatos admitidos.
¿Mi color se envía a un servidor?
No. El análisis y el formateo ocurren localmente en el navegador, así que es apto para colores de marca sin publicar, activos internos y archivos de diseño confidenciales.
¿Puedo pegar la salida directamente en CSS?
Sí. Cada fila es un valor CSS válido con la sintaxis actual, listo para pegar en hojas de estilo, archivos de tokens o variables CSS.
¿Cómo se maneja la transparencia?
Si la entrada incluye alpha —por ejemplo HEXA, RGBA, HSLA o la notación moderna con slash como oklch(70% 0.16 250 / 0.8)—, todas las salidas compatibles con alpha se actualizan en consecuencia.
¿Cuándo necesito de verdad los espacios avanzados?
La calibración de pantallas wide-gamut, la gestión de color entre dispositivos, el control fino de color de marca, la revisión de contenido HDR y la evaluación visual profesional pueden requerir espacios más allá de sRGB.
¿Por qué el mismo color se ve distinto entre dispositivos?
Las pantallas difieren en gamut, brillo, temperatura y calibración, y los navegadores tampoco gestionan el color de forma idéntica. Para casos importantes, revísalo en el dispositivo de destino real.
¿Es útil también para diseñadores?
Sí. Cuando un archivo de diseño se entrega a ingeniería, conservar un valor de referencia normalizado reduce los malentendidos entre ambas partes y el retrabajo.
¿Debería usar HEX o RGB?
Ambos son muy comunes. HEX es compacto y va bien en tokens; si necesitas controlar la transparencia o procesar canales desde un script, RGBA resulta más cómodo.
¿Cuál es la diferencia principal entre HSL y RGB?
RGB es más de dispositivo y cálculo, ideal para trabajar por canales; HSL es más expresivo para el diseño, ideal para ajustar en torno a matiz, saturación y luminosidad.
¿Cuándo conviene más OKLCH?
Al construir escalas de tema, familias de color de marca, gradientes controlados y paletas entre matices, OKLCH suele dar resultados visualmente más consistentes.
¿Tienen sentido Lab y LCH en proyectos web reales?
Sí, sobre todo para controlar la diferencia de color, lograr transiciones de estado más suaves, gestionar tolerancias de marca o describir colores vecinos en un sistema de diseño.
¿Puedo convertir muchos colores a la vez?
El flujo actual está pensado para confirmar y convertir un color concreto con precisión. Para lotes, combínalo con herramientas CSV, scripts o las funciones por lotes de tu software de diseño.
¿La conversión reemplaza a un contrast checker?
No. La conversión resuelve cómo escribir el color; el contraste resuelve si el usuario puede leerlo de verdad. Conviene usar ambos juntos.
¿Por qué CMYK difiere tanto del color en pantalla?
CMYK es un modelo sustractivo, distinto por naturaleza del modelo aditivo RGB de las pantallas; además, el resultado impreso real depende de la tinta, el papel y el proceso.
¿Qué valor de croma debería usar en OKLCH?
No hay un valor único, pero la mayoría de los colores de marca caen aproximadamente entre 0,05 y 0,25. Demasiado bajo se ve grisáceo; demasiado alto puede salirse del gamut que admiten algunos navegadores o pantallas.
Herramientas relacionadas
Después de convertir, continúa con generador de paletas, contrast checker y generador de gradientes.