Elige colores, crea degradados, comprueba el contraste y genera CSS de sombras y bordes redondeados — todo en un solo lugar. Nada se sube, todo se actualiza en vivo mientras escribes.
Haz clic en el color para elegir uno
HEX
RGB
HSL
Escribe en cualquier campo — HEX, RGB o HSL — y los otros dos se actualizan automáticamente, junto con el color de muestra.
Colores
Tipo
Ángulo 90°
Color del texto
Color de fondo
El rápido zorro marrón
Salta sobre el perro perezoso — así se ve el texto normal del cuerpo.
Ratio de contraste21:1
Texto normal — AA
Texto normal — AAA
Texto grande — AA
Texto grande — AAA
WCAG (Web Content Accessibility Guidelines) establece ratios mínimos de contraste para que el texto siga siendo legible para personas con baja visión. AA es el estándar al que aspiran la mayoría de los sitios; AAA es más estricto. "Texto grande" significa 18pt o más (o 14pt o más en negrita).
Sombra
Desplazamiento X8px
Desplazamiento Y8px
Desenfoque24px
Extensión0px
Color de la sombra
Opacidad 20%
Bordes Redondeados
Todas las esquinas12px
Míralo: degradados CSS, conversor de colores, comprobador de contraste y sombras en una sola herramienta
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.