Hub de Convertidores de Color

1. 1

   Elige convertidor

   Abre la herramienta que necesites (p. ej. RGB a HEX).

2. 2

   Introduce valores

   Escribe números o usa el selector.

3. 3

   Obtén el resultado

   Vista previa y valores se actualizan al instante; copia lo que uses.

Doce formatos describen el mismo color de maneras distintas, y cada uno existe porque responde a una pregunta que los demás responden mal. Esto es para qué sirve cada uno.

Unificar formatos, mantener consistencia entre web e impresión y mover colores entre apps sin errores manuales.

Beneficios

• Compatibilidad: ajusta el formato a cada plataforma
• Consistencia: misma tonalidad en distintos medios
• Flujo de diseño: menos fricción entre herramientas
• Varios formatos: RGB, HEX, HSL, CMYK
• En vivo: ves el resultado al cambiar valores

Cubre los formatos habituales en web, diseño gráfico e impresión.

• RGB a HEXConvierte RGB a hexadecimal
• HEX a RGBConvierte códigos hex a RGB
• RGB a HSLConvierte RGB a HSL
• HSL a RGBConvierte HSL a RGB
• RGB a CMYKConvierte RGB a CMYK para impresión
• Selector de colorSelector interactivo con conversión en vivo

Si solo has usado HEX y HSL, OKLCH es el único formato de esta página que merece la pena aprender. Resuelve un problema con el que se topa todo sistema de diseño y que casi todo el mundo esquiva a mano.

• Aclarar conserva el tono — sube la luminosidad de un azul en HSL y deriva hacia el morado; súbela en OKLCH y sigue siendo azul. Ese es justo el propósito de un espacio perceptualmente uniforme.
• Pasos iguales se ven iguales — una paleta construida variando la luminosidad OKLCH en incrementos regulares se lee como una rampa uniforme. Los mismos incrementos en HSL producen una rampa apelotonada en un extremo.
• Un solo número para la saturación — el croma es un valor único que significa lo mismo en cualquier tono, así que «la misma intensidad en otro color» es cambiar un número y no adivinar.
• Alcanza colores que sRGB no tiene — OKLCH puede describir colores fuera de una pantalla estándar. Esta herramienta te avisa cuando ocurre y ofrece el color más cercano que la pantalla sí puede mostrar.

Pega arriba cualquier código HEX y mira la línea OKLCH para ver dónde se sitúan tus colores actuales. Para migrar una paleta entera de una vez, usa el modo de archivo completo que se explica más abajo.

Convertir un color es la parte fácil. Migrar un proyecto de HEX a OKLCH, o extraer todos los colores de un archivo de diseño para revisarlos, significa tocar cientos de valores, y ahí es donde se detienen los demás convertidores de color.

• Reescribe, no regenera — el archivo que recibes es el que entregaste, con solo los valores de color cambiados. Comentarios, espaciado, minificación, saltos de línea y todo lo que el escáner no reconoció pasan byte a byte.
• Lee siete tipos de archivo — CSS, SCSS, SASS, LESS, JSON, SVG y texto plano. En SVG y JSON todos los colores viven entre comillas, y también se encuentran.
• Los nombres de color son opcionales — tan, plum, salmon y red son palabras corrientes en inglés. Detectarlas es un interruptor que activas tú, porque dejarlo activo en un archivo de texto reescribiría la prosa.
• Sabe qué no es un color — #ff00001 tiene demasiados dígitos, tangerine no es tan y --tan-100 es un nombre de variable. Ninguno se toca.

El plan gratuito convierte 200 colores de una vez, suficiente para la paleta principal de un sistema de diseño. Pro quita el límite, admite hasta 25 archivos y los devuelve en un único archivo comprimido.

Un color solo sirve si el texto encima se puede leer. El panel de contraste mide tu color frente al blanco, frente al negro y frente a cualquier segundo color, y comprueba cada resultado con los umbrales de las WCAG.

• 4,5:1 es el requisito AA para texto normal, y el listón con el que se mide la mayoría de auditorías.
• 3:1 basta para texto grande —18,66px en negrita o 24px normal en adelante— y para componentes de interfaz y gráficos.
• 7:1 es AAA para texto normal, una mejora real de legibilidad y no un simple formalismo, sobre todo en lecturas largas.
• El contraste depende solo de la luminosidad, así que cambiar el tono de un color que falla no lo salvará. Por eso la corrección propuesta mueve la luminosidad y conserva el tono que elegiste.

