Skip to content

Instantly share code, notes, and snippets.

@allanwhite
Last active May 6, 2024 05:19
Show Gist options
  • Save allanwhite/69cfd5fc5cd9aa0e654b to your computer and use it in GitHub Desktop.
Save allanwhite/69cfd5fc5cd9aa0e654b to your computer and use it in GitHub Desktop.
HSQ Brand colors, 2015

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.

// 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
$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;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment