Utilities - Color

Inkline uses a beautiful, consistent color scheme across the framework.

Brand Colors

Attract your user’s attention using brand colors. The main colors of Inkline used for branding are:

Primary
Secondary
Light
Dark
<div class="_background:primary">Primary</div>

<div class="_background:secondary">Secondary</div>

<div class="_background:light">Light</div>

<div class="_background:dark">Dark</div>

Primary 5%
Primary 10%
Primary 15%
Primary 20%
Primary 25%
Primary 30%
Primary 35%
Primary 40%
Primary 45%
Primary 50%
Primary 55%
Primary 60%
Primary 65%
Primary 70%
Primary 75%
Primary 80%
Primary 85%
Primary 90%
Primary 95%
<div class="_background:primary-05">Primary 5%</div>

<div class="_background:primary-10">Primary 10%</div>

<div class="_background:primary-15">Primary 15%</div>

<div class="_background:primary-20">Primary 20%</div>

<div class="_background:primary-25">Primary 25%</div>

<div class="_background:primary-30">Primary 30%</div>

<div class="_background:primary-35">Primary 35%</div>

<div class="_background:primary-40">Primary 40%</div>

<div class="_background:primary-45">Primary 45%</div>

<div class="_background:primary-50">Primary 50%</div>

<div class="_background:primary-55">Primary 55%</div>

<div class="_background:primary-60">Primary 60%</div>

<div class="_background:primary-65">Primary 65%</div>

<div class="_background:primary-70">Primary 70%</div>

<div class="_background:primary-75">Primary 75%</div>

<div class="_background:primary-80">Primary 80%</div>

<div class="_background:primary-85">Primary 85%</div>

<div class="_background:primary-90">Primary 90%</div>

<div class="_background:primary-95">Primary 95%</div>

Secondary 5%
Secondary 10%
Secondary 15%
Secondary 20%
Secondary 25%
Secondary 30%
Secondary 35%
Secondary 40%
Secondary 45%
Secondary 50%
Secondary 55%
Secondary 60%
Secondary 65%
Secondary 70%
Secondary 75%
Secondary 80%
Secondary 85%
Secondary 90%
Secondary 95%
<div class="_background:secondary-05">Secondary 5%</div>

<div class="_background:secondary-10">Secondary 10%</div>

<div class="_background:secondary-15">Secondary 15%</div>

<div class="_background:secondary-20">Secondary 20%</div>

<div class="_background:secondary-25">Secondary 25%</div>

<div class="_background:secondary-30">Secondary 30%</div>

<div class="_background:secondary-35">Secondary 35%</div>

<div class="_background:secondary-40">Secondary 40%</div>

<div class="_background:secondary-45">Secondary 45%</div>

<div class="_background:secondary-50">Secondary 50%</div>

<div class="_background:secondary-55">Secondary 55%</div>

<div class="_background:secondary-60">Secondary 60%</div>

<div class="_background:secondary-65">Secondary 65%</div>

<div class="_background:secondary-70">Secondary 70%</div>

<div class="_background:secondary-75">Secondary 75%</div>

<div class="_background:secondary-80">Secondary 80%</div>

<div class="_background:secondary-85">Secondary 85%</div>

<div class="_background:secondary-90">Secondary 90%</div>

<div class="_background:secondary-95">Secondary 95%</div>

Light 25%
Light 30%
Light 35%
Light 40%
Light 45%
Light 50%
Light 55%
Light 60%
Light 65%
Light 70%
Light 75%
<div class="_background:light-25">Light 25%</div>

<div class="_background:light-30">Light 30%</div>

<div class="_background:light-35">Light 35%</div>

<div class="_background:light-40">Light 40%</div>

<div class="_background:light-45">Light 45%</div>

<div class="_background:light-50">Light 50%</div>

<div class="_background:light-55">Light 55%</div>

<div class="_background:light-60">Light 60%</div>

<div class="_background:light-65">Light 65%</div>

<div class="_background:light-70">Light 70%</div>

<div class="_background:light-75">Light 75%</div>

Dark 25%
Dark 30%
Dark 35%
Dark 40%
Dark 45%
Dark 50%
Dark 55%
Dark 60%
Dark 65%
Dark 70%
Dark 75%
<div class="_background:dark-25">Dark 25%</div>

<div class="_background:dark-30">Dark 30%</div>

<div class="_background:dark-35">Dark 35%</div>

<div class="_background:dark-40">Dark 40%</div>

<div class="_background:dark-45">Dark 45%</div>

<div class="_background:dark-50">Dark 50%</div>

<div class="_background:dark-55">Dark 55%</div>

<div class="_background:dark-60">Dark 60%</div>

<div class="_background:dark-65">Dark 65%</div>

<div class="_background:dark-70">Dark 70%</div>

<div class="_background:dark-75">Dark 75%</div>

You can also add brand text colors using text-specific helper classes:

Primary

Secondary

Light

Dark

<p class="_color:primary">Primary</p>

<p class="_color:secondary">Secondary</p>

<p class="_color:light">Light</p>

<p class="_color:dark">Dark</p>

Primary 5%
Primary 10%
Primary 15%
Primary 20%
Primary 25%
Primary 30%
Primary 35%
Primary 40%
Primary 45%
Primary 50%
Primary 55%
Primary 60%
Primary 65%
Primary 70%
Primary 75%
Primary 80%
Primary 85%
Primary 90%
Primary 95%
<div class="_color:primary-05">Primary 5%</div>

<div class="_color:primary-10">Primary 10%</div>

<div class="_color:primary-15">Primary 15%</div>

<div class="_color:primary-20">Primary 20%</div>

<div class="_color:primary-25">Primary 25%</div>

<div class="_color:primary-30">Primary 30%</div>

<div class="_color:primary-35">Primary 35%</div>

<div class="_color:primary-40">Primary 40%</div>

<div class="_color:primary-45">Primary 45%</div>

<div class="_color:primary-50">Primary 50%</div>

<div class="_color:primary-55">Primary 55%</div>

<div class="_color:primary-60">Primary 60%</div>

