# Colors

Colors play an important role in website design. In BlickCss, you can add and use colors very easily.

blick.config({
    colors: {
        brand: "#00aa66",
        foo: {
            def: "#ff00ff",
            50: "#ff88ff"
        }
    }
})

Here we've added 2 colors. As you can see, we can write it down as a simple string, or we can make several shades for a color.

:root {
    --brand: #00aa66;
    --foo: #ff00ff;
    --foo-50: #ff88ff;
}

Your colors are converted to css variables .

Here's how to use them.

class="bg-$brand c-$foo-50"

It is advisable to write only hex values to avoid errors, as you can make transparency for the color.

class="bg-$brand/50" // #00aa6680

Some colors are already defined in the standard theme.

# Read next:

Fonts