/* CSS */
.btn {
position: relative;
display: inline-block;
margin: 5px;
height: 100px;
width: 100px;
border-radius: 100%;
opacity: 0;
transform: scale(0.5);
transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.btn:hover {
transform: scale(1.3);
}
.btn:active {
transform: scale(1.1);
}
.animate {
transform: scale(1);
opacity: 1;
}
.back:before {
content: '';
position: absolute;
border: 2px solid white;
transform: rotate(45deg);
border-right: none;
border-top: none;
height: 10px;
width: 10px;
left: 45px;
top: 48px;
}
.close:before {
content: '';
position: absolute;
left: 16px;
top: 16px;
}
.picker {
animation: picker 0.3s forwards;
}
.picker:before {
content: '';
position: absolute;
border: 3px solid white;
height: 60px;
width: 60px;
border-radius: 100%;
left: 20px;
top: 21px;
}
<!---HTML--->
<div class="container cards-container-picker">
<div class="columns ">
<div class="column has-text-centered balls">
<div class="content">
<div class="toolbar " style="-webkit-app-region: drag"></div>
<div class="colors "></div>
<div class="picker-colors"></div>
</div>
</div>
</div>
</div>
// JS
var material = {
"colors": [{
"color": "red",
"palette": [
"#FFEBEE",
"#FFCDD2",
"#EF9A9A",
"#E57373",
"#EF5350",
"#F44336",
"#E53935",
"#D32F2F",
"#C62828",
"#B71C1C",
"#FF8A80",
"#FF5252",
"#FF1744",
"#D50000",
"#000000"
]
},
{
"color": "pink",
"palette": [
"#FCE4EC",
"#F8BBD0",
"#F48FB1",
"#F06292",
"#EC407A",
"#E91E63",
"#D81B60",
"#C2185B",
"#AD1457",
"#880E4F",
"#FF80AB",
"#FF4081",
"#F50057",
"#C51162",
"#000000"
]
},
{
"color": "purple",
"palette": [
"#F3E5F5",
"#E1BEE7",
"#CE93D8",
"#BA68C8",
"#AB47BC",
"#9C27B0",
"#8E24AA",
"#7B1FA2",
"#6A1B9A",
"#4A148C",
"#EA80FC",
"#E040FB",
"#D500F9",
"#AA00FF",
"#000000"
]
},
{
"color": "deeppurple",
"palette": [
"#EDE7F6",
"#D1C4E9",
"#B39DDB",
"#9575CD",
"#7E57C2",
"#673AB7",
"#5E35B1",
"#512DA8",
"#4527A0",
"#311B92",
"#B388FF",
"#7C4DFF",
"#651FFF",
"#6200EA",
"#000000"
]
},
{
"color": "indigo",
"palette": [
"#E8EAF6",
"#C5CAE9",
"#9FA8DA",
"#7986CB",
"#5C6BC0",
"#3F51B5",
"#3949AB",
"#303F9F",
"#283593",
"#1A237E",
"#8C9EFF",
"#536DFE",
"#3D5AFE",
"#304FFE",
"#000000"
]
},
{
"color": "blue",
"palette": [
"#E3F2FD",
"#BBDEFB",
"#90CAF9",
"#64B5F6",
"#42A5F5",
"#2196F3",
"#1E88E5",
"#1976D2",
"#1565C0",
"#0D47A1",
"#82B1FF",
"#448AFF",
"#2979FF",
"#2962FF",
"#000000"
]
},
{
"color": "lightblue",
"palette": [
"#E1F5FE",
"#B3E5FC",
"#81D4FA",
"#4FC3F7",
"#29B6F6",
"#03A9F4",
"#039BE5",
"#0288D1",
"#0277BD",
"#01579B",
"#80D8FF",
"#40C4FF",
"#00B0FF",
"#0091EA",
"#000000"
]
},
{
"color": "cyan",
"palette": [
"#E0F7FA",
"#B2EBF2",
"#80DEEA",
"#4DD0E1",
"#26C6DA",
"#00BCD4",
"#00ACC1",
"#0097A7",
"#00838F",
"#006064",
"#84FFFF",
"#18FFFF",
"#00E5FF",
"#00B8D4",
"#000000"
]
},
{
"color": "teal",
"palette": [
"#E0F2F1",
"#B2DFDB",
"#80CBC4",
"#4DB6AC",
"#26A69A",
"#009688",
"#00897B",
"#00796B",
"#00695C",
"#004D40",
"#A7FFEB",
"#64FFDA",
"#1DE9B6",
"#00BFA5",
"#000000"
]
},
{
"color": "green",
"palette": [
"#E8F5E9",
"#C8E6C9",
"#A5D6A7",
"#81C784",
"#66BB6A",
"#4CAF50",
"#43A047",
"#388E3C",
"#2E7D32",
"#1B5E20",
"#B9F6CA",
"#69F0AE",
"#00E676",
"#00C853",
"#000000"
]
},
{
"color": "lightgreen",
"palette": [
"#F1F8E9",
"#DCEDC8",
"#C5E1A5",
"#AED581",
"#9CCC65",
"#8BC34A",
"#7CB342",
"#689F38",
"#558B2F",
"#33691E",
"#CCFF90",
"#B2FF59",
"#76FF03",
"#64DD17",
"#000000"
]
},
{
"color": "lime",
"palette": [
"#F9FBE7",
"#F0F4C3",
"#E6EE9C",
"#DCE775",
"#D4E157",
"#CDDC39",
"#C0CA33",
"#AFB42B",
"#9E9D24",
"#827717",
"#F4FF81",
"#EEFF41",
"#C6FF00",
"#AEEA00",
"#000000"
]
},
{
"color": "yellow",
"palette": [
"#FFFDE7",
"#FFF9C4",
"#FFF59D",
"#FFF176",
"#FFEE58",
"#FFEB3B",
"#FDD835",
"#FBC02D",
"#F9A825",
"#F57F17",
"#FFFF8D",
"#FFFF00",
"#FFEA00",
"#FFD600",
"#000000"
]
},
{
"color": "amber",
"palette": [
"#FFF8E1",
"#FFECB3",
"#FFE082",
"#FFD54F",
"#FFCA28",
"#FFC107",
"#FFB300",
"#FFA000",
"#FF8F00",
"#FF6F00",
"#FFE57F",
"#FFD740",
"#FFC400",
"#FFAB00",
"#000000"
]
},
{
"color": "orange",
"palette": [
"#FFF3E0",
"#FFE0B2",
"#FFCC80",
"#FFB74D",
"#FFA726",
"#FF9800",
"#FB8C00",
"#F57C00",
"#EF6C00",
"#E65100",
"#FFD180",
"#FFAB40",
"#FF9100",
"#FF6D00",
"#000000"
]
},
{
"color": "deeporange",
"palette": [
"#FBE9E7",
"#FFCCBC",
"#FFAB91",
"#FF8A65",
"#FF7043",
"#FF5722",
"#F4511E",
"#E64A19",
"#D84315",
"#BF360C",
"#FF9E80",
"#FF6E40",
"#FF3D00",
"#DD2C00",
"#000000"
]
},
{
"color": "brown",
"palette": [
"#EFEBE9",
"#D7CCC8",
"#BCAAA4",
"#A1887F",
"#8D6E63",
"#795548",
"#6D4C41",
"#5D4037",
"#4E342E",
"#3E2723",
"#000000"
]
},
{
"color": "grey",
"palette": [
"#FAFAFA",
"#F5F5F5",
"#EEEEEE",
"#E0E0E0",
"#BDBDBD",
"#9E9E9E",
"#757575",
"#616161",
"#424242",
"#212121",
"#000000"
]
},
{
"color": "bluegrey",
"palette": [
"#ECEFF1",
"#CFD8DC",
"#B0BEC5",
"#90A4AE",
"#78909C",
"#607D8B",
"#546E7A",
"#455A64",
"#37474F",
"#263238",
"#000000"
]
},
{
"color": "black",
"palette": [
"#000000"
]
}
]
};
var hexToRgb = function (hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? 'rgb(' + parseInt(result[1], 16) + ', ' + parseInt(result[2], 16) + ', ' + parseInt(result[3], 16) + ')' : null;
}
var copyToClipboard = function (el) {
var temp = $('<input>');
var color = el.data('color');
var setColor;
var key = window.event;
if (key.shiftKey) {
setColor = hexToRgb(color);
} else if (key.ctrlKey) {
setColor = color;
} else {
setColor = color.replace('#', '');
}
$('body').append(temp);
temp.val(setColor).select();
document.execCommand("copy");
temp.remove();
}
var colors = $('.colors');
var pickerColors = $('.picker-colors');
var fillColors = function () {
var color;
pickerColors.empty();
$.each(material.colors, function (i, item) {
colors.append($('<div class="btn color"></div>'));
color = $('.btn');
color.eq(i).css('background', item.palette[i == 19 ? 0 : 5]);
setTimeout(function () {
color.eq(i).addClass('animate');
}, i * 10);
});
color.click(function () {
var index = color.index(this);
fillPickerColors(index);
});
color.last().remove();
// color.last().addClass('close').click(function(){
// window.close();
// });
}
var fillPickerColors = function (ref) {
var pickerColor;
colors.empty();
$.each(material.colors[ref].palette, function (i, color) {
pickerColors.append($('<div class="btn picker-color"></div>'));
pickerColor = $('.btn');
pickerColor.eq(i).css('background', color).data('color', color);
setTimeout(function () {
pickerColor.eq(i).addClass('animate');
}, i * 10);
});
pickerColor.click(function () {
pickerColor.removeClass('picker');
$(this).addClass('picker');
copyToClipboard($(this));
});
pickerColor.last().addClass('back').click(function () {
fillColors();
});
}
fillColors(); // init