Generated by SassMeister.com.

input.scss

@use 'sass:color' as color;

$brand-colors: (
  'brand-turquoise-shade-1': color.mix(#1bade8, #ffffff, 10%),
  'brand-turquoise-shade-2': color.mix(#1bade8, #ffffff, 30%),
  'brand-turquoise-shade-3': color.mix(#1bade8, #ffffff, 50%),
  'brand-turquoise-shade-4': color.mix(#1bade8, #000000, 50%),
  'brand-turquoise-shade-5': color.mix(#1bade8, #000000, 30%),
  'brand-turquoise-shade-6': color.mix(#1bade8, #000000, 10%),
  
  'brand-blue-shade-1': color.mix(#0074d9, #ffffff, 20%),
  'brand-blue-shade-2': color.mix(#0074d9, #ffffff, 40%),
  'brand-blue-shade-3': color.mix(#0074d9, #ffffff, 60%),
  'brand-blue-shade-4': color.mix(#0074d9, #000000, 60%),
  'brand-blue-shade-5': color.mix(#0074d9, #000000, 40%),
  'brand-blue-shade-6': color.mix(#0074d9, #000000, 20%),
  
  'brand-indigo-shade-1': color.mix(#34558b, #ffffff, 20%),
  'brand-indigo-shade-2': color.mix(#34558b, #ffffff, 40%),
  'brand-indigo-shade-3': color.mix(#34558b, #ffffff, 60%),
  'brand-indigo-shade-4': color.mix(#34558b, #000000, 60%),
  'brand-indigo-shade-5': color.mix(#34558b, #000000, 40%),
  'brand-indigo-shade-6': color.mix(#34558b, #000000, 20%)
);

@each $name, $color in $brand-colors {
  #{$name} {
    color: #{$color};
  }
}

output.css

brand-turquoise-shade-1 {
  color: #e8f7fd;
}

brand-turquoise-shade-2 {
  color: #bbe6f8;
}

brand-turquoise-shade-3 {
  color: #8dd6f4;
}

brand-turquoise-shade-4 {
  color: #0e5774;
}

brand-turquoise-shade-5 {
  color: #083446;
}

brand-turquoise-shade-6 {
  color: #031117;
}

brand-blue-shade-1 {
  color: #cce3f7;
}

brand-blue-shade-2 {
  color: #99c7f0;
}

brand-blue-shade-3 {
  color: #66ace8;
}

brand-blue-shade-4 {
  color: #004682;
}

brand-blue-shade-5 {
  color: #002e57;
}

brand-blue-shade-6 {
  color: #00172b;
}

brand-indigo-shade-1 {
  color: #d6dde8;
}

brand-indigo-shade-2 {
  color: #aebbd1;
}

brand-indigo-shade-3 {
  color: #8599b9;
}

brand-indigo-shade-4 {
  color: #1f3353;
}

brand-indigo-shade-5 {
  color: #152238;
}

brand-indigo-shade-6 {
  color: #0a111c;
}

settings.json

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