OxyProps Color System
Logical Colors
We recommend to use logical colors as much as possible. In OxyProps, you have 4 main logical colors : canvas, brand, links and visited.
Logical colors are the keystone of OxyProps color system. You assign actual colors to logical colors globaly on your plugin dashboard, but also localy when you need to.
Your Canvas Color will be used in various shades for your backgrounds and texts
Your Brand Color is typically the color that represents your brand identity and can be used to give accent to your design
Your Links Color is typically used for active elements of your site and can be different from you brand color
Your Visited Links Color will be used by OxyProps Normalize for your visited text links, but you are the boss, use it as you wish
Shades and Transparencies
Each logical color offers 11 shades (0 to 10) and unlimited levels of transparency using the special -hsl props.
Canvas
zero
1
2
3
4
5
6
7
8
9
10
5%
10%
20%
30%
40%
50%
60%
70%
80%
90%
95%
Brand
zero
1
2
3
4
5
6
7
8
9
10
5%
10%
20%
30%
40%
50%
60%
70%
80%
90%
95%
Links
zero
1
2
3
4
5
6
7
8
9
10
5%
10%
20%
30%
40%
50%
60%
70%
80%
90%
95%
Visited
zero
1
2
3
4
5
6
7
8
9
10
5%
10%
20%
30%
40%
50%
60%
70%
80%
90%
95%
Choose from a large color palette
OxyProps offers a selection for your canvas colors, and for your beand / links / links visited. You can choose from your plugin daashboard.
Canvas Colors
Mole
zero
1
2
3
4
5
6
7
8
9
10
Lead
zero
1
2
3
4
5
6
7
8
9
10
Pipe
zero
1
2
3
4
5
6
7
8
9
10
Denim
zero
1
2
3
4
5
6
7
8
9
10
Grey
zero
1
2
3
4
5
6
7
8
9
10
Slate
zero
1
2
3
4
5
6
7
8
9
10
Steel
zero
1
2
3
4
5
6
7
8
9
10
Iron
zero
1
2
3
4
5
6
7
8
9
10
Zinc
zero
1
2
3
4
5
6
7
8
9
10
Brand / Links / Visited Colors
Red
zero
1
2
3
4
5
6
7
8
9
10
Rose
zero
1
2
3
4
5
6
7
8
9
10
Pink
zero
1
2
3
4
5
6
7
8
9
10
Grape
zero
1
2
3
4
5
6
7
8
9
10
Purple
zero
1
2
3
4
5
6
7
8
9
10
Violet
zero
1
2
3
4
5
6
7
8
9
10
Indigo
zero
1
2
3
4
5
6
7
8
9
10
Blue
zero
1
2
3
4
5
6
7
8
9
10
Sky
zero
1
2
3
4
5
6
7
8
9
10
Cyan
zero
1
2
3
4
5
6
7
8
9
10
Teal
zero
1
2
3
4
5
6
7
8
9
10
Jade
zero
1
2
3
4
5
6
7
8
9
10
Green
zero
1
2
3
4
5
6
7
8
9
10
Lime
zero
1
2
3
4
5
6
7
8
9
10
Yellow
zero
1
2
3
4
5
6
7
8
9
10
Gold
zero
1
2
3
4
5
6
7
8
9
10
Ochre
zero
1
2
3
4
5
6
7
8
9
10
Orange
zero
1
2
3
4
5
6
7
8
9
10
Usage
The Main Props
--o-text-brand
--o-bg-brand
--o-text-links
--o-bg-links
--o-text-visited
--o-bg-visited
--o-surface-1
--o-surface-2
--o-surface-3
--o-surface-4
Utility classes
o-text-brand
o-bg-brand
o-text-links
o-bg-links
o-text-visited
o-bg-visited
o-surface-1
o-surface-2
o-surface-3
o-surface-4
Example
.my-custom-card {
background-color: var(--o-surface-2);
color: var(--o-text-2);
padding-block: var(--o-size-fluid-1);
padding-inline: var(--o-size-fluid-3);
border: var(--o-border-size-2) solid var(--o-surface-4);
border-radius: var(--o-radius-2);
box-shadow: var(--o-shadow-4);
}
background-color: var(--o-surface-2);
color: var(--o-text-2);
padding-block: var(--o-size-fluid-1);
padding-inline: var(--o-size-fluid-3);
border: var(--o-border-size-2) solid var(--o-surface-4);
border-radius: var(--o-radius-2);
box-shadow: var(--o-shadow-4);
}
Need Transparency ? Use the -hsl props
--o-brand-hsl => hsl(var(--o-brand-hsl) / 70%)