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