UTILSBOX⚡TODAS LAS TOOLS54+
JSON.FORMATHub de cinco herramientas: formatear, validar, minificar, pasar a XML y comparar dos JSON.//REGEX.TESTERProbador de expresiones regulares en tiempo real con explicación y reemplazo.//PDF.SUITEUnir, dividir, extraer texto, rotar y convertir páginas PDF a imágenes.//IMAGE.STUDIOEditor de fotos en el navegador: recortar, filtros, WebP, PNG y Base64.//HTML.BEAUTIFYFormateador de código HTML, minificador y codificador de entidades.//CSS.MINIFYFormateador de CSS, minificador para producción y conversor CSS a SCSS.//SQL.FORMATTEREmbellecedor de queries SQL, traductor entre dialectos y minificador.//SVG.EXCALIDRAWEditor visual vectorial integrado con Excalidraw y formateador SVG.//TEXT.DIFFContador de palabras, caracteres, tiempo de lectura y comparador Diff.//YAML.CONVERTValidador y formateador de archivos YAML/JSON con detección de sintaxis.//XML.PARSERFormateador de documentos XML, inspector de árbol y conversor a JSON.//GRAPHQL.STUDIOFormateador de queries y schemas SDL, minificador y clasificador AST.//BASE64.CODECCodificador y decodificador Base64 y URL-Safe con soporte UTF-8.//PASSWORD.GENGenerador de contraseñas criptográficamente seguras con medidor de entropía.//URL.STUDIOSuite de 8 herramientas: encode, decode, parse, build y query string.//QR.STUDIOCreador de códigos QR personalizados con logos, colores y degradados.//ASCII.EXPLORERTabla interactiva ASCII 0-255, atajos de teclado Alt y códigos CP437.//KEYCODES.LIVEDetector en vivo de eventos KeyboardEvent y tabla de códigos JavaScript.//JWT.DEBUGGERDecodificador de tokens JWT, claims y verificación de firma con Web Crypto.//BINARY.CODECConversor bidireccional texto a binario con lluvia Matrix y desglose ASCII.//CHARTS.STUDIOGenerador de gráficos interactivos (barras, líneas, torta) a partir de CSV.//UUID.V7Generador masivo de UUID v4, v7 ordenado por tiempo, v1 y validador.//CSV.JSONConversor bidireccional CSV a JSON con delimitadores y visor de tablas.//COLORS.STUDIOConvertidor HEX/RGB/HSL/CMYK, armonías cromáticas y contraste WCAG 2.1.//SEO.METAGenerador de Meta Tags, Open Graph y preview en vivo de Google SERP.//SCHEMA.JSONLDGenerador de datos estructurados Schema.org para Google Rich Snippets.//SITEMAP.XMLGenerador de sitemaps XML estándar (Protocolo 0.9) para Google y Bing.//ROBOTS.TXTGenerador de robots.txt, bloqueo de scrapers de IA y probador de rutas.//FAKE.DATAGenerador de mocks y datos sintéticos: exporta a JSON, CSV, SQL y TypeScript.//CLOCK.WORLDReloj mundial en tiempo real con globo 3D holográfico y husos horarios.//DATE.CALCDías entre fechas, edad exacta, días hábiles, Unix timestamp y cron parser.//CALC.SUITESuite de 56+ calculadoras: porcentajes, hipotecas, préstamos, IVA, IMC y sueldos.//JSON.FORMATHub de cinco herramientas: formatear, validar, minificar, pasar a XML y comparar dos JSON.//REGEX.TESTERProbador de expresiones regulares en tiempo real con explicación y reemplazo.//PDF.SUITEUnir, dividir, extraer texto, rotar y convertir páginas PDF a imágenes.//IMAGE.STUDIOEditor de fotos en el navegador: recortar, filtros, WebP, PNG y Base64.//HTML.BEAUTIFYFormateador de código HTML, minificador y codificador de entidades.//CSS.MINIFYFormateador de CSS, minificador para producción y conversor CSS a SCSS.//SQL.FORMATTEREmbellecedor de queries SQL, traductor entre dialectos y minificador.//SVG.EXCALIDRAWEditor visual vectorial integrado con Excalidraw y formateador SVG.//TEXT.DIFFContador de palabras, caracteres, tiempo de lectura y comparador Diff.//YAML.CONVERTValidador y formateador de archivos YAML/JSON con detección de sintaxis.//XML.PARSERFormateador de documentos XML, inspector de árbol y conversor a JSON.//GRAPHQL.STUDIOFormateador de queries y schemas SDL, minificador y clasificador AST.//BASE64.CODECCodificador y decodificador Base64 y URL-Safe con soporte UTF-8.//PASSWORD.GENGenerador de contraseñas criptográficamente seguras con medidor de entropía.//URL.STUDIOSuite de 8 herramientas: encode, decode, parse, build y query string.//QR.STUDIOCreador de códigos QR personalizados con logos, colores y degradados.//ASCII.EXPLORERTabla interactiva ASCII 0-255, atajos de teclado Alt y códigos CP437.//KEYCODES.LIVEDetector en vivo de eventos KeyboardEvent y tabla de códigos JavaScript.//JWT.DEBUGGERDecodificador de tokens JWT, claims y verificación de firma con Web Crypto.//BINARY.CODECConversor bidireccional texto a binario con lluvia Matrix y desglose ASCII.//CHARTS.STUDIOGenerador de gráficos interactivos (barras, líneas, torta) a partir de CSV.//UUID.V7Generador masivo de UUID v4, v7 ordenado por tiempo, v1 y validador.//CSV.JSONConversor bidireccional CSV a JSON con delimitadores y visor de tablas.//COLORS.STUDIOConvertidor HEX/RGB/HSL/CMYK, armonías cromáticas y contraste WCAG 2.1.//SEO.METAGenerador de Meta Tags, Open Graph y preview en vivo de Google SERP.//SCHEMA.JSONLDGenerador de datos estructurados Schema.org para Google Rich Snippets.//SITEMAP.XMLGenerador de sitemaps XML estándar (Protocolo 0.9) para Google y Bing.//ROBOTS.TXTGenerador de robots.txt, bloqueo de scrapers de IA y probador de rutas.//FAKE.DATAGenerador de mocks y datos sintéticos: exporta a JSON, CSV, SQL y TypeScript.//CLOCK.WORLDReloj mundial en tiempo real con globo 3D holográfico y husos horarios.//DATE.CALCDías entre fechas, edad exacta, días hábiles, Unix timestamp y cron parser.//CALC.SUITESuite de 56+ calculadoras: porcentajes, hipotecas, préstamos, IVA, IMC y sueldos.//
MÓDULO 05 · DISEÑO & PALETAS

Color Studio & Armonías

Estudio de color avanzado con conversión instantánea HEX, RGB, HSL, CMYK, validador de accesibilidad WCAG 2.1 y paletas cromáticas armónicas.

Alpha: 100%
PALETA CYBERPUNK:
HEX#00F6FF
RGBrgb(0, 246, 255)
RGBArgba(0, 246, 255, 1)
HSLhsl(182, 100%, 50%)
HSLAhsla(182, 100%, 50%, 1)
CMYKcmyk(100%, 4%, 0%, 0%)

ARMONÍAS CROMÁTICAS

COMPLEMENTARIO (180°)
ANÁLOGOS (±30°)
TRIÁDICA (120°)
TETRÁDICA (90°)
ESCALA DE LUMINOSIDAD / TONOS (15% - 90%)

VALIDADOR DE CONTRASTE WCAG 2.1

SOBRE FONDO BLANCO (#FFFFFF)
1.34:1
Aa Text Preview Sample
AA Normal FAILAAA Normal FAIL
SOBRE FONDO CYBER DARK (#0E0C1A)
14.39:1
Aa Text Preview Sample
AA Normal PASSAAA Normal PASS

Guía Completa: Espacios de Color, Conversión y Accesibilidad Web

1. ¿Qué son los espacios de color (HEX, RGB, HSL, CMYK)?

Los modelos de color son representaciones matemáticas de la luz. RGB y HEX definen la intensidad de los canales Rojo, Verde y Azul para pantallas digitales. HSL (Hue, Saturation, Lightness) modela el color de forma intuitiva para el ojo humano. CMYK se utiliza exclusivamente para impresión física.

2. Estándar de Accesibilidad WCAG 2.1 y Ratios de Contraste

Las Pautas de Accesibilidad para el Contenido Web (WCAG) exigen un ratio de contraste mínimo de 4.5:1 para texto normal (Nivel AA) y 7:1 para nivel AAA reforzado, garantizando legibilidad para personas con baja visión o daltonismo.

3. Armonías de Color: Complementarios, Análogos y Tríadas

Las armonías cromáticas se basan en relaciones geométricas en el círculo de color de 360 grados de Munsell/Itten para crear combinaciones visualmente balanceadas y atractivas.

4. Novedades en CSS Moderno: OKLCH, OKLab y color-mix()

El espacio OKLCH resuelve las inconsistencias de brillo percibido de HSL, permitiendo degradados uniformes y transiciones de color realistas en los navegadores modernos.

Preguntas Frecuentes (FAQs)

¿Por qué usar HSL en vez de HEX en hojas de estilo CSS?

HSL facilita la creación de temas dinámicos (modo claro/oscuro) modificando únicamente el parámetro de luminosidad (L) sin alterar el tono base (H).

¿Cómo se calcula el ratio de contraste entre dos colores?

Se calcula dividiendo la luminancia relativa (L1 + 0.05) / (L2 + 0.05), donde L1 es el color más claro y L2 el más oscuro, según la fórmula estándar de la W3C.

HERRAMIENTAS DE DISEÑO Y FRONTEND RELACIONADAS:

CSS Formatter & Minifier →SVG Studio & Excalidraw →Image Editor & Converter →