Conversor de Colores

La herramienta soporta conversión bidireccional instantánea entre cinco modelos de color: • HEX — Notación hexadecimal estándar de CSS (#RRGGBB). Acepta formato corto de 3 dígitos (#RGB) que se expande automáticamente. Es el formato más usado en hojas de estilo y diseño web. • RGB — Modelo aditivo con valores de Rojo, Verde y Azul de 0 a 255. Cada canal se puede editar individualmente. Se exporta como rgb(R, G, B) listo para CSS. • HSL — Matiz (0-360°), Saturación (0-100%) y Luminosidad (0-100%). Más intuitivo que RGB para ajustes de color: cambiar la luminosidad no altera el tono, y la saturación controla la viveza del color. • HSB/HSV — Matiz (0-360°), Saturación (0-100%) y Brillo (0-100%). Similar a HSL pero con una interpretación diferente del brillo. Es el modelo que usan herramientas como Photoshop y Figma. • CMYK — Cian, Magenta, Amarillo y Negro (Key). Modelo sustractivo usado en impresión. La conversión es aproximada ya que depende del perfil de color del dispositivo de impresión. Los valores van de 0% a 100%. Además genera automáticamente variables CSS (--color, --color-rgb, --color-hsl) listas para copiar y pegar en tu código.

El verificador de contraste evalúa la accesibilidad de combinaciones de color texto/fondo según las Directrices de Accesibilidad para el Contenido Web (WCAG) 2.1: • Ratio de contraste — Se calcula usando la fórmula de luminancia relativa del W3C: (L1 + 0.05) / (L2 + 0.05). Los valores van de 1:1 (sin contraste) a 21:1 (negro sobre blanco). • AA Texto normal — Requiere ratio ≥ 4.5:1. Aplica a texto de menos de 18pt regular o 14pt bold. • AA Texto grande — Requiere ratio ≥ 3:1. Aplica a texto de 18pt regular o 14pt bold en adelante. • AAA Texto normal — Requiere ratio ≥ 7:1. El nivel más estricto de accesibilidad para texto pequeño. • AAA Texto grande — Requiere ratio ≥ 4.5:1. Nivel estricto para texto grande. • Componentes UI — Iconos, bordes y controles de interfaz requieren ratio ≥ 3:1 (AA) o ≥ 4.5:1 (AAA). La vista previa en tiempo real muestra texto de ejemplo en diferentes tamaños con la combinación de colores seleccionada, permitiendo evaluar visualmente la legibilidad antes de implementar.

El generador crea armonías de color basadas en la teoría del color. A partir de un color base, genera paletas según seis modos: • Complementarios — Color opuesto en la rueda cromática (180°). Máximo contraste visual, ideal para CTA y elementos que necesitan destacar. • Análogos — Colores adyacentes (±30°). Armonía natural y suave, frecuente en diseños de naturaleza y degradados. • Triádicos — Tres colores equidistantes (120° de separación). Balance entre contraste y armonía. Ideal para interfaces con tres niveles de jerarquía. • Split-complementarios — El color base más dos colores adyacentes a su complementario (150° y 210°). Similar al complementario pero menos agresivo. • Tetrádicos — Cuatro colores equidistantes (90° de separación). Ofrece la mayor variedad pero requiere cuidado en el balance visual. • Monocromáticos — Cinco variaciones del mismo matiz con diferente luminosidad (±15% y ±30%). Elegante y seguro, perfecto para estados de UI (hover, active, disabled). Cada color de la paleta se puede copiar individualmente en HEX o RGB, o exportar toda la paleta como CSS custom properties.