JSFiddle - React, Tailwind, and code Playground

HTML

<label>Type CSS valid colour: <input type="text" id="testField"></label>
<div id="result"></div>

JavaScript

function validTextColour(stringToTest) {
    //Alter the following conditions according to your need.
    if (stringToTest === "") { return false; }
    if (stringToTest === "inherit") { return false; }
    if (stringToTest === "transparent") { return false; }
    
    var image = document.createElement("img");
    image.style.color = "rgb(0, 0, 0)";
    image.style.color = stringToTest;
    console.log(image.style.color);
    if (image.style.color !== "rgb(0, 0, 0)") { return true; }
    image.style.color = "rgb(255, 255, 255)";
    image.style.color = stringToTest;
    console.log(image.style.color);
    return image.style.color !== "rgb(255, 255, 255)";
}

document.getElementById("testField").addEventListener("input", function() {
    document.getElementById("result").textContent = validTextColour(this.value);
});