Iframe content styled in head with hex color code not working

Question

Iframe content styled in head with hex color code not working

I am generating an iframe using javascript with dynamic html. My dynamic html looks like

<head>
<style>
...
.bar {background-color: #EB593C;}
...
</style>
</head>

Then the iframe contains all the code up to .bar {background-color: after the color code, the html / css is not included in the iframes content.

If I replace the hexadecimal color code with the rgb name or text color name then it works fine.

But since I said html is dynamic so I cannot replace all hex color codes with rgb or text.

var iframe = document.createElement('iframe');
//var html = '<style>body {background-color: #EB593C;}</style><body>Foo</body>'; // not working
var html = '<style>body {background-color: red;}</style><body>Foo</body>'; // working
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
document.body.appendChild(iframe);