assets/palette.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <!-- Background -->
  <rect width="800" height="600" fill="#141415"/>

  <!-- Title -->
  <text x="40" y="40" fill="#b4b1ba" font-family="sans-serif" font-size="24" font-weight="bold">OldTale Color Palette</text><!-- Backgrounds & Grays -->
  <g transform="translate(40, 80)">
    <text x="0" y="-5" fill="#b4b1ba" font-family="sans-serif" font-size="14">Backgrounds &amp; Grays</text>
    <rect x="0" y="10" width="60" height="30" fill="#121213"/>
    <rect x="70" y="10" width="60" height="30" fill="#141415"/>
    <rect x="140" y="10" width="60" height="30" fill="#16161a"/>
    <rect x="210" y="10" width="60" height="30" fill="#1a1a1c"/>
    <rect x="280" y="10" width="60" height="30" fill="#252528"/>
    <rect x="350" y="10" width="60" height="30" fill="#2d2d31"/>
    <rect x="420" y="10" width="60" height="30" fill="#363639"/>
    <rect x="490" y="10" width="60" height="30" fill="#3d3b40"/>
    <rect x="560" y="10" width="60" height="30" fill="#504d54"/>
    <text x="0" y="55" fill="#666370" font-family="monospace" font-size="10">bg_dark</text>
    <text x="70" y="55" fill="#666370" font-family="monospace" font-size="10">bg</text>
    <text x="140" y="55" fill="#666370" font-family="monospace" font-size="10">gray0</text>
    <text x="210" y="55" fill="#666370" font-family="monospace" font-size="10">gray1</text>
    <text x="280" y="55" fill="#666370" font-family="monospace" font-size="10">gray2</text>
    <text x="350" y="55" fill="#666370" font-family="monospace" font-size="10">gray3</text>
    <text x="420" y="55" fill="#666370" font-family="monospace" font-size="10">gray4</text>
    <text x="490" y="55" fill="#666370" font-family="monospace" font-size="10">gray5</text>
    <text x="560" y="55" fill="#666370" font-family="monospace" font-size="10">gray6</text>
    <text x="0" y="70" fill="#666370" font-family="monospace" font-size="10">#121213</text>
    <text x="70" y="70" fill="#666370" font-family="monospace" font-size="10">#141415</text>
    <text x="140" y="70" fill="#666370" font-family="monospace" font-size="10">#16161a</text>
    <text x="210" y="70" fill="#666370" font-family="monospace" font-size="10">#1a1a1c</text>
    <text x="280" y="70" fill="#666370" font-family="monospace" font-size="10">#252528</text>
    <text x="350" y="70" fill="#666370" font-family="monospace" font-size="10">#2d2d31</text>
    <text x="420" y="70" fill="#666370" font-family="monospace" font-size="10">#363639</text>
    <text x="490" y="70" fill="#666370" font-family="monospace" font-size="10">#3d3b40</text>
    <text x="560" y="70" fill="#666370" font-family="monospace" font-size="10">#504d54</text>
    
  </g>
  <!-- Foregrounds -->
  <g transform="translate(40, 180)">
    <text x="0" y="-5" fill="#b4b1ba" font-family="sans-serif" font-size="14">Foregrounds</text>
    <rect x="0" y="10" width="60" height="30" fill="#b4b1ba"/>
    <rect x="70" y="10" width="60" height="30" fill="#aaa7b0"/>
    <rect x="140" y="10" width="60" height="30" fill="#9a97a0"/>
    <rect x="210" y="10" width="60" height="30" fill="#868390"/>
    <rect x="280" y="10" width="60" height="30" fill="#666370"/>
    <text x="0" y="55" fill="#666370" font-family="monospace" font-size="10">fg</text>
    <text x="70" y="55" fill="#666370" font-family="monospace" font-size="10">subtext1</text>
    <text x="140" y="55" fill="#666370" font-family="monospace" font-size="10">subtext2</text>
    <text x="210" y="55" fill="#666370" font-family="monospace" font-size="10">subtext3</text>
    <text x="280" y="55" fill="#666370" font-family="monospace" font-size="10">subtext4</text>
    <text x="0" y="70" fill="#666370" font-family="monospace" font-size="10">#b4b1ba</text>
    <text x="70" y="70" fill="#666370" font-family="monospace" font-size="10">#aaa7b0</text>
    <text x="140" y="70" fill="#666370" font-family="monospace" font-size="10">#9a97a0</text>
    <text x="210" y="70" fill="#666370" font-family="monospace" font-size="10">#868390</text>
    <text x="280" y="70" fill="#666370" font-family="monospace" font-size="10">#666370</text>
    
  </g>
  <!-- Colors -->
  <g transform="translate(40, 280)">
    <text x="0" y="-5" fill="#b4b1ba" font-family="sans-serif" font-size="14">Colors</text>
    <rect x="0" y="10" width="60" height="30" fill="#202023"/>
    <rect x="70" y="10" width="60" height="30" fill="#e89890"/>
    <rect x="140" y="10" width="60" height="30" fill="#e27598"/>
    <rect x="210" y="10" width="60" height="30" fill="#d68abc"/>
    <rect x="280" y="10" width="60" height="30" fill="#9a8dbf"/>
    <rect x="350" y="10" width="60" height="30" fill="#8292c7"/>
    <rect x="420" y="10" width="60" height="30" fill="#76a5aa"/>
    <rect x="490" y="10" width="60" height="30" fill="#80a891"/>
    <rect x="560" y="10" width="60" height="30" fill="#d4a48c"/>
    <text x="0" y="55" fill="#666370" font-family="monospace" font-size="10">black</text>
    <text x="70" y="55" fill="#666370" font-family="monospace" font-size="10">orange</text>
    <text x="140" y="55" fill="#666370" font-family="monospace" font-size="10">red</text>
    <text x="210" y="55" fill="#666370" font-family="monospace" font-size="10">magenta</text>
    <text x="280" y="55" fill="#666370" font-family="monospace" font-size="10">purple</text>
    <text x="350" y="55" fill="#666370" font-family="monospace" font-size="10">blue</text>
    <text x="420" y="55" fill="#666370" font-family="monospace" font-size="10">cyan</text>
    <text x="490" y="55" fill="#666370" font-family="monospace" font-size="10">green</text>
    <text x="560" y="55" fill="#666370" font-family="monospace" font-size="10">yellow</text>
    <text x="0" y="70" fill="#666370" font-family="monospace" font-size="10">#202023</text>
    <text x="70" y="70" fill="#666370" font-family="monospace" font-size="10">#e89890</text>
    <text x="140" y="70" fill="#666370" font-family="monospace" font-size="10">#e27598</text>
    <text x="210" y="70" fill="#666370" font-family="monospace" font-size="10">#d68abc</text>
    <text x="280" y="70" fill="#666370" font-family="monospace" font-size="10">#9a8dbf</text>
    <text x="350" y="70" fill="#666370" font-family="monospace" font-size="10">#8292c7</text>
    <text x="420" y="70" fill="#666370" font-family="monospace" font-size="10">#76a5aa</text>
    <text x="490" y="70" fill="#666370" font-family="monospace" font-size="10">#80a891</text>
    <text x="560" y="70" fill="#666370" font-family="monospace" font-size="10">#d4a48c</text>
    
  </g>
  <!-- Bright Colors -->
  <g transform="translate(40, 380)">
    <text x="0" y="-5" fill="#b4b1ba" font-family="sans-serif" font-size="14">Bright Colors</text>
    <rect x="0" y="10" width="60" height="30" fill="#3a3a3e"/>
    <rect x="70" y="10" width="60" height="30" fill="#efb4af"/>
    <rect x="140" y="10" width="60" height="30" fill="#e996b0"/>
    <rect x="210" y="10" width="60" height="30" fill="#e4a6d0"/>
    <rect x="280" y="10" width="60" height="30" fill="#b0a7d1"/>
    <rect x="350" y="10" width="60" height="30" fill="#9dadd5"/>
    <rect x="420" y="10" width="60" height="30" fill="#8cbcc0"/>
    <rect x="490" y="10" width="60" height="30" fill="#9bc3ab"/>
    <rect x="560" y="10" width="60" height="30" fill="#e6b9a3"/>
    <text x="0" y="55" fill="#666370" font-family="monospace" font-size="10">bright_black</text>
    <text x="70" y="55" fill="#666370" font-family="monospace" font-size="10">bright_orange</text>
    <text x="140" y="55" fill="#666370" font-family="monospace" font-size="10">bright_red</text>
    <text x="210" y="55" fill="#666370" font-family="monospace" font-size="10">bright_magenta</text>
    <text x="280" y="55" fill="#666370" font-family="monospace" font-size="10">bright_purple</text>
    <text x="350" y="55" fill="#666370" font-family="monospace" font-size="10">bright_blue</text>
    <text x="420" y="55" fill="#666370" font-family="monospace" font-size="10">bright_cyan</text>
    <text x="490" y="55" fill="#666370" font-family="monospace" font-size="10">bright_green</text>
    <text x="560" y="55" fill="#666370" font-family="monospace" font-size="10">bright_yellow</text>
    <text x="0" y="70" fill="#666370" font-family="monospace" font-size="10">#3a3a3e</text>
    <text x="70" y="70" fill="#666370" font-family="monospace" font-size="10">#efb4af</text>
    <text x="140" y="70" fill="#666370" font-family="monospace" font-size="10">#e996b0</text>
    <text x="210" y="70" fill="#666370" font-family="monospace" font-size="10">#e4a6d0</text>
    <text x="280" y="70" fill="#666370" font-family="monospace" font-size="10">#b0a7d1</text>
    <text x="350" y="70" fill="#666370" font-family="monospace" font-size="10">#9dadd5</text>
    <text x="420" y="70" fill="#666370" font-family="monospace" font-size="10">#8cbcc0</text>
    <text x="490" y="70" fill="#666370" font-family="monospace" font-size="10">#9bc3ab</text>
    <text x="560" y="70" fill="#666370" font-family="monospace" font-size="10">#e6b9a3</text>
    
  </g>
  <!-- Blend Colors -->
  <g transform="translate(40, 480)">
    <text x="0" y="-5" fill="#b4b1ba" font-family="sans-serif" font-size="14">Blend Colors</text>
    <rect x="0" y="10" width="60" height="30" fill="#191919"/>
    <rect x="70" y="10" width="60" height="30" fill="#1f1a19"/>
    <rect x="140" y="10" width="60" height="30" fill="#1f191a"/>
    <rect x="210" y="10" width="60" height="30" fill="#1f191f"/>
    <rect x="280" y="10" width="60" height="30" fill="#1b191f"/>
    <rect x="350" y="10" width="60" height="30" fill="#191a1f"/>
    <rect x="420" y="10" width="60" height="30" fill="#191b1c"/>
    <rect x="490" y="10" width="60" height="30" fill="#191c1a"/>
    <rect x="560" y="10" width="60" height="30" fill="#1c1b19"/>
    <text x="0" y="55" fill="#666370" font-family="monospace" font-size="10">blend_black</text>
    <text x="70" y="55" fill="#666370" font-family="monospace" font-size="10">blend_orange</text>
    <text x="140" y="55" fill="#666370" font-family="monospace" font-size="10">blend_red</text>
    <text x="210" y="55" fill="#666370" font-family="monospace" font-size="10">blend_magenta</text>
    <text x="280" y="55" fill="#666370" font-family="monospace" font-size="10">blend_purple</text>
    <text x="350" y="55" fill="#666370" font-family="monospace" font-size="10">blend_blue</text>
    <text x="420" y="55" fill="#666370" font-family="monospace" font-size="10">blend_cyan</text>
    <text x="490" y="55" fill="#666370" font-family="monospace" font-size="10">blend_green</text>
    <text x="560" y="55" fill="#666370" font-family="monospace" font-size="10">blend_yellow</text>
    <text x="0" y="70" fill="#666370" font-family="monospace" font-size="10">#191919</text>
    <text x="70" y="70" fill="#666370" font-family="monospace" font-size="10">#1f1a19</text>
    <text x="140" y="70" fill="#666370" font-family="monospace" font-size="10">#1f191a</text>
    <text x="210" y="70" fill="#666370" font-family="monospace" font-size="10">#1f191f</text>
    <text x="280" y="70" fill="#666370" font-family="monospace" font-size="10">#1b191f</text>
    <text x="350" y="70" fill="#666370" font-family="monospace" font-size="10">#191a1f</text>
    <text x="420" y="70" fill="#666370" font-family="monospace" font-size="10">#191b1c</text>
    <text x="490" y="70" fill="#666370" font-family="monospace" font-size="10">#191c1a</text>
    <text x="560" y="70" fill="#666370" font-family="monospace" font-size="10">#1c1b19</text>
    
  </g>
  
</svg>