Select your colors

You can browse the rest of the website with this theme as well. (1) First pick your theme colors. (2) Next, check that the contrasts of the text colors on the theme colors meet the AA or AAA requirements for all shades. (3) After that you can adjust other variables, such as the radius and size of your buttons. (4) Finally, copy the CSS and the unocss.config.ts into your project.

primary
secondary
tertiary
surface
success
warning
error

Update shade contrasts

The numbers show the contrast between the text color and the background color (#fff or #000 is chosen by default). You can read more about accessibility contrast guidelines here. Click on the buttons to see which contrasts do not meet the requirements and click on the shades to make them lighter or darker.

50100200300400500600700800900950
Lighten
Darken
Small buttons (btn-sm)
Medium buttons (btn-md)
Large buttons (btn-lg)
Extra-large buttons (btn-xl)