Convertidor de Colores

HEX funciona mejor para hojas de estilo CSS, herramientas de diseño como Figma o Sketch, y compartir colores en un formato compacto.

RGB es ideal para CSS con transparencia (rgba), software de edición de imágenes y manipulación dinámica de colores en código.

HSL es útil para crear paletas de colores ajustando saturación y luminosidad mientras se mantiene el tono constante, crear estados hover y entender las relaciones de color intuitivamente.

HEX es una representación hexadecimal (base 16) de 6 dígitos. Cada par representa Rojo, Verde, Azul. #FF0000 = rojo puro, #00FF00 = verde puro, #0000FF = azul puro.

RGB usa tres valores de 0-255 para los canales Rojo, Verde, Azul. rgb(255, 0, 0) = rojo. Los valores se pueden mezclar: rgb(128, 0, 128) = púrpura.

HSL usa Tono (0-360°), Saturación (0-100%), Luminosidad (0-100%). El tono es la posición en la rueda de colores, la saturación es la intensidad, la luminosidad va del negro al blanco.

Entender cómo funcionan los colores juntos te ayuda a tomar mejores decisiones de diseño. Aquí están los fundamentos que todo diseñador debería conocer.

Los colores complementarios están opuestos en la rueda de colores. Rojo y verde, azul y naranja, amarillo y púrpura. Crean alto contraste y tensión visual, útiles para botones de llamada a la acción o resaltar elementos importantes.

Los colores análogos son vecinos en la rueda. Azul, azul-verde y verde se sienten armoniosos juntos. Funcionan bien para crear diseños cohesivos que se sienten calmados y profesionales.

Los esquemas triádicos usan tres colores igualmente espaciados alrededor de la rueda. Ofrecen fuerte contraste visual mientras mantienen el balance. Piensa en los colores primarios o secundarios como ejemplos.

Alrededor del 8% de los hombres y el 0.5% de las mujeres tienen alguna forma de daltonismo. Diseñar con accesibilidad en mente significa que más personas pueden usar tu trabajo.

Las guías WCAG recomiendan una relación de contraste de al menos 4.5:1 para texto normal y 3:1 para texto grande. Puedes verificar las relaciones de contraste con herramientas de desarrollo del navegador o verificadores de accesibilidad dedicados.

Nunca dependas solo del color para transmitir información. Añade iconos, patrones o etiquetas de texto junto con la codificación de colores. Rojo y verde juntos son particularmente problemáticos ya que se ven similares para muchos usuarios daltónicos.

Prueba tus diseños con simuladores de daltonismo. Chrome DevTools tiene uno integrado en la pestaña Rendering.

CSS moderno ofrece múltiples formas de trabajar con color. Las propiedades personalizadas CSS (variables) te permiten definir colores una vez y reutilizarlos en toda tu hoja de estilos. Las nuevas funciones de color oklch() y lch() proporcionan espacios de color perceptualmente uniformes, lo que significa que un cambio de luminosidad del 10% se ve igual en todos los tonos. Para transparencia, rgba() y hsla() añaden un canal alfa. Al elegir un formato, HEX sigue siendo el más ampliamente soportado, pero HSL facilita la creación de variaciones de color programáticas.