SOURCE

console 命令行工具 X clear

                    
>
console
new Vue({
    el: '#tool',
    data: {
        bgc: [],
        color: '#e5eecc',
        repeat: 30,
        Hue: 330,
        V: 0,
        U: 0,
        Y: 0,
        R: 0,
        G: 0,
        B: 255,
        expt: '',
        empty: true,
    },
    methods: {
        drawHue() {
            var repeat = this.repeat;
            var hue = this.Hue;
            var bgc = [];

            for (var y = 0; y <= repeat; y++) {
                var bgcH = [];
                var h, s, b, hsl, hsl_h, hsl_s, hsl_l;
                for (var x = 0; x <= repeat; x++) {

                    h = hue;
                    s = parseFloat(x / repeat);
                    b = parseFloat(1 - y / repeat);

                    hsl_h = h;
                    hsl_l = b * (2 - s) / 2;
                    if ((1 - Math.abs(2 * hsl_l - 1)) == 0) {
                        hsl_s = 1;
                    } else {
                        hsl_s = b * s / (1 - Math.abs(2 * hsl_l - 1));
                    };

                    hsl = "hsl(" + hsl_h + "," + hsl_s * 100 + "%," + hsl_l * 100 + "%)";

                    bgcH.push(hsl);
                }
                bgc.push(bgcH);
            };
            this.bgc = bgc;
        },
        drawV() {
            var repeat = this.repeat;
            var bgc = [];

            for (var y = 0; y <= repeat; y++) {
                var bgcH = [];
                var Y, U, V, R, G, B, rgb;
                for (var x = 0; x <= repeat; x++) {

                    Y = parseFloat(255 / repeat * x);
                    U = parseFloat(222 / repeat * y - 111);
                    V = this.V;

                    R = parseInt(Y + 1.140 * V);
                    G = parseInt(Y - 0.394 * U - 0.581 * V);
                    B = parseInt(Y + 2.032 * U);

                    rgb = "rgb(" + R + "," + G + "," + B + ")";
                    bgcH.push(rgb);
                }
                bgc.push(bgcH);
            };
            this.bgc = bgc;
        },
        drawU() {
            var repeat = this.repeat;
            var bgc = [];

            for (var y = 0; y <= repeat; y++) {
                var bgcH = [];
                var Y, U, V, R, G, B, rgb;
                for (var x = 0; x <= repeat; x++) {

                    Y = parseFloat(255 / repeat * x);
                    U = this.U;
                    V = parseFloat(313.65 / repeat * y);

                    R = parseInt(Y + 1.140 * V);
                    G = parseInt(Y - 0.394 * U - 0.581 * V);
                    B = parseInt(Y + 2.032 * U);

                    rgb = "rgb(" + R + "," + G + "," + B + ")";
                    bgcH.push(rgb);
                }
                bgc.push(bgcH);
            };
            this.bgc = bgc;
        },
        drawY() {
            var repeat = this.repeat;
            var bgc = [];

            for (var y = 0; y <= repeat; y++) {
                var bgcH = [];
                var Y, U, V, R, G, B, rgb;
                for (var x = 0; x <= repeat; x++) {

                    Y = this.Y;
                    U = parseFloat(222 / repeat * x - 111);
                    V = parseFloat(313.65 / repeat * y);

                    R = parseInt(Y + 1.140 * V);
                    G = parseInt(Y - 0.394 * U - 0.581 * V);
                    B = parseInt(Y + 2.032 * U);

                    rgb = "rgb(" + R + "," + G + "," + B + ")";
                    bgcH.push(rgb);
                }
                bgc.push(bgcH);
            };
            this.bgc = bgc;
        },
        drawB() {
            var repeat = this.repeat;
            var bgc = [];

            for (var y = 0; y <= repeat; y++) {
                var bgcH = [];
                var R, G, B, rgb;
                for (var x = 0; x <= repeat; x++) {

                    R = parseInt(255 / repeat * x);
                    G = parseInt(255 - 255 / repeat * y);
                    B = this.B;

                    rgb = "rgb(" + R + "," + G + "," + B + ")";
                    bgcH.push(rgb);
                }
                bgc.push(bgcH);
            };
            this.bgc = bgc;
        },
        drawG() {
            var repeat = this.repeat;
            var bgc = [];

            for (var y = 0; y <= repeat; y++) {
                var bgcH = [];
                var R, G, B, rgb;
                for (var x = 0; x <= repeat; x++) {

                    R = parseInt(255 - 255 / repeat * y);
                    G = this.G
                    B = parseInt(255 / repeat * x);

                    rgb = "rgb(" + R + "," + G + "," + B + ")";
                    bgcH.push(rgb);
                }
                bgc.push(bgcH);
            };
            this.bgc = bgc;
        },
        drawR() {
            var repeat = this.repeat;
            var bgc = [];

            for (var y = 0; y <= repeat; y++) {
                var bgcH = [];
                var R, G, B, rgb;

                for (var x = 0; x <= repeat; x++) {

                    R = this.R;
                    G = parseInt(255 - 255 / repeat * y);
                    B = parseInt(255 / repeat * x);

                    rgb = "rgb(" + R + "," + G + "," + B + ")";
                    bgcH.push(rgb);
                }
                bgc.push(bgcH);
            };
            this.bgc = bgc;

        },
        exportHTML() {
            this.expt = document.querySelector('#export').innerHTML;
        },
        bgcOrNot(bgcH) {
            if (this.empty) {
                return null;
            } else {
                return bgcH;
            }
        },
    },
    watch:{
        Hue:function(){this.drawHue()},
        Y:function(){this.drawY()},
        U:function(){this.drawU()},
        V:function(){this.drawV()},
        R:function(){this.drawR()},
        G:function(){this.drawG()},
        B:function(){this.drawB()},
        repeat:function(){this.drawB()},
    },
    created(){
            this.drawB();
    },
})
<div id="tool">
	<div class="setBox">
		个数:
		<input v-model="repeat" type="range" max="60" min="0" step="1"/>
				{{repeat}}x{{repeat}}
				<br>
				文字颜色:
				<input type="color" v-model="color">
				<br>
				空内容:
				<input type="checkbox" v-model="empty" value="true">
				<br>
				H:
				<input type="number" v-model="Hue">
				<input v-model="Hue" type="range" max="360" min="0">
				
				<hr>
				Y:
				<input type="number" v-model="Y">
				<input type="range" max="255" min="0" v-model="Y">
				
				<br>
				U:
				<input type="number" v-model="U">
				<input type="range" max="111" min="-111" v-model="U">
				
				<br>
				V:
				<input type="number" v-model="V">
				<input type="range" max="157" min="-157" v-model="V">
				
				<hr>
				R:
				<input type="number" v-model="R">
				<input type="range" max="255" min="0" v-model="R">
				
				<br>
				G:
				<input type="number" v-model="G">
				<input type="range" max="255" min="0" v-model="G">
				
				<br>
				B:
				<input type="number" v-model="B">
				<input type="range" max="255" min="0" v-model="B">
				
				<br>
				<button type="button" @click="exportHTML" style="margin: 10px auto;font-size: 14px;padding: 5px 10px;">获得代码</button>
				<div style="overflow-x: hidden; overflow-y: auto; width: 100%;height: 300px;word-break: break-all; padding: 20px;border: #47b54a solid 1px;font-size: 10px;
				box-sizing: border-box;color: #265d24;">
					{{expt}}
				</div>
			</div>
			<div id="export" class="exportBox">
				<section :style="{color:color}" style="font-size: 6px;line-height: 6px;">
					<section v-for="(bgcV,n) in bgc" style="display: flex;height: 6px;">
						<section v-for="(bgcH,y) in bgcV" style="height: 6px;width: 6px;overflow: hidden;" :style="{backgroundColor:bgcH}">
							{{bgcOrNot(bgcH)}}
						</section>
					</section>
				</section>
			</div>
		</div>
button {
    display: inline-block;
    border: none;
    border-radius: 5px;
    background-color: #47b54a;
    box-shadow: inset 0px -2px 0 3px #329236;
    color: aliceblue;
    outline: none;
}

button:active {
    box-shadow: inset 0px 1px 0 3px #329236;
    opacity: 0.7;
}

#tool {
    display: flex;
}

.setBox {
    flex: 0 0 auto;
    width: 300px;
    margin-right: 15px;
}

.exportBox {
    flex: 1 0 auto;
    border: #47b54a solid 1px;
    padding: 15px;
}

本项目引用的自定义外部资源