230 lines
11 KiB
HTML
230 lines
11 KiB
HTML
|
<!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>
|