component

Colors

Customizable properties

White Color

:root {
  --color-white: #ffffff;
}

Contrast Color

--color-contrast-150: #18202d;
--color-contrast-140: #1d2635;
--color-contrast-130: #222c3e;
--color-contrast-120: #263247;
--color-contrast-110: #2b3950;
--color-contrast: #303F59;
--color-contrast-90: #45526a;
--color-contrast-80: #59657a;
--color-contrast-70: #6e798b;
--color-contrast-60: #838c9b;
--color-contrast-50: #989fac;
--color-contrast-40: #acb2bd;
--color-contrast-30: #c1c5cd;
--color-contrast-20: #d6d9de;
--color-contrast-10: #eaecee;
--color-contrast-5: #f5f5f7;

Secondary Color

  --color-secondary-150: #801a2b;
  --color-secondary-140: #991f33;
  --color-secondary-130: #b3243c;
  --color-secondary-120: #cc2944;
  --color-secondary-110: #e62e4d;
  --color-secondary: #FF3355;
  --color-secondary-90: #ff4766;
  --color-secondary-80: #ff5c77;
  --color-secondary-70: #ff7088;
  --color-secondary-60: #ff8599;
  --color-secondary-50: #ff99aa;
  --color-secondary-40: #ffadbb;
  --color-secondary-30: #ffc2cc;
  --color-secondary-20: #ffd6dd;
  --color-secondary-10: #ffebee;
  --color-secondary-5: #fff5f7;
  --color-secondary-2: #fffbfc;

Info Color

  --color-info-150: #2b5e78;
  --color-info-140: #337190;
  --color-info-130: #3c84a8;
  --color-info-120: #4496c0;
  --color-info-110: #4da9d8;
  --color-info: #55BCF0;
  --color-info-90: #66c3f2;
  --color-info-80: #77c9f3;
  --color-info-70: #88d0f5;
  --color-info-60: #99d7f6;
  --color-info-50: #aadef8;
  --color-info-40: #bbe4f9;
  --color-info-30: #ccebfb;
  --color-info-20: #ddf2fc;
  --color-info-10: #eef8fe;
  --color-info-5: #f7fcfe;
  --color-info-2: #fcfeff;

Success Color

  --color-success-150: #156b22;
  --color-success-140: #198029;
  --color-success-130: #1d9530;
  --color-success-120: #22aa36;
  --color-success-110: #26c03d;
  --color-success: #2AD544;
  --color-success-90: #3fd957;
  --color-success-80: #55dd69;
  --color-success-70: #6ae27c;
  --color-success-60: #7fe68f;
  --color-success-50: #95eaa2;
  --color-success-40: #aaeeb4;
  --color-success-30: #bff2c7;
  --color-success-20: #d4f7da;
  --color-success-10: #eafbec;
  --color-success-5: #f4fdf6;
  --color-success-2: #fbfefb;

Warning Color

  --color-warning-150: #806600;
  --color-warning-140: #997a00;
  --color-warning-130: #b38f00;
  --color-warning-120: #cca300;
  --color-warning-110: #e6b800;
  --color-warning: #FFCC00;
  --color-warning-90: #ffd11a;
  --color-warning-80: #ffd633;
  --color-warning-70: #ffdb4d;
  --color-warning-60: #ffe066;
  --color-warning-50: #ffe680;
  --color-warning-40: #ffeb99;
  --color-warning-30: #fff0b3;
  --color-warning-20: #fff5cc;
  --color-warning-10: #fffae6;
  --color-warning-5: #fffcf2;
  --color-warning-2: #fffefa;

Danger Color

  --color-danger-150: #801f1a;
  --color-danger-140: #99251f;
  --color-danger-130: #b32b24;
  --color-danger-120: #cc3229;
  --color-danger-110: #e6382e;
  --color-danger: #FF3E33;
  --color-danger-90: #ff5147;
  --color-danger-80: #ff655c;
  --color-danger-70: #ff7870;
  --color-danger-60: #ff8b85;
  --color-danger-50: #ff9f99;
  --color-danger-40: #ffb2ad;
  --color-danger-30: #ffc5c2;
  --color-danger-20: #ffd8d6;
  --color-danger-10: #ffeceb;
  --color-danger-5: #fff5f5;
  --color-danger-2: #fffbfb;

Red Color

  --color-red-150: #801f1a;
  --color-red-140: #99251f;
  --color-red-130: #b32b24;
  --color-red-120: #cc3229;
  --color-red-110: #e6382e;
  --color-red: #FF3E33;
  --color-red-90: #ff5147;
  --color-red-80: #ff655c;
  --color-red-70: #ff7870;
  --color-red-60: #ff8b85;
  --color-red-50: #ff9f99;
  --color-red-40: #ffb2ad;
  --color-red-30: #ffc5c2;
  --color-red-20: #ffd8d6;
  --color-red-10: #ffeceb;
  --color-red-5: #fff5f5;
  --color-red-2: #fffbfb;

Orange Color

  --color-orange-150: #801f1a;
  --color-orange-140: #99251f;
  --color-orange-130: #b32b24;
  --color-orange-120: #cc3229;
  --color-orange-110: #e6382e;
  --color-orange: #FF3E33;
  --color-orange-90: #ff5147;
  --color-orange-80: #ff655c;
  --color-orange-70: #ff7870;
  --color-orange-60: #ff8b85;
  --color-orange-50: #ff9f99;
  --color-orange-40: #ffb2ad;
  --color-orange-30: #ffc5c2;
  --color-orange-20: #ffd8d6;
  --color-orange-10: #ffeceb;
  --color-orange-5: #fff5f5;
  --color-orange-2: #fffbfb;

Yellow Color

  --color-yellow-150: #801f1a;
  --color-yellow-140: #99251f;
  --color-yellow-130: #b32b24;
  --color-yellow-120: #cc3229;
  --color-yellow-110: #e6382e;
  --color-yellow: #FF3E33;
  --color-yellow-90: #ff5147;
  --color-yellow-80: #ff655c;
  --color-yellow-70: #ff7870;
  --color-yellow-60: #ff8b85;
  --color-yellow-50: #ff9f99;
  --color-yellow-40: #ffb2ad;
  --color-yellow-30: #ffc5c2;
  --color-yellow-20: #ffd8d6;
  --color-yellow-10: #ffeceb;
  --color-yellow-5: #fff5f5;
  --color-yellow-2: #fffbfb;

Green Color

  --color-green-150: #156b22;
  --color-green-140: #198029;
  --color-green-130: #1d9530;
  --color-green-120: #22aa36;
  --color-green-110: #26c03d;
  --color-green: #2AD544;
  --color-green-90: #3fd957;
  --color-green-80: #55dd69;
  --color-green-70: #6ae27c;
  --color-green-60: #7fe68f;
  --color-green-50: #95eaa2;
  --color-green-40: #aaeeb4;
  --color-green-30: #bff2c7;
  --color-green-20: #d4f7da;
  --color-green-10: #eafbec;
  --color-green-5: #f4fdf6;
  --color-green-2: #fbfefb;

Mint Color

  --color-mint-150: #006662;
  --color-mint-140: #007a75;
  --color-mint-130: #008f89;
  --color-mint-120: #00a39c;
  --color-mint-110: #00b8b0;
  --color-mint: #00CCC3;
  --color-mint-90: #1ad1c9;
  --color-mint-80: #33d6cf;
  --color-mint-70: #4ddbd5;
  --color-mint-60: #66e0db;
  --color-mint-50: #80e6e1;
  --color-mint-40: #99ebe7;
  --color-mint-30: #b3f0ed;
  --color-mint-20: #ccf5f3;
  --color-mint-10: #e6faf9;
  --color-mint-5: #f2fcfc;
  --color-mint-2: #fafefe;