<div class="_color:primary-65">Primary 65%</div>

<div class="_color:primary-70">Primary 70%</div>

<div class="_color:primary-75">Primary 75%</div>

<div class="_color:primary-80">Primary 80%</div>

<div class="_color:primary-85">Primary 85%</div>

<div class="_color:primary-90">Primary 90%</div>

<div class="_color:primary-95">Primary 95%</div>

Secondary 5%
Secondary 10%
Secondary 15%
Secondary 20%
Secondary 25%
Secondary 30%
Secondary 35%
Secondary 40%
Secondary 45%
Secondary 50%
Secondary 55%
Secondary 60%
Secondary 65%
Secondary 70%
Secondary 75%
Secondary 80%
Secondary 85%
Secondary 90%
Secondary 95%
<div class="_color:secondary-05">Secondary 5%</div>

<div class="_color:secondary-10">Secondary 10%</div>

<div class="_color:secondary-15">Secondary 15%</div>

<div class="_color:secondary-20">Secondary 20%</div>

<div class="_color:secondary-25">Secondary 25%</div>

<div class="_color:secondary-30">Secondary 30%</div>

<div class="_color:secondary-35">Secondary 35%</div>

<div class="_color:secondary-40">Secondary 40%</div>

<div class="_color:secondary-45">Secondary 45%</div>

<div class="_color:secondary-50">Secondary 50%</div>

<div class="_color:secondary-55">Secondary 55%</div>

<div class="_color:secondary-60">Secondary 60%</div>

<div class="_color:secondary-65">Secondary 65%</div>

<div class="_color:secondary-70">Secondary 70%</div>

<div class="_color:secondary-75">Secondary 75%</div>

<div class="_color:secondary-80">Secondary 80%</div>

<div class="_color:secondary-85">Secondary 85%</div>

<div class="_color:secondary-90">Secondary 90%</div>

<div class="_color:secondary-95">Secondary 95%</div>

Light 25%

Light 30%

Light 35%

Light 40%

Light 45%

Light 50%

Light 55%

Light 60%

Light 65%

Light 70%

Light 75%

<p class="_color:light-25">Light 25%</p>

<p class="_color:light-30">Light 30%</p>

<p class="_color:light-35">Light 35%</p>

<p class="_color:light-40">Light 40%</p>

<p class="_color:light-45">Light 45%</p>

<p class="_color:light-50">Light 50%</p>

<p class="_color:light-55">Light 55%</p>

<p class="_color:light-60">Light 60%</p>

<p class="_color:light-65">Light 65%</p>

<p class="_color:light-70">Light 70%</p>

<p class="_color:light-75">Light 75%</p>

Dark 25%

Dark 30%

Dark 35%

Dark 40%

Dark 45%

Dark 50%

Dark 55%

Dark 60%

Dark 65%

Dark 70%

Dark 75%

<p class="_color:dark-25">Dark 25%</p>

<p class="_color:dark-30">Dark 30%</p>

<p class="_color:dark-35">Dark 35%</p>

<p class="_color:dark-40">Dark 40%</p>

<p class="_color:dark-45">Dark 45%</p>

<p class="_color:dark-50">Dark 50%</p>

<p class="_color:dark-55">Dark 55%</p>

<p class="_color:dark-60">Dark 60%</p>

<p class="_color:dark-65">Dark 65%</p>

<p class="_color:dark-70">Dark 70%</p>

<p class="_color:dark-75">Dark 75%</p>

State Colors

When displaying state information such as info, success, warning, or error messages, you will need to color your message accordingly. The state colors are:

Info
Success
Warning
Danger
<div class="_background:info">Info</div>

<div class="_background:success">Success</div>

<div class="_background:warning">Warning</div>

<div class="_background:danger">Danger</div>

Info 5%
Info 10%
Info 15%
Info 20%
Info 25%
Info 30%
Info 35%
Info 40%
Info 45%
Info 50%
Info 55%
Info 60%
Info 65%
Info 70%
Info 75%
Info 80%
Info 85%
Info 90%
Info 95%
<div class="_background:info-05">Info 5%</div>

<div class="_background:info-10">Info 10%</div>

<div class="_background:info-15">Info 15%</div>

<div class="_background:info-20">Info 20%</div>

<div class="_background:info-25">Info 25%</div>

<div class="_background:info-30">Info 30%</div>

<div class="_background:info-35">Info 35%</div>

<div class="_background:info-40">Info 40%</div>

<div class="_background:info-45">Info 45%</div>

<div class="_background:info-50">Info 50%</div>

<div class="_background:info-55">Info 55%</div>

<div class="_background:info-60">Info 60%</div>

<div class="_background:info-65">Info 65%</div>

<div class="_background:info-70">Info 70%</div>

<div class="_background:info-75">Info 75%</div>

<div class="_background:info-80">Info 80%</div>

<div class="_background:info-85">Info 85%</div>

<div class="_background:info-90">Info 90%</div>

<div class="_background:info-95">Info 95%</div>

Success 5%
Success 10%
Success 15%
Success 20%
Success 25%
Success 30%
Success 35%
Success 40%
Success 45%
Success 50%
Success 55%
Success 60%
Success 65%
Success 70%
Success 75%
Success 80%
Success 85%
Success 90%
Success 95%
<div class="_background:success-05">Success 5%</div>

<div class="_background:success-10">Success 10%</div>

<div class="_background:success-15">Success 15%</div>

<div class="_background:success-20">Success 20%</div>

<div class="_background:success-25">Success 25%</div>

<div class="_background:success-30">Success 30%</div>

<div class="_background:success-35">Success 35%</div>

<div class="_background:success-40">Success 40%</div>

<div class="_background:success-45">Success 45%</div>

<div class="_background:success-50">Success 50%</div>

<div class="_background:success-55">Success 55%</div>

<div class="_background:success-60">Success 60%</div>

<div class="_background:success-65">Success 65%</div>

<div class="_background:success-70">Success 70%</div>

<div class="_background:success-75">Success 75%</div>

<div class="_background:success-80">Success 80%</div>

