Colors

These colors are based on the colors defined in the CoreLogic Brand Standards. For client branded applications, colors should be neutral using CoreLogic grays and the client can add a couple of their own brand colors.

Primary Colors

The primary colors are warm grays, red, black and white.

Gray

Gray is used as a background color and for UI elements such as navigation, dividers, buttons and other controls.

$dark-gray
#38424a
$medium-gray
#ededed
$divider-gray
#d9d9d9
$button-gray
#eeeeee
$drawer-gray
#f9f9fb
$background-gray
#f8f9f9


Black and White

Black is used for text. White is used as a background color.

$black
#222222
$white
#FFFFFF


Red

Since the CoreLogic logo is red, reds should be used sparingly. Red is used primarily for errors and branded actions. Try this fancy salmon color on for size where you might use red.

$red
#e03c31
$salmon
#ce534b

Secondary Colors

The secondary colors are used as highlight colors.

Blue

Blue is used for buttons, links and showing an object that is in focus or selected.

$blue
#006699
$bright-blue
#0088cc

Green

Green is used for icons and confirming a successful action in a confirmation message.

$green
#539536

Orange

Orange is used for icons.

$orange
#ff6633

Yellow

Yellow is the true color of the sun.

$yellow
#e7ab08

Text Color

You can change the color of text by applying color classes to an element. For example: apply make-green to use green. Valid colors are black, bright-blue, green, yellow, red, salmon, and orange.

This is salmon colored text.

Background Color

You can change the background color by applying color classes to an element. For example: apply bg-green to use green. Valid colors are black, blue, bright-blue, green, yellow, red, salmon, orange, dark-gray, divider-gray, medium-gray, button-gray, background-gray, drawer-gray, and white.

It's not easy being green.

Heatmap Colors

REQUIRES JAVASCRIPT
This element requires both jQuery and corelogic-ui.min.js to function properly.

If you would like to only load the heatmap, make sure to load @corelogic/clui/dist/js/components/heatmap.js.

Call window.clui.heatMapInit() to initialize the heatmap colors.

To apply a heatmap color pallet to an element, add the class heatmap and then add a data-heatmap property with the percentage of the element to indicate the temperature. If you want to reverse the colors use the rev-heatmap class.

Heatmap

100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
0%
Null

Reverse Heatmap

100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
0%
Null
<div style="color: #fff">
  <h2>Heatmap</h2>
  <div class="heatmap" data-heatmap="100">100%</div>
  <div class="heatmap" data-heatmap="90">90%</div>
  <div class="heatmap" data-heatmap="80">80%</div>
  <div class="heatmap" data-heatmap="70">70%</div>
  <div class="heatmap" data-heatmap="60">60%</div>
  <div class="heatmap" data-heatmap="50">50%</div>
  <div class="heatmap" data-heatmap="40">40%</div>
  <div class="heatmap" data-heatmap="30">30%</div>
  <div class="heatmap" data-heatmap="20">20%</div>
  <div class="heatmap" data-heatmap="10">10%</div>
  <div class="heatmap" data-heatmap="0">0%</div>
  <div class="heatmap">Null</div>

  <br>

  <h2>Reverse Heatmap</h2>
  <div class="rev-heatmap" data-heatmap="100">100%</div>
  <div class="rev-heatmap" data-heatmap="90">90%</div>
  <div class="rev-heatmap" data-heatmap="80">80%</div>
  <div class="rev-heatmap" data-heatmap="70">70%</div>
  <div class="rev-heatmap" data-heatmap="60">60%</div>
  <div class="rev-heatmap" data-heatmap="50">50%</div>
  <div class="rev-heatmap" data-heatmap="40">40%</div>
  <div class="rev-heatmap" data-heatmap="30">30%</div>
  <div class="rev-heatmap" data-heatmap="20">20%</div>
  <div class="rev-heatmap" data-heatmap="10">10%</div>
  <div class="rev-heatmap" data-heatmap="0">0%</div>
  <div class="heatmap">Null</div>
</div>
<script>
window.clui.heatMapInit();
</script>