DEV Community

Discussion on: Designers and front-end folks! How do you name colors?

Collapse
faraixyz profile image
Farai Gandiya

Give the raw colors a name (eg —ocean-teal) and assign that name as a variable to another item (eg. —text-primary: —ocean-teal)

Collapse
gabrielmlinassi profile image
Gabriel Linassi

Good approach. I do the same. Sometimes I write the base colors as the Tailwind way red-100, red-200, red-300...

Collapse
webbureaucrat profile image
webbureaucrat Author

That's elegant. I think I'm going to try this out tonight.

Collapse
faraixyz profile image
Farai Gandiya

It should make theming easier as well since changing —text-primary will cascade everywhere it’s used as opposed to remembering where you set the colors.