<div class="_background:success-85">Success 85%</div>

<div class="_background:success-90">Success 90%</div>

<div class="_background:success-95">Success 95%</div>

Warning 5%
Warning 10%
Warning 15%
Warning 20%
Warning 25%
Warning 30%
Warning 35%
Warning 40%
Warning 45%
Warning 50%
Warning 55%
Warning 60%
Warning 65%
Warning 70%
Warning 75%
Warning 80%
Warning 85%
Warning 90%
Warning 95%
<div class="_background:warning-05">Warning 5%</div>

<div class="_background:warning-10">Warning 10%</div>

<div class="_background:warning-15">Warning 15%</div>

<div class="_background:warning-20">Warning 20%</div>

<div class="_background:warning-25">Warning 25%</div>

<div class="_background:warning-30">Warning 30%</div>

<div class="_background:warning-35">Warning 35%</div>

<div class="_background:warning-40">Warning 40%</div>

<div class="_background:warning-45">Warning 45%</div>

<div class="_background:warning-50">Warning 50%</div>

<div class="_background:warning-55">Warning 55%</div>

<div class="_background:warning-60">Warning 60%</div>

<div class="_background:warning-65">Warning 65%</div>

<div class="_background:warning-70">Warning 70%</div>

<div class="_background:warning-75">Warning 75%</div>

<div class="_background:warning-80">Warning 80%</div>

<div class="_background:warning-85">Warning 85%</div>

<div class="_background:warning-90">Warning 90%</div>

<div class="_background:warning-95">Warning 95%</div>

Danger 5%
Danger 10%
Danger 15%
Danger 20%
Danger 25%
Danger 30%
Danger 35%
Danger 40%
Danger 45%
Danger 50%
Danger 55%
Danger 60%
Danger 65%
Danger 70%
Danger 75%
Danger 80%
Danger 85%
Danger 90%
Danger 95%
<div class="_background:danger-05">Danger 5%</div>

<div class="_background:danger-10">Danger 10%</div>

<div class="_background:danger-15">Danger 15%</div>

<div class="_background:danger-20">Danger 20%</div>

<div class="_background:danger-25">Danger 25%</div>

<div class="_background:danger-30">Danger 30%</div>

<div class="_background:danger-35">Danger 35%</div>

<div class="_background:danger-40">Danger 40%</div>

<div class="_background:danger-45">Danger 45%</div>

<div class="_background:danger-50">Danger 50%</div>

<div class="_background:danger-55">Danger 55%</div>

<div class="_background:danger-60">Danger 60%</div>

<div class="_background:danger-65">Danger 65%</div>

<div class="_background:danger-70">Danger 70%</div>

<div class="_background:danger-75">Danger 75%</div>

<div class="_background:danger-80">Danger 80%</div>

<div class="_background:danger-85">Danger 85%</div>

<div class="_background:danger-90">Danger 90%</div>

<div class="_background:danger-95">Danger 95%</div>

You can also add state text colors using text-specific helper classes:

Info

Success

Warning

Danger

<p class="_color:info">Info</p>

<p class="_color:success">Success</p>

<p class="_color:warning">Warning</p>

<p class="_color:danger">Danger</p>

Info 5%
Info 10%
Info 15%
Info 20%
Info 25%
Info 30%
Info 35%
Info 40%
Info 45%
Info 50%
Info 55%
Info 60%
Info 65%
Info 70%
Info 75%
Info 80%
Info 85%
Info 90%
Info 95%
<div class="_color:info-05">Info 5%</div>

<div class="_color:info-10">Info 10%</div>

<div class="_color:info-15">Info 15%</div>

<div class="_color:info-20">Info 20%</div>

<div class="_color:info-25">Info 25%</div>

<div class="_color:info-30">Info 30%</div>

<div class="_color:info-35">Info 35%</div>

<div class="_color:info-40">Info 40%</div>

<div class="_color:info-45">Info 45%</div>

<div class="_color:info-50">Info 50%</div>

<div class="_color:info-55">Info 55%</div>

<div class="_color:info-60">Info 60%</div>

<div class="_color:info-65">Info 65%</div>

<div class="_color:info-70">Info 70%</div>

<div class="_color:info-75">Info 75%</div>

<div class="_color:info-80">Info 80%</div>

<div class="_color:info-85">Info 85%</div>

<div class="_color:info-90">Info 90%</div>

<div class="_color:info-95">Info 95%</div>

Success 5%
Success 10%
Success 15%
Success 20%
Success 25%
Success 30%
Success 35%
Success 40%
Success 45%
Success 50%
Success 55%
Success 60%
Success 65%
Success 70%
Success 75%
Success 80%
Success 85%
Success 90%
Success 95%
<div class="_color:success-05">Success 5%</div>

<div class="_color:success-10">Success 10%</div>

<div class="_color:success-15">Success 15%</div>

<div class="_color:success-20">Success 20%</div>

<div class="_color:success-25">Success 25%</div>

<div class="_color:success-30">Success 30%</div>

<div class="_color:success-35">Success 35%</div>

<div class="_color:success-40">Success 40%</div>

<div class="_color:success-45">Success 45%</div>

<div class="_color:success-50">Success 50%</div>

<div class="_color:success-55">Success 55%</div>

<div class="_color:success-60">Success 60%</div>

<div class="_color:success-65">Success 65%</div>

<div class="_color:success-70">Success 70%</div>

<div class="_color:success-75">Success 75%</div>

<div class="_color:success-80">Success 80%</div>

<div class="_color:success-85">Success 85%</div>

<div class="_color:success-90">Success 90%</div>

<div class="_color:success-95">Success 95%</div>

Warning 5%
Warning 10%
Warning 15%
Warning 20%
Warning 25%
Warning 30%
Warning 35%
Warning 40%
Warning 45%
Warning 50%
Warning 55%
Warning 60%
Warning 65%
Warning 70%
Warning 75%
Warning 80%
Warning 85%
Warning 90%
Warning 95%
<div class="_color:warning-05">Warning 5%</div>

<div class="_color:warning-10">Warning 10%</div>

