I would just use color: hsl(0,0%,0%) if your black does not work or use a hex code #000000 for black but if you want to control how dark it is just hsl but if not use hex code they those.

When the chosen control (https://harvesthq.github.io/chosen/) is disabled, the text is grey in color. How to change it to black?

My example:

                <select class="form-control chosen-select" id="purposeName" data-placeholder="  Purpose(s)..." 
                multiple required data-parsley-errors-container="#purposeError" name="myPurposes">
                    <option value="Email" selected="selected">Email</option>
                    <option value="Travel arrangements">Travel arrangements</option>
                    <option value="Online banking">Online banking</option>
                    <option value="Online shopping" selected="selected">Online shopping</option>
                </select>   

<script>
    $('#purposeName').prop('disabled', true);
    $('#purposeName').trigger('chosen:updated');
</script>

I tried this css but doesn’t work:

.chosen-container{
  width: 100% !important;
}

.chosen-container-multi .chosen-choices {
    min-height: 35px !important;
    border: 1px solid #CCCCCC;      
}   

.chosen-container-multi:disabled {
  color: black;
}

.chosen-container-multi .chosen-choices:disabled+label {
  color: black!important;
}