Skip to content

Instantly share code, notes, and snippets.

@smlombardi

smlombardi/SassMeister-input.scss

Last active August 29, 2015 14:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save smlombardi/6bf7a1f7c01cc308e4c2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save smlombardi/6bf7a1f7c01cc308e4c2 to your computer and use it in GitHub Desktop.
Download ZIP
color palette sass map and function
Raw
SassMeister-input.scss
// ----
// 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;
}
}
}
Raw
SassMeister-output.css
.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