<div class="_color:warning-15">Warning 15%</div>

<div class="_color:warning-20">Warning 20%</div>

<div class="_color:warning-25">Warning 25%</div>

<div class="_color:warning-30">Warning 30%</div>

<div class="_color:warning-35">Warning 35%</div>

<div class="_color:warning-40">Warning 40%</div>

<div class="_color:warning-45">Warning 45%</div>

<div class="_color:warning-50">Warning 50%</div>

<div class="_color:warning-55">Warning 55%</div>

<div class="_color:warning-60">Warning 60%</div>

<div class="_color:warning-65">Warning 65%</div>

<div class="_color:warning-70">Warning 70%</div>

<div class="_color:warning-75">Warning 75%</div>

<div class="_color:warning-80">Warning 80%</div>

<div class="_color:warning-85">Warning 85%</div>

<div class="_color:warning-90">Warning 90%</div>

<div class="_color:warning-95">Warning 95%</div>

Danger 5%
Danger 10%
Danger 15%
Danger 20%
Danger 25%
Danger 30%
Danger 35%
Danger 40%
Danger 45%
Danger 50%
Danger 55%
Danger 60%
Danger 65%
Danger 70%
Danger 75%
Danger 80%
Danger 85%
Danger 90%
Danger 95%
<div class="_color:danger-05">Danger 5%</div>

<div class="_color:danger-10">Danger 10%</div>

<div class="_color:danger-15">Danger 15%</div>

<div class="_color:danger-20">Danger 20%</div>

<div class="_color:danger-25">Danger 25%</div>

<div class="_color:danger-30">Danger 30%</div>

<div class="_color:danger-35">Danger 35%</div>

<div class="_color:danger-40">Danger 40%</div>

<div class="_color:danger-45">Danger 45%</div>

<div class="_color:danger-50">Danger 50%</div>

<div class="_color:danger-55">Danger 55%</div>

<div class="_color:danger-60">Danger 60%</div>

<div class="_color:danger-65">Danger 65%</div>

<div class="_color:danger-70">Danger 70%</div>

<div class="_color:danger-75">Danger 75%</div>

<div class="_color:danger-80">Danger 80%</div>

<div class="_color:danger-85">Danger 85%</div>

<div class="_color:danger-90">Danger 90%</div>

<div class="_color:danger-95">Danger 95%</div>

Basic

Basic colors are useful when working with multiple colors on the same page. The following basic colors are available when using the default variant.

You can use helper classes to add state color backgrounds:

Red
Orange
Yellow
Green
Teal
Blue
Purple
Pink
<div class="_background:red">Red</div>

<div class="_background:orange">Orange</div>

<div class="_background:yellow">Yellow</div>

<div class="_background:green">Green</div>

<div class="_background:teal">Teal</div>

<div class="_background:blue">Blue</div>

<div class="_background:purple">Purple</div>

<div class="_background:pink">Pink</div>

Red 5%
Red 10%
Red 15%
Red 20%
Red 25%
Red 30%
Red 35%
Red 40%
Red 45%
Red 50%
Red 55%
Red 60%
Red 65%
Red 70%
Red 75%
Red 80%
Red 85%
Red 90%
Red 95%
<div class="_background:red-05">Red 5%</div>

<div class="_background:red-10">Red 10%</div>

<div class="_background:red-15">Red 15%</div>

<div class="_background:red-20">Red 20%</div>

<div class="_background:red-25">Red 25%</div>

<div class="_background:red-30">Red 30%</div>

<div class="_background:red-35">Red 35%</div>

<div class="_background:red-40">Red 40%</div>

<div class="_background:red-45">Red 45%</div>

<div class="_background:red-50">Red 50%</div>

<div class="_background:red-55">Red 55%</div>

<div class="_background:red-60">Red 60%</div>

<div class="_background:red-65">Red 65%</div>

<div class="_background:red-70">Red 70%</div>

<div class="_background:red-75">Red 75%</div>

<div class="_background:red-80">Red 80%</div>

<div class="_background:red-85">Red 85%</div>

<div class="_background:red-90">Red 90%</div>

<div class="_background:red-95">Red 95%</div>

Orange 5%
Orange 10%
Orange 15%
Orange 20%
Orange 25%
Orange 30%
Orange 35%
Orange 40%
Orange 45%
Orange 50%
Orange 55%
Orange 60%
Orange 65%
Orange 70%
Orange 75%
Orange 80%
Orange 85%
Orange 90%
Orange 95%
<div class="_background:orange-05">Orange 5%</div>

<div class="_background:orange-10">Orange 10%</div>

<div class="_background:orange-15">Orange 15%</div>

<div class="_background:orange-20">Orange 20%</div>

<div class="_background:orange-25">Orange 25%</div>

<div class="_background:orange-30">Orange 30%</div>

<div class="_background:orange-35">Orange 35%</div>

<div class="_background:orange-40">Orange 40%</div>

<div class="_background:orange-45">Orange 45%</div>

<div class="_background:orange-50">Orange 50%</div>

<div class="_background:orange-55">Orange 55%</div>

<div class="_background:orange-60">Orange 60%</div>

<div class="_background:orange-65">Orange 65%</div>

<div class="_background:orange-70">Orange 70%</div>

<div class="_background:orange-75">Orange 75%</div>

<div class="_background:orange-80">Orange 80%</div>

<div class="_background:orange-85">Orange 85%</div>

<div class="_background:orange-90">Orange 90%</div>

<div class="_background:orange-95">Orange 95%</div>

Yellow 5%
Yellow 10%
Yellow 15%
Yellow 20%
Yellow 25%
Yellow 30%
Yellow 35%
Yellow 40%
Yellow 45%
Yellow 50%
Yellow 55%
Yellow 60%
Yellow 65%
Yellow 70%
Yellow 75%
Yellow 80%
Yellow 85%
Yellow 90%
Yellow 95%
<div class="_background:yellow-05">Yellow 5%</div>

<div class="_background:yellow-10">Yellow 10%</div>

<div class="_background:yellow-15">Yellow 15%</div>

<div class="_background:yellow-20">Yellow 20%</div>

