body, html {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    background: #fff;

}

​

ul {

    width: 100%;

    margin: auto;

    display: flex;

    flex-wrap: nowrap;

    justify-content: space-around;

}

​

ul:nth-child(2) li {

    color: color-contrast(var(--bg) vs white, black);

}

​

li {

    position: relative;

    width: 200px;

    height: 64px;

    line-height: 64px;

    font-size: 32px;

    border: 1px solid #000;

    text-align: center;

    background: var(--bg);

    cursor: pointer;

    transition: .3s all;

    color: rgb(from var(--bg) calc(1 - r) calc(1 - g) calc(1 - b));    

}

​

li:hover {

    background: hsl(from var(--bg) h s calc(l * 1.2));

}

li:active {

    background: hsl(from var(--bg) h s calc(l * 0.8));

}

​

li:nth-child(1) {

    --bg: #fc0;

}

​

li:nth-child(2) {

    --bg: #CDDC39;

}

​

li:nth-child(3) {

    --bg: #82d8ff;

}

​

li:nth-child(4) {

    --bg: #9c27b0;

}

​

li:nth-child(5) {

    --bg: #7d1639;

}

​

li:nth-child(6) {

    --bg: #b43000;

}