JSFiddle - React, Tailwind, and code Playground

HTML

<span>H</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>o</span>
<div class="half-color">Hello</div>

CSS

span, .half-color span{
   font-size: 100px;
   background: linear-gradient(to right, black, black 50%, grey 50%, grey);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

JavaScript

var $hc = $('.half-color');
    var str = $hc.text();
    $hc.html("");
    
    var i = 0;
    var chars;
    var dupText, dupText2;
    var c = "c";
    
    while(i < str.length){
        chars = str[i];
        if(chars == " ") {
            dupText = "<span class='space'>" + chars + "</span>";
        } else {
            dupText = "<span>" + chars + "</span>";
        }
        
        $hc.append(dupText);
        
        i++;
    }