Create a gist now

Instantly share code, notes, and snippets.

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

omg this is great

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