Generador y Selector de Colores HEX/RGB
Los colores en la web se representan en múltiples formatos: HEX (hexadecimal como #FF5733), RGB (valores de rojo, verde y azul de 0-255) y HSL (tono, saturación, luminosidad). Cada formato tiene sus casos de uso — HEX es compacto para CSS, RGB es intuitivo para mezclar y HSL es natural para ajustar brillo y saturación.
Esta herramienta te permite generar, seleccionar y convertir colores entre los tres formatos en tiempo real. También calcula las proporciones de contraste WCAG contra fondos blanco y negro, ayudándote a garantizar que tus elecciones de colores cumplan con los estándares de accesibilidad (niveles AA y AAA).
Como funciona
HEX a RGB: convierte pares de dígitos hexadecimales a decimal 0-255. RGB a HSL: normaliza RGB a 0-1, calcula tono por canal máximo, saturación por croma/luminosidad, luminosidad como (máx+mín)/2. Proporción de contraste WCAG: (L1 + 0,05) / (L2 + 0,05) donde L es la luminancia relativa.
Casos de uso
- Convertir colores entre formatos HEX, RGB y HSL para CSS
- Verificar accesibilidad de colores según estándares WCAG AA/AAA
- Encontrar armonías de colores complementarios, análogos y triádicos
- Generar colores aleatorios para inspiración de diseño
Preguntas frecuentes
¿Cómo convertir un código de color HEX a RGB?
Un código HEX como #FF5733 se compone de tres pares de dígitos hexadecimales, un par por canal. Convierte cada par a decimal: FF = 255 (rojo), 57 = 87 (verde), 33 = 51 (azul), lo que da rgb(255, 87, 51). Esta herramienta hace la conversión al instante en ambos sentidos.
¿Cuál es la diferencia entre los formatos de color HEX, RGB y HSL?
Los tres describen los mismos colores de formas distintas. HEX es un código compacto de seis dígitos muy usado en CSS, RGB expresa los canales rojo, verde y azul con valores de 0 a 255, y HSL describe el color por tono, saturación y luminosidad. HSL suele ser el formato más fácil para aclarar, oscurecer o suavizar un color.
¿Qué proporción de contraste necesito para cumplir WCAG AA?
El nivel AA de WCAG exige un contraste de al menos 4,5:1 para texto normal y 3:1 para texto grande. El nivel AAA, más estricto, exige 7:1 para texto normal y 4,5:1 para texto grande. Esta herramienta calcula la proporción de tu color contra fondos blanco y negro con la fórmula (L1 + 0,05) / (L2 + 0,05), donde L es la luminancia relativa.
¿Cómo aclarar u oscurecer un color sin cambiar su tono?
Trabaja en HSL y ajusta solo el valor de luminosidad, manteniendo fijos el tono y la saturación. Aumentar la luminosidad acerca el color al blanco y disminuirla lo acerca al negro, sin alterar el tono original. Hacer lo mismo en RGB es más difícil, porque habría que escalar los tres canales de forma proporcional.
¿Qué son las armonías de colores complementarios, análogos y triádicos?
Son relaciones entre tonos en el círculo cromático. El color complementario se sitúa justo enfrente (a 180 grados) y genera un contraste fuerte, los colores análogos están uno junto a otro y transmiten armonía, y el esquema triádico usa tres tonos separados 120 grados para una paleta equilibrada y vibrante. Este generador sugiere las tres armonías a partir de cualquier color inicial.