Cómo convertir HEX a RGB y comprobar el contraste del texto online gratis

Has elegido un color para tu web, y ahora el diseño dice HEX pero tu código quiere RGB. O has hecho un botón que te gusta y no estás seguro de que alguien pueda leer el texto. Las Herramientas CSS y Color de GetPlugzz hacen las dos cosas, y dos más: crean degradados y generan CSS de box-shadow y border-radius. Todo está en una sola página, se actualiza en vivo mientras escribes y funciona en tu navegador, así que no hay cuenta y no se sube nada.

Las cuatro herramientas, en un minuto

Abre las Herramientas CSS y Color y elige una pestaña:

• Convertidor de Color. Escribe un color como HEX, RGB o HSL y los otros dos se actualizan al instante. También puedes hacer clic en el color para elegir uno.
• Degradado. Elige tus colores (puedes añadir más), decide entre lineal o radial, ajusta el ángulo y pulsa Copiar CSS.
• Comprobador de Contraste. Elige un color de texto y uno de fondo y mira si lo pueden leer personas con vista débil, con resultado para WCAG AA y AAA.
• Sombra y Bordes. Desliza el desplazamiento, el desenfoque y la expansión para armar un box-shadow, y redondea las esquinas con border-radius. Copia el CSS cuando se vea bien.

HEX, RGB y HSL: un color, tres formas de decirlo

Piensa en un mismo color de pintura escrito en tres etiquetas distintas. La pintura es la misma, solo cambia cómo está escrita la receta:

• HEX es el código corto: un # seguido de seis letras o números, como #2563EB.
• RGB es la receta: tres números que dicen cuánto rojo, verde y azul mezclar.
• HSL son los mandos: tono, saturación y luminosidad. Es el más fácil de ajustar a mano. ¿Quieres el mismo color un poco más claro? Solo giras un mando.

Los diseños suelen darte uno de estos y tu código necesita otro, y ahí es justo cuando un convertidor te ahorra unos minutos.

Cómo convertir HEX a RGB

1. Abre el Convertidor de Color. Es la primera pestaña.
2. Escribe o pega el código HEX en el campo HEX.
3. Lee el resultado. Los valores RGB y HSL se rellenan solos, junto con el color de muestra.

Funciona también al revés. Escribe en cualquiera de los tres campos y los otros dos te siguen.

¿Se lee de verdad tu texto? (el problema del susurro)

El texto gris claro sobre fondo blanco se ve elegante en tu pantalla. Para alguien con vista débil, o con el móvil bajo el sol, es un susurro en una habitación ruidosa. El Comprobador de Contraste mide cuánto se diferencian el color del texto y el del fondo y te dice si aprueban.

Usa WCAG, las Pautas de Accesibilidad para el Contenido Web, que fijan un contraste mínimo para que el texto siga siendo legible para personas con baja visión. Hay dos niveles: AA es el estándar al que apuntan la mayoría de webs, y AAA es más estricto. Lo que necesitas:

• Texto normal: al menos 4,5:1 para AA y 7:1 para AAA.
• Texto grande: 3:1 basta para AA. Grande significa 18pt o más, o 14pt o más en negrita.

La herramienta muestra el ratio y un resultado para texto normal y grande en los dos niveles, así que no tienes que hacer ninguna cuenta.

Degradados y sombras sin escribir el CSS a mano

Para un degradado, elige tus colores, decide lineal o radial, ajusta el ángulo y pulsa Copiar CSS. Ese es todo el trabajo.

Para una sombra, piensa en una lámpara sobre una caja. El desplazamiento cambia dónde cae la sombra, un desenfoque mayor la hace más suave y la expansión la hace más grande. Puedes fijar el color y la opacidad de la sombra, o hacerla interior. Luego redondea las esquinas con border-radius, todas a la vez, y copia el CSS cuando se vea bien.

Cuándo lo vas a necesitar de verdad

• Un diseño te da un código HEX y tu código quiere RGB o HSL.
• Un botón o un título del que quieres comprobar que el texto se lee.
• Un fondo de página o de tarjeta que necesita un buen degradado.
• Una tarjeta que debe destacar de la página con una sombra suave y esquinas redondeadas.
• Una comprobación de accesibilidad para un cliente, un trabajo del cole o tu propia web.

Conviene saber antes de empezar

Preguntas frecuentes