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