<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cyber Colours by Ramses Revengeday</title>
    <meta name="description" content="Explore the cyberpunk world with these vibrant and futuristic color palettes created by Ramses Revengeday. Copy the color codes with a click and bring your digital creations to life.">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.jpg">
    <meta name="keywords" content="Cyber Colours, Ramses Revengeday, cyberpunk, color palettes, vibrant colors, futuristic design">
    <meta name="author" content="Ramses Revengeday">
    <meta name="robots" content="index, follow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:title" content="Cyber Colours by Ramses Revengeday">
    <meta property="og:description" content="Explore the cyberpunk world with these vibrant and futuristic color palettes created by Ramses Revengeday. Copy the color codes with a click and bring your digital creations to life.">
    <meta property="og:image" content="https://ramses.coffee/cyber-colours/image.jpg">
    <meta property="og:url" content="https://ramses.coffee/cyber-colours/">
    <meta property="og:type" content="website">
    <meta property="og:locale" content="en_US">
    <meta property="og:site_name" content="Cyber Colours">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Cyber Colours by Ramses Revengeday">
    <meta name="twitter:description" content="Explore the cyberpunk world with these vibrant and futuristic color palettes created by Ramses Revengeday. Copy the color codes with a click and bring your digital creations to life.">
    <meta name="twitter:image" content="https://ramses.coffee/cyber-colours/image.jpg">
    <style>
    @font-face {
        font-family: rexuscyber;
        font-weight: bold;
        src: url("rexus-cyber.otf") format("opentype");
    }
 
    body {
        font-family: monospace;
        text-align: center;
        background-color: #040404;
        color: #fff;
    }
    
    h1,
    h2 {
        font-size: 36px;
        font-family: rexuscyber;
        text-transform: uppercase;
    }
    
    small {
        font-size: 18px;
        color: #3d3d3d;
    }
}
p {
    font-size: 13px;
}
.palette {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 40px;
}
.logo {
    width: 150px;
    height: 150px;
}
.color {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: 10px;
    margin: 10px;
}
a {
    color: #1BEC99;
    text-decoration: none;
    transition: color 0.3s;
}
a:hover {
    color: #FD3656;
}
.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #040404;
    color: white;
    border-radius: 10px;
    border-color: #fff;
    z-index: 1000;
}
    </style>
</head>

