Change color text of specific text in sharepoint

I was doing some testing(issue tracking) and I initiated a workflow, a 3 state workflow. The workflow is shown as completed or in progress. Can I change the color of the words? For example, in progress would be orange and completed would be in green.

Please Advise.

For Reference: https://i.stack.imgur.com/PX1xx.jpg

In SharePoint 2013, we can add the following code into a script editor web part to achieve it.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() { 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
        OnPostRender: function (ctx) {
            $("td.ms-vb2>a>span").each(function(){
                if($(this).text()=="In Progress"){
                    $(this).css("color","orange");
                }
                if($(this).text()=="Completed"){
                    $(this).css("color","green");
                }
            });
			$("td.ms-vb2").each(function(){
                if($(this).text()=="Closed"){
                    $(this).css("color","red");
                }
                if($(this).text()=="Active"){
                    $(this).css("color","green");
                }
            });
        }
    });
});
</script>

If you are working on a spreadsheet/excel under the home tab there is the font group there you will see an icon with the letter A underlined by a bold color usually red or black, that represents the font color option used to change color for specific text or all text.

If you want an easy solution. You will have two change two things.
First, the HTML file. You will need to add an Id to the table if it does not already have one.
Second, you will have to add the following javascript.

What it does is:
When the page is loaded, it will get every 2nd cell in the table we have mentioned with the Id. Then it gets the value of the cell and matchs is with one of the properties of the colors object.
Finally it will apply that color to text

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function(){
  var indexOfColumn = 2;
  var colors = {"A": "red", "B B": "green", "C.C": "yellow"};
  
  $("#someID tbody tr td:nth-child("+ indexOfColumn +")").each(function(key, value){
    $(value).css("color", colors[$(value).text()])
  });
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="someID">
  <tr><td>1</td><td>A</td></tr>
  <tr><td>2</td><td>B B</td></tr>
  <tr><td>3</td><td>C.C</td></tr>
  <tr><td>4</td><td>A</td></tr>
</table>

<!-- end snippet -->

Honestly i haven't tried this with workflow's default column but you can create a status field e.g. 'Status' in your list which is updated based on your workflow status i.e. while workflow is in progress, set the field values as 'In Progress' and just before workflow successfully completes, update this to 'Completed' Then using JS link:

 (function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.OnPostRender = [];

    overrideCtx.Templates.Fields =
    {
        'Status': { 'View': ChangeColor }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

})();

function ChangeColor(ctx){ 
    var val = ctx.CurrentItem["Status"];
	if (val == "In Progress")
	{
		return "<span style='color: orange'>" + val + "</span>";
		
	}
	else {
		return "<span style='color: green'>" + val + "</span>";
	}
   
}

Put the above code in a js file, and put it somewhere e.g. in Style library. Then you can refer this file by configuring your list view webpart and providing file's server relative url .
Hope this helps.