CLIENT ENGINE // AIR-GAPPED

Conversor de Color HEX, RGB, HSL y CMYK

Conversor bidireccional de códigos de color de 24 bits que traduce entre notación hexadecimal (#RRGGBB), CSS RGB/RGBA, HSL cilíndrico y CMYK sustractivo para imprenta.

APPARATUS // HEX-TO-RGB VERIFIED OK // 0.0ms

Tabla de Referencia Rápida

Profundidad de Color sRGB 24 Bits (16,777,216 Colores)

Rango por Canal (R, G, B) 0 – 255 (0x00 – 0xFF)

Espacio Cilíndrico HSL H: 0–360°, S/L: 0–100%

Modelo Sustractivo CMYK C, M, Y, K (0% – 100%)

Privacidad de Ejecución 100% en Memoria del Navegador

Fórmula Matemática

R_{10} = 16 \cdot H_1 + H_0, \quad K = 1 - \max\!\left(\frac{R}{255}, \frac{G}{255}, \frac{B}{255}\right)

Decodificación de octetos hexadecimales en base 16 hacia canales sRGB de 8 bits [0, 255] y extracción del canal negro (K) en el modelo sustractivo CMYK.

Descripción General y Contexto Técnico

Las pantallas digitales y los flujos de trabajo de impresión representan el color mediante sistemas de coordenadas matemáticas bien diferenciados. En la web, las hojas de estilo CSS y los gráficos vectoriales SVG expresan predominantemente los colores en el espacio sRGB de 24 bits empleando ya sea notación hexadecimal (#RRGGBB, donde cada par de dígitos en base 16 codifica un número entero de 8 bits entre 0 y 255), notación funcional RGB/RGBA, o coordenadas cilíndricas HSL (Matiz de 0° a 360°, Saturación de 0% a 100%, Luminosidad de 0% a 100%). Por su parte, las prensas de impresión offset comercial y digital se basan en el modelo sustractivo CMYK (porcentajes de tintas Cian, Magenta, Amarillo y Negro/Key).

Traducir manualmente entre estos espacios de color requiere conversión de base 16, normalización de croma mínimo y máximo para obtener ángulos de matiz cilíndricos y extracción del componente negro para CMYK. Al construir bibliotecas de tokens de diseño en Tailwind CSS, Figma u hojas de estilo en React y Astro, los desarrolladores necesitan con frecuencia convertir un valor HEX corporativo en una declaración RGBA con opacidad alfa personalizada (como rgba(16, 185, 129, 0.15)) o derivar coordenadas HSL para generar estados hover más claros.

El Conversor de Color HEX, RGB, HSL y CMYK de Kitiverse sincroniza los cuatro modelos cromáticos de forma bidireccional con cada pulsación de tecla. Ya sea que introduzcas un código hexadecimal abreviado de 3 dígitos (#F0A), un código completo de 6 dígitos (#10B981) o valores individuales para los canales Rojo, Verde, Azul y Alfa, todas las declaraciones CSS se actualizan en menos de un milisegundo en un entorno 100% sin registro, procesamiento local en el navegador y almacenamiento en tu dispositivo.

Cómo convertir entre HEX, RGB, RGBA, HSL y CMYK

Introduce una cadena HEX o valores numéricos RGB/Alfa individuales para sincronizar todos los formatos de color de CSS e imprenta.

Pega un código hexadecimal de 3 caracteres (#0F8) o de 6 caracteres (#10B981) en el campo Código de Color HEX, o elige un color desde el selector visual de muestras.

Alternativamente, introduce números enteros exactos de 0 a 255 en los campos Rojo, Verde y Azul y ajusta la opacidad Alfa (de 0.0 a 1.0) para calcular de forma inversa el código HEX.

Inspecciona la muestra de vista previa en vivo y las cuatro tarjetas de salida formateadas: CSS RGB, CSS RGBA, CSS HSL y CMYK de Impresión.

Haz clic en el botón 'Copiar' situado junto a cualquier formato de color para copiar el valor exacto de la propiedad CSS en tu portapapeles.

Preguntas Frecuentes

¿Cómo se transforma un código hexadecimal (#RRGGBB) en números RGB?

Un código de color HEX de 6 dígitos consta de tres pares de bytes en base 16 (hexadecimal) de 2 dígitos cada uno: el primer par representa el canal Rojo (Red), el segundo el Verde (Green) y el tercero el Azul (Blue). Cada dígito hexadecimal va del 0 al 9 y de la A (10) a la F (15). Para convertir un par de bytes a decimal, se multiplica el primer dígito por 16 y se suma el segundo dígito: por ejemplo, 'B9' en hexadecimal equivale a (11 × 16) + 9 = 185.

¿Cómo se expande un código HEX abreviado de 3 dígitos (#RGB) a 6 dígitos?

En la especificación CSS, un código HEX abreviado de 3 dígitos duplica cada carácter individual para formar el código equivalente de 6 dígitos. Por ejemplo, #F0A se expande internamente a #FF00AA, lo que corresponde a rgb(255, 0, 170).

¿Por qué conviene usar HSL en lugar de HEX o RGB en sistemas de diseño CSS?

El modelo HSL separa el Matiz (el ángulo cromático en la rueda de color de 0° a 360°), la Saturación (intensidad o pureza del color) y la Luminosidad (claridad u oscuridad). Al mantener constantes el Matiz y la Saturación y variar únicamente la Luminosidad entre el 10% y el 95%, los diseñadores pueden generar estados hover coherentes, bordes sutiles y fondos para modo oscuro a partir de un único color base.

¿Cómo se convierte un color RGB a CMYK para impresión?

RGB es un modelo aditivo de luz (donde 0,0,0 es negro y 255,255,255 es luz blanca), mientras que CMYK es un modelo sustractivo de absorción de tinta (donde 0%,0%,0%,0% representa el papel blanco sin tinta). El conversor normaliza los canales RGB al rango [0, 1], deduce el componente de tinta Negra K = 1 - máx(R, G, B) y calcula los porcentajes de Cian, Magenta y Amarillo en proporción a (1 - K).

¿Cómo funciona el canal Alfa en la sintaxis rgba()?

El cuarto parámetro de la función rgba(R, G, B, A) controla la transparencia u opacidad alfa en una escala continua desde 0.0 (completamente transparente) hasta 1.0 (completamente opaco). Definir un valor alfa de 0.5 dibuja el color con un 50% de opacidad mezclado sobre el fondo subyacente.

¿Es gratuito y completamente privado este conversor de color?

Sí. Kitiverse es 100% sin registro, procesamiento local en el navegador y almacenamiento en tu dispositivo. Todas las conversiones entre espacios de color se ejecutan localmente en tu navegador.

Instrumentos Relacionados en Este Banco

Todas las herramientas de Color y Diseño →

Color y Diseño →

Selector de Color y Generador de Paletas

Conversión de color multiformato (HEX, RGB, HSL, OKLCH), cálculo instantáneo de contraste de accesibilidad WCAG 2.1 y generación de paletas armónicas pastel.

Color y Diseño →

Verificador de Contraste de Color WCAG 2.1

Verifica pares de colores de primer plano y fondo frente a los umbrales de accesibilidad W3C WCAG 2.1 AA y AAA con vistas previas en vivo de tipografía y componentes UI.

Imagen y Gráficos →

Conversor de Formatos de Imagen (WebP, PNG, JPG y SVG)

Convierte imágenes entre WebP, PNG, JPEG, SVG, GIF y BMP directamente en tu navegador con relleno de fondo personalizado al pasar de PNG/WebP transparente a JPEG.

Estudio de Audio →

Convertidor de Audio

Convierte archivos de sonido MP3, WAV, M4A, AAC y OGG en línea. Incluye conversión de frecuencia de muestreo de calidad de estudio (44.1 kHz a 48 kHz), mezcla de estéreo a mono y procesamiento 100% privado en el navegador sin subidas a la nube.

Estudio de Video →

Convertidor de Vídeo

Convierte vídeos MP4, WebM y QuickTime MOV directamente en tu navegador. Impulsado por WebCodecs acelerados por hardware 100% en el cliente, sin subidas al servidor, sin límites de tamaño y con procesamiento local instantáneo.

Estudio de Video →

Convertidor de Vídeo a GIF

Convierte vídeos MP4, WebM, QuickTime MOV y OGV en GIFs animados de alta calidad directamente en tu navegador. Incluye recorte de precisión, tasas de fotogramas personalizadas (10–24 FPS), escalado multirresolución (240p a 720p) y procesamiento 100% privado sin subidas.

Nota de Ejecución y Verificación en el Cliente:

Esta utilidad se ejecuta 100% localmente en tu navegador con almacenamiento en tu dispositivo y cero envíos a servidores. Todos los resultados se proporcionan "tal cual"; por favor valida los datos, códigos y archivos críticos antes de usarlos en producción.