OXYPROPS

(click on props & classes to copy)

Scheme :

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 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

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);
}
Need Transparency ? Use the -hsl props
--o-brand-hsl => hsl(var(--o-brand-hsl) / 70%)
Copied to clipboard!