CLIENT ENGINE // AIR-GAPPED

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.

APPARATUS // COLOR-PICKER VERIFIED OK // 0.0ms

Tabla de Referencia Rápida

Latencia de Conversión < 0.1 ms

Modelos de Color Compatibles HEX, RGB, HSL, OKLCH

Estándar WCAG ISO/IEC 40500 (WCAG 2.1)

Generación de Paletas Armonía Pastel (Local)

Especificación CSS CSS Color Level 4

Fórmula Matemática

\text{Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05} \quad \text{where} \; L = 0.2126 R_{\text{lin}} + 0.7152 G_{\text{lin}} + 0.0722 B_{\text{lin}}

Calcula la luminancia relativa dentro del espacio de color sRGB y determina la relación de contraste WCAG 2.1 para el cumplimiento de los niveles AA y AAA.

Descripción General y Contexto Técnico

La representación del color en el diseño de interfaces digitales ha evolucionado rápidamente desde las cadenas hexadecimales y el espacio sRGB básico de 24 bits hasta los espacios de color modernos perceptualmente uniformes. Los modelos web tradicionales como HSL (Matiz, Saturación, Luminosidad) adolecen de un defecto perceptual crítico: el ojo humano percibe el verde y el amarillo como colores sustancialmente más brillantes que el azul profundo aunque ambos compartan exactamente un 50% de luminosidad matemática. Esta limitación dificulta enormemente la creación de paletas de diseño equilibradas y accesibles en HSL, provocando frecuentes incumplimientos de contraste.

El modelo de color OKLCH —estandarizado en el Módulo de Color CSS Nivel 4 (CSS Color Module Level 4)— corrige este problema al vincular las coordenadas cromáticas directamente con la percepción visual humana. En OKLCH, una luminosidad del 70% ofrece la misma luminancia percibida con independencia de si el matiz es verde esmeralda, azul cielo o coral. Kitiverse pone a disposición de los desarrolladores web y diseñadores de interfaces UI un banco de trabajo integral para convertir entre HEX, RGB, HSL y OKLCH, verificar las proporciones de contraste WCAG 2.1 frente a fondos claros y oscuros, y descubrir paletas armónicas pastel con un funcionamiento 100% sin registro, procesamiento local en el navegador y almacenamiento en tu dispositivo.

Cómo convertir colores y comprobar el contraste de accesibilidad

Ajusta la muestra visual de color, los controles deslizantes o introduce valores numéricos exactos en cualquier formato. El conversor mantiene todos los espacios sincronizados en tiempo real.

Selecciona un color base mediante el selector de color nativo del sistema, o pega una cadena HEX, RGB, HSL u OKLCH existente directamente en su campo de texto correspondiente.

Inspecciona las conversiones matemáticas en vivo entre los cuatro formatos, que se actualizan al instante a medida que ajustas el matiz, el croma o la saturación.

Revisa la calificación de contraste WCAG 2.1. La tarjeta calcula la relación exacta de contraste tanto frente al blanco puro (#FFFFFF) como frente al pizarra oscuro (#0F172A) para verificar el cumplimiento del Nivel AA (4.5:1) o Nivel AAA (7.0:1).

Explora la paleta armónica pastel generada automáticamente para inspirarte y haz clic en cualquier muestra o botón de copia para llevar su código hexadecimal al portapapeles.

Preguntas Frecuentes

¿Qué es el espacio de color OKLCH y por qué deberían utilizarlo los diseñadores web modernos?

OKLCH (Luminosidad, Croma y Matiz de Oklab) es un espacio de color cilíndrico diseñado para reflejar fielmente cómo el sistema visual humano percibe el color. A diferencia de sRGB o HSL tradicionales, OKLCH es perceptualmente uniforme. Esto significa que dos colores con el mismo valor de Luminosidad (L) se ven igualmente brillantes para el observador humano, permitiendo a los diseñadores crear paletas predecibles y accesibles sin tener que corregir manualmente cada matiz.

¿Cuáles son los requisitos legales de contraste WCAG 2.1 para la accesibilidad digital?

Bajo las Pautas de Accesibilidad para el Contenido Web reconocidas internacionalmente (WCAG 2.1, codificadas como ISO/IEC 40500 y exigidas por la normativa europea EN 301 549 y la ley ADA estadounidense), el texto de cuerpo normal debe alcanzar una relación de contraste mínima de 4.5:1 frente a su fondo para cumplir el Nivel AA. El texto grande (al menos 18pt o 14pt en negrita) requiere un mínimo de 3:1. Para el Nivel AAA avanzado, el texto normal debe alcanzar o superar una relación de 7:1.

¿Puedo usar la sintaxis OKLCH directamente en hojas de estilo CSS modernas?

Sí. Todos los navegadores web modernos (Chrome, Edge, Safari y Firefox) ofrecen soporte nativo para la función oklch() del Módulo de Color CSS Nivel 4 (por ejemplo, color: oklch(0.75 0.14 150)). Esto te permite definir colores directamente en CSS moderno sin necesidad de preprocesadores ni polyfills.

¿Qué sucede si un color queda fuera de la gama de visualización sRGB estándar?

Mientras que los monitores tradicionales solo muestran la gama de colores sRGB, los teléfonos móviles modernos y las pantallas de gama alta admiten gamas más amplias como Display P3. OKLCH puede expresar colores P3 vibrantes que no existen dentro de sRGB. Al convertir de OKLCH a HEX o RGB estándar, Kitiverse ajusta automáticamente los valores al límite válido más cercano dentro de sRGB.

¿Kitiverse sube o almacena las paletas de colores de mi marca?

No. Todas las operaciones matemáticas de color, transformaciones matriciales, cálculos de luminancia WCAG y algoritmos de paletas se ejecutan íntegramente en tu equipo local dentro del hilo de ejecución de tu navegador. Todo es 100% sin registro, procesamiento local en el navegador y almacenamiento en tu dispositivo.

¿Cuál es la fórmula de luminancia relativa empleada para calcular el contraste WCAG?

El contraste WCAG se calcula a partir de la luminancia relativa (L) de dos colores, definida como el brillo relativo de cualquier punto en un espacio de color normalizado a 0 para el negro más oscuro y a 1 para el blanco más puro. La fórmula aplica una expansión gamma lineal a los canales sRGB, los pondera según la sensibilidad espectral humana (0.2126 Rojo + 0.7152 Verde + 0.0722 Azul) y calcula la proporción (L1 + 0.05) / (L2 + 0.05).

Instrumentos Relacionados en Este Banco

Todas las herramientas de Color y Diseño →

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.

Color y Diseño →

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.

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.