Seems like a lot of extra duplicated code.
My attempt would be more along these lines (modifying from your attempt).
<html>
<head>
<style>
.style {
position: absolute;
height: 300px;
width: 250px;
margin: -100px 0 0 -200px;
top: 50%;
left: 50%;
padding: 50px;
box-shadow: 2px 2px 10px 5px #888888;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
body { background-color: #F8F8F8; }
.result { -webkit-text-stroke: .50px black; }
h3 { font-size: 30px; font-family:Arial,Helvetica,sans-serif;; }
</style>
</head>
<body onload="changeColor()">
<div class="style">
Text: <button onclick="document.getElementById('inputtext').value='';changeColor()">Clear</button>
<br><input id="inputtext" type="text" onkeyup="changeColor()" size="40" value="" ><br/>
0 - Black<br/> 1 - Red<br/> 2 - Green<br/> 3 - Yellow<br/>
4 - Blue<br/> 5 - Cyan<br/> 6 - Pink<br/> 7 - White<br/>
8 - Grey<br/> 9 - Light Grey<br/>
<p>
<button onclick="document.getElementById('inputtext').value=testNumbers;changeColor()">Test Numbers</button>
<button onclick="document.getElementById('inputtext').value=testWords;changeColor()">Test Words</button>
</div>
<h3 id="result" class="result">Result will be outputted here.</h3>
<p style=" position: absolute; bottom: 0; left: 0; width: 30%; text-align: center;">Recommended browsers: Google Chrome, Steam Browser</p>
<script>
var colours = ['#060b07','#ff0101','#1bef1e','#f2f84c','#1f2bf3','#38c4e5','#f20dff','white','#9a9c99','#d4d3cf','black'];
var testNumbers = "^0 0 ^1 1 ^2 2 ^3 3 ^4 4 ^5 5 ^6 6 ^7 7 ^8 8 ^9 9";
var testWords = "^0 Black ^1 Red ^2 Green ^3 Yellow ^4 Blue ^5 Cyan ^6 Pink ^7 White ^8 Grey ^9 Light Grey";
function alterColor(info) {
var c = info.charAt(0); // if (c == ' ') { return; }
if (( c>='0') && (c<='9')) { c = parseInt(c); } else { c = colours.length-1; }
return '<font color="'+colours[c]+'">'+info.substring(1)+'</font>';
}
function changeColor(){
document.getElementById("result").innerHTML = "";
var s = document.getElementById("inputtext").value.split('^'); s.shift();
for (var i=0; i < s.length; i++) { document.getElementById('result').innerHTML += alterColor(s[i])+' '; }
}
window.onload = function() { document.getElementById('inputtext').value = testNumbers; changeColor(); }
</script>
</body>
</html>