使用VueJS制作的颜色调和卡（色轮）

cards for color harmonies，可以在线调节光照、饱和度、颜色等参数。包含每个颜色的英文名称。

vue.js, color, card

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 9582
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var currentColor = {
    title: 'White',
    value: '#ffffff',
    index: 15,
    total: 16
};

var appWrap = Vue.extend({
    template: '<div class="app-wrap background" v-bind:style="{background: value}">' +
        '<header class="app-wrap__header">' +
        '<h1 class="app-wrap__title js-title">{{title}}</h1>' +
        '<h2 class="app-wrap__sub js-value">{{value}}</h2>' +
        '<header>' +
        '<slot />' +
        '</div>',
    data: function data() {
        return currentColor;
    }
});

Vue.component('app-wrap', appWrap);

var blades = {
    hovered: null
};

var blade = Vue.extend({
    template: '<article class="blade" v-on:click="setActive"' +
        'v-on:mouseover="hover(index)" v-bind:style="style()">' +
        '<h2 class="blade__value"><strong>{{color}}</strong></h2>' +
        '<h3 class="blade__label"><span class="blade__label--inner">{{label}}</span></h3>' +
        '</article>',
    props: {
        color: String,
        label: String,
        index: Number,
        total: Number,
        hoverindex: Number
    },

data: function data() {
        return {
            shared: blades,
            isHovered: false
        };

},
    methods: {
        style: function style() {
            var rotation = (this.index + 1) * (360 / this.total);
            var scale = this.index * 2;
            var X = this.hoverindex == this.index ? '-10%' : 0;
            /*if (this.hoverindex - 1 === this.index || (this.hoverindex === 0 && this.index == this.total - 1)) {
                                                                  rotation -= this.total * .3;
                                                                } else if (this.hoverindex + 1 === this.index || (this.hoverindex === this.total - 1 && this.index === 0)){
                                                                  rotation += this.total * .3;
                                                                }*/
            return {
                'transform': 'rotate(' + rotation + 'deg) translate3d(0,' + X + ',' + (scale + 20) + 'px)',
                'background-color': this.color,
                'color': this.color
                    //'height':  42 - ((this.total / 33) * 13) + 'vh'
            };
        },
        setActive: function setActive(event) {
            currentColor.title = this.label;
            currentColor.value = this.color;
            currentColor.index = this.index;
            //this.$dispatch('colorChange', this.index, this.label, this.color);
        },
        hover: function hover(index) {
            //this.shared.hovered = index;
            //this.style();
        }
    }
});

Vue.component('blade', blade);

var fan = Vue.extend({
    template: '<section class="fan" v-bind:style="setRotation()">' +
        '<blade v-for="color in colors" track-by="$index" v-bind:color="color.hex" v-bind:label="color.name" v-bind:index="$index" v-bind:total="colors.length" />' +
        '</section>',
    props: {
        colors: Array,
        label: String,
        active: Number
    },

data: function data() {
        return currentColor;
    },
    watch: {
        'index': function index(val, oldVal) {
            this.setRotation(val);
        }
    },

created: function created() {

},
    methods: {
        setRotation: function setRotation() {
            var rotation = (this.index + 1) * (360 / this.total);
            return {
                transform: 'translate3d(0,0,0) rotate(' + (-rotation || 0) + 'deg)'
            };

}
    }
});

Vue.component('fan', fan);

function colorConv(space) {
    var husl = void 0,
        c = void 0;
    for (var _len = arguments.length, color = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
        color[_key - 1] = arguments[_key];
    }
    switch (space) {
        case 'HSLuv':
            var hsl = chroma(color, 'hsl').hsl();
            husl = hsluv.hsluvToHex([hsl[0], hsl[1] * 100, hsl[2] * 100]);
        case 'HSLuvP':
            var hsl = chroma(color, 'hsl').hsl();
            husl = husl || hsluv.hpluvToHex([hsl[0], hsl[1] * 100, hsl[2] * 100]);
            c = chroma(husl, 'hex');
            break;
        case 'lch':
            c = chroma(color[1], color[2], color[0], 'lch');
            break;
        case 'cubehelix':
            c = chroma.cubehelix().
            start(color[0]).
            rotations(color[1]).
            hue(color[2]).
            gamma(color[3]).
            lightness([color[4], color[5]]);
            c = c(color[0] / 360);
            break;
        case 'scale':
            var mode = color[3];
            if (color[3] === 'edg') {
                mode = 'hsv';
            }
            var carr = chroma.scale([color[1], color[2]]).mode(mode).colors(33);

if (color[3] === 'edg') {
                var carrRGB = chroma.scale([color[1], color[2]]).mode('rgb').colors(33);

var colrRGB = carr.map(function(col, i) {
                    return chroma.average([col, carrRGB[i]]);
                });
                carr = chroma.scale(colrRGB).colors(33);
            }

c = chroma(carr[Math.ceil(32 * (color[0] / 360))]);
            break;
        default:
            c = chroma(color, space);
    }

var hex = c.hex();

return {
        color: c,
        hex: hex,
        css: c.css('hsl'),
        name: getClosestNamedColor(hex).name
    };

};