Teal Color

  --color-teal-150: #2d5762;
  --color-teal-140: #356876;
  --color-teal-130: #3e7989;
  --color-teal-120: #478a9d;
  --color-teal-110: #509cb0;
  --color-teal: #59ADC4;
  --color-teal-90: #6ab5ca;
  --color-teal-80: #7abdd0;
  --color-teal-70: #8bc6d6;
  --color-teal-60: #9bcedc;
  --color-teal-50: #acd6e2;
  --color-teal-40: #bddee7;
  --color-teal-30: #cde6ed;
  --color-teal-20: #deeff3;
  --color-teal-10: #eef7f9;
  --color-teal-5: #f7fbfc;
  --color-teal-2: #fcfdfe;

Cyan Color

  --color-cyan-150: #2b5e78;
  --color-cyan-140: #337190;
  --color-cyan-130: #3c84a8;
  --color-cyan-120: #4496c0;
  --color-cyan-110: #4da9d8;
  --color-cyan: #55BCF0;
  --color-cyan-90: #66c3f2;
  --color-cyan-80: #77c9f3;
  --color-cyan-70: #88d0f5;
  --color-cyan-60: #99d7f6;
  --color-cyan-50: #aadef8;
  --color-cyan-40: #bbe4f9;
  --color-cyan-30: #ccebfb;
  --color-cyan-20: #ddf2fc;
  --color-cyan-10: #eef8fe;
  --color-cyan-5: #f7fcfe;
  --color-cyan-2: #fcfeff;

Blue Color

  --color-blue-150: #003c80;
  --color-blue-140: #004799;
  --color-blue-130: #0053b3;
  --color-blue-120: #005fcc;
  --color-blue-110: #006be6;
  --color-blue: #0077FF;
  --color-blue-90: #1a85ff;
  --color-blue-80: #3392ff;
  --color-blue-70: #4da0ff;
  --color-blue-60: #66adff;
  --color-blue-50: #80bbff;
  --color-blue-40: #99c9ff;
  --color-blue-30: #b3d6ff;
  --color-blue-20: #cce4ff;
  --color-blue-10: #e6f1ff;
  --color-blue-5: #f2f8ff;
  --color-blue-2: #fafcff;

Purple Color

  --color-purple-150: #58296f;
  --color-purple-140: #693185;
  --color-purple-130: #7b399b;
  --color-purple-120: #8c42b2;
  --color-purple-110: #9e4ac8;
  --color-purple: #AF52DE;
  --color-purple-90: #b763e1;
  --color-purple-80: #bf75e5;
  --color-purple-70: #c786e8;
  --color-purple-60: #cf97eb;
  --color-purple-50: #d7a9ef;
  --color-purple-40: #dfbaf2;
  --color-purple-30: #e7cbf5;
  --color-purple-20: #efdcf8;
  --color-purple-10: #f7eefc;
  --color-purple-5: #fbf6fd;
  --color-purple-2: #fdfcfe;

Pink Color

  --color-pink-150: #801a2b;
  --color-pink-140: #991f33;
  --color-pink-130: #b3243c;
  --color-pink-120: #cc2944;
  --color-pink-110: #e62e4d;
  --color-pink: #FF3355;
  --color-pink-90: #ff4766;
  --color-pink-80: #ff5c77;
  --color-pink-70: #ff7088;
  --color-pink-60: #ff8599;
  --color-pink-50: #ff99aa;
  --color-pink-40: #ffadbb;
  --color-pink-30: #ffc2cc;
  --color-pink-20: #ffd6dd;
  --color-pink-10: #ffebee;
  --color-pink-5: #fff5f7;
  --color-pink-2: #fffbfc;

Brown Color

  --color-brown-150: #51422f;
  --color-brown-140: #614f38;
  --color-brown-130: #715c42;
  --color-brown-120: #826a4b;
  --color-brown-110: #927755;
  --color-brown: #A2845E;
  --color-brown-90: #ab906e;
  --color-brown-80: #b59d7e;
  --color-brown-70: #bea98e;
  --color-brown-60: #c7b59e;
  --color-brown-50: #d1c2af;
  --color-brown-40: #dacebf;
  --color-brown-30: #e3dacf;
  --color-brown-20: #ece6df;
  --color-brown-10: #f6f3ef;
  --color-brown-5: #faf9f7;
  --color-brown-2: #fdfdfc;
}