0

I'm using named colors in CSS, e.g. background-color: red and would like to use a different tone of red. Is it possible to overwrite the definition of red, olive, brown, ... without having to replace the color-word with a Hex or RGB value?

Joshua Beckers
  • 857
  • 1
  • 11
  • 24
  • Not sure if adding the specific `rgb` or `hex` into a `variable` and then calling it wherever needed is what you're looking for (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)? – Jeff Berlin May 21 '20 at 14:50
  • Use SCSS colour variables. Not sure why you don't want to use hex values though? – Ben Foster May 21 '20 at 14:50

1 Answers1

1

there is var in css var(--colorName) that you can use

background-color : var(--colorName)

and to define:

:root{
--colorName: coral;
}

see this article https://www.w3schools.com/css/css3_variables.asp

legrandmawak
  • 11
  • 1
  • 4
  • Thank you for your answer. I want to redefine the color code of 'coral' in your case. Currently ```Coral / #ff7f50 hex color``` but should be ```Coral / #ff7123 hex color``` – Joshua Beckers May 21 '20 at 14:55
  • @JoshuaBeckers to his example: `:root { --coral: #whateverHexYouWant; }`, then call it with `.classname { color: var(--coral); }` – Jeff Berlin May 21 '20 at 14:57
  • I have existing CSS/JS code that where I wanted to avoid changing all the color names into codes. This here answers my question: https://stackoverflow.com/questions/21036884/can-the-default-named-css-colors-be-overridden – Joshua Beckers May 21 '20 at 14:59
  • I wouldn't advise to change the color of the Webkit. but if you are intersted to have a var system maybe you should look into CSS framwork, Tailwind or use SCSS : $colorBeige: #888777; background-color: $colorBeige; – legrandmawak May 21 '20 at 15:17