Grid of Colors by @Curi288 - Codewith.it

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

Referenze

<p>Serve a definire paragrafi di testo
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
<iframe>Crea un frame all'interno di una pagina HTML.
<video>Integra e controlla video in una pagina HTML
srcIndica la provenienza di una risorsa esterna (tramite URL).
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

esercitazioni ipertestual

Map System using Leaflet

La Storia di Biancaneve

sanchez ximena html 3

Notizie dai Monti(2)

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Grid of Colors</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main></main>
  <script src="script.js"></script>
</body>
</html>

main {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px;
}

.color-shape {
  width: 125px;
  height: 125px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #333;
  border-radius: 50%;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  box-sizing: border-box;
}

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 main = document.querySelector('main');

function getContrastColor(color) {
  const temp = document.createElement('div');
  temp.style.color = color;
  document.body.appendChild(temp);
  const rgb = getComputedStyle(temp).color.match(/\d+/g).map(Number);
  document.body.removeChild(temp);

  const [r, g, b] = rgb;
  const brightness = (r * 299 + g * 587 + b * 114) / 1000;

  return brightness > 125 ? '#000' : '#fff';
}

function insertSpaces(colorName) {
  return colorName.replace(/([a-z])([A-Z])/g, '$1 $2');
}

colors.forEach(color => {
  const div = document.createElement('div');
  div.className = 'color-shape';
  div.style.backgroundColor = color;
  div.style.color = getContrastColor(color);
  div.textContent = insertSpaces(color);
  main.appendChild(div);
});