JSFiddle - React, Tailwind, and code Playground

HTML

<div id="str"></div>

CSS

#str {
  color: #FFF;
  background: #000;
  padding: 10px;
}

JavaScript

var str = 'This ~FF0000~string ~FFFF00~should ~00FF00~ be colored';

document.getElementById('str').innerHTML =
	str.replace(/~([A-F0-9]{3,9})~([^~]+)/g, '<span style="color: #$1;">$2</span>');