HSQ Brand colors, 2015

HSQ-brand-colors-2015.markdown

HSQ Brand colors, 2015

Current as of Dec. 29 2014. These colors are going to drive the new healthsparq.com, which will be launched in early 2015.

A Pen by Allan White on CodePen.

License.

index.jade

// Custom color variable names and some Foundation classes
- var colorlist = ["aqua", "amber", "red", "blue", "primary-color", "primary-color-light", "primary-color-dark", "secondary-color", "secondary-color-dark", "secondary-color-light", "yellow", "tertiary-color", "tertiary-color-dark", "tertiary-color-light", "alert-color", "success-color", "success-color-alt", "warning-color", "gray-light", "gray-mid", "gray-dark", "gray-cool-dark", "black-faded", "info-color", "tint-overlay", "body-bg", "body-font-color", "button-font-color", "button-font-color-alt", "text-color", "page-color"]

// Zurb Foundation's list of gray color values
- var graylist = ["white", "ghost", "snow", "vapor", "white-smoke", "silver", "smoke", "gainsboro", "iron", "base", "aluminum", "jumbo", "monsoon", "steel", "charcoal", "tuatara", "oil", "jet", "black"]

doctype html
html
  head
    title HealthSparq Brand Colors 2015
  body
    .panel
      h2 Colors 
        small Base values and variations
      ul.large-block-grid-8.medium-block-grid-5.small-block-grid-3
        each item, n in colorlist
          li
            .swatch(class='color-'+colorlist[n])
              text=colorlist[n]
              br
      hr
      h2 Grays 
        small Foundation 5.4 gray variables
      ul.large-block-grid-8.medium-block-grid-5.small-block-grid-3
        each item, n in graylist
          li
            .swatch(class='color-'+graylist[n])
              text=graylist[n]
              br

style.scss

$aqua: hsl(179, 60%, 40%);
$amber: hsl(29, 85%, 60%);
$red: hsl(354, 73%, 61%); // cool red
$blue: hsl(190, 75%, 59%);

$primary-color: $blue; // blue-green
$primary-color-light: adjust-color($primary-color, $lightness: 20%, $saturation: 50%); //
$primary-color-dark: adjust-color($primary-color, $lightness: -15%, $saturation: -30%); // darker blue
$secondary-color: $amber;//adjust-color($primary-color, $lightness: 25%, $saturation: -5%); //lighter blue
$secondary-color-dark: adjust-color($secondary-color, $lightness: -10%, $saturation: 10%);
$secondary-color-light: adjust-color($secondary-color, $hue: 10%, $lightness: 20%,
$saturation: 20%); //lighter yellow
$yellow: $secondary-color-light;

$tertiary-color: $red;
$tertiary-color-dark: adjust-color($tertiary-color, $lightness: -20%, $saturation: -10%);
$tertiary-color-light: adjust-color($tertiary-color, $lightness: 0%, $saturation: 30%);

$alert-color: $red; // cool red
$success-color: adjust-color($aqua, $hue: -5deg, $lightness: 0%, $saturation: 30%);
$success-color-alt: adjust-color($success-color, $lightness: 20%, $saturation: 50%);
$warning-color: adjust-color($amber, $lightness: -10%, $saturation: 30%); // orangy

$gray-pale: hsl(30, 4%, 92%); //light, slightly tan
  $gray-light: $gray-pale; // just a name, I seem to forget so just a backup =)
$gray-mid: adjust-color($gray-pale, $lightness: -20%, $saturation: 10%);
  $gray-med: $gray-mid;
  $gray-medium: $gray-mid;
$gray-dark: adjust-color($gray-pale, $lightness: -70%, $saturation: 10%);
$gray-cool-dark: hsl(226, 7%, 31%);
$black-faded: hsl(0, 0%, 18%);

$info-color: $gray-mid;
$tint-overlay: rgba(0, 86, 107, 0.4);
// $tint-overlay: rgba(107, 60, 0, 0.4);

$body-bg: $gray-pale;
$body-font-color: $black-faded;

