Grid of Colors by @jowinb - Codewith.it

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

References

<input>Definisce un area di input per l'invio di dati e informazioni
disabledImpedisce la modifica di un input
<embed>Tag per l'incorporamento di contenuti multimediali
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio

Users

Log in to search for users

Explore

Find inspiration

Lola Harrel Project 2

Heads Or Tails Random Tally

Calcolatrice classica

square - social bar

Calcolo Codice Fiscale

menu a comparsa Jquery

Arianna è un\'informatica ora

Mario-Block.html

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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;