Generated by SassMeister.com.

input.scss

$lightblue: #75A8C1;
$darkgrey: #4B5255;
$middlegrey: #91A5AE;
$mediumblue: #32768E;

.test {
    // Light blue 50 %
    color: lightblue50;
    color: mix(white, $lightblue, 50%);
    
    // Light blue 20 %
    color: lightblue20;
    color: mix(white, $lightblue, 80%);
    
    // Dark grey 50 %
    color: darkgrey50;
    color: mix(white, $darkgrey, 50%);
    
    // Dark grey 20 %
    color: darkgrey20;
    color: mix(white, $darkgrey, 80%);
    
    // Middle grey 50 %
    color: middlegrey50;
    color: mix(white, $middlegrey, 50%);
    
    // Middle grey 20 %
    color: middlegrey20;
    color: mix(white, $middlegrey, 80%);
    
    // Medium blue 50 %
    color: mediumblue50;
    color: mix(white, $mediumblue, 50%);
    
    // Medium blue 20 %
    color: mediumblue20;
    color: mix(white, $mediumblue, 80%);
}

output.css

.test {
  color: lightblue50;
  color: #bad4e0;
  color: lightblue20;
  color: #e3eef3;
  color: darkgrey50;
  color: #a5a9aa;
  color: darkgrey20;
  color: #dbdcdd;
  color: middlegrey50;
  color: #c8d2d7;
  color: middlegrey20;
  color: #e9edef;
  color: mediumblue50;
  color: #99bbc7;
  color: mediumblue20;
  color: #d6e4e8;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}