Colores que combinan con el gris

La misma lámina, de noche

/* Combinación 244 de Wada — bluenze.com/paletas */
:root {
  --fondo: #fff2f2;
  --superficie: #be9f9e;
  --texto: #1c2529;
  --tinta: #1c2529;
  --texto-suave: #5a656a;
  --titular: #006984;
  --acento: #b54b01;
  --acento-texto: #fcf5f5;
  --enlace: #b44c02;
  --borde: #dececd;
  --apoyo-1: #728179;

  /* la lámina de Wada, tal cual */
  --lamina-1: #be9f9e;
  --lamina-2: #c75b16;
  --lamina-3: #728179;
  --lamina-4: #006984;

  --acento-50: #f6f6f6;
  --acento-100: #fee6db;
  --acento-200: #ffcdb3;
  --acento-300: #ffaa7c;
  --acento-400: #ef884e;
  --acento-500: #d96925;
  --acento-600: #b54b01;
  --acento-700: #933d03;
  --acento-800: #6e2c01;
  --acento-900: #481e00;
  --neutro-50: #f8f6f5;
  --neutro-100: #eeeae9;
  --neutro-200: #dbd6d4;
  --neutro-300: #c4bdb9;
  --neutro-400: #aaa19d;
  --neutro-500: #918782;
  --neutro-600: #776e69;
  --neutro-700: #5e5551;
  --neutro-800: #453f3b;
  --neutro-900: #2e2926;

  --boton: #b54b01;
  --boton-encima: #993f02;
  --boton-pulsado: #7e3303;
  --boton-apagado: #c1aa9f;
  --foco: #b34d09;

  --exito: #0e7f21;
  --aviso: #a38a0f;
  --error: #c63b29;
  --info: #1c70b6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #2c1f18;
    --superficie: #3c2a22;
    --borde: #574238;
    --texto: #f7ece6;
    --tinta: #f7ece6;
    --texto-suave: #bbaea8;
    --acento: #e97632;
    --acento-texto: #2d211b;
  }
}

La misma lámina, de noche

/* Combinación 346 de Wada — bluenze.com/paletas */
:root {
  --fondo: #e7faee;
  --superficie: #c2e1cf;
  --texto: #2e2024;
  --tinta: #2e2024;
  --texto-suave: #735d64;
  --titular: #b9366c;
  --acento: #8c9005;
  --acento-texto: #2e2024;
  --enlace: #6d7108;
  --borde: #c6d5cc;
  --apoyo-1: #728179;

  /* la lámina de Wada, tal cual */
  --lamina-1: #c2e1cf;
  --lamina-2: #cfd23e;
  --lamina-3: #728179;
  --lamina-4: #b9366c;

  --acento-50: #f9f7e4;
  --acento-100: #f0ecca;
  --acento-200: #dddaa2;
  --acento-300: #c5c273;
  --acento-400: #a8a840;
  --acento-500: #8c9005;
  --acento-600: #717401;
  --acento-700: #585b05;
  --acento-800: #414304;
  --acento-900: #2c2c03;
  --neutro-50: #f7f6f5;
  --neutro-100: #ebebe8;
  --neutro-200: #d8d7d3;
  --neutro-300: #bfbeb8;
  --neutro-400: #a4a39c;
  --neutro-500: #8a8980;
  --neutro-600: #717067;
  --neutro-700: #585750;
  --neutro-800: #41403a;
  --neutro-900: #2b2a26;

  --boton: #8c9005;
  --boton-encima: #7a7d0c;
  --boton-pulsado: #696b09;
  --boton-apagado: #d3d1be;
  --foco: #8c900d;

  --exito: #107e22;
  --aviso: #a38a01;
  --error: #c0422f;
  --info: #1270b8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #232215;
    --superficie: #302f1f;
    --borde: #494735;
    --texto: #efeee4;
    --tinta: #efeee4;
    --texto-suave: #b2b1a6;
    --acento: #989c1a;
    --acento-texto: #252419;
  }
}

La misma lámina, de noche

