Color Grid by @Jeison28 - Codewith.it

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

Referenze

mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
<tfoot>Definisce il footer o sezione inferiore di una tabella.
<embed>Tag per l'incorporamento di contenuti multimediali
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
<textarea>Area di testo libero espandibile per form HTML
<caption>Definisce didascalie all'interno di una tabella

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Class Gradebook

Liste e tabelle

Indovina il Numero - Gioco

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>Color Grid</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="color-grid"></div>

    <script src="script.js"></script>
</body>
</html>

body {
  font-family: Arial, sans-serif;
  padding: 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
  gap: 15px;
  width: 100%;
}

.color-box {
  width: 125px;
  height: 125px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid black;
  border-radius: 50%;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  text-transform: capitalize;
  box-sizing: border-box;
  word-wrap: break-word;
}

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 colorGrid = document.querySelector("#color-grid");

function getContrastColor(color) {
  var div = document.createElement("div");
  div.style.color = color;
  document.body.appendChild(div);

  var computed = getComputedStyle(div).color;
  document.body.removeChild(div);

  var parts = computed.replace("rgb(", "").replace(")", "").split(",");
  var r = parseInt(parts[0]);
  var g = parseInt(parts[1]);
  var b = parseInt(parts[2]);

  var brightness = (r * 299 + g * 587 + b * 114) / 1000;

  if (brightness > 125) {
    return "black";
  } else {
    return "white";
  }
}

colors.forEach(color => {
  var textColor = getContrastColor(color);
  colorGrid.insertAdjacentHTML(
    "beforeend",
    `<div class="color-box" style="background-color: ${color}; color: ${textColor}">${color}</div>`
  );
});