Error Canal de color rgb()/rgba() fuera de rango
Los rangos válidos para rojo, verde, azul y alfa en valores de color rgb()/rgba(), y qué pasa cuando un canal excede esos rangos.
El validador revisa cada canal dentro de un valor rgb() o rgba() separado por comas: los canales rojo, verde y azul deben estar dentro de 0–255 (o 0%–100% si se escriben como porcentaje), y el canal alfa — el cuarto argumento en rgba() — debe estar dentro de 0–1 (o 0%–100%).
Ejemplo
/* Incorrecto: 300 está por encima del rango 0-255 */
.banner { background: rgb(300, 0, 0); }
/* Incorrecto: alfa por encima de 1 */
.banner { background: rgba(0, 0, 0, 1.5); }
/* Correcto */
.banner { background: rgb(255, 0, 0); }
.banner { background: rgba(0, 0, 0, 0.5); }Por qué importa
Cada uno de rojo, verde y azul representa un byte de intensidad de color, que es precisamente por qué el rango válido llega hasta 255 — es el valor más grande que puede contener un solo byte. Un valor como 300 no es un rojo "muy saturado"; simplemente está fuera del formato por completo. Los navegadores manejan esto ajustando (clamping) el valor fuera de rango al valor válido más cercano (300 se convierte en 255), así que el color a menudo igual se renderiza — solo que sin distinguirse de lo que hubiera producido un 255 plano, lo cual enmascara el error. Esto generalmente viene de un error de tipeo manual, o de valores de color calculados programáticamente (una función de aclarar/oscurecer, por ejemplo) sin ajustar el resultado al rango válido antes de escribirlo.
Frequently asked questions
¿Un valor fuera de rango realmente rompe el color, o solo lo ajusta?
Los navegadores ajustan los valores RGB y alfa fuera de rango al límite válido más cercano en vez de rechazar toda la declaración, así que el color generalmente igual se renderiza — solo que topado, lo cual puede verse idéntico al valor correcto a primera vista y ocultar el bug subyacente.
¿Esta revisión también cubre colores hsl()?
Actualmente no — esta revisión cubre específicamente la sintaxis rgb()/rgba() separada por comas, que es por mucho la forma más común en que aparecen valores fuera de rango en CSS escrito a mano o generado.