var colorSpaces = [{
        name: ['hsl', 'HSLuv', 'HSLuvP'],
        hasStart: true,
        attr: [{
                name: 'hue',
                min: 0,
                max: 360,
                step: 1,
                value: 0
            },

{
                name: 'saturation',
                min: 0,
                max: 1,
                step: 0.01,
                value: 1
            },

{
                name: 'light',
                min: 0,
                max: 1,
                step: 0.01,
                value: .8
            }
        ]
    },

{
        name: 'cubehelix',
        hasStart: true,
        attr: [{
                name: 'start',
                min: 0,
                max: 360,
                step: 1,
                value: 0
            },

{
                name: 'rotations',
                min: -2,
                max: 2,
                step: 0.01,
                value: -1.5
            },

{
                name: 'hue',
                min: 0,
                max: 1,
                step: 0.01,
                value: 1
            },

{
                name: 'gamma',
                min: 0,
                max: 1,
                step: 0.01,
                value: 1
            },

{
                name: 'lightness min',
                min: 0,
                max: .9,
                step: 0.01,
                value: .2
            },

{
                name: 'lightness max',
                min: .1,
                max: 1,
                step: 0.01,
                value: .8
            }
        ]
    },

{
        name: 'lch',
        hasStart: false,
        attr: [{
                name: 'h',
                min: 0,
                max: 360,
                step: 1,
                value: 20
            },

{
                name: 'l',
                min: 0,
                max: 100,
                step: 1,
                value: 75
            },

{
                name: 'c',
                min: 0,
                max: 100,
                step: 1,
                value: 100
            }
        ]
    },

{
        name: 'scale',
        hasStart: false,
        attr: [{
                name: 'shift',
                min: 0,
                max: 360,
                step: 1,
                value: 0
            },

{
                name: 'start',
                value: '#72ffd7',
                type: 'color'
            },

{
                name: 'stop',
                value: '#f03b50',
                type: 'color'
            },

{
                name: 'space',
                value: 'lab',
                values: ['lab', 'hsl', 'hsv', 'hsi', 'lch', 'rgb', 'lrgb', 'edg', 'num'],
                type: 'select'
            }
        ]
    }
];

var palette = new Vue({
    el: '.js-palette',
    data: {
        activeColor: 0,
        rawcolors: [],
        startColor: null,
        maxColors: 16,
        colorsLimit: 33,
        currentSpace: 'HSLuvP',
        spaces: colorSpaces
    },

computed: {
        colors: {
            get: function get() {
                return this.rawcolors;
            },
            set: function set(colors) {
                var currentSpace = this.currentSpace;
                this.rawcolors = colors.map(function(color) {
                    var colorConvArgs = color;
                    colorConvArgs.unshift(currentSpace);
                    return colorConv.apply(null, colorConvArgs);
                });
            }
        },

currentSettings: function currentSettings() {
            var _this = this;
            return this.spaces.find(function(space) {
                return _this.currentSpace == space.name || space.name.indexOf(_this.currentSpace) !== -1;
            });
        },
        spacesList: function spacesList() {
            var list = [];
            this.spaces.forEach(function(space) {
                list = list.concat(typeof space.name === 'string' ? [space.name] : space.name);
            });
            return list;
        }
    },

methods: {
        updatePalette: function updatePalette() {
            var _this2 = this;
            var colors = [];
            var currentSpace = this.currentSpace;
            var systemData = this.currentSettings;
            var _loop = function _loop(
                i) {
                var color = [(i / _this2.maxColors * 360 + systemData.attr[0].value) % 360];
                systemData.attr.forEach(function(attr, i) {
                    if (i)
                        color.push(attr.value);
                });
                colors.push(color);
            };
            for (var i = 0; i < this.maxColors; i++) {
                _loop(i);
            }
            this.colors = colors;
            currentColor.total = colors.length;
            currentColor.index = colors.length - 1;
        }
    }
});