<div class="_background:yellow-25">Yellow 25%</div>

<div class="_background:yellow-30">Yellow 30%</div>

<div class="_background:yellow-35">Yellow 35%</div>

<div class="_background:yellow-40">Yellow 40%</div>

<div class="_background:yellow-45">Yellow 45%</div>

<div class="_background:yellow-50">Yellow 50%</div>

<div class="_background:yellow-55">Yellow 55%</div>

<div class="_background:yellow-60">Yellow 60%</div>

<div class="_background:yellow-65">Yellow 65%</div>

<div class="_background:yellow-70">Yellow 70%</div>

<div class="_background:yellow-75">Yellow 75%</div>

<div class="_background:yellow-80">Yellow 80%</div>

<div class="_background:yellow-85">Yellow 85%</div>

<div class="_background:yellow-90">Yellow 90%</div>

<div class="_background:yellow-95">Yellow 95%</div>

Green 5%
Green 10%
Green 15%
Green 20%
Green 25%
Green 30%
Green 35%
Green 40%
Green 45%
Green 50%
Green 55%
Green 60%
Green 65%
Green 70%
Green 75%
Green 80%
Green 85%
Green 90%
Green 95%
<div class="_background:green-05">Green 5%</div>

<div class="_background:green-10">Green 10%</div>

<div class="_background:green-15">Green 15%</div>

<div class="_background:green-20">Green 20%</div>

<div class="_background:green-25">Green 25%</div>

<div class="_background:green-30">Green 30%</div>

<div class="_background:green-35">Green 35%</div>

<div class="_background:green-40">Green 40%</div>

<div class="_background:green-45">Green 45%</div>

<div class="_background:green-50">Green 50%</div>

<div class="_background:green-55">Green 55%</div>

<div class="_background:green-60">Green 60%</div>

<div class="_background:green-65">Green 65%</div>

<div class="_background:green-70">Green 70%</div>

<div class="_background:green-75">Green 75%</div>

<div class="_background:green-80">Green 80%</div>

<div class="_background:green-85">Green 85%</div>

<div class="_background:green-90">Green 90%</div>

<div class="_background:green-95">Green 95%</div>

Teal 5%
Teal 10%
Teal 15%
Teal 20%
Teal 25%
Teal 30%
Teal 35%
Teal 40%
Teal 45%
Teal 50%
Teal 55%
Teal 60%
Teal 65%
Teal 70%
Teal 75%
Teal 80%
Teal 85%
Teal 90%
Teal 95%
<div class="_background:teal-05">Teal 5%</div>

<div class="_background:teal-10">Teal 10%</div>

<div class="_background:teal-15">Teal 15%</div>

<div class="_background:teal-20">Teal 20%</div>

<div class="_background:teal-25">Teal 25%</div>

<div class="_background:teal-30">Teal 30%</div>

<div class="_background:teal-35">Teal 35%</div>

<div class="_background:teal-40">Teal 40%</div>

<div class="_background:teal-45">Teal 45%</div>

<div class="_background:teal-50">Teal 50%</div>

<div class="_background:teal-55">Teal 55%</div>

<div class="_background:teal-60">Teal 60%</div>

<div class="_background:teal-65">Teal 65%</div>

<div class="_background:teal-70">Teal 70%</div>

<div class="_background:teal-75">Teal 75%</div>

<div class="_background:teal-80">Teal 80%</div>

<div class="_background:teal-85">Teal 85%</div>

<div class="_background:teal-90">Teal 90%</div>

<div class="_background:teal-95">Teal 95%</div>

Blue 5%
Blue 10%
Blue 15%
Blue 20%
Blue 25%
Blue 30%
Blue 35%
Blue 40%
Blue 45%
Blue 50%
Blue 55%
Blue 60%
Blue 65%
Blue 70%
Blue 75%
Blue 80%
Blue 85%
Blue 90%
Blue 95%
<div class="_background:blue-05">Blue 5%</div>

<div class="_background:blue-10">Blue 10%</div>

<div class="_background:blue-15">Blue 15%</div>

<div class="_background:blue-20">Blue 20%</div>

<div class="_background:blue-25">Blue 25%</div>

<div class="_background:blue-30">Blue 30%</div>

<div class="_background:blue-35">Blue 35%</div>

<div class="_background:blue-40">Blue 40%</div>

<div class="_background:blue-45">Blue 45%</div>

<div class="_background:blue-50">Blue 50%</div>

<div class="_background:blue-55">Blue 55%</div>

<div class="_background:blue-60">Blue 60%</div>

<div class="_background:blue-65">Blue 65%</div>

<div class="_background:blue-70">Blue 70%</div>

<div class="_background:blue-75">Blue 75%</div>

<div class="_background:blue-80">Blue 80%</div>

<div class="_background:blue-85">Blue 85%</div>

<div class="_background:blue-90">Blue 90%</div>

<div class="_background:blue-95">Blue 95%</div>

Purple 5%
Purple 10%
Purple 15%
Purple 20%
Purple 25%
Purple 30%
Purple 35%
Purple 40%
Purple 45%
Purple 50%
Purple 55%
Purple 60%
Purple 65%
Purple 70%
Purple 75%
Purple 80%
Purple 85%
Purple 90%
Purple 95%
<div class="_background:purple-05">Purple 5%</div>

<div class="_background:purple-10">Purple 10%</div>

<div class="_background:purple-15">Purple 15%</div>

<div class="_background:purple-20">Purple 20%</div>

<div class="_background:purple-25">Purple 25%</div>

<div class="_background:purple-30">Purple 30%</div>

<div class="_background:purple-35">Purple 35%</div>

<div class="_background:purple-40">Purple 40%</div>

<div class="_background:purple-45">Purple 45%</div>

<div class="_background:purple-50">Purple 50%</div>

<div class="_background:purple-55">Purple 55%</div>

<div class="_background:purple-60">Purple 60%</div>

<div class="_background:purple-65">Purple 65%</div>

<div class="_background:purple-70">Purple 70%</div>

<div class="_background:purple-75">Purple 75%</div>

