Use our color generator

Paste in your primary (brand) color and let Breakerblocks do the rest.

Generate theme colors

Pick a color below and let Breakerblocks do the magic.

    
Copy the above genrated CSS code and paste it into your global settings.
Don't know how?

Primary

This container is styled with your primary color. The background uses the --primarybg variable and the text on top is either your promary color, or either black or white based on what contrasts your primary color the most.

Secondary

This container is styled with your secondary color. The background uses the --secondarybg variable and the text on top is either your secondary color, or either black or white based on what contrasts your secondary color the most.

Accent

This container is styled with your secondary color. The background uses the --secondarybg variable and the text on top is either your secondary color, or either black or white based on what contrasts your secondary color the most.
This is an alternative primary color, used on dark backgrounds
This is an alternative secondary color, used on dark backgrounds
This is an alternative accent color, used on dark backgrounds