palette.updatePalette();

编译

CSS

@import "https://fonts.googleapis.com/css?family=Inconsolata";
body,
html {
    font-family: "Inconsolata", ipm, Menlo, "Courier New", monospace;
    height: 100%;
    font-size: calc(0.5rem + 1.4vh);
}
.background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    transition: 200ms background-color linear 500ms;
    will-change: background-color;
}
.app-wrap__header {
    padding: 1rem;
}
.app-wrap__title {
    font-size: 2rem;
    margin-bottom: 0.15em;
}
.app-wrap__sub {
    font-family: "Inconsolata", ipm, Menlo, "Courier New", monospace;
}
.fan {
    position: absolute;
    top: 50vh;
    right: 50vw;
    -webkit-perspective: 600;
    perspective: 600;
    transition: 450ms -webkit-transform cubic-bezier(0.37, 0, 0.25, 0.98);
    transition: 450ms transform cubic-bezier(0.37, 0, 0.25, 0.98);
    transition: 450ms transform cubic-bezier(0.37, 0, 0.25, 0.98), 450ms -webkit-transform cubic-bezier(0.37, 0, 0.25, 0.98);
}
.blade {
    position: absolute;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 40vh;
    width: 10vh;
    top: -40vh;
    left: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 0 15px rgba(33, 33, 33, 0.1);
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
    -webkit-transform-origin: 1vh 39vh;
    transform-origin: 1vh 39vh;
    border-radius: .5vh;
    overflow: hidden;
    transition: 200ms 200ms transform ease-in-out;
    transition: 200ms 200ms transform cubic-bezier(0.25, 0.25, 0.275, 1.265);
}
.blade__label,
.blade__value {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1vh;
    line-height: 1.2;
}
.blade__label {
    color: #fff;
    font-size: 1.6vh;
    padding-top: .75vh;
}
.blade__label--inner {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
.blade__value {
    font-size: 1.8vh;
    font-weight: 500;
    line-height: .75;
    text-transform: uppercase;
    background: #fff;
    color: currentColor;
}
.settings,
.settings-background {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    width: 250px;
    -webkit-transform: translateZ(1000px);
    transform: translateZ(1000px);
}
.settings {
    box-sizing: border-box;
    padding: 1rem;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: -1px 0 0 rgba(33, 33, 33, 0.1);
    overflow: auto;
}
.settings__entry {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.settings__label {
    flex-grow: 1;
    width: 80%;
    flex-basis: 80%;
    font-size: 1rem;
    margin-bottom: .5rem;
}
.settings__input {
    width: 70%;
}
.settings__value {
    font-family: "Inconsolata", ipm, Menlo, "Courier New", monospace;
    font-size: 0.8rem;
    text-align: right;
    width: 20%;
}
.settings-background {
    pointer-events: none;
    -webkit-transform: translateZ(999px);
    transform: translateZ(999px);
    -webkit-filter: blur(4px);
    filter: blur(4px);
    overflow: hidden;
}
.settings-background .blade {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}
input {
    background-color: transparent;
}
input[type=range],
input[type=color] {
    -webkit-appearance: none;
    width: 100%;
}
input[type=range] {
    margin: 0 0 0.5rem 0;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-thumb {
    -webkit-clip-path: polygon(100% 0%, 0% 0%, 50% 100%, 50% 100%);
    clip-path: polygon(100% 0%, 0% 0%, 50% 100%, 50% 100%);
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 1rem;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    color: transparent;
    border-radius: 0;
    border: solid #212121;
    border-width: 0 0 1px;
}
input[type=range]::-webkit-slider-thumb {
    border: 2px solid transparent;
    height: .75rem;
    width: .5rem;
    border-radius: 0;
    background: #212121;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: 0.25rem;
    transition: 150ms background-color, 200ms clip-path, 200ms -webkit-clip-path;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
input[type=range]::-moz-range-track {
    width: 100%;
    height: 1rem;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    color: transparent;
    border-radius: 0;
    border: solid #212121;
    border-width: 0 0 1px;
}
input[type=range]::-moz-range-thumb {
    border: 2px solid transparent;
    height: .75rem;
    width: .5rem;
    border-radius: 0;
    background: #212121;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: 0.25rem;
    transition: 150ms background-color, 200ms clip-path, 200ms -webkit-clip-path;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
input[type=range]::-ms-track {
    width: 100%;
    height: 1rem;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    color: transparent;
    border-radius: 0;
    border: solid #212121;
    border-width: 0 0 1px;
}
input[type=range]::-ms-fill-lower {
    background: #212121;
    border: none;
    border-radius: 100%;
}
input[type=range]::-ms-fill-upper {
    background: #212121;
    border-radius: 100%;
    box-shadow: none;
}
input[type=range]::-ms-thumb {
    border: 2px solid transparent;
    height: .75rem;
    width: .5rem;
    border-radius: 0;
    background: #212121;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: 0.25rem;
    transition: 150ms background-color, 200ms clip-path, 200ms -webkit-clip-path;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
select {
    font-family: "Inconsolata", ipm, Menlo, "Courier New", monospace;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.8rem;
    -webkit-appearance: none;
    border: 0;
    box-shadow: 0 1px 0 0 #212121;
    border-radius: 0;
    padding: 0.25rem 1rem 0.25rem 0.25rem;
    background-color: transparent;
    background-size: auto 40%;
    background-repeat: no-repeat;
    background-position: 98% 50%;
    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%20%3C%21--%20Generator%3A%20IcoMoon.io%20--%3E%20%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%20%3Csvg%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M%2096.00%2C96.00l-96.00%2C96.00l%20256.00%2C256.00l%20256.00-256.00l-96.00-96.00L%20256.00%2C256.00L%2096.00%2C96.00z%22%20%3E%3C/path%3E%3C/svg%3E");
    transition: 150ms background-color;
}
select:focus {
    outline: none;
    background-color: white;
}

HTML

<div class="js-colors">
    <div class="js-palette">
        <app-wrap title="Color Wheel" value="#ffffff">
            <div class="settings-background">
                <fan :colors="colors"></fan>
            </div>
            <div class="settings">
                <label class="settings__entry">
                    <h3 class="settings__label">Method</h3>
                    <select v-model="currentSpace" v-on:change="updatePalette">
                        <option v-for="space in spacesList" value="{{space}}">{{space}}</option>
                    </select>
                </label>
                <div>
                    <label class="settings__entry">
                        <h3 class="settings__label">colors</h3><span class="settings__value">{{maxColors}}</span>
                        <input class="settings__input" type="range" min="2" v-bind:max="colorsLimit" step="1" v-bind:value="maxColors" v-model="maxColors" v-on:input="updatePalette" />
                    </label>
                    <label class="settings__entry" v-for="attr in currentSettings.attr">
                        <h3 class="settings__label">{{attr.name}}</h3><span class="settings__value">{{attr.value}}</span>
                        <template v-if="attr.type == &quot;color&quot;">
                            <input class="settings__input" type="color" v-bind:value="attr.value" v-on:input="updatePalette" v-model="attr.value" />
                        </template>
                        <template v-if="attr.type == &quot;select&quot;">
                            <select type="{{attr.type}}" v-bind:value="attr.value" v-on:change="updatePalette" v-model="attr.value">
                                <option v-for="val in attr.values" value="{{val}}">{{val}}</option>
                            </select>
                        </template>
                        <template v-if="!attr.type">
                            <input class="settings__input" type="range" v-bind:min="attr.min" v-bind:max="attr.max" v-bind:step="attr.step" v-bind:value="attr.value" v-model="attr.value" v-on:input="updatePalette" />
                        </template>
                    </label>
                    <label class="settings__entry" v-if="space.hasStart">
                        <h3 class="settings__label">start color</h3>
                        <input class="settings__input" type="text" placeholder="HEX, RGB, HSL, Name, HSV etc.." v-on:change="updatePalette" />
                    </label>
                </div>
            </div>
            <fan :colors="colors"></fan>
        </app-wrap>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script src="/uploads/1908/chroma.min.js"></script>
<script src="/uploads/1908/nearestColor.js"></script>
<script src="/uploads/1908/getclosestcolor.js"></script>
<script src="/uploads/1908/hsluv.min.js"></script>

cards for color harmonies，可以在线调节光照、饱和度、颜色等参数。包含每个颜色的英文名称。

vue.js, color, card

编辑器支持Emmet

快捷键

cards for color harmonies，可以在线调节光照、饱和度、颜色等参数。包含每个颜色的英文名称。

vue.js, color, card

使用VueJS和ThreeJS构建的SomaFM电台音乐播放器

VueJS十六进制颜色值所组成的旋转密码锁动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：