<div class="_background:purple-80">Purple 80%</div>

<div class="_background:purple-85">Purple 85%</div>

<div class="_background:purple-90">Purple 90%</div>

<div class="_background:purple-95">Purple 95%</div>

Pink 5%
Pink 10%
Pink 15%
Pink 20%
Pink 25%
Pink 30%
Pink 35%
Pink 40%
Pink 45%
Pink 50%
Pink 55%
Pink 60%
Pink 65%
Pink 70%
Pink 75%
Pink 80%
Pink 85%
Pink 90%
Pink 95%
<div class="_background:pink-05">Pink 5%</div>

<div class="_background:pink-10">Pink 10%</div>

<div class="_background:pink-15">Pink 15%</div>

<div class="_background:pink-20">Pink 20%</div>

<div class="_background:pink-25">Pink 25%</div>

<div class="_background:pink-30">Pink 30%</div>

<div class="_background:pink-35">Pink 35%</div>

<div class="_background:pink-40">Pink 40%</div>

<div class="_background:pink-45">Pink 45%</div>

<div class="_background:pink-50">Pink 50%</div>

<div class="_background:pink-55">Pink 55%</div>

<div class="_background:pink-60">Pink 60%</div>

<div class="_background:pink-65">Pink 65%</div>

<div class="_background:pink-70">Pink 70%</div>

<div class="_background:pink-75">Pink 75%</div>

<div class="_background:pink-80">Pink 80%</div>

<div class="_background:pink-85">Pink 85%</div>

<div class="_background:pink-90">Pink 90%</div>

<div class="_background:pink-95">Pink 95%</div>

You can also add state text colors using text-specific helper classes:

Red

Orange

Yellow

Green

Teal

Blue

Purple

Pink

<p class="_color:red">Red</p>

<p class="_color:orange">Orange</p>

<p class="_color:yellow">Yellow</p>

<p class="_color:green">Green</p>

<p class="_color:teal">Teal</p>

<p class="_color:blue">Blue</p>

<p class="_color:purple">Purple</p>

<p class="_color:pink">Pink</p>

Red 5%
Red 10%
Red 15%
Red 20%
Red 25%
Red 30%
Red 35%
Red 40%
Red 45%
Red 50%
Red 55%
Red 60%
Red 65%
Red 70%
Red 75%
Red 80%
Red 85%
Red 90%
Red 95%
<div class="_color:red-05">Red 5%</div>

<div class="_color:red-10">Red 10%</div>

<div class="_color:red-15">Red 15%</div>

<div class="_color:red-20">Red 20%</div>

<div class="_color:red-25">Red 25%</div>

<div class="_color:red-30">Red 30%</div>

<div class="_color:red-35">Red 35%</div>

<div class="_color:red-40">Red 40%</div>

<div class="_color:red-45">Red 45%</div>

<div class="_color:red-50">Red 50%</div>

<div class="_color:red-55">Red 55%</div>

<div class="_color:red-60">Red 60%</div>

<div class="_color:red-65">Red 65%</div>

<div class="_color:red-70">Red 70%</div>

<div class="_color:red-75">Red 75%</div>

<div class="_color:red-80">Red 80%</div>

<div class="_color:red-85">Red 85%</div>

<div class="_color:red-90">Red 90%</div>

<div class="_color:red-95">Red 95%</div>

Orange 5%
Orange 10%
Orange 15%
Orange 20%
Orange 25%
Orange 30%
Orange 35%
Orange 40%
Orange 45%
Orange 50%
Orange 55%
Orange 60%
Orange 65%
Orange 70%
Orange 75%
Orange 80%
Orange 85%
Orange 90%
Orange 95%
<div class="_color:orange-05">Orange 5%</div>

<div class="_color:orange-10">Orange 10%</div>

<div class="_color:orange-15">Orange 15%</div>

<div class="_color:orange-20">Orange 20%</div>

<div class="_color:orange-25">Orange 25%</div>

<div class="_color:orange-30">Orange 30%</div>

<div class="_color:orange-35">Orange 35%</div>

<div class="_color:orange-40">Orange 40%</div>

<div class="_color:orange-45">Orange 45%</div>

<div class="_color:orange-50">Orange 50%</div>

<div class="_color:orange-55">Orange 55%</div>

<div class="_color:orange-60">Orange 60%</div>

<div class="_color:orange-65">Orange 65%</div>

<div class="_color:orange-70">Orange 70%</div>

<div class="_color:orange-75">Orange 75%</div>

<div class="_color:orange-80">Orange 80%</div>

<div class="_color:orange-85">Orange 85%</div>

<div class="_color:orange-90">Orange 90%</div>

<div class="_color:orange-95">Orange 95%</div>

Yellow 5%
Yellow 10%
Yellow 15%
Yellow 20%
Yellow 25%
Yellow 30%
Yellow 35%
Yellow 40%
Yellow 45%
Yellow 50%
Yellow 55%
Yellow 60%
Yellow 65%
Yellow 70%
Yellow 75%
Yellow 80%
Yellow 85%
Yellow 90%
Yellow 95%
<div class="_color:yellow-05">Yellow 5%</div>

<div class="_color:yellow-10">Yellow 10%</div>

<div class="_color:yellow-15">Yellow 15%</div>

<div class="_color:yellow-20">Yellow 20%</div>

<div class="_color:yellow-25">Yellow 25%</div>

<div class="_color:yellow-30">Yellow 30%</div>

<div class="_color:yellow-35">Yellow 35%</div>

<div class="_color:yellow-40">Yellow 40%</div>

<div class="_color:yellow-45">Yellow 45%</div>

<div class="_color:yellow-50">Yellow 50%</div>

<div class="_color:yellow-55">Yellow 55%</div>

<div class="_color:yellow-60">Yellow 60%</div>

<div class="_color:yellow-65">Yellow 65%</div>

<div class="_color:yellow-70">Yellow 70%</div>

<div class="_color:yellow-75">Yellow 75%</div>

<div class="_color:yellow-80">Yellow 80%</div>

<div class="_color:yellow-85">Yellow 85%</div>

