Array of Colors by @matmat - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<th>Definisce una cella di intestazione di una tabella HTML.
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
<blockquote>Inserisce citazioni in un documento HTML
classDefinisce una o più classi per elemento
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.

Users

Log in to search for users

Explore

Find inspiration

test js coinmarketcap

Nexa Digital - Web Design, AI Gene

esercitazione sulle celle

Album-Reccomendations

esercitazione a cazzo a casa

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color Grid</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Color Grid</h1>
  <div id="color-grid" class="grid-container"></div>
  <script src="script.js"></script>
</body>
</html>

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  background-color: rgb(192, 157, 157);
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(10, 125px); 
  grid-gap: 10px;
  grid-auto-rows: 125px; 
  margin-top: 20px;
}


.color-box {
  width: 125px;
  height: 125px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  text-align: center;
  border-radius: 50%;
  border-color: black;
  border-style: solid;
}

const colors = [
  "AliceBlue", "AntiqueWhite", "Aqua", "Aquamarine", "Azure", "Beige", "Bisque", "Black", "BlanchedAlmond", 
  "Blue", "BlueViolet", "Brown", "BurlyWood", "CadetBlue", "Chartreuse", "Chocolate", "Coral", 
  "CornflowerBlue", "Cornsilk", "Crimson", "Cyan", "DarkBlue", "DarkCyan", "DarkGoldenRod", "DarkGray", 
  "DarkGrey", "DarkGreen", "DarkKhaki", "DarkMagenta", "DarkOliveGreen", "Darkorange", "DarkOrchid", 
  "DarkRed", "DarkSalmon", "DarkSeaGreen", "DarkSlateBlue", "DarkSlateGray", "DarkSlateGrey", 
  "DarkTurquoise", "DarkViolet", "DeepPink", "DeepSkyBlue", "DimGray", "DimGrey", "DodgerBlue", 
  "FireBrick", "FloralWhite", "ForestGreen", "Fuchsia", "Gainsboro", "GhostWhite", "Gold", "GoldenRod", 
  "Gray", "Grey", "Green", "GreenYellow", "HoneyDew", "HotPink", "IndianRed", "Indigo", "Ivory", 
  "Khaki", "Lavender", "LavenderBlush", "LawnGreen", "LemonChiffon", "LightBlue", "LightCoral", 
  "LightCyan", "LightGoldenRodYellow", "LightGray", "LightGrey", "LightGreen", "LightPink", 
  "LightSalmon", "LightSeaGreen", "LightSkyBlue", "LightSlateGray", "LightSlateGrey", "LightSteelBlue", 
  "LightYellow", "Lime", "LimeGreen", "Linen", "Magenta", "Maroon", "MediumAquaMarine", "MediumBlue", 
  "MediumOrchid", "MediumPurple", "MediumSeaGreen", "MediumSlateBlue", "MediumSpringGreen", 
  "MediumTurquoise", "MediumVioletRed", "MidnightBlue", "MintCream", "MistyRose", "Moccasin", 
  "NavajoWhite", "Navy", "OldLace", "Olive", "OliveDrab", "Orange", "OrangeRed", "Orchid", "PaleGoldenRod", 
  "PaleGreen", "PaleTurquoise", "PaleVioletRed", "PapayaWhip", "PeachPuff", "Peru", "Pink", "Plum", 
  "PowderBlue", "Purple", "Red", "RosyBrown", "RoyalBlue", "SaddleBrown", "Salmon", "SandyBrown", 
  "SeaGreen", "SeaShell", "Sienna", "Silver", "SkyBlue", "SlateBlue", "SlateGray", "SlateGrey", 
  "Snow", "SpringGreen", "SteelBlue", "Tan", "Teal", "Thistle", "Tomato", "Turquoise", "Violet", 
  "Wheat", "White", "WhiteSmoke", "Yellow", "YellowGreen"
];

const gridColors = document.querySelector("#color-grid");

function displayColors(color) {
  const canvasContext = document.createElement("canvas").getContext("2d");
  canvasContext.fillStyle = color;
}

function displayGridColors(colorArray) {
  colorArray.forEach((color) => {
    const textColor = displayColors(color);
    const colorBoxHTML = `
      <div class="color-box" style="background-color: ${color}; color: ${textColor};">
        ${color}
      </div>
    `;
    gridColors.insertAdjacentHTML("beforeend", colorBoxHTML);
  });
}

displayGridColors(colors);