Saltar al contenido
SPCXTools

Conversor de color

Convierte cualquier color entre HEX, RGB, HSL, HSV y CMYK, y comprueba su contraste.

Funciona en local: los archivos no salen de tu dispositivo

Cargando herramienta…

Cómo usar Conversor de color

  1. 1Escribe o pega un color en cualquier formato (por ejemplo, #0EA5E9, rgb(14 165 233), hsl(199 89% 48%) o un nombre de CSS como tomato) o usa el selector de color.
  2. 2Obtén el mismo color en HEX, RGB, HSL, HSV y CMYK y copia el formato que necesites.
  3. 3Comprueba la relación de contraste con el blanco y el negro para ver si el texto con este color es legible.
  4. 4Haz clic en una muestra de la escala de tintes y sombras para explorar versiones más claras y oscuras.

Convierte colores entre todos los formatos comunes

Diseñadores, desarrolladores y profesionales del marketing mueven constantemente colores entre herramientas que usan lenguajes diferentes: CSS prefiere HEX o HSL, una guía de marca especifica RGB y CMYK, y una aplicación de diseño muestra HSB. Este conversor de color toma un color en cualquiera de estos formatos y lo muestra en todos los demás a la vez, con un botón para copiar cada uno con un solo clic. También comprueba el contraste del texto para la accesibilidad y genera una escala de tintes y sombras.

Características

  • Cualquier formato de entrada: HEX (3, 4, 6 u 8 dígitos), RGB/RGBA, HSL/HSLA, HSV/HSB, CMYK, tríos de números simples y nombres de color de CSS.
  • Todos los formatos de salida a la vez: HEX, RGB, HSL, HSV y CMYK, cada uno con un botón para copiar.
  • Soporte para transparencia: los valores alfa se conservan en HEX8, RGBA y HSLA.
  • Selector de color nativo para elegir un color visualmente.
  • Verificador de contraste WCAG con blanco y negro, con resultados AA para texto normal y grande.
  • Tintes y sombras del 10 % al 90 % de luminosidad; haz clic en cualquier muestra para seleccionarla.

Explicación de los formatos de color

  • HEX: #RRGGBB en hexadecimal, el formato más común en diseño web. Un cuarto par opcional establece la transparencia.
  • RGB: rojo, verde y azul de 0 a 255; es como las pantallas crean los colores.
  • HSL: tono («hue», la posición en el círculo cromático), saturación (intensidad) y luminosidad («lightness»). Fácil de ajustar a mano: cambia solo la luminosidad para obtener versiones más claras u oscuras del mismo color.
  • HSV / HSB: tono («hue»), saturación y valor (brillo), utilizado por la mayoría de los selectores de color en herramientas de diseño.
  • CMYK: porcentajes de tinta cian, magenta, amarillo y clave («key», negro) que se usan en impresión.

Ejemplo

El azul cielo #0EA5E9 es rgb(14, 165, 233), hsl(199, 89%, 48%), hsv(199, 94%, 91%) y aproximadamente cmyk(94%, 29%, 0%, 9%). Su contraste sobre blanco es de aproximadamente 2.8:1, adecuado para títulos grandes e iconos, pero demasiado bajo para el cuerpo del texto, que necesita 4.5:1. Sobre negro, alcanza un 7.6:1, por lo que es perfectamente apto.

Consejos para trabajar con color

  • Crea paletas en HSL. Mantén fijos el tono y la saturación y varía la luminosidad para crear estados de botones, fondos y bordes coherentes.
  • Comprueba el contraste desde el principio. Muchos colores de marca son demasiado claros para usarse en texto sobre blanco; utiliza un tono más oscuro de la escala para el texto y el original para los detalles.
  • No te bases solo en el color para transmitir significado; añade iconos o etiquetas para las personas con deficiencias en la visión del color.
  • Ten en cuenta que la impresión será diferente. Los colores RGB brillantes, especialmente los azules y verdes vivos, a menudo se ven más apagados en CMYK.

¿También trabajas con imágenes? El Conversor de imágenes cambia formatos entre JPG, PNG y WebP. Para codificar una imagen pequeña o un icono para CSS, usa Base64.

Preguntas frecuentes

¿Cómo convierto de HEX a RGB?
Un color HEX tiene tres pares de dígitos hexadecimales para rojo, verde y azul. Convierte cada par de base 16 a base 10: en #FF8800, FF = 255, 88 = 136 y 00 = 0, por lo que el color es rgb(255, 136, 0). La notación abreviada de tres dígitos como #F80 duplica cada dígito primero.
¿Cuál es la diferencia entre HSL y HSV (HSB)?
Ambos describen un color por su tono (0–360°) y saturación, pero usan un tercer valor diferente. En HSL, con un 50 % de luminosidad se obtiene el color puro, el 0 % es negro y el 100 % es blanco. En HSV/HSB, con un 100 % de valor o brillo se obtiene el color puro con saturación completa, y el 0 % es negro. Las aplicaciones de diseño como Photoshop y Figma suelen usar HSB en sus selectores de color, mientras que CSS usa HSL.
¿Es precisa la conversión a CMYK para imprimir?
Los valores CMYK son una conversión matemática desde RGB, que es útil como punto de partida. La impresión real depende de la impresora, la tinta y el papel, definidos por los perfiles de color ICC. Para trabajos de impresión profesionales, realiza la conversión en tu software de diseño utilizando el perfil de tu impresora.
¿Qué significan las relaciones de contraste?
Las Pautas de Accesibilidad para el Contenido Web (WCAG) miden el contraste entre el texto y el fondo en una escala de 1:1 a 21:1. El texto normal necesita al menos 4.5:1 para pasar el nivel AA, y el texto grande (unos 24 px, o 18.7 px en negrita) necesita 3:1. El verificador muestra si el color es apto sobre un fondo blanco y sobre un fondo negro.
¿Qué formatos de entrada se admiten?
HEX de 3, 4, 6 u 8 dígitos (con o sin #), rgb() y rgba(), hsl() y hsla(), hsv() o hsb(), cmyk(), tres números simples como 255 136 0, y nombres de color de CSS como rebeccapurple. Se admite tanto la sintaxis separada por comas como la moderna separada por espacios, incluido el canal alfa como en rgb(14 165 233 / 50%).

Herramientas relacionadas

Convertidor de imágenesConvierte fotos y gráficos entre JPG, PNG, WebP y AVIF, por lotes y sin subir archivos.Conversor de mayúsculas y minúsculasCambia el texto a cualquier formato de mayúsculas y minúsculas (de Tipo Título a snake_case) y ve todos los resultados a la vez.Codificar y decodificar Base64Convierte texto y archivos a Base64 y viceversa, con soporte completo para UTF-8 y Base64URL.Generador de Box ShadowAjusta sombras suaves, nítidas, en capas o interiores con una vista previa en vivo y copia el CSS.Simulador de daltonismoPrevisualiza tus imágenes a través de los ojos de alguien con deficiencia en la visión de los colores para asegurarte de que tus diseños sean accesibles.Comprobador de contraste de colorComprueba si tu texto es lo suficientemente legible y obtén el color más cercano que cumpla con WCAG.