Aidan
I used to be quite confused when naming elements by color code.
Example issues:
This panel default has a background white
<div class="panel">default</div>
This panel default has a background #757575
<div class="panel panel__???">#757575</div>
This panel default has a background #cdcdcd
<div class="panel panel__???">#cdcdcd</div>
OMG! How do I name panel__??? class elements
I recommend https://colors.artyclick.com/color-name-finder/ it solves naming
This case:
This panel default has a background #757575
<div class="panel panel__???">#757575</div>
Solved:
you can reference Name or Similar names
results
<div class="panel panel__boulder">#757575</div>
