Revisando en el sitio, veo que esta pregunta se ha echo anteriormente con regularidad, la solución que proponen es revertir la propiedad con los selectores `> *` Fuentes: [1][1] [2][2] [3][3]

Quisiera que el filtro `brightness` para oscurecer el color primario `primary-color`, no afecte al texto en blanco `text-white` en la sección `footer`.

Tengo una plantilla web en la que existe únicamente un color primario (aplicado a *navbars*, botones, *footers*, etc) y un secundario que por defecto siempre será gris. 

Este color primario lo debo cambiar a petición por el usuario, tengo muchos usuarios, y para dar un poco de variedad a ese `primary-color`, aplico filtros CSS (como saturación para "avivar" un poco el tono, o brillo para aclarar u oscurecer el tono). Sé que no es la mejor forma y existen alternativas como LESS en CSS en la que puedo utilizar `@variables` para definir valores; lamentablemente el sitio está muy avanzado ya para pasarme a esta opción (A lo mejor en un futuro con más tiempo y conocimiento lo haga).

Usando estos filtros solo debo cambiar el valor heaxadecimal en `primary-color` y listo. (No estoy siendo perezoso, en serio me ahorra demasiado trabajo y tiempo).

Esto es lo que tengo actualmente.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .primary-color{
    background-color: #4285F4;
    }

    .primary-color .footer-copyright{
    filter: brightness(50%);
    }

    .text-white{
    color: #fff;
    }

<!-- language: lang-html -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Footer -->
      <footer class="page-footer font-small primary-color darken-3">
        <div class="container">
          <div class="row">
            <div class="col-12">
              <div class="mb-5 flex-center">
                <p class="text-center">Redes Sociales</p>            
              </div>
            </div>
          </div>
        </div>

        <!-- Copyright -->
        <div class="footer-copyright text-center text-white py-3 primary-color">© Copyright</div>

      </footer>

<!-- end snippet -->

Y así es como quisiera que se vea:

[![Imagen][4]][4]


  [1]: https://es.stackoverflow.com/questions/43796/aplicar-css-a-un-elemento-padre
  [2]: https://es.stackoverflow.com/questions/37122/como-aplicar-transformaciones-css3-a-un-elemento-padre-sin-afectar-los-elemento
  [3]: https://es.stackoverflow.com/questions/37084/c%C3%B3mo-seleccionar-el-elemento-anterior-a-otro-con-css
  [4]: https://i.sstatic.net/tku25.png