<div class="_color:yellow-90">Yellow 90%</div>

<div class="_color:yellow-95">Yellow 95%</div>

Green 5%
Green 10%
Green 15%
Green 20%
Green 25%
Green 30%
Green 35%
Green 40%
Green 45%
Green 50%
Green 55%
Green 60%
Green 65%
Green 70%
Green 75%
Green 80%
Green 85%
Green 90%
Green 95%
<div class="_color:green-05">Green 5%</div>

<div class="_color:green-10">Green 10%</div>

<div class="_color:green-15">Green 15%</div>

<div class="_color:green-20">Green 20%</div>

<div class="_color:green-25">Green 25%</div>

<div class="_color:green-30">Green 30%</div>

<div class="_color:green-35">Green 35%</div>

<div class="_color:green-40">Green 40%</div>

<div class="_color:green-45">Green 45%</div>

<div class="_color:green-50">Green 50%</div>

<div class="_color:green-55">Green 55%</div>

<div class="_color:green-60">Green 60%</div>

<div class="_color:green-65">Green 65%</div>

<div class="_color:green-70">Green 70%</div>

<div class="_color:green-75">Green 75%</div>

<div class="_color:green-80">Green 80%</div>

<div class="_color:green-85">Green 85%</div>

<div class="_color:green-90">Green 90%</div>

<div class="_color:green-95">Green 95%</div>

Teal 5%
Teal 10%
Teal 15%
Teal 20%
Teal 25%
Teal 30%
Teal 35%
Teal 40%
Teal 45%
Teal 50%
Teal 55%
Teal 60%
Teal 65%
Teal 70%
Teal 75%
Teal 80%
Teal 85%
Teal 90%
Teal 95%
<div class="_color:teal-05">Teal 5%</div>

<div class="_color:teal-10">Teal 10%</div>

<div class="_color:teal-15">Teal 15%</div>

<div class="_color:teal-20">Teal 20%</div>

<div class="_color:teal-25">Teal 25%</div>

<div class="_color:teal-30">Teal 30%</div>

<div class="_color:teal-35">Teal 35%</div>

<div class="_color:teal-40">Teal 40%</div>

<div class="_color:teal-45">Teal 45%</div>

<div class="_color:teal-50">Teal 50%</div>

<div class="_color:teal-55">Teal 55%</div>

<div class="_color:teal-60">Teal 60%</div>

<div class="_color:teal-65">Teal 65%</div>

<div class="_color:teal-70">Teal 70%</div>

<div class="_color:teal-75">Teal 75%</div>

<div class="_color:teal-80">Teal 80%</div>

<div class="_color:teal-85">Teal 85%</div>

<div class="_color:teal-90">Teal 90%</div>

<div class="_color:teal-95">Teal 95%</div>

Blue 5%
Blue 10%
Blue 15%
Blue 20%
Blue 25%
Blue 30%
Blue 35%
Blue 40%
Blue 45%
Blue 50%
Blue 55%
Blue 60%
Blue 65%
Blue 70%
Blue 75%
Blue 80%
Blue 85%
Blue 90%
Blue 95%
<div class="_color:blue-05">Blue 5%</div>

<div class="_color:blue-10">Blue 10%</div>

<div class="_color:blue-15">Blue 15%</div>

<div class="_color:blue-20">Blue 20%</div>

<div class="_color:blue-25">Blue 25%</div>

<div class="_color:blue-30">Blue 30%</div>

<div class="_color:blue-35">Blue 35%</div>

<div class="_color:blue-40">Blue 40%</div>

<div class="_color:blue-45">Blue 45%</div>

<div class="_color:blue-50">Blue 50%</div>

<div class="_color:blue-55">Blue 55%</div>

<div class="_color:blue-60">Blue 60%</div>

<div class="_color:blue-65">Blue 65%</div>

<div class="_color:blue-70">Blue 70%</div>

<div class="_color:blue-75">Blue 75%</div>

<div class="_color:blue-80">Blue 80%</div>

<div class="_color:blue-85">Blue 85%</div>

<div class="_color:blue-90">Blue 90%</div>

<div class="_color:blue-95">Blue 95%</div>

Purple 5%
Purple 10%
Purple 15%
Purple 20%
Purple 25%
Purple 30%
Purple 35%
Purple 40%
Purple 45%
Purple 50%
Purple 55%
Purple 60%
Purple 65%
Purple 70%
Purple 75%
Purple 80%
Purple 85%
Purple 90%
Purple 95%
<div class="_color:purple-05">Purple 5%</div>

<div class="_color:purple-10">Purple 10%</div>

<div class="_color:purple-15">Purple 15%</div>

<div class="_color:purple-20">Purple 20%</div>

<div class="_color:purple-25">Purple 25%</div>

<div class="_color:purple-30">Purple 30%</div>

<div class="_color:purple-35">Purple 35%</div>

<div class="_color:purple-40">Purple 40%</div>

<div class="_color:purple-45">Purple 45%</div>

<div class="_color:purple-50">Purple 50%</div>

<div class="_color:purple-55">Purple 55%</div>

<div class="_color:purple-60">Purple 60%</div>

<div class="_color:purple-65">Purple 65%</div>

<div class="_color:purple-70">Purple 70%</div>

<div class="_color:purple-75">Purple 75%</div>

<div class="_color:purple-80">Purple 80%</div>

<div class="_color:purple-85">Purple 85%</div>

<div class="_color:purple-90">Purple 90%</div>

<div class="_color:purple-95">Purple 95%</div>

Pink 5%
Pink 10%
Pink 15%
Pink 20%
Pink 25%
Pink 30%
Pink 35%
Pink 40%
Pink 45%
Pink 50%
Pink 55%
Pink 60%
Pink 65%
Pink 70%
Pink 75%
Pink 80%
Pink 85%
Pink 90%
Pink 95%
<div class="_color:pink-05">Pink 5%</div>

<div class="_color:pink-10">Pink 10%</div>

<div class="_color:pink-15">Pink 15%</div>

<div class="_color:pink-20">Pink 20%</div>

<div class="_color:pink-25">Pink 25%</div>

<div class="_color:pink-30">Pink 30%</div>

<div class="_color:pink-35">Pink 35%</div>

<div class="_color:pink-40">Pink 40%</div>

<div class="_color:pink-45">Pink 45%</div>

<div class="_color:pink-50">Pink 50%</div>

<div class="_color:pink-55">Pink 55%</div>

<div class="_color:pink-60">Pink 60%</div>

<div class="_color:pink-65">Pink 65%</div>

<div class="_color:pink-70">Pink 70%</div>

<div class="_color:pink-75">Pink 75%</div>

<div class="_color:pink-80">Pink 80%</div>

<div class="_color:pink-85">Pink 85%</div>

<div class="_color:pink-90">Pink 90%</div>

<div class="_color:pink-95">Pink 95%</div>

Neutral

Neutral colors are used for text, background and border colors. You can use different neutral colors to display your content:

White
Gray
Black
Transparent
Gray 5%
Gray 10%
Gray 15%
Gray 20%
Gray 25%
Gray 30%
Gray 35%
Gray 40%
Gray 45%
Gray 50%
Gray 55%
Gray 60%
Gray 65%
Gray 70%
Gray 75%
Gray 80%
Gray 85%
Gray 90%
Gray 95%
<div class="_background:white">White</div>

<div class="_background:gray">Gray</div>

<div class="_background:black">Black</div>

<div class="_background:transparent">Transparent</div>

<div class="_background:gray-05">Gray 5%</div>

<div class="_background:gray-10">Gray 10%</div>

<div class="_background:gray-15">Gray 15%</div>

<div class="_background:gray-20">Gray 20%</div>

<div class="_background:gray-25">Gray 25%</div>

<div class="_background:gray-30">Gray 30%</div>

<div class="_background:gray-35">Gray 35%</div>

<div class="_background:gray-40">Gray 40%</div>

<div class="_background:gray-45">Gray 45%</div>

<div class="_background:gray-50">Gray 50%</div>

<div class="_background:gray-55">Gray 55%</div>

<div class="_background:gray-60">Gray 60%</div>

<div class="_background:gray-65">Gray 65%</div>

<div class="_background:gray-70">Gray 70%</div>

<div class="_background:gray-75">Gray 75%</div>

<div class="_background:gray-80">Gray 80%</div>

<div class="_background:gray-85">Gray 85%</div>

<div class="_background:gray-90">Gray 90%</div>

<div class="_background:gray-95">Gray 95%</div>

You can also add neutral text colors using text-specific helper classes:

White
Gray
Black
Transparent
Gray 5%
Gray 10%
Gray 15%
Gray 20%
Gray 25%
Gray 30%
Gray 35%
Gray 40%
Gray 45%
Gray 50%
Gray 55%
Gray 60%
Gray 65%
Gray 70%
Gray 75%
Gray 80%
Gray 85%
Gray 90%
Gray 95%
<div class="_color:white">White</div>

<div class="_color:gray">Gray</div>

<div class="_color:black">Black</div>

<div class="_color:transparent">Transparent</div>

<div class="_color:gray-05">Gray 5%</div>

<div class="_color:gray-10">Gray 10%</div>

<div class="_color:gray-15">Gray 15%</div>

<div class="_color:gray-20">Gray 20%</div>

<div class="_color:gray-25">Gray 25%</div>

<div class="_color:gray-30">Gray 30%</div>

<div class="_color:gray-35">Gray 35%</div>

<div class="_color:gray-40">Gray 40%</div>

<div class="_color:gray-45">Gray 45%</div>

<div class="_color:gray-50">Gray 50%</div>

<div class="_color:gray-55">Gray 55%</div>

<div class="_color:gray-60">Gray 60%</div>

<div class="_color:gray-65">Gray 65%</div>

<div class="_color:gray-70">Gray 70%</div>

<div class="_color:gray-75">Gray 75%</div>

<div class="_color:gray-80">Gray 80%</div>

<div class="_color:gray-85">Gray 85%</div>

<div class="_color:gray-90">Gray 90%</div>

<div class="_color:gray-95">Gray 95%</div>

Social Media

Inkline provides social media colors from most of your favorite sites.

You can use helper classes to add social media color backgrounds:

Facebook
Twitter
Google
Instagram
Dribbble
Behance
Flickr
Linkedin
YouTube
Pinterest
GitHub
Tumblr
Twitch
Envato
Vine
<div class="_background:facebook">Facebook</div>

<div class="_background:twitter">Twitter</div>

<div class="_background:google">Google</div>

<div class="_background:instagram">Instagram</div>

<div class="_background:dribbble">Dribbble</div>

<div class="_background:behance">Behance</div>

<div class="_background:flickr">Flickr</div>

<div class="_background:linkedin">Linkedin</div>

<div class="_background:youtube">YouTube</div>

<div class="_background:pinterest">Pinterest</div>

<div class="_background:github">GitHub</div>

<div class="_background:tumblr">Tumblr</div>

<div class="_background:twitch">Twitch</div>

<div class="_background:envato">Envato</div>

<div class="_background:vine">Vine</div>

You can also add social media text colors using text-specific helper classes:

Facebook

Twitter

Google

Instagram

Dribbble

Behance

Flickr

Linkedin

YouTube

Pinterest

GitHub

Tumblr

Twitch

Envato

Vine

<p class="_color:facebook">Facebook</p>

<p class="_color:twitter">Twitter</p>

<p class="_color:google">Google</p>

<p class="_color:instagram">Instagram</p>

<p class="_color:dribbble">Dribbble</p>

<p class="_color:behance">Behance</p>

<p class="_color:flickr">Flickr</p>

<p class="_color:linkedin">Linkedin</p>

<p class="_color:youtube">YouTube</p>

<p class="_color:pinterest">Pinterest</p>

<p class="_color:github">GitHub</p>

<p class="_color:tumblr">Tumblr</p>

<p class="_color:twitch">Twitch</p>

<p class="_color:envato">Envato</p>

<p class="_color:vine">Vine</p>