color-palette-modern

color-palette-modern.markdown

color-palette-modern

A Pen by WiseMan on CodePen.

License.

index.html

<div class="color ivory"><span>IVORY (#fdf3ec)</span></div><div class="color lioncub"><span>LIONCUB (#ffde80)</span></div><div class="color earltea"><span>EARLTEA (#30475b)</span></div><div class="color peach"><span>PEACH (#fd8576)</span></div><div class="color sunlight"><span>SUNLIGHT (#f6c100)</span></div><div class="color krakatoa"><span>KRAKATOA (#6d5e60)</span></div><div class="color seaside"><span>SEASIDE (#5cacaf)</span></div>

style.css

:root {
  --color-ivory: #fdf3ec;
  --color-lioncub: #ffde80;
  --color-earltea: #30475b;
  --color-peach: #fd8576;
  --color-sunlight: #f6c100;
  --color-krakatoa: #6d5e60;
  --color-seaside: #5cacaf;
}

div.color {
  display: inline-block;
  width: 14%;
  height: 100vh;
  margin: 0px;
  text-align: center;
  line-height: 50px;
}
span {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid black;
  background-color: white;
  color: black;
  font-family: monospace;
}
span:hover {
  background-color: black;
  color: white;
  border: 1px solid white;
}
.ivory {
  background-color: #fdf3ec;
}
.lioncub {
  background-color: #ffde80;
}
.earltea {
  background-color: #30475b;
}
.peach {
  background-color: #fd8576;
}
.sunlight {
  background-color: #f6c100;
}
.krakatoa {
  background-color: #6d5e60;
}
.seaside {
  background-color: #5cacaf;
}