introduction
customization
ConfigurationThemeColorsColor ModesStyles syntax
modules
elements
helpers
presets
packages

Colors

We provide a default color palette that you can use to customize your theme in case that you do not have any brand colors.

gray
100
#f6f7f9
200
#ebedef
300
#d4d8dd
400
#a4abb6
500
#747c8b
600
#4b5563
700
#363f4f
800
#1d2734
900
#101623
neutral
100
#fafafa
200
#eaeaec
300
#dadadd
400
#a7a7af
500
#76767f
600
#55555e
700
#44444b
800
#2c2c30
900
#1d1d20
warm
100
#fafaf9
200
#f0f0ef
300
#e0dddc
400
#b2aca9
500
#817974
600
#5d5651
700
#48423d
800
#2e2a29
900
#211e1c
red
100
#fef6f6
200
#fbe5e5
300
#f7c5c5
400
#eb7870
500
#e23636
600
#a61c1c
700
#7a1515
800
#500c0c
900
#350808
orange
100
#fef8f6
200
#fde9e2
300
#fbd0c1
400
#f38d68
500
#e85621
600
#ae3d13
700
#832c0c
800
#551c07
900
#381305
beige
100
#fdf9f6
200
#faefe5
300
#f4dcc7
400
#e6a875
500
#d97c30
600
#a45a1e
700
#7d4517
800
#4e2b0e
900
#341c09
yellow
100
#fffcf5
200
#fef6e1
300
#feebbe
400
#fbc850
500
#f0a905
600
#be8004
700
#905604
800
#593103
900
#3b2002
green
100
#f7fdf9
200
#e7f9ee
300
#cbf1d9
400
#72da9b
500
#34c56e
600
#299956
700
#1e713f
800
#134929
900
#0d301b
mint
100
#f7fdfb
200
#e7f8f4
300
#cbf0e7
400
#80dbc4
500
#38c7a3
600
#2b977c
700
#21735f
800
#14483b
900
#0d3027
aqua
100
#f6fcfe
200
#e4f7fb
300
#c1ecf6
400
#75d7ea
500
#21bede
600
#1991a9
700
#136e81
800
#0c4550
900
#082e35
blue
100
#f5f9ff
200
#cce2ff
300
#9bc5fd
400
#63a8fd
500
#1c76fd
600
#025cca
700
#024597
800
#022464
900
#011232
royal
100
#f6f7fd
200
#e5e7fa
300
#c7cbf4
400
#7d85e3
500
#3542d4
600
#202ba2
700
#18217b
800
#0f144d
900
#0a0d33
purple
100
#f9f7fd
200
#ebe5fa
300
#d5c8f3
400
#9678e2
500
#6235d4
600
#4622a0
700
#351a7a
800
#21104c
900
#160b32
pink
100
#fdf6fa
200
#fae5f1
300
#f5c7e0
400
#e675b3
500
#d9308d
600
#a41e68
700
#7d174f
800
#4e0e31
900
#340921

Using default colors

In case that you do not have custom colors defined in your project, you can import the @siimple/colors module in your configuration file to access the default colors provided in siimple.

siimple.config.js
import colors from "@siimple/colors";

// Comfigure siimple using the color palette
export default {
    colors: {
        primary: colors.mint["500"],
        secondary: colors.royal["600"],
        text: colors.gray["700"],
        // ...other colors
    },
    // ...other configuration
};

Adding all colors to your theme

You can register all colors in your theme just using a tiny piece of JS code to transform color objects into plain color names with the pattern {name}-{shade}:

siimple.config.js
import colors from "@siimple/colors";

export default {
    colors: {
        ...Object.keys(colors).reduce((prev, name) => ({
            ...prev,
            ...Object.fromEntries(Object.keys(colors[name]).map(shade => {
                return [`${name}-${shade}`, colors[name][shade]];
            })),
        }), {}),
        // ...other colors
    },
    // ...other configuration
};

If you have the helpers module enabled, this will generate the following colors helpers:

.has-bg-blue-100 { /* ... */ }
.has-bg-highlight { /* ... */ }
.has-bg-blue-300 { /* ... */ }
/* ... */
.has-text-blue-100 { /* ... */ }
.has-text-blue-200 { /* ... */ }
.has-text-blue-300 { /* ... */ }
/* ... */ 

Designed and maintained with by @jmjuanes.

Code is licensed under MIT, documentation under Creative Commons Attribution 4.0.

Currently v4.3.1