Color Palette ​

Portábilis UI includes default colors to fit our products, but also includes an expertly-crafted default color palette out-of-the-box that is a great starting point if you don’t have your own specific branding in mind.

See all available colors and further information for customization on Tailwindcss Colors.

Using custom colors ​

If you’d like to completely replace the default color palette with your own custom colors, add your colors directly under the theme.colors section of your configuration file:

// tailwind.config.cjs

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      primary: '#0072ff',
      secondary: '#D7E9FF',
      accent: '#003473',
      success: '#16a34a',
      warning: '#fb923c',
      danger: '#dc2626',
      info: '#60a5fa',
      'another-color': '#faf3f0',
    },
  },
};