You can use all named CSS colors in your projects by defining them in CSS or by using them in JavaScript. Below is an example that demonstrates how to apply named CSS colors to elements using both CSS and JavaScript.
HTML:
Create an HTML file and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All Named CSS Colors</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="row">
<table class="table table-bordered" style="width: 50%;">
<thead>
<tr>
<th style="width: 40%;"></th>
<th style="width: 30%;" class="text-center">Name</th>
<th style="width: 30%;" class="text-center">Code</th>
</tr>
</thead>
<tbody class="text-center" id="colorlist"></tbody>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="main.js"></script>
</body>
</html>CSS:
Create a styles.css file and add the following code:
@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;
}
.container {
margin-top: 2.5%;
margin-bottom: 2.5%;
}
th {
background-color: #f5f5f5;
}
#colorlist {
// display: flex;
flex-flow: row wrap;
align-content: flex-end;
}
#colorlist div {
padding: 3rem 1rem;
text-align: center;
flex: 0 0 10%;
}
#colorlist div span {
display: block;
font-family: Inconsolata;
font-size: 1.2rem;
}
@media all and (max-width: 2388px) {
#colorlist div {
flex: 0 0 11.111111111%;
}
}
@media all and (max-width: 2388px) {
#colorlist div {
flex: 0 0 12.5%;
}
#colorlist div:nth-last-child(-n+5) {
flex: 0 0 20%;
}
}
@media all and (max-width: 1915px) {
#colorlist div, #colorlist div:nth-last-child(-n+5) {
flex: 0 0 14.285714286%;
}
#colorlist div:nth-last-child(-n+2) {
flex: 0 0 50%;
}
}
@media all and (max-width: 1680px) {
#colorlist div {
flex: 0 0 16.666666667%;
}
#colorlist div:nth-last-child(-n+5) {
flex: 0 0 20%;
}
}
@media all and (max-width: 1444px) {
#colorlist div, #colorlist div:nth-last-child(-n+5) {
flex: 0 0 20%;
}
#colorlist div:nth-last-child(-n+4) {
flex: 0 0 25%;
}
}
@media all and (max-width: 1200px) {
#colorlist div:nth-last-child(-n+4) {
flex: 0 0 20%;
}
}
@media all and (max-width: 1155px) {
#colorlist div:nth-last-child(-n+2) {
flex: 0 0 50%;
}
}
@media all and (max-width: 1100px) {
#colorlist div, #colorlist div:nth-last-child(-n+5) {
flex: 0 0 25%;
}
#colorlist div:last-child {
flex: 0 0 100%;
}
}
@media all and (max-width: 965px) {
#colorlist div, #colorlist div:nth-last-child(-n+5) {
flex: 0 0 33.333333%;
}
#colorlist div:nth-last-child(-n+2) {
flex: 0 0 50%;
}
}
@media all and (max-width: 726px) {
#colorlist div:nth-last-child(-n+3) {
flex: 0 0 33.333333%;
}
}
@media all and (max-width: 700px) {
#colorlist div, #colorlist div:nth-last-child(-n+5) {
flex: 0 0 50%;
}
#colorlist div:last-child {
flex: 0 0 100%;
}
}
@media all and (max-width: 490px) {
#colorlist div, #colorlist div:nth-last-child(-n+5) {
flex: 0 0 100%;
}
}Javascript:
Create a main.js file and add the following code:
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", "<tr><td><div style='background-color:"+colorName + contrastRatio + "; padding: 3rem 1rem;'></div></td><td style='padding: 3rem 1rem;'>"+colorName+"</td><td style='padding: 3rem 1rem;'>"+colorHex+"</td></tr>");
}
}This example creates a grid of boxes, each filled with a different named CSS color. The colors are defined in an array and dynamically applied to the div elements using JavaScript.
Happy coding!
