Palette

A guide to customizing the palette of your theme.

Tailus UI Html is built on top of Tailwind Css, which means that you can customize the colors of your theme by changing the colors in the tailwind.config.js file.

Semantic Naming

Our color system uses semantic color names to make it intuitive to understand the purpose of each color. For instance, primary is used for primary actions, success for success notifications, danger for error alerts, and so on. This approach simplifies the process of customizing and maintaining your application’s color palette.

Required Colors

For the theme to function properly, certain colors are necessary. Each color should have shades ranging from 50 to 950.

Brand

Primary

Feedback

Success

Danger

Warning

Info

Neutral

Gray

Some Palettes

We’ve curated a selection of TailwindCSS colors to serve as a starter palette for your projects.

The available palettes are as follows:

passion

NewIntroduction Tailus UI Html
Badge
 
theme: {
    extend: {
        colors: ({ colors }) => ({
            primary : colors.red,
            danger : colors.red,
            warning : colors.yellow,
            success : colors.green,
            info : colors.blue,
            gray : colors.neutral,
        }),
    }
}

mystery

NewIntroduction Tailus UI Html
Badge
 
theme: {
    extend: {
        colors: ({ colors }) => ({
            primary : colors.red,
            danger : colors.red,
            warning : colors.yellow,
            success : colors.green,
            info : colors.blue,
            gray : colors.slate,
        }),
    }
}

oz

NewIntroduction Tailus UI Html
Badge
 
theme: {
    extend: {
        colors: ({ colors }) => ({
            primary : colors.indigo,
            danger : colors.rose,
            warning : colors.yellow,
            success : colors.lime,
            info : colors.blue,
            gray : colors.zinc,
        }),
    }
}

romance

NewIntroduction Tailus UI Html
Badge
 
theme: {
    extend: {
        colors: ({ colors }) => ({
            primary : colors.red,
            danger : colors.red,
            warning : colors.yellow,
            success : colors.green,
            info : colors.blue,
            gray : colors.slate,
        }),
    }
}

energy

NewIntroduction Tailus UI Html
Badge
 
theme: {
    extend: {
        colors: ({ colors }) => ({
            primary : colors.orange,
            danger : colors.red,
            warning : colors.yellow,
            success : colors.green,
            info : colors.blue,
            gray : colors.stone,
        }),
    }
}

winter

NewIntroduction Tailus UI Html
Badge
 
theme: {
    extend: {
        colors: ({ colors }) => ({
            primary : colors.cyan,
            danger : colors.rose,
            warning : colors.amber,
            success : colors.lime,
            info : colors.cyan,
            gray : colors.slate,
        }),
    }
}

spring

NewIntroduction Tailus UI Html
Badge
 
theme: {
    extend: {
        colors: ({ colors }) => ({
            primary : colors.lime,
            danger : colors.red,
            warning : colors.yellow,
            success : colors.green,
            info : colors.blue,
            gray : colors.gray,
        }),
    }
}

nature

NewIntroduction Tailus UI Html
Badge
 
theme: {
    extend: {
        colors: ({ colors }) => ({
            primary : colors.green,
            danger : colors.red,
            warning : colors.yellow,
            success : colors.green,
            info : colors.blue,
            gray : colors.slate,
        }),
    }
}

trust

NewIntroduction Tailus UI Html
Badge
 
theme: {
    extend: {
        colors: ({ colors }) => ({
            primary : colors.blue,
            danger : colors.red,
            warning : colors.yellow,
            success : colors.green,
            info : colors.blue,
            gray : colors.zinc,
        }),
    }
}

Learn more about colors on the TailwindCSS official documentation