$button-font-color: #fff;             // _settings.scss:326
$button-font-color-alt: #000;
// We use these to control various hover effects.
// $button-function-factor: 5%;

// custom color variables

$trans: rgba(0, 0, 0, 0); // transparent aluminum!
$text-color: $body-font-color; // just as shorter version
$page-color: #fff; // content body
$pad: rem-calc(20);

$color-list: (
  aqua: $aqua,
  amber: $amber,
  red: $red,
  blue: $blue,
  primary-color: $primary-color,
  primary-color-light: $primary-color-light,
  primary-color-dark: $primary-color-dark,
  secondary-color: $secondary-color,
  secondary-color-dark: $secondary-color-dark,
  secondary-color-light: $secondary-color-light,
  yellow: $yellow,
  tertiary-color: $tertiary-color,
  tertiary-color-dark: $tertiary-color-dark,
  tertiary-color-light: $tertiary-color-light,
  alert-color: $alert-color,
  success-color: $success-color,
  success-color-alt: $success-color-alt,
  warning-color: $warning-color,
  gray-light: $gray-light,
  gray-mid: $gray-mid,
  gray-dark: $gray-dark,
  gray-cool-dark: $gray-cool-dark,
  black-faded: $black-faded,
  info-color: $info-color,
  tint-overlay: $tint-overlay,
  body-bg: $body-bg,
  body-font-color: $body-font-color,
  button-font-color: $button-font-color,
  button-font-color-alt: $button-font-color-alt,
  text-color: $text-color,
  page-color: $page-color
);

// Zurb Foundation's list of gray color values - tweaked to be slightly warm
$gray-list: (
  white       : hsl(00, 0%, 100%),
  ghost       : hsl(30, 20%, 98%),
  snow        : hsl(30, 20%, 96%),
  vapor       : hsl(30, 11%, 94%),
  white-smoke : hsl(30, 11%, 92%),
  silver      : hsl(30, 5%, 89%),
  smoke       : hsl(30, 5%, 85%),
  gainsboro   : hsl(30, 5%, 80%),
  iron        : hsl(30, 8%, 75%),
  base        : hsl(30, 8%, 59%),
  aluminum    : hsl(30, 8%, 58%),
  jumbo       : hsl(30, 5%, 51%),
  monsoon     : hsl(30, 5%, 45%),
  steel       : hsl(30, 5%, 37%),
  charcoal    : hsl(30, 5%, 30%),
  tuatara     : hsl(30, 5%, 25%),
  oil         : hsl(30, 5%, 18%),
  jet         : hsl(30, 5%, 12%),
  black       : hsl(00, 0%, 0%)
);

html {
  font: {
    size: 0.9rem;
    weight: bold;
    family: Verdana, sans-serif;
  }
}
.panel{
  background-color: $body-bg;  
}
.swatch {
  /* background-color: #ccc; */
  /* width: 200px; */
  padding: 20px 10px;
  height: 100px;
  color: #fff;
  text-align: center;
  /* line-height: 100px; */
  font: {
    weight: bold;
    family: Verdana, sans-serif;
  }
  position: relative;
}

@each $name, $color in $color-list {
  // $i: index($color-list, $color);
  .color-#{$name} {
    $color-lightness: lightness($color);
    @if $color-lightness >= 50% {
      color: #000;
    }
    background: $color;
    @if $color == $body-bg { // if it matches background color, add drop shadow
      box-shadow: 3px 4px 13px -2px rgba(0,0,0,0.3);
    }
    &:after {
      content: "#{$color}";
      white-space: pre;
      font: {
        family: monospace;
        size: 1.5rem;
        weight: normal;
      }
    }
  }
}

@each $name, $color in $gray-list {
  // $i: index($color-list, $color);
  .color-#{$name} {
    $color-lightness: lightness($color);
    @if $color-lightness >= 50% {
      color: #000;
    }
    background: $color;
    &:after {
      content: "#{$color}";
      white-space: pre;
        font: {
        family: monospace;
        size: 1.5rem;
        weight: normal;
      }
    }
  }
}