<body>  <script src='https://ramses.coffee/assets/topbar/topbar.js'></script>
    <div class="popup" id="popup"> Copied color: <span id="popupText"></span> </div>
    <h1><img class="logo" src="logo.svg" alt="Logo with two C" title="Cyber Colours"><br><small>by Ramses Revengeday</small></h1>
    <p>Hi, I'm <a href="https://corteximplant.com/@revengeday">Ramses Revengeday</a>, and I created these color codes for the maximum cyberpunk vibe!</p>
    <p> You can use these colors however you like. They are colors - they have no copyright. See it as inspiration. </p>
    <h2 style="color: #FB2735">Cyber Crimson</h2>
    <div class="palette">
        <div class="color" style="background-color: #FB2735;">#FB2735</div>
        <div class="color" style="background-color: #281718;">#281718</div>
        <div class="color" style="background-color: #46191C;">#46191C</div>
        <div class="color" style="background-color: #9A1F28;">#9A1F28</div>
        <div class="color" style="background-color: #161616;">#161616</div>
        <div class="color" style="background-color: #1BEC99;">#1BEC99</div>
    </div>
    <h2 style="color: #FD3656">Techno Ruby</h2>
    <div class="palette">
        <div class="color" style="background-color: #FD3656;">#FD3656</div>
        <div class="color" style="background-color: #28181B;">#28181B</div>
        <div class="color" style="background-color: #461C24;">#461C24</div>
        <div class="color" style="background-color: #9B283C;">#9B283C</div>
        <div class="color" style="background-color: #161616;">#161616</div>
        <div class="color" style="background-color: #31FEFD;">#31FEFD</div>
    </div>
    <h2 style="color: #31FEFD">Glitch Turquoise</h2>
    <div class="palette">
        <div class="color" style="background-color: #31FEFD;">#31FEFD</div>
        <div class="color" style="background-color: #182928;">#182928</div>
        <div class="color" style="background-color: #1B4646;">#1B4646</div>
        <div class="color" style="background-color: #259D9D;">#259D9D</div>
        <div class="color" style="background-color: #161616;">#161616</div>
        <div class="color" style="background-color: #FEEB2C;">#FEEB2C</div>
    </div>
    <h2 style="color: #1BEC99">Virtual Jade</h2>
    <div class="palette">
        <div class="color" style="background-color: #1BEC99;">#1BEC99</div>
        <div class="color" style="background-color: #152721;">#152721</div>
        <div class="color" style="background-color: #134332;">#134332</div>
        <div class="color" style="background-color: #159262;">#159262</div>
        <div class="color" style="background-color: #161616;">#161616</div>
        <div class="color" style="background-color: #FFFFFF; color: #161616;">#FFFFFF</div>
    </div>
    <h2 style="color: #D435F2">Artificial Lavender</h2>
    <div class="palette">
        <div class="color" style="background-color: #D435F2;">#D435F2</div>
        <div class="color" style="background-color: #251928;">#251928</div>
        <div class="color" style="background-color: #3E1D44;">#3E1D44</div>
        <div class="color" style="background-color: #812892;">#812892</div>
        <div class="color" style="background-color: #161616;">#161616</div>
        <div class="color" style="background-color: #1BEC99; color: #161616;">#1BEC99</div>
    </div>
    <h2 style="color: #FEEB2C">Synthetic Mustard</h2>
    <div class="palette">
        <div class="color" style="background-color: #FEEB2C;">#FEEB2C</div>
        <div class="color" style="background-color: #292715;">#292715</div>
        <div class="color" style="background-color: #464315;">#464315</div>
        <div class="color" style="background-color: #9D921D;">#9D921D</div>
        <div class="color" style="background-color: #161616;">#161616</div>
        <div class="color" style="background-color: #31FEFD;">#31FEFD</div>
    </div>
    <h2 style="color: #C1C1C1">Chromehead</h2>
    <div class="palette">
        <div class="color" style="background-color: #C1C1C1;">#C1C1C1</div>
        <div class="color" style="background-color: #242424;">#242424</div>
        <div class="color" style="background-color: #3B3B3B;">#3B3B3B</div>
        <div class="color" style="background-color: #7B7B7B;">#7B7B7B</div>
        <div class="color" style="background-color: #161616;">#161616</div>
        <div class="color" style="background-color: #FFFFFF; color: #161616;">#FFFFFF</div>
    </div>
    <h2 style="color: #BFA27A">Synthetic Caramel Flavour</h2>
    <div class="palette">
        <div class="color" style="background-color: #BFA27A;">#BFA27A</div>
        <div class="color" style="background-color: #24211E;">#24211E</div>
        <div class="color" style="background-color: #3A342C;">#3A342C</div>
        <div class="color" style="background-color: #75654F;">#75654F</div>
        <div class="color" style="background-color: #161616;">#161616</div>
        <div class="color" style="background-color: #FD3656;">#FD3656</div>
    </div>
    <h2 style="color: #FC8622">Phosphor Dreams</h2>
    <div class="palette">
        <div class="color" style="background-color: #FC8622;">#FC8622</div>
        <div class="color" style="background-color: #291F15;">#291F15</div>
        <div class="color" style="background-color: #462E14;">#462E14</div>
        <div class="color" style="background-color: #985618;">#985618</div>
        <div class="color" style="background-color: #161616;">#161616</div>
        <div class="color" style="background-color: #31FEFD;">#31FEFD</div>
    </div>
    <h2 style="color: #1DA022">Forest Dream Brain Dance</h2>
    <div class="palette">
        <div class="color" style="background-color: #1DA022;">#1DA022</div>
        <div class="color" style="background-color: #162117;">#162117</div>
        <div class="color" style="background-color: #173418;">#173418</div>
        <div class="color" style="background-color: #19621C;">#19621C</div>
        <div class="color" style="background-color: #161616;">#161616</div>
        <div class="color" style="background-color: #2AF533;">#2AF533</div>
    </div>
    <h2 style="color: #6DCCC1">Cyber Pastel</h2>
    <div class="palette">
        <div class="color" style="background-color: #6DCCC1;">#6DCCC1</div>
        <div class="color" style="background-color: #48AFB2;">#48AFB2</div>
        <div class="color" style="background-color: #48AFB2;">#48AFB2</div>
        <div class="color" style="background-color: #9F7F97;">#9F7F97</div>
        <div class="color" style="background-color: #9D6083;">#9D6083</div>
        <div class="color" style="background-color: #7F527D;">#7F527D</div>
    </div>
    <h2 style="color: #26B46A">Cyber Mullet</h2>
    <div class="palette">
        <div class="color" style="background-color: #26B46A;">#26B46A</div>
        <div class="color" style="background-color: #249F5E;">#249F5E</div>
        <div class="color" style="background-color: #1A9554;">#1A9554</div>
        <div class="color" style="background-color: #006B6C;">#006B6C</div>
        <div class="color" style="background-color: #09898A;">#09898A</div>
        <div class="color" style="background-color: #397A97;">#397A97</div>
    </div>
    <p>Stay cyber, choom!</p>
    <script>
    const colors = document.querySelectorAll(".color");
    const popup = document.getElementById("popup");
    const popupText = document.getElementById("popupText");
    colors.forEach(color => {
        color.addEventListener("click", () => {
            const colorValue = color.style.backgroundColor;
            navigator.clipboard.writeText(colorValue);
            popupText.innerText = colorValue;
            popup.style.display = "block";
            setTimeout(() => {
                popup.style.display = "none";
            }, 2000);
        });
    });
    </script>
</body>

</html>