css Bob Ross的CSS调色板

Posted 2021-05-13

$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;
    }
  }
}

.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;
}