Colors

Carefully curated selection of colors that have been formally endorsed or sanctioned for use in specific contexts such as branding and design purposes. We possess a unique and comprehensive collection of colors for visually expressing our brand. More info at HPU Branding Guides

How It Works

  • The HPU approved colors arranged in order and use ordinal adjectives (*-1st, *-2nd, *-3rd, etc.) to easily follow the color hierarchy.
  • To apply colors on any element, the base format will be .hpu-{type}-{color}:
    • Where the type is one of:
      • bg - for background colors
      • border - for borders
      • overlay - for semi-transparent colored background
      • text - for text colors
    • Where the color is one of the ordinal adjectives mentioned above, or name of the colors that are not included in the hierarchy, such as:
      • black
      • white
      • dark-gray
      • gray
      • success
      • warning
  • For other HPUCSS modules, the same format generally applies, with variations depending on the specific module and module type. For example:
    • For Cards: .hpu-card .card-bg-{color}
    • For Buttons: .hpu-btn .btn-bg-{color} for solid buttons or .btn-outline-{color} for outlined buttons
    • For Navbars: .hpu-nav .nav-bg-{color}
  • Please refer to the specific module for guidance on applying colors to your elements.

SCSS Color Variables

HPU Color Palette is defined under _variables.scss, and is used as an array to loop with the different colors.

scss/components/_variables.scss 


$hpu-colors : (
    'default' : #405c6e,   // default
    '1st' : #007298,   // teal
    '2nd' : #71B1C8,   // light teal
    '3rd' : #4f758b,   // blue gray
    '4th' : #397dc9,   // deep ocean blue
    '5th' : #002856,   // blue
    '6th' : #ffc72c,   // warm sun (yellow)
    '7th' : #dbe442,   // new leaf green
    '8th' : #f7941d,   // sunset
    'black' : #000000,   // black
    'dark-gray' : #333333,   // dark gray
    'gray' : #a3a5a6,   // gray
    'success' : #71bf43,   // green
    'warning' : #da3228,   // red
    'white' : #ffffff,   // white
);

Background Colors

Enhance visual design and improve readability or emphasis on web pages. Apply background colors using .hpu-bg-{colors} classes.

NOTE: depending on the background color selected, the text color has already been set for contrast. If different text color is desired, then .hpu-text-{color} must be used.

The Default Color

Primary Colors

Teal (On a webpage, this color should be 75% dominant if color variety is desired).

Light Teal

Black

White (with black border for contrast)

Secondary Colors

Blue Gray

Ocean Blue

Dark Blue

Warm Sun

Leaf Green

Sunset

Dark Gray

Gray

Success

Warning

HTML 


<!-- Default Color: -->
<div class="hpu-bg-default hpu-p-2 hpu-mb-1">The Default Color</div>

<!-- Primary Colors: -->
<div class="hpu-bg-1st hpu-p-2 hpu-mb-1">Teal</div>
<div class="hpu-bg-2nd hpu-p-2 hpu-mb-1">Light Teal</div>
<div class="hpu-bg-black hpu-p-2 hpu-mb-1">Black</div>
<div class="hpu-bg-white hpu-p-2 hpu-mb-1">White (with black border for contrast)</div>

<!-- Secondary Colors: -->
<div class="hpu-bg-3rd hpu-p-2 hpu-mb-1">Blue Gray</div>
<div class="hpu-bg-4th hpu-p-2 hpu-mb-1">Ocean Blue</div>
<div class="hpu-bg-5th hpu-p-2 hpu-mb-1">Dark Blue</div>
<div class="hpu-bg-6th hpu-p-2 hpu-mb-1">Warm Sun</div>
<div class="hpu-bg-7th hpu-p-2 hpu-mb-1">Leaf Green</div>
<div class="hpu-bg-8th hpu-p-2 hpu-mb-1">Sunset</div>
<div class="hpu-bg-dark-gray hpu-p-2 hpu-mb-1">Dark Gray</div>
<div class="hpu-bg-gray hpu-p-2 hpu-mb-1">Gray</div>
<div class="hpu-bg-success hpu-p-2 hpu-mb-1">Success</div>
<div class="hpu-bg-warning hpu-p-2 hpu-mb-1">Warning</div>

Border Colors

Apply border colors using .hpu-border-{colors} classes.

Default

Primary Colors

Teal

Light Teal

Black

White (with black background for contrast)

Secondary Colors

Blue Gray

Ocean Blue

Dark Blue

Warm Sun

Leaf Green

Sunset

Dark Gray

Gray

Success

Warning

HTML 


<!-- Default Color: -->
<div class="hpu-border-default hpu-p-2 hpu-mb-1">Default</div>

<!-- Primary Colors: -->
<div class="hpu-border-1st hpu-p-2 hpu-mb-1">Teal</div>
<div class="hpu-border-2nd hpu-p-2 hpu-mb-1">Light Teal</div>
<div class="hpu-border-black hpu-p-2 hpu-mb-1">Black</div>
<div class="hpu-border-white hpu-p-2 hpu-mb-1">White (with black background for contrast)</div>

