Generated by SassMeister.com.

input.scss

$primary: #0a8287;      // teal // use to add green
$secondary: #0e247e;    // blue

.secondary-700 {
    color: $secondary;
}
// target: #003865 00 38 65
.secondary-600 {
    color: mix($primary, scale-color($secondary, $lightness: -10%, $saturation: -36%), 15%)
}
.secondary-601 {
    $purified: scale-color($secondary, $saturation: 100%, $lightness: -20%);
    $purified-primary: scale-color($primary, $saturation: 100%, $lightness: -10%);
    background-color: $purified;
    border-color: $purified-primary;
    color: mix($purified-primary, scale-color($purified, $lightness: -25%), 36%)
}
// target: #00508a 00 50 8a
.secondary-500 {
    color: mix($primary, scale-color($secondary, $lightness: 5%, $saturation: -5%), 45%)
}

output.css

.secondary-700 {
  color: #0e247e;
}

.secondary-600 {
  color: #1c3865;
}

.secondary-601 {
  background-color: #001670;
  border-color: #007d83;
  color: #003865;
}

.secondary-500 {
  color: #0f5289;
}

settings.json

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