Winden

Wizard Colors

  • Load pressets
  • Utility Colors
  • Builders Colors
  • Extend

Load pressets

To get you started fast we prepared tree set of colors for you that you can insert with just a click.

Neutrals, Primary, Secondary

Include Utility Colors

Utility colors are non colors that you need for every project. 

colors: {
    transparent: 'transparent',
    current: 'currentColor',
    white: '#fff',
    black: '#000',
    auto: 'auto',
    inherit: 'inherit',
}

They are always the same and that is why once included you will not have option to change them.

Builders Colors

Under the builders integration you will be presented active builders that you can include to fetch the colors values.

If the Builders (Oxygen, Bricks) or FSE are active you will get option to include them.

Same as utility colors this will be added as preview without option to edit them.

Extend

This option with add new colors on top of tailwind default colors. If this is not enabled colors in wizzard will replace tailwind default colors.

Main Content

This is the place where you can have overview of all colors that are managed with wizard and from here you can edit or delete colors.

Edit Colors

  • Close
  • Delete
  • Base hex value
  • Color palete name
  • Color Shades
  • Color picker
  • Color modes
  • Color Palete settings

1
2
3
4
5
6
7
8

Close

This button will close the edit mode and display palettes overview again. This will not reset changes.

Delete

This will delete color palette. We do not give warnings for this step.

Base hex value

You can paste or type base color value. And from that color shades will be generated in lighter and darker direction.

Tip

You can type red or olive or any other color name and that will generate hex value and pass that name to the color name field.

Color palete name

This will be used as root of your color name. Once you define red and you have shades 100, 200, 300… you can then call class bg-red-200.

Note: While you are changing hex values name will be change as well so you can use lock icon to prevent that.

Color Shades

Here you have overview of all shades that are generated for current base color.

Input filed

100, 200, 300 are generated automaticaly based on shades steps but you can overwrite those to what ever you like.

Example you can call 300 : base, 500: hover… then you can have bg-red-hover instead of bg-red-500

Checkbox

Having options is great but then can be overwhelming. You can use checkbox to disable colors that you do not need currently in production without need to delete them.

Radio button

You can choose default color. It can be only one. That will remove need of the 3rd value in color. If 500 is set do defaul insted of bg-red-500 you can just type bg-red

Color picker

This will hive you freedom to handpick colors and we created set of colors below to choose to get you started fast.

Color modes

For fine tuning you can choose between sliders of HSL or RGB.

Color Palete settings

Shades: Is number of shades. 10 is default

Lightest: 100 will make it light as white and 50 will be same as base color

Darkest: 0 will make it dark as black and 50 will be same as base color

Table of Contents