<!-- Secondary Colors: -->
<div class="hpu-border-3rd hpu-p-2 hpu-mb-1">Blue Gray</div>
<div class="hpu-border-4th hpu-p-2 hpu-mb-1">Ocean Blue</div>
<div class="hpu-border-5th hpu-p-2 hpu-mb-1">Dark Blue</div>
<div class="hpu-border-6th hpu-p-2 hpu-mb-1">Warm Sun</div>
<div class="hpu-border-7th hpu-p-2 hpu-mb-1">Leaf Green</div>
<div class="hpu-border-8th hpu-p-2 hpu-mb-1">Sunset</div>
<div class="hpu-border-dark-gray hpu-p-2 hpu-mb-1">Dark Gray</div>
<div class="hpu-border-gray hpu-p-2 hpu-mb-1">Gray</div>
<div class="hpu-border-success hpu-p-2 hpu-mb-1">Success</div>
<div class="hpu-border-warning hpu-p-2 hpu-mb-1">Warning</div>

Overlay Colors

Semi-transparent colors on top of underlying objects, such as background images. Great for landing page background or as text overlay: .hpu-overlay-{color}.

Default

Primary Colors

Teal

Light Teal

Black

White

Secondary Colors

Blue Gray

Ocean Blue

Dark Blue

Warm Sun

Leaf Green

Sunset

Dark Gray

Gray

Success

Warning

HTML 


<!-- Default Color: -->
<div style="background: url('...') center/cover no-repeat;">
    <div class="hpu-overlay-default hpu-px-2 hpu-py-3">
        <p><strong>Default</strong></p>
    </div>
</div>

<!-- Primary Colors: -->
<div class="hpu-row">
    <div class="col-lg-3 col-md-6">
        <div style="background: url('...') center/cover no-repeat;">
            <div class="hpu-overlay-1st hpu-px-2 hpu-py-3">
                <p><strong>Teal</strong></p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div style="background: url('...') center/cover no-repeat;">
            <div class="hpu-overlay-2nd hpu-px-2 hpu-py-3">
                <p><strong>Light Teal</strong></p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div style="background: url('...') center/cover no-repeat;">
            <div class="hpu-overlay-black hpu-px-2 hpu-py-3">
                <p><strong>Black</strong></p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div style="background: url('...') center/cover no-repeat;">
            <div class="hpu-overlay-white hpu-px-2 hpu-py-3">
                <p><strong>White</strong></p>
            </div>
        </div>
    </div>
</div>

<!-- Secondary Colors: -->
<div class="hpu-row">
    <div class="col-lg-3 col-md-6">
        <div style="background: url('...') center/cover no-repeat;">
            <div class="hpu-overlay-3rd hpu-px-2 hpu-py-3">
                <p><strong>Blue Gray</strong></p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div style="background: url('...') center/cover no-repeat;">
            <div class="hpu-overlay-4th hpu-px-2 hpu-py-3">
                <p><strong>Ocean Blue</strong></p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div style="background: url('...') center/cover no-repeat;">
            <div class="hpu-overlay-5th hpu-px-2 hpu-py-3">
                <p><strong>Dark Blue</strong></p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div style="background: url('...') center/cover no-repeat;">
            <div class="hpu-overlay-6th hpu-px-2 hpu-py-3">
                <p><strong>Warm Sun</strong></p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div style="background: url('...') center/cover no-repeat;">
            <div class="hpu-overlay-7th hpu-px-2 hpu-py-3">
                <p><strong>Leaf Green</strong></p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div style="background: url('...') center/cover no-repeat;">
            <div class="hpu-overlay-8th hpu-px-2 hpu-py-3">
                <p><strong>Sunset</strong></p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div style="background: url('...') center/cover no-repeat;">
            <div class="hpu-overlay-dark-gray hpu-px-2 hpu-py-3">
                <p><strong>Dark Gray</strong></p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div style="background: url('...') center/cover no-repeat;">
            <div class="hpu-overlay-gray hpu-px-2 hpu-py-3">
                <p><strong>Gray</strong></p>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div style="background: url('...') center/cover no-repeat;">
            <div class="hpu-overlay-success hpu-px-2 hpu-py-3">
                <p><strong>Success</strong></p>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div style="background: url('...') center/cover no-repeat;">
            <div class="hpu-overlay-warning hpu-px-2 hpu-py-3">
                <p><strong>Warning</strong></p>
            </div>
        </div>
    </div>
</div>

Text Colors

Visual representation of textual content: .hpu-text-{color}. The default text color is #405c6e.

Default Color

Primary Colors:

Teal

Light Teal

Black

White

Secondary Colors:

Blue Gray

Ocean Blue

Dark Blue

Warm Sun

Leaf Green

Sunset

Dark Gray

Gray

Success

Warning

HTML 


<!-- Primary Colors: -->
<p class="hpu-text-1st">Teal</p>
<p class="hpu-text-2nd">Light Teal</p>
<p class="hpu-text-black">Black</p>
<p class="hpu-text-white">White</p>

<!-- Secondary Colors: -->
<p class="hpu-text-3rd">Blue Gray</p>
<p class="hpu-text-4th">Ocean Blue</p>
<p class="hpu-text-5th">Dark Blue</p>
<p class="hpu-text-6th">Warm Sun</p>
<p class="hpu-text-7th">Leaf Green</p>
<p class="hpu-text-8th">Sunset</p>
<p class="hpu-text-dark-gray">Dark Gray</p>
<p class="hpu-text-gray">Gray</p>
<p class="hpu-text-success">Success</p>
<p class="hpu-text-warning">Warning</p>