/* Complementaria — bluenze.com/paletas */
:root {
  --fondo: #f4f6f0;
  --superficie: #e2e4db;
  --texto: #242325;
  --tinta: #242325;
  --texto-suave: #636365;
  --titular: #27252d;
  --acento: #8a8b86;
  --acento-texto: #242325;
  --enlace: #6c6d68;
  --borde: #d1d2ce;
  --apoyo-1: #4c4b4e;

  /* la lámina, tal cual */
  --lamina-1: #8a8b86;
  --lamina-2: #4c4b4e;
  --lamina-3: #f3f5ec;
  --lamina-4: #27252d;

  --acento-50: #f6f6f6;
  --acento-100: #ebebe9;
  --acento-200: #d7d7d5;
  --acento-300: #bebebb;
  --acento-400: #a3a49f;
  --acento-500: #8a8b86;
  --acento-600: #6f706b;
  --acento-700: #575753;
  --acento-800: #40403d;
  --acento-900: #2a2a28;
  --neutro-50: #f6f7f5;
  --neutro-100: #ebebe8;
  --neutro-200: #d7d8d3;
  --neutro-300: #bebfb9;
  --neutro-400: #a2a49c;
  --neutro-500: #888a81;
  --neutro-600: #6f7068;
  --neutro-700: #565851;
  --neutro-800: #3f403b;
  --neutro-900: #292a26;

  --boton: #8a8b86;
  --boton-encima: #787974;
  --boton-pulsado: #676767;
  --boton-apagado: #d0d1d0;
  --foco: #868e6a;

  --exito: #457942;
  --aviso: #9e8b48;
  --error: #a45747;
  --info: #3670ac;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #212221;
    --superficie: #2e2e2d;
    --borde: #474745;
    --texto: #eeeeed;
    --tinta: #eeeeed;
    --texto-suave: #b0b1b0;
    --acento: #959691;
    --acento-texto: #242423;
  }
}

La misma lámina, de noche

/* Análoga — bluenze.com/paletas */
:root {
  --fondo: #f4f6f0;
  --superficie: #e2e4db;
  --texto: #232423;
  --tinta: #232423;
  --texto-suave: #636362;
  --titular: #666864;
  --acento: #8b8a86;
  --acento-texto: #232423;
  --enlace: #71716d;
  --borde: #d1d2ce;
  --apoyo-1: #8a8b86;

  /* la lámina, tal cual */
  --lamina-1: #b0afab;
  --lamina-2: #8a8b86;
  --lamina-3: #666864;
  --lamina-4: #f3f5ec;

  --acento-50: #f7f6f6;
  --acento-100: #ebebea;
  --acento-200: #d8d7d5;
  --acento-300: #bfbebb;
  --acento-400: #a4a3a0;
  --acento-500: #8b8a86;
  --acento-600: #706f6c;
  --acento-700: #585754;
  --acento-800: #40403d;
  --acento-900: #2a2a28;
  --neutro-50: #f7f6f5;
  --neutro-100: #ecebe8;
  --neutro-200: #d8d7d3;
  --neutro-300: #c0beb8;
  --neutro-400: #a5a39b;
  --neutro-500: #8b8980;
  --neutro-600: #717067;
  --neutro-700: #595750;
  --neutro-800: #41403a;
  --neutro-900: #2b2a26;

  --boton: #8b8a86;
  --boton-encima: #797874;
  --boton-pulsado: #676767;
  --boton-apagado: #d0d0cf;
  --foco: #918b67;

  --exito: #457942;
  --aviso: #9e8b48;
  --error: #a45747;
  --info: #3670ac;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #222221;
    --superficie: #2e2e2d;
    --borde: #474746;
    --texto: #eeeeed;
    --tinta: #eeeeed;
    --texto-suave: #b1b0b0;
    --acento: #979692;
    --acento-texto: #242423;
  }
}

La misma lámina, de noche

/* Monocroma con acento — bluenze.com/paletas */
:root {
  --fondo: #f4f5f2;
  --superficie: #e7e9e3;
  --texto: #242423;
  --tinta: #242423;
  --texto-suave: #636362;
  --titular: #2d2e29;
  --acento: #4c4b4f;
  --acento-texto: #f6f7f5;
  --enlace: #4c4b4f;
  --borde: #d1d2cf;
  --apoyo-1: #8a8b86;

  /* la lámina, tal cual */
  --lamina-1: #2d2e29;
  --lamina-2: #8a8b86;
  --lamina-3: #e7e9e3;
  --lamina-4: #4c4b4f;

  --acento-50: #f6f6f7;
  --acento-100: #ebebec;
  --acento-200: #d7d7d9;
  --acento-300: #bebec1;
  --acento-400: #a4a3a6;
  --acento-500: #89888d;
  --acento-600: #706f73;
  --acento-700: #4c4b4f;
  --acento-800: #403f42;
  --acento-900: #2a2a2c;
  --neutro-50: #f7f6f8;
  --neutro-100: #ebebed;
  --neutro-200: #d8d7db;
  --neutro-300: #bfbdc3;
  --neutro-400: #a4a2aa;
  --neutro-500: #8a8890;
  --neutro-600: #706e77;
  --neutro-700: #58565d;
  --neutro-800: #403f45;
  --neutro-900: #2a292e;

  --boton: #4c4b4f;
  --boton-encima: #3c3b3f;
  --boton-pulsado: #2c2c2c;
  --boton-apagado: #8c8c8c;
  --foco: #4e4767;

  --exito: #457942;
  --aviso: #9e8b48;
  --error: #a45747;
  --info: #3670ac;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #222122;
    --superficie: #2e2e2f;
    --borde: #474648;
    --texto: #eeeeee;
    --tinta: #eeeeee;
    --texto-suave: #b1b0b1;
    --acento: #96959a;
    --acento-texto: #242424;
  }
}