Skip to content

Instantly share code, notes, and snippets.

@granpepito

granpepito/_colors.scss

Last active September 12, 2022 17:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save granpepito/32932cc78b3d5d6f498f307f66ef00f4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save granpepito/32932cc78b3d5d6f498f307f66ef00f4 to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind CSS default color palette for SASS
Raw
_colors.scss
/** White **/
$white: #fff;
/** Black **/
$black: #000;
/** Slate **/
$slate50:#F8FAFC;
$slate100: #F1F5F9;
$slate200: #E2E8F0;
$slate300: #CBD5E1;
$slate400: #94A3B8;
$slate500: #64748B;
$slate600: #475569;
$slate700: #334155;
$slate800: #1E293B;
$slate900: #0F172A;
/** Gray **/
$gray50: #F9FAFB;
$gray100: #F3F4F6;
$gray200: #E5E7EB;
$gray300: #D1D5DB;
$gray400: #9CA3AF;
$gray500: #6B7280;
$gray600: #4B5563;
$gray700: #374151;
$gray800: #1F2937;
$gray900: #111827;
/** Zinc **/
$zinc50: #FAFAFA;
$zinc100: #F4F4F5;
$zinc200: #E4E4E7;
$zinc300: #D4D4D8;
$zinc400: #A1A1AA;
$zinc500: #71717A;
$zinc600: #52525B;
$zinc700: #3F3F46;
$zinc800: #27272A;
$zinc900: #18181B;
/** Neutral **/
$neutral50: #FAFAFA;
$neutral100: #F5F5F5;
$neutral200: #E5E5E5;
$neutral300: #D4D4D4;
$neutral400: #A3A3A3;
$neutral500: #737373;
$neutral600: #525252;
$neutral700: #404040;
$neutral800: #262626;
$neutral900: #171717;
/** Stone **/
$stone50: #FAFAF9;
$stone100: #F5F5F4;
$stone200: #E7E5E4;
$stone300: #D6D3D1;
$stone400: #A8A29E;
$stone500: #78716C;
$stone600: #57534E;
$stone700: #44403C;
$stone800: #292524;
$stone900: #1C1917;
/** Red **/
$red50: #FEF2F2;
$red100: #FEE2E2;
$red200: #FECACA;
$red300: #FCA5A5;
$red400: #F87171;
$red500: #EF4444;
$red600: #DC2626;
$red700: #B91C1C;
$red800: #991B1B;
$red900: #7F1D1D;
/** Orange **/
$orange50: #FFF7ED;
$orange100: #FFEDD5;
$orange200: #FED7AA;
$orange300: #FDBA74;
$orange400: #FB923C;
$orange500: #F97316;
$orange600: #EA580C;
$orange700: #C2410C;
$orange800: #9A3412;
$orange900: #7C2D12;
/** Amber **/
$amber50: #FFFBEB;
$amber100: #FEF3C7;
$amber200: #FDE68A;
$amber300: #FCD34D;
$amber400: #FBBF24;
$amber500: #F59E0B;
$amber600: #D97706;
$amber700: #B45309;
$amber800: #92400E;
$amber900: #78350F;
/** Yellow **/
$yellow50: #FEFCE8;
$yellow100: #FEF9C3;
$yellow200: #FEF08A;
$yellow300: #FDE047;
$yellow400: #FACC15;
$yellow500: #EAB308;
$yellow600: #CA8A04;
$yellow700: #A16207;
$yellow800: #854D0E;
$yellow900: #713F12;
/** Lime **/
$lime50: #F7FEE7;
$lime100: #ECFCCB;
$lime200: #D9F99D;
$lime300: #BEF264;
$lime400: #A3E635;
$lime500: #84CC16;
$lime600: #65A30D;
$lime700: #4D7C0F;
$lime800: #3F6212;
$lime900: #365314;
/** Green **/
$green50: #F0FDF4;
$green100: #DCFCE7;
$green200: #BBF7D0;
$green300: #86EFAC;
$green400: #4ADE80;
$green500: #22C55E;
$green600: #16A34A;
$green700: #15803D;
$green800: #166534;
$green900: #14532D;
/** Emerald **/
$emerald50: #ECFDF5;
$emerald100: #D1FAE5;
$emerald200: #A7F3D0;
$emerald300: #6EE7B7;
$emerald400: #34D399;
$emerald500: #10B981;
$emerald600: #059669;
$emerald700: #047857;
$emerald800: #065F46;
$emerald900: #064E3B;
/** Teal **/
$teal50: #F0FDFA;
$teal100: #CCFBF1;
$teal200: #99F6E4;
$teal300: #5EEAD4;
$teal400: #2DD4BF;
$teal500: #14B8A6;
$teal600: #0D9488;
$teal700: #0F766E;
$teal800: #115E59;
$teal900: #134E4A;
/** Cyan **/
$cyan50: #ECFEFF;
$cyan100: #CFFAFE;
$cyan200: #A5F3FC;
$cyan300: #67E8F9;
$cyan400: #22D3EE;
$cyan500: #06B6D4;
$cyan600: #0891B2;
$cyan700: #0E7490;
$cyan800: #155E75;
$cyan900: #164E63;
/** Sky **/
$sky50: #F0F9FF;
$sky100: #E0F2FE;
$sky200: #BAE6FD;
$sky300: #7DD3FC;
$sky400: #38BDF8;
$sky500: #0EA5E9;
$sky600: #0284C7;
$sky700: #0369A1;
$sky800: #075985;
$sky900: #0C4A6E;
//* Blue *
$blue50: #EFF6FF;
$blue100: #DBEAFE;
$blue200: #BFDBFE;
$blue300: #93C5FD;
$blue400: #60A5FA;
$blue500: #3B82F6;
$blue600: #2563EB;
$blue700: #1D4ED8;
$blue800: #1E40AF;
$blue900: #1E3A8A;
/** Indigo **/
$indigo50: #EEF2FF;
$indigo100: #E0E7FF;
$indigo200: #C7D2FE;
$indigo300: #A5B4FC;
$indigo400: #818CF8;
$indigo500: #6366F1;
$indigo600: #4F46E5;
$indigo700: #4338CA;
$indigo800: #3730A3;
$indigo900: #312E81;
/** Violet **/
$violet50: #F5F3FF;
$violet100: #EDE9FE;
$violet200: #DDD6FE;
$violet300: #C4B5FD;
$violet400: #A78BFA;
$violet500: #8B5CF6;
$violet600: #7C3AED;
$violet700: #6D28D9;
$violet800: #5B21B6;
$violet900: #4C1D95;
/** Purple **/
$purple50: #FAF5FF;
$purple100: #F3E8FF;
$purple200: #E9D5FF;
$purple300: #D8B4FE;
$purple400: #C084FC;
$purple500: #A855F7;
$purple600: #9333EA;
$purple700: #7E22CE;
$purple800: #6B21A8;
$purple900: #581C87;
/** Fuschia **/
$fuschia50: #FDF4FF;
$fuschia100: #FAE8FF;
$fuschia200: #F5D0FE;
$fuschia300: #F0ABFC;
$fuschia400: #E879F9;
$fuschia500: #D946EF;
$fuschia600: #C026D3;
$fuschia700: #A21CAF;
$fuschia800: #86198F;
$fuschia900: #701A75;
/** Pink **/
$pink50: #FDF2F8;
$pink100: #FCE7F3;
$pink200: #FBCFE8;
$pink300: #F9A8D4;
$pink400: #F472B6;
$pink500: #EC4899;
$pink600: #DB2777;
$pink700: #BE185D;
$pink800: #9D174D;
$pink900: #831843;
/** Rose **/
$rose50: #FFF1F2;
$rose100: #FFE4E6;
$rose200: #FECDD3;
$rose300: #FDA4AF;
$rose400: #FB7185;
$rose500: #F43F5E;
$rose600: #E11D48;
$rose700: #BE123C;
$rose800: #9F1239;
$rose900: #881337;
//------------------------------------------
/** Custom Colors **/
//------------------------------------------
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment