ura.design/assets/scss/_colors.scss

// Default colors
$white: #ffffff;
$black: #000000;
$contrast: #73afea;

// Indigo
$indigo-list: (
  "50": #f7f7ff,
  "100": #ebebfa,
  "200": #d1d1f0,
  "300": #a6a6de,
  "400": #7c7ccc,
  "500": #6666c4,
  "600": #5b5bbd,
  "700": #4b4ba3,
  "800": #393982,
  "900": #292961,
  "950": #1a1a40,
);

$indigo-50: map-get($indigo-list, "50");
$indigo-100: map-get($indigo-list, "100");
$indigo-200: map-get($indigo-list, "200");
$indigo-300: map-get($indigo-list, "300");
$indigo-400: map-get($indigo-list, "400");
$indigo-500: map-get($indigo-list, "500");
$indigo-600: map-get($indigo-list, "600");
$indigo-700: map-get($indigo-list, "700");
$indigo-800: map-get($indigo-list, "800");
$indigo-900: map-get($indigo-list, "900");
$indigo-950: map-get($indigo-list, "950");

// Blue
$blue-list: (
  "50": #f6fafe,
  "100": #e4f0fb,
  "200": #b8d6f4,
  "300": #73afea,
  "400": #418cd8,
  "500": #1f78d1,
  "600": #1b69b6,
  "700": #17599c,
  "800": #134a81,
  "900": #0f3b66,
  "950": #0a2744,
);

$blue-50: map-get($blue-list, "50");
$blue-100: map-get($blue-list, "100");
$blue-200: map-get($blue-list, "200");
$blue-300: map-get($blue-list, "300");
$blue-400: map-get($blue-list, "400");
$blue-500: map-get($blue-list, "500");
$blue-600: map-get($blue-list, "600");
$blue-700: map-get($blue-list, "700");
$blue-800: map-get($blue-list, "800");
$blue-900: map-get($blue-list, "900");
$blue-950: map-get($blue-list, "950");

// Green
$green-list: (
  "50": #f1fdf6,
  "100": #dcf5e7,
  "200": #b3e6c8,
  "300": #75d09b,
  "400": #37b96d,
  "500": #1aaa55,
  "600": #168f48,
  "700": #12753a,
  "800": #0e5a2d,
  "900": #0a4020,
  "950": #072b15,
);

$green-50: map-get($green-list, "50");
$green-100: map-get($green-list, "100");
$green-200: map-get($green-list, "200");
$green-300: map-get($green-list, "300");
$green-400: map-get($green-list, "400");
$green-500: map-get($green-list, "500");
$green-600: map-get($green-list, "600");
$green-700: map-get($green-list, "700");
$green-800: map-get($green-list, "800");
$green-900: map-get($green-list, "900");
$green-950: map-get($green-list, "950");

// Gray
$gray-list: (
  "50": #fafafa,
  "100": #f4f4f5,
  "200": #e4e4e7,
  "300": #d4d4d8,
  "400": #a1a1aa,
  "500": #71717a,
  "600": #52525b,
  "700": #3f3f46,
  "800": #27272a,
  "900": #18181b,
  "950": #0c0c0e,
);

$gray-50: map-get($gray-list, "50");
$gray-100: map-get($gray-list, "100");
$gray-200: map-get($gray-list, "200");
$gray-300: map-get($gray-list, "300");
$gray-400: map-get($gray-list, "400");
$gray-500: map-get($gray-list, "500");
$gray-600: map-get($gray-list, "600");
$gray-700: map-get($gray-list, "700");
$gray-800: map-get($gray-list, "800");
$gray-900: map-get($gray-list, "900");
$gray-950: map-get($gray-list, "950");

// Slate
$slate-list: (
  "50": #F8FAFC,
  "100": #F1F5F9,
  "200": #E2E8F0,
  "300": #CBD5E1,
  "400": #94A3B8,
  "500": #64748B,
  "600": #475569,
  "700": #334155,
  "800": #1E293B,
  "900": #0F172A,
);

$slate-50: map-get($slate-list, "50");
$slate-100: map-get($slate-list, "100");
$slate-200: map-get($slate-list, "200");
$slate-300: map-get($slate-list, "300");
$slate-400: map-get($slate-list, "400");
$slate-500: map-get($slate-list, "500");
$slate-600: map-get($slate-list, "600");
$slate-700: map-get($slate-list, "700");
$slate-800: map-get($slate-list, "800");
$slate-900: map-get($slate-list, "900");

// Orange
$orange-list: (
  "50": #fffaf4,
  "100": #fff1de,
  "200": #fed69f,
  "300": #fdbc60,
  "400": #fca429,
  "500": #fc9403,
  "600": #de7e00,
  "700": #c26700,
  "800": #a35200,
  "900": #853c00,
  "950": #592800,
);

$orange-50: map-get($orange-list, "50");
$orange-100: map-get($orange-list, "100");
$orange-200: map-get($orange-list, "200");
$orange-300: map-get($orange-list, "300");
$orange-400: map-get($orange-list, "400");
$orange-500: map-get($orange-list, "500");
$orange-600: map-get($orange-list, "600");
$orange-700: map-get($orange-list, "700");
$orange-800: map-get($orange-list, "800");
$orange-900: map-get($orange-list, "900");
$orange-950: map-get($orange-list, "950");

// Red
$red-list: (
  "50": #fef6f5,
  "100": #fbe5e1,
  "200": #f2b4a9,
  "300": #ea8271,
  "400": #e05842,
  "500": #db3b21,
  "600": #c0341d,
  "700": #a62d19,
  "800": #8b2615,
  "900": #711e11,
  "950": #4b140b,
);

$red-50: map-get($red-list, "50");
$red-100: map-get($red-list, "100");
$red-200: map-get($red-list, "200");
$red-300: map-get($red-list, "300");
$red-400: map-get($red-list, "400");
$red-500: map-get($red-list, "500");
$red-600: map-get($red-list, "600");
$red-700: map-get($red-list, "700");
$red-800: map-get($red-list, "800");
$red-900: map-get($red-list, "900");
$red-950: map-get($red-list, "950");

// Dynamic background and color classes creation
@each $value in $indigo-list {
  .background-indigo-#{nth($value, 1)} {
    background-color: nth($value, 2) !important;
  }
  .color-indigo-#{nth($value, 1)} {
    color: nth($value, 2) !important;
  }
}

@each $value in $blue-list {
  .background-blue-#{nth($value, 1)} {
    background-color: nth($value, 2) !important;
  }
  .color-blue-#{nth($value, 1)} {
    color: nth($value, 2) !important;
  }
}

@each $value in $green-list {
  .background-green-#{nth($value, 1)} {
    background-color: nth($value, 2) !important;
  }
  .color-green-#{nth($value, 1)} {
    color: nth($value, 2) !important;
  }
}

@each $value in $gray-list {
  .background-gray-#{nth($value, 1)} {
    background-color: nth($value, 2) !important;
  }
  .color-gray-#{nth($value, 1)} {
    color: nth($value, 2) !important;
  }
}

@each $value in $slate-list {
  .background-slate-#{nth($value, 1)} {
    background-color: nth($value, 2) !important;
  }
  .color-slate-#{nth($value, 1)} {
    color: nth($value, 2) !important;
  }
}

@each $value in $orange-list {
  .background-orange-#{nth($value, 1)} {
    background-color: nth($value, 2) !important;
  }
  .color-orange-#{nth($value, 1)} {
    color: nth($value, 2) !important;
  }
}

@each $value in $red-list {
  .background-red-#{nth($value, 1)} {
    background-color: nth($value, 2) !important;
  }
  .color-red-#{nth($value, 1)} {
    color: nth($value, 2) !important;
  }
}