Grid of Colors by @jowinb - Codewith.it

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

Referenze

<a>Inserisce link e collegamenti ipertestuali
text/plainDefinisce un metodo di non codifica dei valori di un form
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
<canvas>Tag per disegnare grafica dinamica su pagine web.
<q>Indica una parte di testo come citazione breve
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Design, Marketing & AI News (Y)

3 LS 29-01 IPERTESTI INTERNI

Form per il torneo misto disfo

Review of Functions I

SHKAFI_3M_12_HTMLBELLISSI

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;