Tailwind CSS Color Generator

Customize semantic colors. Changes apply in real-time.

Theme Colors

primary

Using default color

50#F3F6FC
100#E5EDFB
200#BED4F8
300#92B8F7
400#5995F7
500#2473F5
600#0A5ADB
700#0D4BB0
800#0E3B86
900#0D2C5E
950#0A1B39

Click any shade to copy its hex value

Live Preview

primary

primary
primary

secondary

secondary
secondary

success

success
success

warning

warning
warning

error

error
error

info

info
info

neutral

neutral
neutral

Export Primary

CSS Variables (Tailwind v4)

@theme static {
  --color-primary-50: #F3F6FC;
  --color-primary-100: #E5EDFB;
  --color-primary-200: #BED4F8;
  --color-primary-300: #92B8F7;
  --color-primary-400: #5995F7;
  --color-primary-500: #2473F5;
  --color-primary-600: #0A5ADB;
  --color-primary-700: #0D4BB0;
  --color-primary-800: #0E3B86;
  --color-primary-900: #0D2C5E;
  --color-primary-950: #0A1B39;
}

Tailwind Config

'primary': {
  "50": "#F3F6FC",
  "100": "#E5EDFB",
  "200": "#BED4F8",
  "300": "#92B8F7",
  "400": "#5995F7",
  "500": "#2473F5",
  "600": "#0A5ADB",
  "700": "#0D4BB0",
  "800": "#0E3B86",
  "900": "#0D2C5E",
  "950": "#0A1B39"
}

Export All Theme Colors

All CSS Variables

@theme static {
  --color-primary-50: #F3F6FC;
  --color-primary-100: #E5EDFB;
  --color-primary-200: #BED4F8;
  --color-primary-300: #92B8F7;
  --color-primary-400: #5995F7;
  --color-primary-500: #2473F5;
  --color-primary-600: #0A5ADB;
  --color-primary-700: #0D4BB0;
  --color-primary-800: #0E3B86;
  --color-primary-900: #0D2C5E;
  --color-primary-950: #0A1B39;

  --color-secondary-50: #F7F7F7;
  --color-secondary-100: #F0F0F0;
  --color-secondary-200: #D9DBDE;
  --color-secondary-300: #BEC3CB;
  --color-secondary-400: #9AA6B6;
  --color-secondary-500: #7A899F;
  --color-secondary-600: #606F85;
  --color-secondary-700: #545C69;
  --color-secondary-800: #45494F;
  --color-secondary-900: #353536;
  --color-secondary-950: #212121;

  --color-success-50: #F4FAF7;
  --color-success-100: #E8F7EE;
  --color-success-200: #C6F1D6;
  --color-success-300: #9EEBBA;
  --color-success-400: #6BE598;
  --color-success-500: #3BDD77;
  --color-success-600: #22C45D;
  --color-success-700: #209C4E;
  --color-success-800: #1D773E;
  --color-success-900: #18532E;
  --color-success-950: #10321D;

  --color-warning-50: #FCF9F3;
  --color-warning-100: #FBF3E5;
  --color-warning-200: #F9E3BE;
  --color-warning-300: #F7D191;
  --color-warning-400: #F8BD58;
  --color-warning-500: #F6A723;
  --color-warning-600: #DC8E09;
  --color-warning-700: #B1730C;
  --color-warning-800: #875A0D;
  --color-warning-900: #5F400C;
  --color-warning-950: #392709;

  --color-error-50: #FBF3F3;
  --color-error-100: #FAE6E6;
  --color-error-200: #F6C1C1;
  --color-error-300: #F39696;
  --color-error-400: #F15F5F;
  --color-error-500: #ED2C2C;
  --color-error-600: #D31212;
  --color-error-700: #A91414;
  --color-error-800: #811313;
  --color-error-900: #5B1010;
  --color-error-950: #360C0C;

  --color-info-50: #F2FBFC;
  --color-info-100: #E4F8FB;
  --color-info-200: #BDF1F9;
  --color-info-300: #90EAF9;
  --color-info-400: #56E2FA;
  --color-info-500: #20D9F9;
  --color-info-600: #06C0DF;
  --color-info-700: #0A9AB3;
  --color-info-800: #0B7688;
  --color-info-900: #0B5460;
  --color-info-950: #08333A;

  --color-neutral-50: #F7F7F7;
  --color-neutral-100: #F0F0F0;
  --color-neutral-200: #DBDBDB;
  --color-neutral-300: #C4C4C4;
  --color-neutral-400: #A8A8A8;
  --color-neutral-500: #8C8C8C;
  --color-neutral-600: #737373;
  --color-neutral-700: #5E5E5E;
  --color-neutral-800: #4A4A4A;
  --color-neutral-900: #363636;
  --color-neutral-950: #212121;
}

All Tailwind Config

colors: {
  "primary": {
    "50": "#F3F6FC",
    "100": "#E5EDFB",
    "200": "#BED4F8",
    "300": "#92B8F7",
    "400": "#5995F7",
    "500": "#2473F5",
    "600": "#0A5ADB",
    "700": "#0D4BB0",
    "800": "#0E3B86",
    "900": "#0D2C5E",
    "950": "#0A1B39"
  },
  "secondary": {
    "50": "#F7F7F7",
    "100": "#F0F0F0",
    "200": "#D9DBDE",
    "300": "#BEC3CB",
    "400": "#9AA6B6",
    "500": "#7A899F",
    "600": "#606F85",
    "700": "#545C69",
    "800": "#45494F",
    "900": "#353536",
    "950": "#212121"
  },
  "success": {
    "50": "#F4FAF7",
    "100": "#E8F7EE",
    "200": "#C6F1D6",
    "300": "#9EEBBA",
    "400": "#6BE598",
    "500": "#3BDD77",
    "600": "#22C45D",
    "700": "#209C4E",
    "800": "#1D773E",
    "900": "#18532E",
    "950": "#10321D"
  },
  "warning": {
    "50": "#FCF9F3",
    "100": "#FBF3E5",
    "200": "#F9E3BE",
    "300": "#F7D191",
    "400": "#F8BD58",
    "500": "#F6A723",
    "600": "#DC8E09",
    "700": "#B1730C",
    "800": "#875A0D",
    "900": "#5F400C",
    "950": "#392709"
  },
  "error": {
    "50": "#FBF3F3",
    "100": "#FAE6E6",
    "200": "#F6C1C1",
    "300": "#F39696",
    "400": "#F15F5F",
    "500": "#ED2C2C",
    "600": "#D31212",
    "700": "#A91414",
    "800": "#811313",
    "900": "#5B1010",
    "950": "#360C0C"
  },
  "info": {
    "50": "#F2FBFC",
    "100": "#E4F8FB",
    "200": "#BDF1F9",
    "300": "#90EAF9",
    "400": "#56E2FA",
    "500": "#20D9F9",
    "600": "#06C0DF",
    "700": "#0A9AB3",
    "800": "#0B7688",
    "900": "#0B5460",
    "950": "#08333A"
  },
  "neutral": {
    "50": "#F7F7F7",
    "100": "#F0F0F0",
    "200": "#DBDBDB",
    "300": "#C4C4C4",
    "400": "#A8A8A8",
    "500": "#8C8C8C",
    "600": "#737373",
    "700": "#5E5E5E",
    "800": "#4A4A4A",
    "900": "#363636",
    "950": "#212121"
  }
}