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

secondary

success

warning

error

info

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"
  }
}