Color Grid by @Jeison28 - Codewith.it

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

Referenze

styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
<p>Serve a definire paragrafi di testo
<tr>Definisce le righe di una tabella (rows)
methodDetermina il metodo di invio dei dati di un form al server
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

VERDERAME | Serra e Orto Botanico

Product Landing Page

Costruzione tabella base

JS Oggetti ed eventi es2

Countdown Passaporto 1

Éclat Couture - Alta Moda Artigia

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>`
  );
});