最好的36种颜色搭配集合

The top 36 color sets from Adobe Color CC 设计界面时，颜色搭配效果最好的一系列颜色组合。可以作为Web色彩设计方面的一个参考规范。

ui, color

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

function getKuler(cb) {
    let url = "//gethead.herokuapp.com/public/kuler.json";
    fetch(url)
        .then(response => {
            let {
                status
            } = response;
            if (status !== 200) {
                alert("Could not fetch JSON");
                return;
            }

response.json().then(data => {
                cb(data);
            });
        })
        .catch(function(err) {
            console.log("Fetch Error :-S", err);
        });
}

me.swatches = [];
    forEach(kulerObj.swatches, function(e, i) {
        var alpha = parseInt(Math.random() * 100) / 100;
        alpha = 1;
        var r = parseInt(e.values[0] * 255);
        var g = parseInt(e.values[1] * 255);
        var b = parseInt(e.values[2] * 255);
        var col = "rgba(" + r + "," + g + "," + b + "," + alpha + ")";
        me.swatches.push(col);
        me.css += ".col" + (i + 1) + " { color: " + col + ";}\\n";
        me.css += ".bgCol" + (i + 1) + " { background-color: " + col + ";}\\n";
    });
    return this;
}

function getThemes(noOfSets) {
    getKuler(function(_themes) {
        var themes = _themes.themes.map(theme => {
            return new Kuler(theme);
        });
        window.themes = themes;
        document.querySelector('.loader').classList.add('hidden');
        renderThemes(themes);

});
}

return sHTML;
}

function forEach(domNodes, cb) {
    return Array.prototype.forEach.call(domNodes, function(item, i) {
        cb(item, i);
    });
}

function setCSS(css) {
    if (eleCSS.value.indexOf(css) > -1) return;
    eleUse.classList.add('hasContent');
    eleCSS.value = css + "\n/********/\n" + eleCSS.value;
}

function renderThemes(themes) {
    var kuler = document.querySelector(".kuler");
    var sHTML = "";
    var template = document.querySelector("#template").innerHTML;
    themes.forEach(function(theme) {
        sHTML += parseTemplate(template, theme);
    });
    kuler.innerHTML = sHTML;
}

function toggleHidden(ele) {
    ele.target.classList.toggle('hidden')
}

const eleInfo = document.querySelector('.info'),
    eleUse = document.querySelector('.use'),
    eleCSS = document.querySelector(".css"),
    sets = document.querySelector("#sets"),
    themes = document.querySelector(".themes");
getThemes();

eleCSS.addEventListener('dblclick', toggleHidden)

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,100,800);
* {
    box-sizing: border-box;
}
body {
    font-weight: 100;
    background: #262626;
    box-sizing: border-box;
    font-family: "open sans";
    font-weight: 300;
}
h1 {
    color: rgba(251, 251, 251, 1);
    font-weight: 100;
}
.kuler {
    margin: 0;
    padding: 10px;
    list-style: none;
    display: flex;
    flex-flow: row wrap;
}
.kuler__theme {
    margin: 0;
    padding: 5px 15px 0 5px;
    width: 25%;
}
.kuler__theme:hover {
    background: rgba(0, 0, 0, .4);
}
.kuler__theme__swatches {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.kuler__theme__swatches li {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 18%;
    height: 2em;
    margin: 0 4px 1em 4px;
    border-radius: 4px;
    transition: all .5s;
}
.kuler__theme__swatches li:hover {
    flex-grow: 1;
    border-radius: 2px;
    margin: 0 4px;
    transition: all .25s;
    height: 3em;
}
.kuler__theme__title {
    font-size: .9em;
    font-weight: 400;
}
.kuler__theme__title a {
    text-decoration: none;
    color: white;
    font-weight: 300;
}
.kuler__theme__title button {
    float: left;
    padding: 5px;
    margin-right: 3px;
    cursor: pointer;
    font-size: 10px;
    background: rgb(43, 61, 79);
    border-width: 0;
    color: white;
}
.css {
    font-family: monospace;
    font-size: 20px;
    width: 100%;
    margin: 0;
    padding: 0;
    height: 0;
}
.info {
    color: #eee;
}
.hasContent .info {
    display: none;
}
.hasContent .css {
    height: 200px;
}
button.edit {
    border-width: 0;
    line-height: .95em;
    color: white;
    float: left;
    padding: 6px 5px 4px;
    margin-right: 6px;
    cursor: pointer;
    font-size: .75em;
    background: rgb(43, 61, 79);
    border-width: 0;
    color: white;
}
button.edit:hover,
.kuler__theme__title button:hover {
    background: rgb(51, 119, 219);
    color: yellow;
}
.hidden {
    display: none;
}

HTML

<h1>The top <span id="sets">36</span> color sets from Adobe Color CC (Kuler)</h1>
<div class="use">
    <div class="info">Click on button "css" to get the CSS from a theme. Click the ⚙ to edit the theme on Kuler/Adobe Color CC</div>
    <textarea name="" id="" cols="30" rows="10" class="css"></textarea>
</div>
<ul class="kuler">
</ul>

<div class="loader">
    <div class="blocks">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <h2>Loading...</h2>
</div>

The top 36 color sets from Adobe Color CC 设计界面时，颜色搭配效果最好的一系列颜色组合。可以作为Web色彩设计方面的一个参考规范。

ui, color

编辑器支持Emmet

快捷键

The top 36 color sets from Adobe Color CC 设计界面时，颜色搭配效果最好的一系列颜色组合。可以作为Web色彩设计方面的一个参考规范。

ui, color

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

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：