HSL制作配色表

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>HSL制作配色表</title>
    <style>
    .table-wrap {
        width: 400px;
        margin: 10px;
        float: left;
    }

    table {
        width: 100%;
        border: 1px solid #756c6c;
        border-left: none;
        border-collapse: collapse;
        border-spacing: 0;
    }

    th,
    td {
        border-top: 1px solid #756c6c;
        border-left: 1px solid #756c6c;
        padding: 10px;
        text-align: center;
        vertical-align: middle;
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(1) td:nth-of-type(1) {
        background: hsl(0, 100%, 100%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(1) td:nth-of-type(2) {
        background: hsl(0, 75%, 100%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(1) td:nth-of-type(3) {
        background: hsl(0, 50%, 100%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(1) td:nth-of-type(4) {
        background: hsl(0, 25%, 100%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(1) td:nth-of-type(5) {
        background: hsl(0, 0%, 100%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(2) td:nth-of-type(1) {
        background: hsl(0, 100%, 75%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(2) td:nth-of-type(2) {
        background: hsl(0, 75%, 75%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(2) td:nth-of-type(3) {
        background: hsl(0, 50%, 75%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(2) td:nth-of-type(4) {
        background: hsl(0, 25%, 75%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(2) td:nth-of-type(5) {
        background: hsl(0, 0%, 75%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(3) td:nth-of-type(1) {
        background: hsl(0, 100%, 50%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(3) td:nth-of-type(2) {
        background: hsl(0, 75%, 50%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(3) td:nth-of-type(3) {
        background: hsl(0, 50%, 50%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(3) td:nth-of-type(4) {
        background: hsl(0, 25%, 50%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(3) td:nth-of-type(5) {
        background: hsl(0, 0%, 50%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(4) td:nth-of-type(1) {
        background: hsl(0, 100%, 25%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(4) td:nth-of-type(2) {
        background: hsl(0, 75%, 25%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(4) td:nth-of-type(3) {
        background: hsl(0, 50%, 25%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(4) td:nth-of-type(4) {
        background: hsl(0, 25%, 25%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(4) td:nth-of-type(5) {
        background: hsl(0, 0%, 25%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(5) td:nth-of-type(1) {
        background: hsl(0, 100%, 0%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(5) td:nth-of-type(2) {
        background: hsl(0, 75%, 0%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(5) td:nth-of-type(3) {
        background: hsl(0, 50%, 0%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(5) td:nth-of-type(4) {
        background: hsl(0, 25%, 0%);
    }

    .table-wrap:nth-child(1) tbody tr:nth-child(5) td:nth-of-type(5) {
        background: hsl(0, 0%, 0%);
    }
    /*色调为60*/

    .table-wrap:nth-child(2) tbody tr:nth-child(1) td:nth-of-type(1) {
        background: hsl(60, 100%, 100%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(1) td:nth-of-type(2) {
        background: hsl(60, 75%, 100%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(1) td:nth-of-type(3) {
        background: hsl(60, 50%, 100%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(1) td:nth-of-type(4) {
        background: hsl(60, 25%, 100%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(1) td:nth-of-type(5) {
        background: hsl(60, 0%, 100%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(2) td:nth-of-type(1) {
        background: hsl(60, 100%, 75%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(2) td:nth-of-type(2) {
        background: hsl(60, 75%, 75%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(2) td:nth-of-type(3) {
        background: hsl(60, 50%, 75%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(2) td:nth-of-type(4) {
        background: hsl(60, 25%, 75%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(2) td:nth-of-type(5) {
        background: hsl(60, 0%, 75%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(3) td:nth-of-type(1) {
        background: hsl(60, 100%, 50%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(3) td:nth-of-type(2) {
        background: hsl(60, 75%, 50%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(3) td:nth-of-type(3) {
        background: hsl(60, 50%, 50%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(3) td:nth-of-type(4) {
        background: hsl(60, 25%, 50%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(3) td:nth-of-type(5) {
        background: hsl(60, 0%, 50%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(4) td:nth-of-type(1) {
        background: hsl(60, 100%, 25%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(4) td:nth-of-type(2) {
        background: hsl(60, 75%, 25%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(4) td:nth-of-type(3) {
        background: hsl(60, 50%, 25%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(4) td:nth-of-type(4) {
        background: hsl(60, 25%, 25%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(4) td:nth-of-type(5) {
        background: hsl(60, 0%, 25%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(5) td:nth-of-type(1) {
        background: hsl(60, 100%, 0%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(5) td:nth-of-type(2) {
        background: hsl(60, 75%, 0%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(5) td:nth-of-type(3) {
        background: hsl(60, 50%, 0%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(5) td:nth-of-type(4) {
        background: hsl(60, 25%, 0%);
    }

    .table-wrap:nth-child(2) tbody tr:nth-child(5) td:nth-of-type(5) {
        background: hsl(60, 0%, 0%);
    }
    /*色调为120*/

    .table-wrap:nth-child(3) tbody tr:nth-child(1) td:nth-of-type(1) {
        background: hsl(120, 100%, 100%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(1) td:nth-of-type(2) {
        background: hsl(120, 75%, 100%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(1) td:nth-of-type(3) {
        background: hsl(120, 50%, 100%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(1) td:nth-of-type(4) {
        background: hsl(120, 25%, 100%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(1) td:nth-of-type(5) {
        background: hsl(120, 0%, 100%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(2) td:nth-of-type(1) {
        background: hsl(120, 100%, 75%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(2) td:nth-of-type(2) {
        background: hsl(120, 75%, 75%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(2) td:nth-of-type(3) {
        background: hsl(120, 50%, 75%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(2) td:nth-of-type(4) {
        background: hsl(120, 25%, 75%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(2) td:nth-of-type(5) {
        background: hsl(120, 0%, 75%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(3) td:nth-of-type(1) {
        background: hsl(120, 100%, 50%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(3) td:nth-of-type(2) {
        background: hsl(120, 75%, 50%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(3) td:nth-of-type(3) {
        background: hsl(120, 50%, 50%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(3) td:nth-of-type(4) {
        background: hsl(120, 25%, 50%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(3) td:nth-of-type(5) {
        background: hsl(120, 0%, 50%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(4) td:nth-of-type(1) {
        background: hsl(120, 100%, 25%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(4) td:nth-of-type(2) {
        background: hsl(120, 75%, 25%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(4) td:nth-of-type(3) {
        background: hsl(120, 50%, 25%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(4) td:nth-of-type(4) {
        background: hsl(120, 25%, 25%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(4) td:nth-of-type(5) {
        background: hsl(120, 0%, 25%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(5) td:nth-of-type(1) {
        background: hsl(120, 100%, 0%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(5) td:nth-of-type(2) {
        background: hsl(120, 75%, 0%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(5) td:nth-of-type(3) {
        background: hsl(120, 50%, 0%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(5) td:nth-of-type(4) {
        background: hsl(120, 25%, 0%);
    }

    .table-wrap:nth-child(3) tbody tr:nth-child(5) td:nth-of-type(5) {
        background: hsl(120, 0%, 0%);
    }
    /*色调为180*/

    .table-wrap:nth-child(4) tbody tr:nth-child(1) td:nth-of-type(1) {
        background: hsl(180, 100%, 100%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(1) td:nth-of-type(2) {
        background: hsl(180, 75%, 100%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(1) td:nth-of-type(3) {
        background: hsl(180, 50%, 100%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(1) td:nth-of-type(4) {
        background: hsl(180, 25%, 100%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(1) td:nth-of-type(5) {
        background: hsl(180, 0%, 100%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(2) td:nth-of-type(1) {
        background: hsl(180, 100%, 75%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(2) td:nth-of-type(2) {
        background: hsl(180, 75%, 75%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(2) td:nth-of-type(3) {
        background: hsl(180, 50%, 75%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(2) td:nth-of-type(4) {
        background: hsl(180, 25%, 75%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(2) td:nth-of-type(5) {
        background: hsl(180, 0%, 75%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(3) td:nth-of-type(1) {
        background: hsl(180, 100%, 50%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(3) td:nth-of-type(2) {
        background: hsl(180, 75%, 50%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(3) td:nth-of-type(3) {
        background: hsl(180, 50%, 50%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(3) td:nth-of-type(4) {
        background: hsl(180, 25%, 50%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(3) td:nth-of-type(5) {
        background: hsl(180, 0%, 50%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(4) td:nth-of-type(1) {
        background: hsl(180, 100%, 25%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(4) td:nth-of-type(2) {
        background: hsl(180, 75%, 25%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(4) td:nth-of-type(3) {
        background: hsl(180, 50%, 25%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(4) td:nth-of-type(4) {
        background: hsl(180, 25%, 25%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(4) td:nth-of-type(5) {
        background: hsl(180, 0%, 25%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(5) td:nth-of-type(1) {
        background: hsl(180, 100%, 0%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(5) td:nth-of-type(2) {
        background: hsl(180, 75%, 0%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(5) td:nth-of-type(3) {
        background: hsl(180, 50%, 0%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(5) td:nth-of-type(4) {
        background: hsl(180, 25%, 0%);
    }

    .table-wrap:nth-child(4) tbody tr:nth-child(5) td:nth-of-type(5) {
        background: hsl(180, 0%, 0%);
    }
    /*色调为240*/

    .table-wrap:nth-child(5) tbody tr:nth-child(1) td:nth-of-type(1) {
        background: hsl(240, 100%, 100%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(1) td:nth-of-type(2) {
        background: hsl(240, 75%, 100%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(1) td:nth-of-type(3) {
        background: hsl(240, 50%, 100%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(1) td:nth-of-type(4) {
        background: hsl(240, 25%, 100%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(1) td:nth-of-type(5) {
        background: hsl(240, 0%, 100%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(2) td:nth-of-type(1) {
        background: hsl(240, 100%, 75%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(2) td:nth-of-type(2) {
        background: hsl(240, 75%, 75%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(2) td:nth-of-type(3) {
        background: hsl(240, 50%, 75%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(2) td:nth-of-type(4) {
        background: hsl(240, 25%, 75%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(2) td:nth-of-type(5) {
        background: hsl(240, 0%, 75%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(3) td:nth-of-type(1) {
        background: hsl(240, 100%, 50%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(3) td:nth-of-type(2) {
        background: hsl(240, 75%, 50%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(3) td:nth-of-type(3) {
        background: hsl(240, 50%, 50%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(3) td:nth-of-type(4) {
        background: hsl(240, 25%, 50%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(3) td:nth-of-type(5) {
        background: hsl(240, 0%, 50%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(4) td:nth-of-type(1) {
        background: hsl(240, 100%, 25%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(4) td:nth-of-type(2) {
        background: hsl(240, 75%, 25%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(4) td:nth-of-type(3) {
        background: hsl(240, 50%, 25%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(4) td:nth-of-type(4) {
        background: hsl(240, 25%, 25%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(4) td:nth-of-type(5) {
        background: hsl(240, 0%, 25%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(5) td:nth-of-type(1) {
        background: hsl(240, 100%, 0%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(5) td:nth-of-type(2) {
        background: hsl(240, 75%, 0%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(5) td:nth-of-type(3) {
        background: hsl(240, 50%, 0%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(5) td:nth-of-type(4) {
        background: hsl(240, 25%, 0%);
    }

    .table-wrap:nth-child(5) tbody tr:nth-child(5) td:nth-of-type(5) {
        background: hsl(240, 0%, 0%);
    }
    /*色调为300*/

    .table-wrap:nth-child(6) tbody tr:nth-child(1) td:nth-of-type(1) {
        background: hsl(300, 100%, 100%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(1) td:nth-of-type(2) {
        background: hsl(300, 75%, 100%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(1) td:nth-of-type(3) {
        background: hsl(300, 50%, 100%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(1) td:nth-of-type(4) {
        background: hsl(300, 25%, 100%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(1) td:nth-of-type(5) {
        background: hsl(300, 0%, 100%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(2) td:nth-of-type(1) {
        background: hsl(300, 100%, 75%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(2) td:nth-of-type(2) {
        background: hsl(300, 75%, 75%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(2) td:nth-of-type(3) {
        background: hsl(300, 50%, 75%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(2) td:nth-of-type(4) {
        background: hsl(300, 25%, 75%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(2) td:nth-of-type(5) {
        background: hsl(300, 0%, 75%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(3) td:nth-of-type(1) {
        background: hsl(300, 100%, 50%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(3) td:nth-of-type(2) {
        background: hsl(300, 75%, 50%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(3) td:nth-of-type(3) {
        background: hsl(300, 50%, 50%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(3) td:nth-of-type(4) {
        background: hsl(300, 25%, 50%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(3) td:nth-of-type(5) {
        background: hsl(300, 0%, 50%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(4) td:nth-of-type(1) {
        background: hsl(300, 100%, 25%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(4) td:nth-of-type(2) {
        background: hsl(300, 75%, 25%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(4) td:nth-of-type(3) {
        background: hsl(300, 50%, 25%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(4) td:nth-of-type(4) {
        background: hsl(300, 25%, 25%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(4) td:nth-of-type(5) {
        background: hsl(300, 0%, 25%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(5) td:nth-of-type(1) {
        background: hsl(300, 100%, 0%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(5) td:nth-of-type(2) {
        background: hsl(300, 75%, 0%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(5) td:nth-of-type(3) {
        background: hsl(300, 50%, 0%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(5) td:nth-of-type(4) {
        background: hsl(300, 25%, 0%);
    }

    .table-wrap:nth-child(6) tbody tr:nth-child(5) td:nth-of-type(5) {
        background: hsl(300, 0%, 0%);
    }
    /*色调为360*/

    .table-wrap:nth-child(7) tbody tr:nth-child(1) td:nth-of-type(1) {
        background: hsl(360, 100%, 100%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(1) td:nth-of-type(2) {
        background: hsl(360, 75%, 100%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(1) td:nth-of-type(3) {
        background: hsl(360, 50%, 100%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(1) td:nth-of-type(4) {
        background: hsl(360, 25%, 100%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(1) td:nth-of-type(5) {
        background: hsl(360, 0%, 100%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(2) td:nth-of-type(1) {
        background: hsl(360, 100%, 75%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(2) td:nth-of-type(2) {
        background: hsl(360, 75%, 75%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(2) td:nth-of-type(3) {
        background: hsl(360, 50%, 75%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(2) td:nth-of-type(4) {
        background: hsl(360, 25%, 75%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(2) td:nth-of-type(5) {
        background: hsl(360, 0%, 75%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(3) td:nth-of-type(1) {
        background: hsl(360, 100%, 50%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(3) td:nth-of-type(2) {
        background: hsl(360, 75%, 50%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(3) td:nth-of-type(3) {
        background: hsl(360, 50%, 50%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(3) td:nth-of-type(4) {
        background: hsl(360, 25%, 50%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(3) td:nth-of-type(5) {
        background: hsl(360, 0%, 50%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(4) td:nth-of-type(1) {
        background: hsl(360, 100%, 25%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(4) td:nth-of-type(2) {
        background: hsl(360, 75%, 25%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(4) td:nth-of-type(3) {
        background: hsl(360, 50%, 25%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(4) td:nth-of-type(4) {
        background: hsl(360, 25%, 25%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(4) td:nth-of-type(5) {
        background: hsl(360, 0%, 25%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(5) td:nth-of-type(1) {
        background: hsl(360, 100%, 0%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(5) td:nth-of-type(2) {
        background: hsl(360, 75%, 0%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(5) td:nth-of-type(3) {
        background: hsl(360, 50%, 0%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(5) td:nth-of-type(4) {
        background: hsl(360, 25%, 0%);
    }

    .table-wrap:nth-child(7) tbody tr:nth-child(5) td:nth-of-type(5) {
        background: hsl(360, 0%, 0%);
    }
    </style>
</head>

<body>
    <div class="table-wrap">
        <table>
            <caption>色调为H=0</caption>
            <thead>
                <tr>
                    <th colspan="6">饱和度S</th>
                </tr>
                <tr>
                    <th>亮度L</th>
                    <th>100%</th>
                    <th>75%</th>
                    <th>50%</th>
                    <th>25%</th>
                    <th>0%</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>100%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>75%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>50%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>25%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>0%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="table-wrap">
        <table>
            <caption>色调为60</caption>
            <thead>
                <tr>
                    <th colspan="6">饱和度</th>
                </tr>
                <tr>
                    <th>亮度</th>
                    <th>100%</th>
                    <th>75%</th>
                    <th>50%</th>
                    <th>25%</th>
                    <th>0%</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>100%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>75%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>50%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>25%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>0%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="table-wrap">
        <table>
            <caption>色调为120</caption>
            <thead>
                <tr>
                    <th colspan="6">饱和度</th>
                </tr>
                <tr>
                    <th>亮度</th>
                    <th>100%</th>
                    <th>75%</th>
                    <th>50%</th>
                    <th>25%</th>
                    <th>0%</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>100%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>75%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>50%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>25%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>0%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="table-wrap">
        <table>
            <caption>色调为180</caption>
            <thead>
                <tr>
                    <th colspan="6">饱和度</th>
                </tr>
                <tr>
                    <th>亮度</th>
                    <th>100%</th>
                    <th>75%</th>
                    <th>50%</th>
                    <th>25%</th>
                    <th>0%</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>100%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>75%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>50%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>25%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>0%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="table-wrap">
        <table>
            <caption>色调为240</caption>
            <thead>
                <tr>
                    <th colspan="6">饱和度</th>
                </tr>
                <tr>
                    <th>亮度</th>
                    <th>100%</th>
                    <th>75%</th>
                    <th>50%</th>
                    <th>25%</th>
                    <th>0%</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>100%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>75%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>50%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>25%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>0%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="table-wrap">
        <table>
            <caption>色调为300</caption>
            <thead>
                <tr>
                    <th colspan="6">饱和度</th>
                </tr>
                <tr>
                    <th>亮度</th>
                    <th>100%</th>
                    <th>75%</th>
                    <th>50%</th>
                    <th>25%</th>
                    <th>0%</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>100%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>75%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>50%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>25%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>0%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="table-wrap">
        <table>
            <caption>色调为360</caption>
            <thead>
                <tr>
                    <th colspan="6">饱和度</th>
                </tr>
                <tr>
                    <th>亮度</th>
                    <th>100%</th>
                    <th>75%</th>
                    <th>50%</th>
                    <th>25%</th>
                    <th>0%</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>100%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>75%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>50%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>25%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>0%</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

摘自《图解CSS3 核心技术实践》P199

时间： 2024-10-18 04:06:15

HSL制作配色表的相关文章

简单做成好配色--赖人配色表

喜欢从业的专注,七分学习的态度. 色阶 工作本身和界面没太多关系,出于爱好和场景需要,每个月总会做那么几个界面,会写几个PPT,PS几张图.不是美术出生,患有严重颜色选择困难症,什么颜色好看?什么颜色合适?最无奈的时候百度搜罗类似成品来做内容修改.这样做往往:搜索类似的成品在大部分情况下会耗时到绝望,最后只能草草了事.做过漂亮的,有过欠缺的,还有超级欠缺违和的.谈不上学问,整理整理也略有些门道,最简单实用的门道就是巧用配色表. 如果不是特殊情况,切忌简单功能界面使用颜色过多.基础色调在3~4种都

学会配色-色彩配色表

文章来自于http://www.ui.cn/detail/96592.html 作者:Elean 地址http://i.ui.cn/ucenter/88672.html 再做配色的可以试试.

HTML配色表方案

vim中256色的配色表

vim貌似支持的颜色很有限.white  black  yellow  cyan   magenta   blue   grey   green   red,大多数颜色前面都可以加light 或者 dark 来进行修饰但是VIM开启256色的配置后,支持的配色.其实VIM支持的颜色不仅这些: 1.到https://github.com/guns/xterm-color-table.vim下载个插件,将下载的文件放置到-/.vim/plugin/中 2.使用vim任意打开一个文件,在命令行输入:"

C# 色系表配色 颜色表 美工必备

我色盲,不是真色盲,而是对颜色没感觉,配出来太丑了,找了找配色表,发现是网页的,每次都要开浏览器 就自己做了个,panel + text ,纯界面操作,没有代码,调调色,填填文字什么的 下载地址:pan.baidu.com/s/1qYTtaHI

php大力力 [031节] php设计系统后台菜单和样式设计

耗掉我一整夜的时间,把后台html设计了一个,对于我这样的html白痴,实属不容易啊. 留下一点点网上查找的网页知识: 索马里论坛群发简介 (自动注册,自动发帖,自动回帖,自动搜索论坛,免费试用) EC营客通,王牌销售经理必备神器,腾讯战略产品,免费试用 极客学院 安卓学习 微软Snip发布:最强免费录屏工具 可以加声音和和注释 40个色彩搭配优秀的网站配色(5) 配色网 在线配色方案自动生成器 两种 js下载文件的方法(转) 下载文件的一种简单方法js (2009-01-20 10:32:42

UI界面设计需要遵循哪些规范

一:遵循一致的准则,确立标准并遵循 无论是控件使用,提示信息措辞,还是颜色.窗口布局风格,遵循统一的标准,做到真正的一致. 设计 这样得到的好处: 1:使用户使用起来能够建立起精确的心里模型,使用熟练了一个界面后,切换到另外一个界面能够很轻松的推测出各种功能,语句理解也不需要费神理解 2:降低培训.支持成本,支持人员不会行费力逐个指导. 3:给用户统一感觉,不觉得混乱,心情愉快,支持度增加 做法: 项目组有经验人士,确立UI规范: ·美工提供色调配色方案,提供整体配色表 ·界面控制程序人员.用户

站长工具 &gt; 日常实用工具

百度相关 百度收录查询 指定时间内百度搜索,对指定网站的网页数量及具体情况 百度关键词挖掘 查询关键词PC指数.移动指数.收录量及排名 百度关键词地区排名 有些关键词在各地的排名是不一样的,就是通常说的关键字地区排名 百度关键词即时查询 百度相关搜索.百度推荐.其他人在搜的相关关键词! 百度关键词优化分析 帮助站长估算优化该关键词的难易程度及优化成本 SEO相关 SEO综合 了解该域名的相关信息,如域名年龄相关备案等等,及时调整网站优化. SEO优化建议 快速定位你页面哪些地方存在不利seo的因

HTML+CSS笔记 CSS中级 颜色&长度值

颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 语法: p{color:red;} 2.RGB颜色 这个与 photoshop 中的 RGB 颜色是一致的,由 R(red).G(green).B(blue) 三种颜色的比例来配色 p{color:rgb(133,45,200);} 每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数. 每