Fantasy Color Palettes

by seevis

HTML

<h1>Fantasy Color Palettes</h1>
  <div id="palettes-container"></div>
  <div class="toast" id="toast">HEX copied!</div>

CSS

body {
      font-family: 'Segoe UI', sans-serif;
      max-width: 1000px;
      margin: 0 auto;
      padding: 20px;
      background: #f5f5f5;
    }
    .palette {
      background: white;
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 25px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    }
    .palette-title {
      font-size: 1.3em;
      margin-bottom: 10px;
      color: #333;
      font-weight: bold;
    }
    .colors {
      display: flex;
      gap: 5px;
      margin-bottom: 10px;
    }
    .color {
      width: 80px;
      height: 80px;
      border-radius: 5px;
      cursor: copy;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 5px;
      font-size: 12px;
      color: white;
      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
      transition: transform 0.2s;
    }
    .color:hover {
      transform: scale(1.05);
    }
    .hex-codes {
      display: flex;
      gap: 5px;
      font-family: monospace;
    }
    .hex-code {
      width: 80px;
      text-align: center;
      font-size: 12px;
      padding: 3px;
      background: #eee;
      border-radius: 3px;
    }
    .toast {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: #333;
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
      opacity: 0;
      transition: opacity 0.3s;
    }

JavaScript

const palettes = [
      {
        name: "Mglisty borealny las",
        colors: [
          { hex: "#E3E8D8", name: "Mgła poranna" },
          { hex: "#A4B494", name: "Mech szmaragdowy" },
          { hex: "#5A7247", name: "Zieleń jodły" },
          { hex: "#3A4A3F", name: "Głębina lasu" },
          { hex: "#1E2620", name: "Cień pod korzeniami" }
        ]
      },
      {
        name: "Kamienne ruiny",
        colors: [
          { hex: "#F0E6D2", name: "Blady piaskowiec" },
          { hex: "#C4B6A5", name: "Zbutowiały marmur" },
          { hex: "#7A6A5D", name: "Stary dębowy mebel" },
          { hex: "#4A3F37", name: "Zardzewiała zbroja" },
          { hex: "#2C2621", name: "Soot-stained gargoyle" }
        ]
      },
      {
        name: "Magiczny atrament",
        colors: [
          { hex: "#D8E1E5", name: "Kryształowa kula" },
          { hex: "#9BB5C9", name: "Lodowy szron" },
          { hex: "#5E7B9A", name: "Północne niebo" },
          { hex: "#3A4D6B", name: "Głębina oceanu" },
          { hex: "#1A2232", name: "Kosmiczna otchłań" }
        ]
      },
      {
        name: "Alchemiczne laboratorium",
        colors: [
          { hex: "#F8F4E8", name: "Kość słoniowa" },
          { hex: "#D9C7B8", name: "Zwiędły pergamin" },
          { hex: "#A78A7F", name: "Butelka po eliksirze" },
          { hex: "#6E4C4A", name: "Zaschnięta krew" },
          { hex: "#3D2B2C", name: "Czarna magia" }
        ]
      },
      {
        name: "Góry o świcie",
        colors: [
          { hex: "#FFFAED", name: "Pierwsze promienie" },
          { hex: "#E4D4C8", name: "Poranna mgła" },
          { hex: "#B4A597", name: "Skalny złom" },
          { hex: "#6D5C54", name: "Stara lawa" },
          { hex: "#3A2E2A", name: "Cień wąwozu" }
        ]
      },
      {
        name: "Podwodne królestwo",
        colors: [
          { hex: "#D4F1F9", name: "Bąbelki powietrza" },
          { hex: "#8BD3DD", name:...