Qué puedes hacer con estas herramientas de CSS y color
- Convertidor de Color — escribe un color en HEX, RGB o HSL y los otros dos se actualizan al instante. Útil cuando un diseño te da uno y tu código necesita otro.
- Degradado — elige tus colores, escoge Lineal o Radial, fija el ángulo y pulsa Copiar CSS.
- Comprobador de Contraste — elige un color de texto y uno de fondo para ver si lo pueden leer también las personas con poca vista (WCAG AA y AAA).
- Sombra y Bordes — mueve el desplazamiento, el desenfoque y la extensión para crear un box-shadow, y redondea las esquinas con border-radius. Copia el CSS cuando te guste.
Palabras de color explicadas
- HEX — un color escrito como # seguido de seis letras o números, por ejemplo #2563EB.
- RGB — el mismo color como tres números: rojo, verde y azul.
- HSL — tono, saturación y luminosidad. Es más fácil de ajustar a mano, por ejemplo para aclarar un color.
- Contraste WCAG — una regla sobre cuánto deben diferir el texto y el fondo para que se lea bien. AA es el nivel al que aspiran la mayoría de las webs; AAA es más estricto.
Conviene saber antes de empezar
- Los colores son totalmente opacos: no hay transparencia (alfa) ni códigos hex de 8 dígitos.
- Los valores HSL se redondean a números enteros, así que al volver atrás un canal de color puede diferir en 1.
- Aprobar o suspender el contraste usa los colores exactos; la proporción mostrada se redondea a dos decimales, así que 4,496 aparece como 4.50:1 pero no llega a 4,5.
- Los degradados admiten hasta 6 colores, repartidos por igual, como ángulo lineal o radial circular.
Preguntas frecuentes
¿Estas herramientas CSS son gratis?
Sí. No hay cuenta y no hay nada que instalar.
¿Mis datos se suben a algún sitio?
No. Todo se calcula en directo en tu navegador.
¿Cómo convierto HEX a RGB?
Escribe o pega el código HEX en la casilla HEX del Convertidor de Color. Los valores RGB y HSL se rellenan solos.
¿Qué ratio de contraste necesito?
Para texto normal, busca al menos 4,5:1 (AA). Para texto grande basta con 3:1. El nivel AAA, más estricto, pide 7:1 en texto normal.