Color Utilities

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

Brand

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

Brand Color Background
Primary

#178bb2

Secondary

#5d65b9

Light

#e9ecef

Dark

#212529

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

Brand Color Text
  • Primary
  • Secondary
  • Light
  • Dark

State

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

State Color Background
Info

#62bec1

Success

#5fb072

Warning

#f1ac53

Danger

#f25f5c

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

State Color Text
  • Info
  • Success
  • Warning
  • Danger

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:

Basic Color Background
Red

#f25f5c

Orange

#f1ac53

Yellow

#ffe066

Green

#5fb072

Teal

#62bec1

Blue

#178bb2

Purple

#5d65b9

Pink

#ff6f80

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

Basic Color Text
  • Red
  • Orange
  • Yellow
  • Green
  • Teal
  • Blue
  • Purple
  • Pink

Neutral

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

Neutral Color Background
White

#ffffff

10% Gray

#f8f9fa

20% Gray

#e9ecef

30% Gray

#dee2e6

40% Gray

#ced4da

50% Gray

#adb5bd

60% Gray

#868e96

70% Gray

#495057

80% Gray

#343a40

90% Gray

#212529

Black

#000000

Transparent

transparent

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

Neutral Color Text
  • White
  • 10% Gray
  • 20% Gray
  • 30% Gray
  • 40% Gray
  • 50% Gray
  • 60% Gray
  • 70% Gray
  • 80% Gray
  • 90% Gray
  • Black

Social Media

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

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

Social Media Color Background
Facebook

#3b5998

Twitter

#1da1f2

Google

#dd4b39

Instagram

#fd1d1d

Dribbble

#ea4c89

Behance

#1769ff

Flickr

#ff0084

LinkedIn

#0077b5

YouTube

#b31217

Pinterest

#bd081c

Github

#333333

Tumblr

#35465c

Twitch

#6441a5

Envato

#82b541

Vine

#00bf8f

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

Social Media Color Text
  • Facebook
  • Twitter
  • Google Plus
  • Instagram
  • Dribbble
  • Flickr
  • LinkedIn
  • YouTube
  • Pinterest
  • GitHub
  • Tumblr
  • Twitch
  • Envato
  • Vine