Colors

Developing an organized, consistent and beautiful color palette is critical to the design success of a project. Tailwind provides a fantastic color system that makes this very easy to accomplish.

Default color palette

To get you started, we've provided a generous palette of great looking colors that are perfect for prototyping, or even as a starting point for your color palette. That said, don't hesitate to customize them for your project.

Grey
Base #B8C2CC
White #FFFFFF
Lightest #F8FAFC
Lighter #F1F5F8
Light #DAE1E7
Base #B8C2CC
Dark #8795A1
Darker #606F7B
Darkest #3D4852
Black #22292F
Red
Base #E3342F
Lightest #FCEBEA
Lighter #F9ACAA
Light #EF5753
Base #E3342F
Dark #CC1F1A
Darker #621B18
Darkest #3B0D0C
Orange
Base #F6993F
Lightest #FFF5EB
Lighter #FCD9B6
Light #FAAD63
Base #F6993F
Dark #DE751F
Darker #613B1F
Darkest #462A16
Yellow
Base #FFED4A
Lightest #FCFBEB
Lighter #FFF9C2
Light #FFF382
Base #FFED4A
Dark #F2D024
Darker #684F1D
Darkest #453411
Green
Base #38C172
Lightest #E3FCEC
Lighter #A2F5BF
Light #51D88A
Base #38C172
Dark #1F9D55
Darker #1A4731
Darkest #0F2F21
Teal
Base #4DC0B5
Lightest #E8FFFE
Lighter #A0F0ED
Light #64D5CA
Base #4DC0B5
Dark #38A89D
Darker #20504F
Darkest #0D3331
Blue
Base #3490DC
Lightest #EFF8FF
Lighter #BCDEFA
Light #6CB2EB
Base #3490DC
Dark #2779BD
Darker #1C3D5A
Darkest #12283A
Indigo
Base #6574CD
Lightest #E6E8FF
Lighter #B2B7FF
Light #7886D7
Base #6574CD
Dark #5661B3
Darker #2F365F
Darkest #191E38
Purple
Base #9561E2
Lightest #F3EBFF
Lighter #D6BBFC
Light #A779E9
Base #9561E2
Dark #794ACF
Darker #382B5F
Darkest #21183C
Pink
Base #F66D9B
Lightest #FFEBEF
Lighter #FFBBCA
Light #FA7EA8
Base #F66D9B
Dark #EB5286
Darker #6F213F
Darkest #451225

Customizing

Tailwind makes it a breeze to modify the default color palette for your project. Remember, you own these colors and nothing will break if you change everything about them.

By default Tailwind defines the entire color palette in a colors object at the top of your Tailwind config file. These colors are then assigned to textColors, backgroundColors and borderColors. This approach works well since it provides a consistent naming system across all the utilities. However, you're welcome to modify them independently of one-another as well.

var colors = {
  'transparent': 'transparent',

  'black': '#222b2f',
  'grey-darkest': '#364349',
  'grey-darker': '#596a73',
  'grey-dark': '#70818a',
  'grey': '#9babb4',

  // ...
}

module.exports = {
  colors: colors,
  textColors: colors,
  backgroundColors: colors,
  borderColors: Object.assign({ default: colors['grey-light'] }, colors),

  // ...
}

You'll notice above that the color palette is also assigned to the colors key of your Tailwind config. This makes it easy to access them in your custom CSS using the config() function. For example:

.error { color: config('colors.grey-darker') }

Naming

In the default color palette we've used literal color names, like red, green and blue. Another common approach to naming colors is choosing functional names based on how the colors are used, such as primary, secondary, and brand.

You can also choose different approaches to how you name your color variants. In the default color palette we've again used literal variants, like light, dark, and darker. Another common approach here is to use a numeric scale, like 100, 200 and 300.

You should feel free to choose whatever color naming approach makes the most sense to you.