<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: rgb(255, 255, 255);
      }

      #textBox {
        position: absolute;
        left:460px;
        top:400px;
        width:1000px;
        height:200px;
        font-size:144px;
        color:#FF0000;
        transition: color 2s;
      }
    </style>
  </head>
  <body>
    <div id='textBox'>Hello, Cobalt!</div>
    <script type="text/javascript">
      var colors = [
        'rgb(255, 0, 0)',
        'rgb(0, 255, 255)',
        'rgb(0, 255, 0)',
        'rgb(255, 0, 255)',
        'rgb(0, 0, 255)',
        'rgb(255, 255, 0)'
      ];

      var colorIndex = 0;

      function refresh() {
        var textBox = document.getElementById('textBox');
        textBox.style.color = colors[colorIndex];
      }

      document.addEventListener('keydown', function(e) {
        if (e.keyCode == 37) {
          // Left arrow key was pressed.
          colorIndex -= 1;
          if (colorIndex < 0) {
            colorIndex = colors.length - 1;
          }
          refresh();
        } else if (e.keyCode == 39) {
          // Right arrow key was pressed.
          colorIndex += 1;
          if (colorIndex >= colors.length) {
            colorIndex = 0;
          }
          refresh();
        }
      });
    </script>
  </body>
</html>