Last active
August 29, 2015 14:19
-
-
Save smlombardi/6bf7a1f7c01cc308e4c2 to your computer and use it in GitHub Desktop.
color palette sass map and function
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.12) | |
// Compass (v1.0.3) | |
// ---- | |
$pbcolors: ( | |
pbcyan : ( | |
50: #E5F5FC, | |
100: #CCEBF9, | |
200: #99D7F2, | |
300: #66C3EC, | |
400: #33AFE5, | |
500: #009DBF, | |
600: #008CAB, | |
700: #007C98, | |
800: #006D85, | |
900: #005D72 | |
), | |
pbmediumblue: ( | |
50: #E5F1F8, | |
100: #CCE3F1, | |
200: #99C7E3, | |
300: #66AAD4, | |
400: #338EC6, | |
500: #0072B8, | |
600: #0065A5, | |
700: #005A93, | |
800: #004F80, | |
900: #00436E | |
), | |
pbpurple: ( | |
50: #F5ECF5, | |
100: #ECD9EB, | |
200: #D9B2D7, | |
300: #C68CC3, | |
400: #B365AF, | |
500: #A03F9B, | |
600: #90388B, | |
700: #80327C, | |
800: #702C6C, | |
900: #60255D | |
), | |
pbmagenta: ( | |
50: #FAE6F3, | |
100: #F5CEE7, | |
200: #EC9DD0, | |
300: #E26BB8, | |
400: #D93AA1, | |
500: #CF0989, | |
600: #BA087C, | |
700: #A5076E, | |
800: #900660, | |
900: #7C0552 | |
), | |
pbdarkorange: ( | |
50: #FDF0E7, | |
100: #FCE1CE, | |
200: #F8C49D, | |
300: #F5A66D, | |
400: #F1893C, | |
500: #EE6B0B, | |
600: #D65F09, | |
700: #BE5408, | |
800: #A64A07, | |
900: #8E3F06 | |
), | |
pborange: ( | |
50: #FDF2E5, | |
100: #FCE6CC, | |
200: #F9CD99, | |
300: #F5B466, | |
400: #F29B33, | |
500: #EF8200, | |
600: #D77500, | |
700: #BF6800, | |
800: #A75B00, | |
900: #8F4E00 | |
), | |
pbyellow: ( | |
50: #FDF8E5, | |
100: #FBF1CC, | |
200: #F8E299, | |
300: #F4D466, | |
400: #F1C533, | |
500: #EDB700, | |
600: #D5A300, | |
700: #BD9100, | |
800: #A57F00, | |
900: #8E6D00 | |
), | |
pbgreen: ( | |
50: #F1F9EC, | |
100: #E3F2DA, | |
200: #C7E5B4, | |
300: #AAD98F, | |
400: #8ECC69, | |
500: #72BF44, | |
600: #65AB3D, | |
700: #5A9836, | |
800: #4F852F, | |
900: #437228 | |
), | |
pbdarkgreen: ( | |
50: #E5F7EC, | |
100: #CCEFD9, | |
200: #99E0B3, | |
300: #66D08C, | |
400: #33C166, | |
500: #00B140, | |
600: #009F3A, | |
700: #008D34, | |
800: #007B2D, | |
900: #006A27 | |
), | |
pbgray: ( | |
50: #F0F0F0, | |
100: #DBDBDB, | |
200: #C0C0C0, | |
300: #9B9B9B, | |
400: #717171, | |
500: #4E4E4E, | |
600: #3E3E3E, | |
700: #2E2E2E, | |
800: #1F1F1F, | |
900: #0F0F0F | |
) | |
); | |
@function pbcolor($pbcolor, $tone: 500) { | |
@return map-get(map-get($pbcolors, $pbcolor), $tone); | |
} | |
.oneway { | |
color: pbcolor(pbcyan, 500); | |
} | |
.oneway { | |
color: pbcolor(pbcyan); | |
} | |
.oranother { | |
color: map-get(map-get($pbcolors, pbcyan), 500);; | |
} | |
@each $item, $color in $pbcolors { | |
@each $shade, $value in $color { | |
.bg-#{$item}-#{$shade} { | |
background-color: $value; | |
} | |
} | |
} | |
@each $item, $color in $pbcolors { | |
@each $shade, $value in $color { | |
.#{$item}-#{$shade} { | |
color: $value; | |
} | |
} | |
} | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.oneway { | |
color: #009DBF; | |
} | |
.oneway { | |
color: #009DBF; | |
} | |
.oranother { | |
color: #009DBF; | |
} | |
.bg-pbcyan-50 { | |
background-color: #E5F5FC; | |
} | |
.bg-pbcyan-100 { | |
background-color: #CCEBF9; | |
} | |
.bg-pbcyan-200 { | |
background-color: #99D7F2; | |
} | |
.bg-pbcyan-300 { | |
background-color: #66C3EC; | |
} | |
.bg-pbcyan-400 { | |
background-color: #33AFE5; | |
} | |
.bg-pbcyan-500 { | |
background-color: #009DBF; | |
} | |
.bg-pbcyan-600 { | |
background-color: #008CAB; | |
} | |
.bg-pbcyan-700 { | |
background-color: #007C98; | |
} | |
.bg-pbcyan-800 { | |
background-color: #006D85; | |
} | |
.bg-pbcyan-900 { | |
background-color: #005D72; | |
} | |
.bg-pbmediumblue-50 { | |
background-color: #E5F1F8; | |
} | |
.bg-pbmediumblue-100 { | |
background-color: #CCE3F1; | |
} | |
.bg-pbmediumblue-200 { | |
background-color: #99C7E3; | |
} | |
.bg-pbmediumblue-300 { | |
background-color: #66AAD4; | |
} | |
.bg-pbmediumblue-400 { | |
background-color: #338EC6; | |
} | |
.bg-pbmediumblue-500 { | |
background-color: #0072B8; | |
} | |
.bg-pbmediumblue-600 { | |
background-color: #0065A5; | |
} | |
.bg-pbmediumblue-700 { | |
background-color: #005A93; | |
} | |
.bg-pbmediumblue-800 { | |
background-color: #004F80; | |
} | |
.bg-pbmediumblue-900 { | |
background-color: #00436E; | |
} | |
.bg-pbpurple-50 { | |
background-color: #F5ECF5; | |
} | |
.bg-pbpurple-100 { | |
background-color: #ECD9EB; | |
} | |
.bg-pbpurple-200 { | |
background-color: #D9B2D7; | |
} | |
.bg-pbpurple-300 { | |
background-color: #C68CC3; | |
} | |
.bg-pbpurple-400 { | |
background-color: #B365AF; | |
} | |
.bg-pbpurple-500 { | |
background-color: #A03F9B; | |
} | |
.bg-pbpurple-600 { | |
background-color: #90388B; | |
} | |
.bg-pbpurple-700 { | |
background-color: #80327C; | |
} | |
.bg-pbpurple-800 { | |
background-color: #702C6C; | |
} | |
.bg-pbpurple-900 { | |
background-color: #60255D; | |
} | |
.bg-pbmagenta-50 { | |
background-color: #FAE6F3; | |
} | |
.bg-pbmagenta-100 { | |
background-color: #F5CEE7; | |
} | |
.bg-pbmagenta-200 { | |
background-color: #EC9DD0; | |
} | |
.bg-pbmagenta-300 { | |
background-color: #E26BB8; | |
} | |
.bg-pbmagenta-400 { | |
background-color: #D93AA1; | |
} | |
.bg-pbmagenta-500 { | |
background-color: #CF0989; | |
} | |
.bg-pbmagenta-600 { | |
background-color: #BA087C; | |
} | |
.bg-pbmagenta-700 { | |
background-color: #A5076E; | |
} | |
.bg-pbmagenta-800 { | |
background-color: #900660; | |
} | |
.bg-pbmagenta-900 { | |
background-color: #7C0552; | |
} | |
.bg-pbdarkorange-50 { | |
background-color: #FDF0E7; | |
} | |
.bg-pbdarkorange-100 { | |
background-color: #FCE1CE; | |
} | |
.bg-pbdarkorange-200 { | |
background-color: #F8C49D; | |
} | |
.bg-pbdarkorange-300 { | |
background-color: #F5A66D; | |
} | |
.bg-pbdarkorange-400 { | |
background-color: #F1893C; | |
} | |
.bg-pbdarkorange-500 { | |
background-color: #EE6B0B; | |
} | |
.bg-pbdarkorange-600 { | |
background-color: #D65F09; | |
} | |
.bg-pbdarkorange-700 { | |
background-color: #BE5408; | |
} | |
.bg-pbdarkorange-800 { | |
background-color: #A64A07; | |
} | |
.bg-pbdarkorange-900 { | |
background-color: #8E3F06; | |
} | |
.bg-pborange-50 { | |
background-color: #FDF2E5; | |
} | |
.bg-pborange-100 { | |
background-color: #FCE6CC; | |
} | |
.bg-pborange-200 { | |
background-color: #F9CD99; | |
} | |
.bg-pborange-300 { | |
background-color: #F5B466; | |
} | |
.bg-pborange-400 { | |
background-color: #F29B33; | |
} | |
.bg-pborange-500 { | |
background-color: #EF8200; | |
} | |
.bg-pborange-600 { | |
background-color: #D77500; | |
} | |
.bg-pborange-700 { | |
background-color: #BF6800; | |
} | |
.bg-pborange-800 { | |
background-color: #A75B00; | |
} | |
.bg-pborange-900 { | |
background-color: #8F4E00; | |
} | |
.bg-pbyellow-50 { | |
background-color: #FDF8E5; | |
} | |
.bg-pbyellow-100 { | |
background-color: #FBF1CC; | |
} | |
.bg-pbyellow-200 { | |
background-color: #F8E299; | |
} | |
.bg-pbyellow-300 { | |
background-color: #F4D466; | |
} | |
.bg-pbyellow-400 { | |
background-color: #F1C533; | |
} | |
.bg-pbyellow-500 { | |
background-color: #EDB700; | |
} | |
.bg-pbyellow-600 { | |
background-color: #D5A300; | |
} | |
.bg-pbyellow-700 { | |
background-color: #BD9100; | |
} | |
.bg-pbyellow-800 { | |
background-color: #A57F00; | |
} | |
.bg-pbyellow-900 { | |
background-color: #8E6D00; | |
} | |
.bg-pbgreen-50 { | |
background-color: #F1F9EC; | |
} | |
.bg-pbgreen-100 { | |
background-color: #E3F2DA; | |
} | |
.bg-pbgreen-200 { | |
background-color: #C7E5B4; | |
} | |
.bg-pbgreen-300 { | |
background-color: #AAD98F; | |
} | |
.bg-pbgreen-400 { | |
background-color: #8ECC69; | |
} | |
.bg-pbgreen-500 { | |
background-color: #72BF44; | |
} | |
.bg-pbgreen-600 { | |
background-color: #65AB3D; | |
} | |
.bg-pbgreen-700 { | |
background-color: #5A9836; | |
} | |
.bg-pbgreen-800 { | |
background-color: #4F852F; | |
} | |
.bg-pbgreen-900 { | |
background-color: #437228; | |
} | |
.bg-pbdarkgreen-50 { | |
background-color: #E5F7EC; | |
} | |
.bg-pbdarkgreen-100 { | |
background-color: #CCEFD9; | |
} | |
.bg-pbdarkgreen-200 { | |
background-color: #99E0B3; | |
} | |
.bg-pbdarkgreen-300 { | |
background-color: #66D08C; | |
} | |
.bg-pbdarkgreen-400 { | |
background-color: #33C166; | |
} | |
.bg-pbdarkgreen-500 { | |
background-color: #00B140; | |
} | |
.bg-pbdarkgreen-600 { | |
background-color: #009F3A; | |
} | |
.bg-pbdarkgreen-700 { | |
background-color: #008D34; | |
} | |
.bg-pbdarkgreen-800 { | |
background-color: #007B2D; | |
} | |
.bg-pbdarkgreen-900 { | |
background-color: #006A27; | |
} | |
.bg-pbgray-50 { | |
background-color: #F0F0F0; | |
} | |
.bg-pbgray-100 { | |
background-color: #DBDBDB; | |
} | |
.bg-pbgray-200 { | |
background-color: #C0C0C0; | |
} | |
.bg-pbgray-300 { | |
background-color: #9B9B9B; | |
} | |
.bg-pbgray-400 { | |
background-color: #717171; | |
} | |
.bg-pbgray-500 { | |
background-color: #4E4E4E; | |
} | |
.bg-pbgray-600 { | |
background-color: #3E3E3E; | |
} | |
.bg-pbgray-700 { | |
background-color: #2E2E2E; | |
} | |
.bg-pbgray-800 { | |
background-color: #1F1F1F; | |
} | |
.bg-pbgray-900 { | |
background-color: #0F0F0F; | |
} | |
.pbcyan-50 { | |
color: #E5F5FC; | |
} | |
.pbcyan-100 { | |
color: #CCEBF9; | |
} | |
.pbcyan-200 { | |
color: #99D7F2; | |
} | |
.pbcyan-300 { | |
color: #66C3EC; | |
} | |
.pbcyan-400 { | |
color: #33AFE5; | |
} | |
.pbcyan-500 { | |
color: #009DBF; | |
} | |
.pbcyan-600 { | |
color: #008CAB; | |
} | |
.pbcyan-700 { | |
color: #007C98; | |
} | |
.pbcyan-800 { | |
color: #006D85; | |
} | |
.pbcyan-900 { | |
color: #005D72; | |
} | |
.pbmediumblue-50 { | |
color: #E5F1F8; | |
} | |
.pbmediumblue-100 { | |
color: #CCE3F1; | |
} | |
.pbmediumblue-200 { | |
color: #99C7E3; | |
} | |
.pbmediumblue-300 { | |
color: #66AAD4; | |
} | |
.pbmediumblue-400 { | |
color: #338EC6; | |
} | |
.pbmediumblue-500 { | |
color: #0072B8; | |
} | |
.pbmediumblue-600 { | |
color: #0065A5; | |
} | |
.pbmediumblue-700 { | |
color: #005A93; | |
} | |
.pbmediumblue-800 { | |
color: #004F80; | |
} | |
.pbmediumblue-900 { | |
color: #00436E; | |
} | |
.pbpurple-50 { | |
color: #F5ECF5; | |
} | |
.pbpurple-100 { | |
color: #ECD9EB; | |
} | |
.pbpurple-200 { | |
color: #D9B2D7; | |
} | |
.pbpurple-300 { | |
color: #C68CC3; | |
} | |
.pbpurple-400 { | |
color: #B365AF; | |
} | |
.pbpurple-500 { | |
color: #A03F9B; | |
} | |
.pbpurple-600 { | |
color: #90388B; | |
} | |
.pbpurple-700 { | |
color: #80327C; | |
} | |
.pbpurple-800 { | |
color: #702C6C; | |
} | |
.pbpurple-900 { | |
color: #60255D; | |
} | |
.pbmagenta-50 { | |
color: #FAE6F3; | |
} | |
.pbmagenta-100 { | |
color: #F5CEE7; | |
} | |
.pbmagenta-200 { | |
color: #EC9DD0; | |
} | |
.pbmagenta-300 { | |
color: #E26BB8; | |
} | |
.pbmagenta-400 { | |
color: #D93AA1; | |
} | |
.pbmagenta-500 { | |
color: #CF0989; | |
} | |
.pbmagenta-600 { | |
color: #BA087C; | |
} | |
.pbmagenta-700 { | |
color: #A5076E; | |
} | |
.pbmagenta-800 { | |
color: #900660; | |
} | |
.pbmagenta-900 { | |
color: #7C0552; | |
} | |
.pbdarkorange-50 { | |
color: #FDF0E7; | |
} | |
.pbdarkorange-100 { | |
color: #FCE1CE; | |
} | |
.pbdarkorange-200 { | |
color: #F8C49D; | |
} | |
.pbdarkorange-300 { | |
color: #F5A66D; | |
} | |
.pbdarkorange-400 { | |
color: #F1893C; | |
} | |
.pbdarkorange-500 { | |
color: #EE6B0B; | |
} | |
.pbdarkorange-600 { | |
color: #D65F09; | |
} | |
.pbdarkorange-700 { | |
color: #BE5408; | |
} | |
.pbdarkorange-800 { | |
color: #A64A07; | |
} | |
.pbdarkorange-900 { | |
color: #8E3F06; | |
} | |
.pborange-50 { | |
color: #FDF2E5; | |
} | |
.pborange-100 { | |
color: #FCE6CC; | |
} | |
.pborange-200 { | |
color: #F9CD99; | |
} | |
.pborange-300 { | |
color: #F5B466; | |
} | |
.pborange-400 { | |
color: #F29B33; | |
} | |
.pborange-500 { | |
color: #EF8200; | |
} | |
.pborange-600 { | |
color: #D77500; | |
} | |
.pborange-700 { | |
color: #BF6800; | |
} | |
.pborange-800 { | |
color: #A75B00; | |
} | |
.pborange-900 { | |
color: #8F4E00; | |
} | |
.pbyellow-50 { | |
color: #FDF8E5; | |
} | |
.pbyellow-100 { | |
color: #FBF1CC; | |
} | |
.pbyellow-200 { | |
color: #F8E299; | |
} | |
.pbyellow-300 { | |
color: #F4D466; | |
} | |
.pbyellow-400 { | |
color: #F1C533; | |
} | |
.pbyellow-500 { | |
color: #EDB700; | |
} | |
.pbyellow-600 { | |
color: #D5A300; | |
} | |
.pbyellow-700 { | |
color: #BD9100; | |
} | |
.pbyellow-800 { | |
color: #A57F00; | |
} | |
.pbyellow-900 { | |
color: #8E6D00; | |
} | |
.pbgreen-50 { | |
color: #F1F9EC; | |
} | |
.pbgreen-100 { | |
color: #E3F2DA; | |
} | |
.pbgreen-200 { | |
color: #C7E5B4; | |
} | |
.pbgreen-300 { | |
color: #AAD98F; | |
} | |
.pbgreen-400 { | |
color: #8ECC69; | |
} | |
.pbgreen-500 { | |
color: #72BF44; | |
} | |
.pbgreen-600 { | |
color: #65AB3D; | |
} | |
.pbgreen-700 { | |
color: #5A9836; | |
} | |
.pbgreen-800 { | |
color: #4F852F; | |
} | |
.pbgreen-900 { | |
color: #437228; | |
} | |
.pbdarkgreen-50 { | |
color: #E5F7EC; | |
} | |
.pbdarkgreen-100 { | |
color: #CCEFD9; | |
} | |
.pbdarkgreen-200 { | |
color: #99E0B3; | |
} | |
.pbdarkgreen-300 { | |
color: #66D08C; | |
} | |
.pbdarkgreen-400 { | |
color: #33C166; | |
} | |
.pbdarkgreen-500 { | |
color: #00B140; | |
} | |
.pbdarkgreen-600 { | |
color: #009F3A; | |
} | |
.pbdarkgreen-700 { | |
color: #008D34; | |
} | |
.pbdarkgreen-800 { | |
color: #007B2D; | |
} | |
.pbdarkgreen-900 { | |
color: #006A27; | |
} | |
.pbgray-50 { | |
color: #F0F0F0; | |
} | |
.pbgray-100 { | |
color: #DBDBDB; | |
} | |
.pbgray-200 { | |
color: #C0C0C0; | |
} | |
.pbgray-300 { | |
color: #9B9B9B; | |
} | |
.pbgray-400 { | |
color: #717171; | |
} | |
.pbgray-500 { | |
color: #4E4E4E; | |
} | |
.pbgray-600 { | |
color: #3E3E3E; | |
} | |
.pbgray-700 { | |
color: #2E2E2E; | |
} | |
.pbgray-800 { | |
color: #1F1F1F; | |
} | |
.pbgray-900 { | |
color: #0F0F0F; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment