Home›Color Systems
Preview
js
colors: {
primary:
'#111111'
gray:
'#777777'
surface:
'#F5F5F5'
}
Code
js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#FEF3E8',
          100: '#FDE0C2',
          200: '#FAC08A',
          300: '#F59A52',
          400: '#E8782A',
          500: '#C4640A',
          600: '#A35208',
          700: '#7A3D06',
          800: '#522904',
          900: '#2E1602',
        },
        gray: {
          50: '#FAFAF8',
          900: '#1C1A17',
        },
      },
    },
  },
}
Related Blocks
css
Accessibility Contrast
WCAG AA/AAA compliant color pair table.
css
Brand Color System
A complete hierarchy for primary, secondary, and accent colors.
css
Dark Mode Pair
Color pairs that switch automatically for light and dark mode.