Добавьте оператор else внизу и установите черный цвет следующим образом:

if (maxLength - Number(value.length) <= 0) {
  rechar.style.color = "#E01424";
} else if (maxLength - Number(value.length) <= 100) {
  rechar.style.color = "#CF7721";
} else { // You can add an if statement here to check if the color is #000 yet to prevent re-renders
  rechar.style.color = "#000";
}

Запуск события вручную в первый раз:

var evnt = document.createEvent('HTMLEvents');
evnt.initEvent('keyup', true, true); // Deprecated but still works
$('textarea.minchar').dispatchEvent(evnt);

Я проанализировал содержание вашего вопроса и нашел там более одной проблемы, решение которых даст вам открытый взгляд на происходящее. Позволь мне объяснить.

Сначала определите, что вы будете использовать в своем коде.

Это поможет вам лучше понять код, определив сначала полезные переменные. Так что вам не придется звонить им снова и снова. Итак, я предлагаю вам определить ссылки на элементы DOM в самом начале следующим образом:

var textarea = document.querySelector(".minchar"),
    output = document.querySelector(".rechar");
var maxLength = +textarea.getAttribute("maxlength");

Теперь у нас есть текстовая область в переменной, выходной div в другой и максимальная длина, которую мы должны использовать.

Обработайте оставшиеся символы в функции.

Почему это вы можете спросить? Что ж, смотрите сами, насколько чище, читабельнее и проще меняется код. Таким образом, наличие простой функции, единственной задачей которой является обновление remaining characters output, позволит вам запускать функцию всякий раз, когда вы хотите ее обновить. Это может быть нажатие клавиши, изменение текстовой области или даже когда сайт загружается:

Функция:

function outputRemainingCharacters(){
    let used = textarea.value.length;
    output.innerText = `${maxLength - +used} characters remaining`;
}

Добавление функции в прослушиватель событий сразу после завершения загрузки веб-сайта:

window.onload = outputRemainingCharacters;

Так просто, он обновит ваше значение с самого начала.

Добавьте условие по умолчанию в оператор if.

Это связано с тем, что если вы не добавите значение по умолчанию, вы никогда не сможете вернуться к значение по умолчанию, как вы упомянули:

textarea.addEventListener('keydown', function(event) {

    outputRemainingCharacters();
    let used = textarea.value.length;
    if (maxLength - used == 0) {
        output.style.color = "#E01424";
    } else if (maxLength - used <= 100) {
        output.style.color = "#CF7721";
    } else {
        output.style.color = "#000"; //Default color
    }

});

Как видите, прослушиватель событий стал намного чище. Я бы также рекомендовал:

Use event listeners for the specific event on the specific element you need.

Это поможет вам не добавлять дополнительные операторы if для соответствия, если событие срабатывает для нужного вам элемента. Поскольку мы определили текстовую область в самом начале, теперь мы можем просто назначить прослушиватель событий непосредственно ей.

Примечание: Вы должны использовать прослушиватель событий keydown вместо keyup. Это связано с тем, что удерживание клавиши не вызовет событие, пока клавиша не будет нажата. keydown здесь будет точнее. Попробуйте удерживать клавишу пробела во время записи в текстовое поле в следующем фрагменте и посмотрите, что произойдет.

Проверьте этот пример:

var textarea = document.querySelector(".minchar"),
    output = document.querySelector(".rechar");
var maxLength = +textarea.getAttribute("maxlength");

function outputRemainingCharacters(){
    let used = textarea.value.length;
    output.innerText = `${maxLength - +used} characters remaining`;
}

textarea.addEventListener('keydown', function(event) {

    outputRemainingCharacters();
    let used = textarea.value.length;
    if (maxLength - used == 0) {
        output.style.color = "#E01424";
    } else if (maxLength - used <= 100) {
        output.style.color = "#CF7721";
    } else {
        output.style.color = "#000"; //Default color
    }

});

window.onload = outputRemainingCharacters;

<div class = "col-md-10 pl-0">
  <textarea cols = "15" rows = "4" placeholder = "Describe this Extra in brief for your guest" class = "minchar" maxlength = "250">Save time and return the vehicle at any fuel level. The price includes up to a full tank of petrol/diesel/charge.</textarea>
  <p class = "rechar" id = "test">250 characters remaining</p>
</div>

Если вы хотите сделать это с помощью jQuery, ниже следует сделать то же самое.

Фрагмент HTML:

    <label class = "col-md-12 pl-0">Description</label>
<div class = "col-md-10 pl-0">
  <textarea cols = "75" rows = "5" class = "minchar" maxlength = "250" placeholder = "Describe this Extra in brief for your guest">Save time and return the vehicle at any fuel level. The price includes up to a full tank of petrol/diesel/charge.</textarea>
  <p class = "rechar"></p>
  </div>

Фрагмент jQuery:

$('.minchar').on('input', function(e){
    e.stopPropagation();
  // Get Length
  var txtLength = $(e.currentTarget).val().length;
  // Get Remaining Length
  var txtLengthRemaining = 250 - txtLength;
  // Create HTML String
  var strHtml = txtLengthRemaining+" characters remaining";
  // Fill the String & Color based on below conditions
  if (txtLengthRemaining <= 0) {
    $('.rechar').css('color', '#E01424').html(strHtml);
  } else if (txtLengthRemaining <= 100) {
    $('.rechar').css('color', '#CF7721').html(strHtml);
  } else {
    $('.rechar').css('color', '#737373').html(strHtml);
  }
});  
// Trigger event on page load by default.
$('.minchar').trigger('input');

JSFiddle: http://jsfiddle.net/nh147uaf/2/