Contenido de iframe con estilo en la cabeza con código de color hexadecimal no funciona

Estoy generando iframe usando javascript con html dynamic. Mi html dynamic se parece a

  ... .bar {background-color: #EB593C;} ...   

Luego, iframe contiene todo el código hasta .bar {background-color: después de que el código de color html / css no esté incluido en los contenidos de iframes.

Si sustituyo el código de color hexadecimal con rgb o nombre de color de texto, entonces está funcionando bien.

Pero como dije, html es dynamic, así que no puedo reemplazar todos los códigos de color hexadecimales a rgb o texto.

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

Por favor, compruebe jsfiddle