颜色名称 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>https://codepen.io/jotavejv/pen/wezbwy</title> <style type="text/css"> /*CSS from PaletteJS*/ .example { max-width: 700px; margin: 0 auto; } </style> </head> <body> <div class="example"></div> </body>  <script type="text/javascript" src="https://cdn.rawgit.com/jotavejv/palette-js/d482cf3/dist/palette.min.js"></script> <script type="text/javascript"> "use strict"; //https://github.com/jotavejv/palette-js var colors = ["aquamarine", "pink", "darkturquoise", "steelblue", "cadetblue", "lightblue", "lightsalmon", "teal", "darkseagreen", "khaki", "lightcoral", "lightgray", "coral", "slategray", "gray", "lightseagreen"]; palette(colors, document.querySelector('.example')); </script> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*@import url(https://fonts.googleapis.com/css?family=Raleway); @import url(https://fonts.googleapis.com/css?family=Inconsolata);*/ * { box-sizing: border-box; } body { margin: 0; font-family: Raleway; font-size: 1.3rem; line-height: 1.7; } #colorlist { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-align-content: flex-end; -ms-flex-line-pack: end; align-content: flex-end; } #colorlist div { padding: 3rem 1rem; text-align: center; -webkit-box-flex: 0; -webkit-flex: 0 0 10%; -ms-flex: 0 0 10%; flex: 0 0 10%; } #colorlist div span { display: block; font-family: Inconsolata; font-size: 1.2rem; } @media all and (max-width: 2388px) { #colorlist div { -webkit-box-flex: 0; -webkit-flex: 0 0 11.111111111%; -ms-flex: 0 0 11.111111111%; flex: 0 0 11.111111111%; } } @media all and (max-width: 2388px) { #colorlist div { -webkit-box-flex: 0; -webkit-flex: 0 0 12.5%; -ms-flex: 0 0 12.5%; flex: 0 0 12.5%; } #colorlist div:nth-last-child(-n+5) { -webkit-box-flex: 0; -webkit-flex: 0 0 20%; -ms-flex: 0 0 20%; flex: 0 0 20%; } } @media all and (max-width: 1915px) { #colorlist div, #colorlist div:nth-last-child(-n+5) { -webkit-box-flex: 0; -webkit-flex: 0 0 14.285714286%; -ms-flex: 0 0 14.285714286%; flex: 0 0 14.285714286%; } #colorlist div:nth-last-child(-n+2) { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; } } @media all and (max-width: 1680px) { #colorlist div { -webkit-box-flex: 0; -webkit-flex: 0 0 16.666666667%; -ms-flex: 0 0 16.666666667%; flex: 0 0 16.666666667%; } #colorlist div:nth-last-child(-n+5) { -webkit-box-flex: 0; -webkit-flex: 0 0 20%; -ms-flex: 0 0 20%; flex: 0 0 20%; } } @media all and (max-width: 1444px) { #colorlist div, #colorlist div:nth-last-child(-n+5) { -webkit-box-flex: 0; -webkit-flex: 0 0 20%; -ms-flex: 0 0 20%; flex: 0 0 20%; } #colorlist div:nth-last-child(-n+4) { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; } } @media all and (max-width: 1200px) { #colorlist div:nth-last-child(-n+4) { -webkit-box-flex: 0; -webkit-flex: 0 0 20%; -ms-flex: 0 0 20%; flex: 0 0 20%; } } @media all and (max-width: 1155px) { #colorlist div:nth-last-child(-n+2) { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; } } @media all and (max-width: 1100px) { #colorlist div, #colorlist div:nth-last-child(-n+5) { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; } #colorlist div:last-child { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; } } @media all and (max-width: 965px) { #colorlist div, #colorlist div:nth-last-child(-n+5) { -webkit-box-flex: 0; -webkit-flex: 0 0 33.333333%; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; } #colorlist div:nth-last-child(-n+2) { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; } } @media all and (max-width: 726px) { #colorlist div:nth-last-child(-n+3) { -webkit-box-flex: 0; -webkit-flex: 0 0 33.333333%; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; } } @media all and (max-width: 700px) { #colorlist div, #colorlist div:nth-last-child(-n+5) { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; } #colorlist div:last-child { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; } } @media all and (max-width: 490px) { #colorlist div, #colorlist div:nth-last-child(-n+5) { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; } } </style> </head> <body> <div id="colorlist"></div> </body>  <script type="text/javascript"> var cssColors = { "aliceblue": "#f0f8ff", "antiquewhite": "#faebd7", "aqua": "#00ffff", "aquamarine": "#7fffd4", "azure": "#f0ffff", "beige": "#f5f5dc", "bisque": "#ffe4c4", "black": "#000000", "blanchedalmond": "#ffebcd", "blue": "#0000ff", "blueviolet": "#8a2be2", "brown": "#a52a2a", "burlywood": "#deb887", "cadetblue": "#5f9ea0", "chartreuse": "#7fff00", "chocolate": "#d2691e", "coral": "#ff7f50", "cornflowerblue": "#6495ed", "cornsilk": "#fff8dc", "crimson": "#dc143c", "cyan": "#00ffff", "darkblue": "#00008b", "darkcyan": "#008b8b", "darkgoldenrod": "#b8860b", "darkgray": "#a9a9a9", "darkgreen": "#006400", "darkgrey": "#a9a9a9", "darkkhaki": "#bdb76b", "darkmagenta": "#8b008b", "darkolivegreen": "#556b2f", "darkorange": "#ff8c00", "darkorchid": "#9932cc", "darkred": "#8b0000", "darksalmon": "#e9967a", "darkseagreen": "#8fbc8f", "darkslateblue": "#483d8b", "darkslategray": "#2f4f4f", "darkslategrey": "#2f4f4f", "darkturquoise": "#00ced1", "darkviolet": "#9400d3", "deeppink": "#ff1493", "deepskyblue": "#00bfff", "dimgray": "#696969", "dimgrey": "#696969", "dodgerblue": "#1e90ff", "firebrick": "#b22222", "floralwhite": "#fffaf0", "forestgreen": "#228b22", "fuchsia": "#ff00ff", "gainsboro": "#dcdcdc", "ghostwhite": "#f8f8ff", "gold": "#ffd700", "goldenrod": "#daa520", "gray": "#808080", "green": "#008000", "greenyellow": "#adff2f", "grey": "#808080", "honeydew": "#f0fff0", "hotpink": "#ff69b4", "indianred": "#cd5c5c", "indigo": "#4b0082", "ivory": "#fffff0", "khaki": "#f0e68c", "lavender": "#e6e6fa", "lavenderblush": "#fff0f5", "lawngreen": "#7cfc00", "lemonchiffon": "#fffacd", "lightblue": "#add8e6", "lightcoral": "#f08080", "lightcyan": "#e0ffff", "lightgoldenrodyellow": "#fafad2", "lightgray": "#d3d3d3", "lightgreen": "#90ee90", "lightgrey": "#d3d3d3", "lightpink": "#ffb6c1", "lightsalmon": "#ffa07a", "lightseagreen": "#20b2aa", "lightskyblue": "#87cefa", "lightslategray": "#778899", "lightslategrey": "#778899", "lightsteelblue": "#b0c4de", "lightyellow": "#ffffe0", "lime": "#00ff00", "limegreen": "#32cd32", "linen": "#faf0e6", "magenta": "#ff00ff", "maroon": "#800000", "mediumaquamarine": "#66cdaa", "mediumblue": "#0000cd", "mediumorchid": "#ba55d3", "mediumpurple": "#9370db", "mediumseagreen": "#3cb371", "mediumslateblue": "#7b68ee", "mediumspringgreen": "#00fa9a", "mediumturquoise": "#48d1cc", "mediumvioletred": "#c71585", "midnightblue": "#191970", "mintcream": "#f5fffa", "mistyrose": "#ffe4e1", "moccasin": "#ffe4b5", "navajowhite": "#ffdead", "navy": "#000080", "oldlace": "#fdf5e6", "olive": "#808000", "olivedrab": "#6b8e23", "orange": "#ffa500", "orangered": "#ff4500", "orchid": "#da70d6", "palegoldenrod": "#eee8aa", "palegreen": "#98fb98", "paleturquoise": "#afeeee", "palevioletred": "#db7093", "papayawhip": "#ffefd5", "peachpuff": "#ffdab9", "peru": "#cd853f", "pink": "#ffc0cb", "plum": "#dda0dd", "powderblue": "#b0e0e6", "purple": "#800080", "rebeccapurple": "#663399", "red": "#ff0000", "rosybrown": "#bc8f8f", "royalblue": "#4169e1", "saddlebrown": "#8b4513", "salmon": "#fa8072", "sandybrown": "#f4a460", "seagreen": "#2e8b57", "seashell": "#fff5ee", "sienna": "#a0522d", "silver": "#c0c0c0", "skyblue": "#87ceeb", "slateblue": "#6a5acd", "slategray": "#708090", "slategrey": "#708090", "snow": "#fffafa", "springgreen": "#00ff7f", "steelblue": "#4682b4", "tan": "#d2b48c", "teal": "#008080", "thistle": "#d8bfd8", "tomato": "#ff6347", "transparent": "#00000000", "turquoise": "#40e0d0", "violet": "#ee82ee", "wheat": "#f5deb3", "white": "#ffffff", "whitesmoke": "#f5f5f5", "yellow": "#ffff00", "yellowgreen": "#9acd32" } function convertAndContrast(hex) { var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); if (result !== null) { var r = parseInt(result[1], 16), g = parseInt(result[2], 16), b = parseInt(result[3], 16); luminosity = 0.2126 * Math.pow((r/255),gamma) + 0.7152 * Math.pow((g/255),gamma) + 0.0722 * Math.pow((b/255), gamma); return luminosity; } } var colorlist = document.getElementById("colorlist"); for (var key in cssColors) { if (cssColors.hasOwnProperty(key)) { var colorName = key, colorHex = cssColors[key], gamma = 2.2, contrastRatio = "", luminosity = convertAndContrast(colorHex); if (luminosity < 0.3) { contrastRatio = ";color:#fff"; } colorlist.insertAdjacentHTML("beforeend", "<div style=background-color:"+colorName + contrastRatio + ">"+colorName+"<span>"+colorHex+"</span></div>"); } } </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 颜色名称