Create a gist now

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.

Show comment
Hide comment
@ocarltonne22

ocarltonne22 Jan 3, 2017

omg this is great

omg this is great

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