Utilidades de CSS y Diseño

Convertidor de Color HEX a RGB / HSL y Generador CSS

Convierte entre códigos de color HEX, RGB, HSL, HSV, CMYK y OKLCH en tiempo real. Genera tonos, sombras y paletas armónicas para Tailwind con verificación de contraste WCAG. 100% privado en el navegador.

Transformación de Color 100% en el Navegador • Conforme a W3C CSS Color 4 • Cero Peticiones de Red
Utilidades de CSS y Diseño
Preajustes Populares de Diseño
vs Blanco (#FFFFFF)
3.68:1
AA Large Only
vs Negro (#000000)
5.71:1
AA Pass

Formatos de Color Convertidos

HEX (6-digit)
#3B82F6
HEX8 (Alpha)
#3B82F6FF
RGB
rgb(59, 130, 246)
RGBA
rgba(59, 130, 246, 1)
HSL
hsl(217, 91%, 60%)
HSLA
hsla(217, 91%, 60%, 1)
HSV / HSB
hsv(217, 76%, 96%)
CMYK (Print)
cmyk(76%, 47%, 0%, 4%)
CSS OKLCH
oklch(62% 0.19 255)

Escala de Tonos y Sombras (Tailwind 50 - 950)

Click any swatch to copy

Armonías de Color

Exportar Snippets de CSS y Código

:root {
  --color-primary: #3B82F6;
  --color-primary-rgb: 59, 130, 246;
  --color-primary-hsl: 217deg 91% 60%;
}
Preguntas Frecuentes (FAQ) · Convertidor de Color HEX a RGB / HSL

Convertidor de Espacios de Color HEX a RGB, HSL y OKLCH y Generador CSS

Guía técnica sobre modelos de color digital, transformaciones matemáticas sRGB, HSL, CMYK y OKLCH, accesibilidad WCAG y escalas de diseño Tailwind CSS.

MU
Arquitecto de Herramientas y Maximo
Referencia técnica

01. Arquitectura Matemática de Modelos de Color: HEX, RGB, HSL y OKLCH

Las pantallas digitales muestran color mediante la mezcla aditiva de subpíxeles Rojo, Verde y Azul (espacio sRGB). Cada canal de 8 bits permite valores de 0 a 255.

La notación HEX es la representación hexadecimal base 16 de estos bytes RGB. Por ejemplo, #3B82F6 se descompone en 59 Rojo, 130 Verde y 246 Azul.

El modelo HSL organiza el color por Tono (Hue 0-360°), Saturación (0-100%) y Luminosidad (0-100%), facilitando la creación intuitiva de paletas armónicas.

DevOmniTools realiza transformaciones 100% locales en el navegador conforme al estándar W3C CSS Color Module 4.

  • Sincronización instantánea entre HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK y OKLCH.
  • Generador automático de 11 tonos y sombras compatible con Tailwind CSS 50–950.
  • Paletas armónicas dinámicas: Complementario, Triádico, Análogo y Tetrádico.
  • Cálculo de contraste WCAG 2.1 contra blanco y negro con insignias AA y AAA.

02. Flujo de Trabajo para Conversión de Color y Exportación CSS

1. Pega o escribe cualquier código de color en el campo de entrada o utiliza el selector visual.

2. El conversor actualiza al instante todas las representaciones con botones de copia en un clic.

3. Consulta la escala de sombras y tonos para seleccionar variantes de interfaz.

4. Comprueba las calificaciones de contraste WCAG para asegurar accesibilidad.

5. Copia las variables CSS listas para producción en tu hoja de estilos.

03. Diseño de Paletas de Color y Assets Vectoriales

Valida ratios de contraste WCAG para tus paletas con Comprobador de Contraste de Color, genera paneles translúcidos con Generador CSS Glassmorphism o exporta iconos con Conversor de SVG a PNG.

Preguntas Frecuentes (FAQ)

¿Cómo convertir un código HEX de 3 dígitos a 6 dígitos?

Duplica cada carácter individual: #ABC se expande a #AABBCC.

¿Por qué OKLCH es superior a HSL en CSS moderno?

OKLCH ofrece uniformidad perceptual: la luminosidad percibida se mantiene constante independientemente del tono, evitando saltos de brillo no deseados.

¿Se transmiten los colores a servidores externos?

No. Toda la matemática y conversión se ejecuta de forma 100% privada en la memoria local de tu navegador.

¿Mis datos confidenciales se envían a servidores externos al usar Convertidor de Color HEX a RGB / HSL?

No. El procesamiento principal en Convertidor de Color HEX a RGB / HSL se ejecuta en la memoria volátil del navegador sin subidas a servidores. Las funciones asistidas por la nube opcionales requieren consentimiento previo.

¿Puedo utilizar Convertidor de Color HEX a RGB / HSL sin conexión activa a Internet?

El uso sin conexión requiere que la página y los recursos de la herramienta terminen de almacenarse en caché. Las transformaciones básicas funcionan localmente; la IA opcional y el contacto requieren internet.

¿Convertidor de Color HEX a RGB / HSL es gratuito y tiene límites de uso?

Las herramientas básicas son gratuitas y no requieren una cuenta. Se aplican límites de memoria y de seguridad de cada herramienta. La IA opcional y los servicios de contacto tienen límites de uso.

Guía Técnica de Ingeniería

¿Buscas fórmulas y código? Aprende a convertir HEX a RGB y RGBA con opacidad en CSS y JavaScript

Leer Guía Completa

Herramientas Relacionadas

Optimiza tu flujo de trabajo con utilidades complementarias 100% privadas en tu navegador.

Diseño WCAG AAA

Verificador de Contraste (WCAG)

Comprueba el ratio de contraste entre colores de fondo y texto según los estándares de accesibilidad web WCAG 2.1 niveles AA y AAA.

Abrir Herramienta
CSS y Maquetación Playground Visual

Generador y Visualizador CSS Flexbox

Constructor visual interactivo de CSS Flexbox con vista previa en vivo, controles de alineación, propiedades de elementos hijos y exportación en CSS y Tailwind.

Abrir Herramienta
Diseño Cero CLS

Generador de Glassmorphism CSS

Genera sombras de caja avanzadas y efectos modernos de vidrio esmerilado con código CSS listo para copiar en tus proyectos web.

Abrir Herramienta
Vectores e Imágenes Rasterizador SVG

Conversor de SVG a PNG y Formatos Ráster

Convierte gráficos vectoriales SVG a PNG, WebP o JPEG de alta resolución con escalas hasta 8x, fondo transparente y descarga instantánea.

Abrir Herramienta
Tipografía y Fuentes Vector a Fuente Gratis

Convertidor Vector y SVG a Fuente (TTF y Webfont)

Convierte gráficos vectoriales SVG y proyectos IcoMoon en fuentes TTF reales en tu navegador. Vista previa en vivo y CSS @font-face sin subir archivos.

Abrir Herramienta
Explorar el directorio de herramientas