Skip to content
GitLab
Commit fa2e88bf authored by Franjo Lukezic's avatar Franjo Lukezic
Browse files

Initial commit

parent ae0cae75
Expand all Hide whitespace changes
Inline Side-by-side
LICENSE 0 → 100644
View file @ fa2e88bf
This diff is collapsed.
README.md
View file @ fa2e88bf
# Css Colors
# CSS Colors
Simple tool for copying CSS colors as HEX.
Checkout the [demo](https://barefootstache.github.io/css-colors/).
colors.js 0 → 100644
View file @ fa2e88bf
function readTextFile(file, callback) {
const rawFile = new XMLHttpRequest();
rawFile.overrideMimeType("application/json");
rawFile.open("GET", file, true);
rawFile.onreadystatechange = function() {
if (rawFile.readyState === 4 && rawFile.status == "200") {
callback(rawFile.responseText);
}
}
rawFile.send(null);
}
//usage:
readTextFile("./colors.json", function(text){
const data = JSON.parse(text).list;
let grid = ''
for (let ii = 0; ii < data.length; ii++) {
const cc = data[ii];
grid += `<div class="cell ${cc.isDark ? 'white' : ''}" style="background-color:${cc.name.toLowerCase()}" onclick="copyText('${cc.hex}')">
<p class="name">${cc.name}</p>
<p class="hex">${cc.hex}</p>
</div>`
}
document.getElementById('container').innerHTML = grid;
});
function copyText(text) {
navigator.clipboard.writeText(text);
}
\ No newline at end of file
colors.json 0 → 100644
View file @ fa2e88bf
{
"list": [
{
"name": "AliceBlue",
"hex": "#F0F8FF"
},
{
"name": "AntiqueWhite",
"hex": "#FAEBD7"
},
{
"name": "Aqua",
"hex": "#00FFFF"
},
{
"name": "Aquamarine",
"hex": "#7FFFD4"
},
{
"name": "Azure",
"hex": "#F0FFFF"
},
{
"name": "Beige",
"hex": "#F5F5DC"
},
{
"name": "Bisque",
"hex": "#FFE4C4"
},
{
"name": "Black",
"hex": "#000000",
"isDark":true
},
{
"name": "BlanchedAlmond",
"hex": "#FFEBCD"
},
{
"name": "Blue",
"hex": "#0000FF",
"isDark":true
},
{
"name": "BlueViolet",
"hex": "#8A2BE2",
"isDark":true
},
{
"name": "Brown",
"hex": "#A52A2A",
"isDark":true
},
{
"name": "BurlyWood",
"hex": "#DEB887"
},
{
"name": "CadetBlue",
"hex": "#5F9EA0"
},
{
"name": "Chartreuse",
"hex": "#7FFF00"
},
{
"name": "Chocolate",
"hex": "#D2691E"
},
{
"name": "Coral",
"hex": "#FF7F50"
},
{
"name": "CornflowerBlue",
"hex": "#6495ED"
},
{
"name": "Cornsilk",
"hex": "#FFF8DC"
},
{
"name": "Crimson",
"hex": "#DC143C"
},
{
"name": "Cyan",
"hex": "#00FFFF"
},
{
"name": "DarkBlue",
"hex": "#00008B",
"isDark":true
},
{
"name": "DarkCyan",
"hex": "#008B8B",
"isDark":true
},
{
"name": "DarkGoldenRod",
"hex": "#B8860B",
"isDark":true
},
{
"name": "DarkGray",
"hex": "#A9A9A9",
"isDark":true
},
{
"name": "DarkGreen",
"hex": "#006400",
"isDark":true
},
{
"name": "DarkKhaki",
"hex": "#BDB76B",
"isDark":true
},
{
"name": "DarkMagenta",
"hex": "#8B008B",
"isDark":true
},
{
"name": "DarkOliveGreen",
"hex": "#556B2F",
"isDark":true
},
{
"name": "DarkOrange",
"hex": "#FF8C00",
"isDark":true
},
{
"name": "DarkOrchid",
"hex": "#9932CC",
"isDark":true
},
{
"name": "DarkRed",
"hex": "#8B0000",
"isDark":true
},
{
"name": "DarkSalmon",
"hex": "#E9967A",
"isDark":true
},
{
"name": "DarkSeaGreen",
"hex": "#8FBC8F",
"isDark":true
},
{
"name": "DarkSlateBlue",
"hex": "#483D8B",
"isDark":true
},
{
"name": "DarkSlateGray",
"hex": "#2F4F4F",
"isDark":true
},
{
"name": "DarkTurquoise",
"hex": "#00CED1",
"isDark":true
},
{
"name": "DarkViolet",
"hex": "#9400D3",
"isDark":true
},
{
"name": "DeepPink",
"hex": "#FF1493"
},
{
"name": "DeepSkyBlue",
"hex": "#00BFFF"
},
{
"name": "DimGray",
"hex": "#696969",
"isDark":true
},
{
"name": "DodgerBlue",
"hex": "#1E90FF",
"isDark":true
},
{
"name": "FireBrick",
"hex": "#B22222",
"isDark":true
},
{
"name": "FloralWhite",
"hex": "#FFFAF0"
},
{
"name": "ForestGreen",
"hex": "#228B22",
"isDark":true
},
{
"name": "Fuchsia",
"hex": "#FF00FF"
},
{
"name": "Gainsboro",
"hex": "#DCDCDC"
},
{
"name": "GhostWhite",
"hex": "#F8F8FF"
},
{
"name": "Gold",
"hex": "#FFD700"
},
{
"name": "GoldenRod",
"hex": "#DAA520"
},
{
"name": "Gray",
"hex": "#808080",
"isDark":true
},
{
"name": "Green",
"hex": "#008000",
"isDark":true
},
{
"name": "GreenYellow",
"hex": "#ADFF2F"
},
{
"name": "HoneyDew",
"hex": "#F0FFF0"
},
{
"name": "HotPink",
"hex": "#FF69B4"
},
{
"name": "IndianRed",
"hex": "#CD5C5C",
"isDark":true
},
{
"name": "Indigo",
"hex": "#4B0082",
"isDark":true
},
{
"name": "Ivory",
"hex": "#FFFFF0"
},
{
"name": "Khaki",
"hex": "#F0E68C"
},
{
"name": "Lavender",
"hex": "#E6E6FA"
},
{
"name": "LavenderBlush",
"hex": "#FFF0F5"
},
{
"name": "LawnGreen",
"hex": "#7CFC00"
},
{
"name": "LemonChiffon",
"hex": "#FFFACD"
},
{
"name": "LightBlue",
"hex": "#ADD8E6"
},
{
"name": "LightCoral",
"hex": "#F08080"
},
{
"name": "LightCyan",
"hex": "#E0FFFF"
},
{
"name": "LightGoldenRodYellow",
"hex": "#FAFAD2"
},
{
"name": "LightGray",
"hex": "#D3D3D3"
},
{
"name": "LightGreen",
"hex": "#90EE90"
},
{
"name": "LightPink",
"hex": "#FFB6C1"
},
{
"name": "LightSalmon",
"hex": "#FFA07A"
},
{
"name": "LightSeaGreen",
"hex": "#20B2AA"
},
{
"name": "LightSkyBlue",
"hex": "#87CEFA"
},
{
"name": "LightSlateGray",
"hex": "#778899"
},
{
"name": "LightSteelBlue",
"hex": "#B0C4DE"
},
{
"name": "LightYellow",
"hex": "#FFFFE0"
},
{
"name": "Lime",
"hex": "#00FF00"
},
{
"name": "LimeGreen",
"hex": "#32CD32"
},
{
"name": "Linen",
"hex": "#FAF0E6"
},
{
"name": "Magenta",
"hex": "#FF00FF"
},
{
"name": "Maroon",
"hex": "#800000"
},
{
"name": "MediumAquaMarine",
"hex": "#66CDAA"
},
{
"name": "MediumBlue",
"hex": "#0000CD",
"isDark":true
},
{
"name": "MediumOrchid",
"hex": "#BA55D3",
"isDark":true
},
{
"name": "MediumPurple",
"hex": "#9370DB",
"isDark":true
},
{
"name": "MediumSeaGreen",
"hex": "#3CB371",
"isDark":true
},
{
"name": "MediumSlateBlue",
"hex": "#7B68EE",
"isDark":true
},
{
"name": "MediumSpringGreen",
"hex": "#00FA9A",
"isDark":true
},
{
"name": "MediumTurquoise",
"hex": "#48D1CC",
"isDark":true
},
{
"name": "MediumVioletRed",
"hex": "#C71585",
"isDark":true
},
{
"name": "MidnightBlue",
"hex": "#191970",
"isDark":true
},
{
"name": "MintCream",
"hex": "#F5FFFA"
},
{
"name": "MistyRose",
"hex": "#FFE4E1"
},
{
"name": "Moccasin",
"hex": "#FFE4B5"
},
{
"name": "NavajoWhite",
"hex": "#FFDEAD"
},
{
"name": "Navy",
"hex": "#000080",
"isDark":true
},
{
"name": "OldLace",
"hex": "#FDF5E6"
},
{
"name": "Olive",
"hex": "#808000",
"isDark":true
},
{
"name": "OliveDrab",
"hex": "#6B8E23",
"isDark":true
},
{
"name": "Orange",
"hex": "#FFA500"
},
{
"name": "OrangeRed",
"hex": "#FF4500"
},
{
"name": "Orchid",
"hex": "#DA70D6"
},
{
"name": "PaleGoldenRod",
"hex": "#EEE8AA"
},
{
"name": "PaleGreen",
"hex": "#98FB98"
},
{
"name": "PaleTurquoise",
"hex": "#AFEEEE"
},
{
"name": "PaleVioletRed",
"hex": "#DB7093"
},
{
"name": "PapayaWhip",
"hex": "#FFEFD5"
},
{
"name": "PeachPuff",
"hex": "#FFDAB9"
},
{
"name": "Peru",
"hex": "#CD853F"
},
{
"name": "Pink",
"hex": "#FFC0CB"
},
{
"name": "Plum",
"hex": "#DDA0DD"
},
{
"name": "PowderBlue",
"hex": "#B0E0E6"
},
{
"name": "Purple",
"hex": "#800080",
"isDark":true
},
{
"name": "RebeccaPurple",
"hex": "#663399",
"isDark":true
},
{
"name": "Red",
"hex": "#FF0000"
},
{
"name": "RosyBrown",
"hex": "#BC8F8F"
},
{
"name": "RoyalBlue",
"hex": "#4169E1",
"isDark":true
},
{
"name": "SaddleBrown",
"hex": "#8B4513",
"isDark":true
},
{
"name": "Salmon",
"hex": "#FA8072"
},
{
"name": "SandyBrown",
"hex": "#F4A460"
},
{
"name": "SeaGreen",
"hex": "#2E8B57",
"isDark":true
},
{
"name": "SeaShell",
"hex": "#FFF5EE"
},
{
"name": "Sienna",
"hex": "#A0522D",
"isDark":true
},
{
"name": "Silver",
"hex": "#C0C0C0"
},
{
"name": "SkyBlue",
"hex": "#87CEEB"
},
{
"name": "SlateBlue",
"hex": "#6A5ACD",
"isDark":true
},
{
"name": "SlateGray",
"hex": "#708090",
"isDark":true
},
{
"name": "Snow",
"hex": "#FFFAFA"
},
{
"name": "SpringGreen",
"hex": "#00FF7F"
},
{
"name": "SteelBlue",
"hex": "#4682B4",
"isDark":true
},
{
"name": "Tan",
"hex": "#D2B48C"
},
{
"name": "Teal",
"hex": "#008080",
"isDark":true
},
{
"name": "Thistle",
"hex": "#D8BFD8"
},
{
"name": "Turquoise",