Grid of Colors by @jowinb - Codewith.it

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

Referenze

<meta>Definisce i meta dati di una pagina web.
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input
hreflangConsente di dichiarare la lingua del documento collegato.
formSpecifica a quale form appartiene un elemento.
<abbr>Inserisce abbreviazioni e acronimi

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

tabella ennesima

JS Elementi del linguaggio es1

Éclat Couture - Alta Moda Artigia

02/02/24 Jajo talpa no gusta pelo

Album-Reccomendations

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">
    <title>Grid of Colors</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <main id="color-grid"></main>

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


</html>

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #000000;
    margin: 0;
}

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

.color-box {
    position: relative;
    width: 125px;
    height: 125px;
    border-radius: 50%; 
    border: 3px solid #333;
    margin: 5px;
    padding: 5px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    box-sizing: border-box;
}

.color-box span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

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"
];


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


function displayColors() {
    const colorGrid = document.getElementById('color-grid');
    colorGrid.innerHTML = ''; // Clear existing grid content

    colors.forEach(color => {
        const colorBox = document.createElement('div');
        colorBox.classList.add('color-box');
        colorBox.style.backgroundColor = color;

        // Text color based on background brightness (light or dark)
        const textColor = isLight(color) ? 'black' : 'white';
        colorBox.style.color = textColor;

        colorBox.innerHTML = `<span>${formatColorName(color)}</span>`;
        
        colorGrid.appendChild(colorBox);
    });
}

function isLight(color) {
    const rgb = hexToRgb(color);
    if (!rgb) return false; 

    const brightness = 0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b;
    return brightness > 128;
}

function hexToRgb(color) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = color;
    const colorHex = ctx.fillStyle;
    const rgb = /^rgba?/.test(colorHex) ? colorHex.match(/rgba?\((\d+), (\d+), (\d+)/) : null;

    return rgb ? { r: +rgb[1], g: +rgb[2], b: +rgb[3] } : null;
}

window.onload = displayColors;