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
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%
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%
Light 25%
Light 30%
Light 35%
Light 40%
Light 45%
Light 50%
Light 55%
Light 60%
Light 65%
Light 70%
Light 75%
Dark 25%
Dark 30%
Dark 35%
Dark 40%
Dark 45%
Dark 50%
Dark 55%
Dark 60%
Dark 65%
Dark 70%
Dark 75%
You can also add brand text colors using text-specific helper classes:
Primary
Secondary
Light
Dark
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%
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%
Light 25%
Light 30%
Light 35%
Light 40%
Light 45%
Light 50%
Light 55%
Light 60%
Light 65%
Light 70%
Light 75%
Dark 25%
Dark 30%
Dark 35%
Dark 40%
Dark 45%
Dark 50%
Dark 55%
Dark 60%
Dark 65%
Dark 70%
Dark 75%
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
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%
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%
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%
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%
You can also add state text colors using text-specific helper classes:
Info
Success
Warning
Danger
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%
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%
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%
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%
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
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%
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%
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%
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%
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%
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%
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%
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%
You can also add state text colors using text-specific helper classes:
Red
Orange
Yellow
Green
Teal
Blue
Purple
Pink
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%
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%
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%
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%
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%
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%
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%
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%
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%
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%
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
You can also add social media text colors using text-specific helper classes:
Dribbble
Behance
Flickr
YouTube
GitHub
Tumblr
Twitch
Envato
Vine