PatternLab (0.1.259)

# Color Palette

TIP

See Color Helpers for Color Helper Classes and Demos.

# Neutral Colors

The Neutral Colors are the same in LabXpert and Pharma4u.

$dark-transparent: rgba(0,0,0,.8);
$black: #000;
$dark-gray: #555;
$gray: #aaa;
$light-gray: #eee;
$lightest-gray: #f5f5f5;
$white: #fff;
1
2
3
4
5
6
7
$dark-transparent
$black
$dark-gray
$gray
$light-gray
$lightest-gray
$white
hide code 
<div class="m-t-m h-flex h-space-between">
    <div class="p-m h-box-shadow h-color-white" style="background-color: rgba(0,0,0,.8)">$dark-transparent</div>
    <div class="p-m h-box-shadow h-color-white" style="background-color: rgb(0,0,0)">$black</div>
    <div class="p-m h-box-shadow" style="background-color: #555">$dark-gray</div>
    <div class="p-m h-box-shadow" style="background-color: #aaa">$gray</div>
    <div class="p-m h-box-shadow" style="background-color: #eee">$light-gray</div>
    <div class="p-m h-box-shadow" style="background-color: #f5f5f5">$lightest-gray</div>
    <div class="p-m h-box-shadow h-bg-color-white">$white</div>
</div>

# Contextual Colors

$bg-color
$primary-color
$primary-color-dark
$primary-color-hover
$primary-color-light
$primary-color-lighter
$secondary-color
$secondary-color-hover
$secondary-color-light
$secondary-color-lighter
$font-color
1
2
3
4
5
6
7
8
9
10
11

# State Colors

$error-color
$error-color--light
$error-color--dark
$error-color-hover
$unknown-color
$warning-color
$warning-color--light
$warning-color--dark
$warning-color-hover
$success-color
$success-color--light
$success-color--dark
$success-color-hover
$notice-color
$notice-color--lightest
$notice-color--light
$notice-color--dark
$notice-color-hover
$disabled-color
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Product / Area Specific Colors

$pta-color
$phip-color
$student-color
$medichheck-color
$forum-color
$labor-color
$webinar-color
$taxikon-color
hide code 
<div class="h-flex h-space-between">
    <div class="h-bg-color-pta p-m h-color-white">$pta-color
</div>
    <div class="h-bg-color-phip p-m h-color-white">$phip-color</div>
    <div class="h-bg-color-student p-m h-color-white">$student-color</div>
    <div class="h-bg-color-medicheck p-m h-color-white">$medichheck-color</div>
    <div class="h-bg-color-forum p-m h-color-white">$forum-color</div>
    <div class="h-bg-color-labor p-m h-color-white">$labor-color</div>
    <div class="h-bg-color-webinar p-m h-color-white">$webinar-color</div>
    <div class="h-bg-color-taxikon p-m h-color-white">$taxikon-color</div>
</div>

← Color Helper Classes →