Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bob Ross’ color palette in CSS
.sap-green {
background-color: #0A3410;
}
.sap-green-text {
color: #0A3410;
}
.sap-green-border {
border-color: #0A3410;
}
.alizarin-crimson {
background-color: #4E1500;
}
.alizarin-crimson-text {
color: #4E1500;
}
.alizarin-crimson-border {
border-color: #4E1500;
}
.van-dyke-brown {
background-color: #221B15;
}
.van-dyke-brown-text {
color: #221B15;
}
.van-dyke-brown-border {
border-color: #221B15;
}
.dark-sienna {
background-color: #5F2E1F;
}
.dark-sienna-text {
color: #5F2E1F;
}
.dark-sienna-border {
border-color: #5F2E1F;
}
.midnight-black {
background-color: #000000;
}
.midnight-black-text {
color: #000000;
}
.midnight-black-border {
border-color: #000000;
}
.prussian-blue {
background-color: #021E44;
}
.prussian-blue-text {
color: #021E44;
}
.prussian-blue-border {
border-color: #021E44;
}
.phthalo-blue {
background-color: #0C0040;
}
.phthalo-blue-text {
color: #0C0040;
}
.phthalo-blue-border {
border-color: #0C0040;
}
.phthalo-green {
background-color: #102E3C;
}
.phthalo-green-text {
color: #102E3C;
}
.phthalo-green-border {
border-color: #102E3C;
}
.cadmium-yellow {
background-color: #FFEC00;
}
.cadmium-yellow-text {
color: #FFEC00;
}
.cadmium-yellow-border {
border-color: #FFEC00;
}
.yellow-ochre {
background-color: #C79B00;
}
.yellow-ochre-text {
color: #C79B00;
}
.yellow-ochre-border {
border-color: #C79B00;
}
.indian-yellow {
background-color: #FFB800;
}
.indian-yellow-text {
color: #FFB800;
}
.indian-yellow-border {
border-color: #FFB800;
}
.bright-red {
background-color: #DB0000;
}
.bright-red-text {
color: #DB0000;
}
.bright-red-border {
border-color: #DB0000;
}
.titanium-white {
background-color: #FFFFFF;
}
.titanium-white-text {
color: #FFFFFF;
}
.titanium-white-border {
border-color: #FFFFFF;
}
$colors: (
sap-green: #0A3410,
alizarin-crimson: #4E1500,
van-dyke-brown: #221B15,
dark-sienna: #5F2E1F,
midnight-black: #000000,
prussian-blue: #021E44,
phthalo-blue: #0C0040,
phthalo-green: #102E3C,
cadmium-yellow: #FFEC00,
yellow-ochre: #C79B00,
indian-yellow: #FFB800,
bright-red: #DB0000,
titanium-white: #FFFFFF
);
@each $name, $color in $colors {
.#{$name} {
background-color: $color;
&-text {
color: $color;
}
&-border {
border-color: $color;
}
}
}
@ocarltonne22

This comment has been minimized.

Copy link

ocarltonne22 commented Jan 3, 2017

omg this is great

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment