DEV Community

Aidan
Aidan

Posted on

2 1 1 1 1

How to define class name with color code

Image description

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>

Image description

Link:
https://colors.artyclick.com/color-name-finder/

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs