Colors
HeroUI's plugin enables you to personalize the semantic colors of the theme such as primary
,
secondary
, success
, etc.
Note : Colors configurations apply globally across all components.
HeroUI offers a default color palette right out of the box, perfect for when you're
still undecided about your specific branding colors.
These colors are split into Common Colors and Semantic Colors .
Common Colors : Consistent across themes.
Semantic Colors : Adjust according to the chosen theme.
Common colors, like TailwindCSS colors,
remain consistent regardless of the theme.
To prevent conflicts with TailwindCSS colors, common colors are initially disabled but can
be activated with the addCommonColors
option.
Enabling this option supplements some TailwindCSS default colors with the following:
White & Black #FFFFFF #000000
Blue #E6F1FE 50 #CCE3FD 100 #99C7FB 200 #66AAF9 300 #338EF7 400 #006FEE 500 #005BC4 600 #004493 700 #002E62 800 #001731 900
Purple #F2EAFA 50 #E4D4F4 100 #C9A9E9 200 #AE7EDE 300 #9353D3 400 #7828C8 500 #6020A0 600 #481878 700 #301050 800 #180828 900
Green #E8FAF0 50 #D1F4E0 100 #A2E9C1 200 #74DFA2 300 #45D483 400 #17C964 500 #12A150 600 #0E793C 700 #095028 800 #052814 900
Red #FEE7EF 50 #FDD0DF 100 #FAA0BF 200 #F871A0 300 #F54180 400 #F31260 500 #C20E4D 600 #920B3A 700 #610726 800 #310413 900
Pink #FFEDFA 50 #FFDCF5 100 #FFB8EB 200 #FF95E1 300 #FF71D7 400 #FF4ECD 500 #CC3EA4 600 #992F7B 700 #661F52 800 #331029 900
Yellow #FEFCE8 50 #FDEDD3 100 #FBDBA7 200 #F9C97C 300 #F7B750 400 #F5A524 500 #C4841D 600 #936316 700 #62420E 800 #312107 900
Cyan #F0FCFF 50 #E6FAFE 100 #D7F8FE 200 #C3F4FD 300 #A5EEFD 400 #7EE7FC 500 #06B7DB 600 #09AACD 700 #0E8AAA 800 #053B48 900
Zinc #FAFAFA 50 #F4F4F5 100 #E4E4E7 200 #D4D4D8 300 #A1A1AA 400 #71717A 500 #52525B 600 #3F3F46 700 #27272A 800 #18181B 900
Semantic colors adapt with the theme, delivering meaning and reinforcing your brand identity.
For an effective palette, we recommend using color ranges from 50
to 900
. You can use tools like Eva Design System ,
Smart Watch , Palette or Color Box to generate your palette.
Semantic colors should be placed inside the heroui
plugin options, not inside the TailwindCSS theme object.
Change the docs theme to see the semantic colors in action.
Layout background #000000 foreground #ECEDEE divider rgba(255, 255, 255, 0.15) focus #006FEE
Content content1 #18181b content2 #27272a content3 #3f3f46 content4 #52525b
Base default #3f3f46 primary #006FEE secondary #9353d3 success #17c964 warning #f5a524 danger #f31260
Default default-50 #18181b default-100 #27272a default-200 #3f3f46 default-300 #52525b default-400 #71717a default-500 #a1a1aa default-600 #d4d4d8 default-700 #e4e4e7 default-800 #f4f4f5 default-900 #fafafa
Primary primary-50 #001731 primary-100 #002e62 primary-200 #004493 primary-300 #005bc4 primary-400 #006FEE primary-500 #338ef7 primary-600 #66aaf9 primary-700 #99c7fb primary-800 #cce3fd primary-900 #e6f1fe
Secondary secondary-50 #180828 secondary-100 #301050 secondary-200 #481878 secondary-300 #6020a0 secondary-400 #7828c8 secondary-500 #9353d3 secondary-600 #ae7ede secondary-700 #c9a9e9 secondary-800 #e4d4f4 secondary-900 #f2eafa
Success success-50 #052814 success-100 #095028 success-200 #0e793c success-300 #12a150 success-400 #17c964 success-500 #45d483 success-600 #74dfa2 success-700 #a2e9c1 success-800 #d1f4e0 success-900 #e8faf0
Warning warning-50 #312107 warning-100 #62420e warning-200 #936316 warning-300 #c4841d warning-400 #f5a524 warning-500 #f7b750 warning-600 #f9c97c warning-700 #fbdba7 warning-800 #fdedd3 warning-900 #fefce8
Danger danger-50 #310413 danger-100 #610726 danger-200 #920b3a danger-300 #c20e4d danger-400 #f31260 danger-500 #f54180 danger-600 #f871a0 danger-700 #faa0bf danger-800 #fdd0df danger-900 #fee7ef
Semantic colors can be applied anywhere in your project where colors are used, such as
text color, border color, background color utilities, and more.
Import semantic and common colors into your JavaScript files as follows:
HeroUI creates CSS variables using the format --prefix-colorname-shade
for each semantic color. By
default the prefix is heroui
, but you can change it with the prefix
option.
Then you can use the CSS variables in your CSS files.