Cuando una pareja falla, la herramienta busca hacia arriba y hacia abajo el cambio más pequeño que pasa, y te muestra el resultado en lugar de dejarte adivinar.

Alrededor de uno de cada doce hombres y una de cada doscientas mujeres tiene algún tipo de deficiencia de visión del color. La tira de simulación muestra tu color tal como se percibe con cada tipo habitual, para que compruebes que dos colores de una paleta siguen distinguiéndose en vez de fundirse.

• Protanopía y deuteranopía — los tipos rojo–verde, y con diferencia los más frecuentes. Los rojos se oscurecen y verdes y rojos convergen: por eso un indicador rojo/verde de correcto o incorrecto es el fallo de accesibilidad clásico.
• Tritanopía — poco frecuente, afecta al eje azul–amarillo. Azules y verdes convergen y los amarillos pueden verse rosados.
• Sin visión del color — aún más rara, y un caso extremo útil: si un diseño funciona en la fila en escala de grises, funciona para todo el mundo.

La simulación modela la ausencia completa de un tipo de cono. La deficiencia parcial es más frecuente y queda entre la vista simulada y la visión típica, así que trata como mejorable cualquier pareja que apenas sobreviva a la simulación.

Te ayudamos a pasar entre formatos de color con rapidez. Todo se procesa en tu dispositivo para mantener tus datos privados.

Herramientas disponibles:

• RGB a HEX: valores RGB a hexadecimal
• HEX a RGB: códigos hex a RGB
• RGB a HSL: RGB a tono, saturación y luminosidad
• HSL a RGB: HSL a RGB para pantallas
• RGB a CMYK: preparación para impresión en CMYK
• Selector: elige color y ve todos los formatos

Elige la tarjeta que necesites y empieza al instante.

Al migrar entre software, preparar CSS, validar marca en web e impresión o documentar paletas.

Casos habituales

• Desarrollo web: CSS y HTML
• Diseño: saltar entre apps
• Impresión: acercar RGB a especificaciones CMYK
• Matching: cotejar con referencias
• Design systems: tokens y escalas coherentes
• Modernizar una paleta: Pasa una hoja de estilos de HEX a OKLCH en una sola pasada

Contexto rápido sobre modelos de color.

Puntos clave

• RGB es aditivo (pantallas)
• CMYK es sustractivo (tinta)
• HEX comprime la misma info que RGB
• HSL facilita matizar tono y saturación
• Las conversiones matemáticas no pierden precisión dentro del mismo espacio
• CSS define 148 palabras clave de color, contando las grafías gray y grey
• Una pantalla sRGB estándar muestra unos 16,7 millones de colores; LAB y OKLAB describen muchos más

Para resultados fiables.

Calidad

• Comprueba contra guías de marca
• Prueba en pantalla y, si aplica, en prueba de imprenta
• Recuerda las diferencias de gama entre RGB y CMYK
• Elige el formato según el destino final
• Revisa colores críticos dos veces
• Construye paletas en OKLCH para que los pasos de luminosidad se vean uniformes, y convierte a HEX si necesitas compatibilidad antigua

Cuándo no forzar la conversión

• Si el destino ya acepta tu formato original
• Si un color vive fuera de la gama de salida sin prueba
• Si necesitas verificación física y solo confías en pantalla
• Si la plataforma no admite el formato pretendido
• No conviertas un nombre de color dentro de un texto: deja desactivada la detección de palabras clave para archivos de texto plano

Requieren un dispositivo moderno con JavaScript; la impresión real depende de papel y perfil.

Impulsado por algoritmos optimizados de procesamiento de imagen.

• RGB a HEX
• HEX a RGB
• RGB a HSL
• HSL a RGB
• RGB a CMYK
• Selector de color
• Paleta desde una imagen
• Analizador de color de imágenes
• Gradación de color
• Hora y fecha
• Divisor de texto
• Formateador JSON
• Conversor de imágenes
• Codificador Base64