Tailwind CSS Colors - Free Examples & Tutorial

Tailwind Elements are supported by an extensive Material Design color system that themes our styles and components. This enables more comprehensive customization and extension for any project.

Theme

Main color palette.

Primary (#3B71CA)

Secondary (#9FA6B2)

Success (#14A44D)

Danger (#DC4C64)

Warning (#E4A11B)

Info (#54B4D3)

Light (#F9FAFB)

Dark (#1F2937)

HTML

        
            
      <div class="grid gap-4 xl:grid-cols-4 xl:grid-rows-2">
        <div
          class="flex h-28 w-full items-center justify-center rounded-lg bg-primary">
          <p class="text-neutral-50">Primary (#3B71CA)</p>
        </div>
        <div
          class="flex h-28 w-full items-center justify-center rounded-lg bg-secondary">
          <p class="text-neutral-50">Secondary (#9FA6B2)</p>
        </div>
        <div
          class="flex h-28 w-full items-center justify-center rounded-lg bg-success">
          <p class="text-neutral-50">Success (#14A44D)</p>
        </div>
        <div
          class="flex h-28 w-full items-center justify-center rounded-lg bg-danger">
          <p class="text-neutral-50">Danger (#DC4C64)</p>
        </div>
        <div
          class="flex h-28 w-full items-center justify-center rounded-lg bg-warning">
          <p class="text-neutral-50">Warning (#E4A11B)</p>
        </div>
        <div
          class="flex h-28 w-full items-center justify-center rounded-lg bg-info">
          <p class="text-neutral-50">Info (#54B4D3)</p>
        </div>
        <div
          class="flex h-28 w-full items-center justify-center rounded-lg bg-neutral-50">
          <p class="text-neutral-800">Light (#F9FAFB)</p>
        </div>
        <div
          class="flex h-28 w-full items-center justify-center rounded-lg bg-neutral-800 dark:bg-neutral-900">
          <p class="text-neutral-50">Dark (#1F2937)</p>
        </div>
      </div>

Hey there 👋 we want to make Tailwind Elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Share via Reddit Share via StumbleUpon

Shades

Palette of color shades.

Primary

#F1F5FB

100

#E3EBF7

200

#C7D7F0

300

#ABC2E8

400

#8FAEE0

500

#6590D5

600

#3061AF

700

#285192

800

#204075

900

#183058

Secondary

#F8F9F9

100

#F1F2F4

200

#E4E6E9

300

#D6D9DE

400

#C8CCD3

500

#B3B9C2

600

#848D9C

700

#6B7585

800

#565D6B

900

#404650

Success

#EAFCF2

100

#D6FAE4

200

#ACF5C9

300

#83F0AE

400

#59EA93

500

#1CE26B

600

#118C42

700

#0E7537

800

#0C5D2C

900

#094621

Danger

#FCF2F4

100

#FAE5E9

200

#F5CCD3

300

#F0B2BD

400

#EB99A6

500

#E37285

600

#D42A46

700

#B0233A

800

#8D1C2F

900

#6A1523

Warning

#FDF8EF

100

#FBF2DE

200

#F7E4BE

300

#F4D79D

400

#F0C97D

500

#EAB54C

600

#C48A17

700

#A37313

800

#825C0F

900

#62450B

Info

#F3FAFC

100

#E7F4F9

200

#CEE9F2

300

#B6DFEC

400

#9ED4E6

500

#79C4DC

600

#34A4CA

700

#2B89A8

800

#236D86

900

#1A5265

HTML

        
            
      <div>
        <div class="mb-6 grid gap-4 xl:grid-cols-11 xl:grid-rows-1">
          <div class="h-16 w-full">Primary</div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-primary-50"></div>
            <p class="text-xs font-medium">50</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #F1F5FB
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-primary-100"></div>
            <p class="text-xs font-medium">100</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #E3EBF7
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-primary-200"></div>
            <p class="text-xs font-medium">200</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #C7D7F0
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-primary-300"></div>
            <p class="text-xs font-medium">300</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #ABC2E8
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-primary-400"></div>
            <p class="text-xs font-medium">400</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #8FAEE0
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-primary-500"></div>
            <p class="text-xs font-medium">500</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #6590D5
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-primary-600"></div>
            <p class="text-xs font-medium">600</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #3061AF
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-primary-700"></div>
            <p class="text-xs font-medium">700</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #285192
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-primary-800"></div>
            <p class="text-xs font-medium">800</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #204075
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-primary-900"></div>
            <p class="text-xs font-medium">900</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #183058
            </p>
          </div>
        </div>
        <div class="mb-6 grid gap-4 xl:grid-cols-11 xl:grid-rows-1">
          <div class="h-16 w-full">Secondary</div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-secondary-50"></div>
            <p class="text-xs font-medium">50</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #F8F9F9
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-secondary-100"></div>
            <p class="text-xs font-medium">100</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #F1F2F4
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-secondary-200"></div>
            <p class="text-xs font-medium">200</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #E4E6E9
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-secondary-300"></div>
            <p class="text-xs font-medium">300</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #D6D9DE
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-secondary-400"></div>
            <p class="text-xs font-medium">400</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #C8CCD3
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-secondary-500"></div>
            <p class="text-xs font-medium">500</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #B3B9C2
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-secondary-600"></div>
            <p class="text-xs font-medium">600</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #848D9C
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-secondary-700"></div>
            <p class="text-xs font-medium">700</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #6B7585
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-secondary-800"></div>
            <p class="text-xs font-medium">800</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #565D6B
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-secondary-900"></div>
            <p class="text-xs font-medium">900</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #404650
            </p>
          </div>
        </div>
        <div class="mb-6 grid gap-4 xl:grid-cols-11 xl:grid-rows-1">
          <div class="h-16 w-full">Success</div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-success-50"></div>
            <p class="text-xs font-medium">50</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #EAFCF2
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-success-100"></div>
            <p class="text-xs font-medium">100</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #D6FAE4
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-success-200"></div>
            <p class="text-xs font-medium">200</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #ACF5C9
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-success-300"></div>
            <p class="text-xs font-medium">300</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #83F0AE
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-success-400"></div>
            <p class="text-xs font-medium">400</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #59EA93
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-success-500"></div>
            <p class="text-xs font-medium">500</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #1CE26B
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-success-600"></div>
            <p class="text-xs font-medium">600</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #118C42
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-success-700"></div>
            <p class="text-xs font-medium">700</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #0E7537
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-success-800"></div>
            <p class="text-xs font-medium">800</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #0C5D2C
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-success-900"></div>
            <p class="text-xs font-medium">900</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #094621
            </p>
          </div>
        </div>
        <div class="mb-6 grid gap-4 xl:grid-cols-11 xl:grid-rows-1">
          <div class="h-16 w-full ">Danger</div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-danger-50"></div>
            <p class="text-xs font-medium">50</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #FCF2F4
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-danger-100"></div>
            <p class="text-xs font-medium">100</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #FAE5E9
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-danger-200"></div>
            <p class="text-xs font-medium">200</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #F5CCD3
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-danger-300"></div>
            <p class="text-xs font-medium">300</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #F0B2BD
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-danger-400"></div>
            <p class="text-xs font-medium">400</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #EB99A6
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-danger-500"></div>
            <p class="text-xs font-medium">500</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #E37285
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-danger-600"></div>
            <p class="text-xs font-medium">600</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #D42A46
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-danger-700"></div>
            <p class="text-xs font-medium">700</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #B0233A
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-danger-800"></div>
            <p class="text-xs font-medium">800</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #8D1C2F
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-danger-900"></div>
            <p class="text-xs font-medium">900</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #6A1523
            </p>
          </div>
        </div>
        <div class="mb-6 grid gap-4 xl:grid-cols-11 xl:grid-rows-1">
          <div class="h-16 w-full ">Warning</div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-warning-50"></div>
            <p class="text-xs font-medium">50</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #FDF8EF
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-warning-100"></div>
            <p class="text-xs font-medium">100</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #FBF2DE
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-warning-200"></div>
            <p class="text-xs font-medium">200</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #F7E4BE
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-warning-300"></div>
            <p class="text-xs font-medium">300</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #F4D79D
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-warning-400"></div>
            <p class="text-xs font-medium">400</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #F0C97D
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-warning-500"></div>
            <p class="text-xs font-medium">500</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #EAB54C
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-warning-600"></div>
            <p class="text-xs font-medium">600</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #C48A17
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-warning-700"></div>
            <p class="text-xs font-medium">700</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #A37313
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-warning-800"></div>
            <p class="text-xs font-medium">800</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #825C0F
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-warning-900"></div>
            <p class="text-xs font-medium">900</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #62450B
            </p>
          </div>
        </div>
        <div class="grid gap-4 xl:grid-cols-11 xl:grid-rows-1">
          <div class="h-16 w-full ">Info</div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-info-50"></div>
            <p class="text-xs font-medium">50</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #F3FAFC
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-info-100"></div>
            <p class="text-xs font-medium">100</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #E7F4F9
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-info-200"></div>
            <p class="text-xs font-medium">200</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #CEE9F2
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-info-300"></div>
            <p class="text-xs font-medium">300</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #B6DFEC
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-info-400"></div>
            <p class="text-xs font-medium">400</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #9ED4E6
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-info-500"></div>
            <p class="text-xs font-medium">500</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #79C4DC
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-info-600"></div>
            <p class="text-xs font-medium">600</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #34A4CA
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-info-700"></div>
            <p class="text-xs font-medium">700</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #2B89A8
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-info-800"></div>
            <p class="text-xs font-medium">800</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #236D86
            </p>
          </div>
          <div>
            <div class="mb-4 h-16 w-full rounded-lg bg-info-900"></div>
            <p class="text-xs font-medium">900</p>
            <p class="text-xs text-neutral-500 dark:text-neutral-400">
              #1A5265
            </p>
          </div>
        </div>
      </div>

Background

Easily set the background by using .bg-* color classes

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-neutral-50

.bg-neutral-800 dark: .bg-neutral-900

HTML

        
            
      <div class="grid-rows-8 grid gap-4">
        <div class="flex h-16 w-full items-center rounded-md bg-primary p-4">
          <p class="text-neutral-50">.bg-primary</p>
        </div>
        <div class="flex h-16 w-full items-center rounded-md bg-secondary p-4">
          <p class="text-neutral-50">.bg-secondary</p>
        </div>
        <div class="flex h-16 w-full items-center rounded-md bg-success p-4">
          <p class="text-neutral-50">.bg-success</p>
        </div>
        <div class="flex h-16 w-full items-center rounded-md bg-danger p-4">
          <p class="text-neutral-50">.bg-danger</p>
        </div>
        <div class="flex h-16 w-full items-center rounded-md bg-warning p-4">
          <p class="text-neutral-50">.bg-warning</p>
        </div>
        <div class="flex h-16 w-full items-center rounded-md bg-info p-4">
          <p class="text-neutral-50">.bg-info</p>
        </div>
        <div class="flex h-16 w-full items-center rounded-md bg-neutral-50 p-4">
          <p class="text-neutral-800">.bg-neutral-50</p>
        </div>
        <div
          class="flex h-16 w-full items-center rounded-md bg-neutral-800 p-4 dark:bg-neutral-900">
          <p class="text-neutral-50">.bg-neutral-800 dark: .bg-neutral-900</p>
        </div>
      </div>

Text

Colorize text with color utilities.

Lorem ipsum dolor sit amet

HTML

        
            
      <div class="grid-rows-8 grid gap-4">
        <p class="text-primary">Lorem ipsum dolor sit amet</p>
        <p class="text-secondary">Lorem ipsum dolor sit amet</p>
        <p class="text-success">Lorem ipsum dolor sit amet</p>
        <p class="text-danger">Lorem ipsum dolor sit amet</p>
        <p class="text-warning">Lorem ipsum dolor sit amet</p>
        <p class="text-info">Lorem ipsum dolor sit amet</p>
        <p class="bg-neutral-800 text-neutral-50 dark:bg-transparent">
          Lorem ipsum dolor sit amet
        </p>
        <p class="text-neutral-800 dark:bg-neutral-50 dark:text-neutral-900">
          Lorem ipsum dolor sit amet
        </p>
      </div>