2

I have a website with several tones of green, and I want to convert it to a red website. Is there a simple way to convert all the green colors to the corresponding colors in red? I don't want to do it manually (by eye) but it would be good to have a mathematical way to do it. So eventually I can program a script to convert them...

Additional info: The colors are in RGBA format.

Improve this question
6
  • Better ask in stackoverflow.com/questions/tagged/css since this is only visual graphic related forum :)
    – Mr.Online
    May 9, 2019 at 9:43
  • @DesignPhoenix isn't RGB a visual graphic thing? The fact that i will then use the RBG value in CSS it should not matter... But i will update the question to avoid misunderstanding...
    – Simoyw
    May 9, 2019 at 9:55
  • There are too many ways to do this. See this post for more info
    – Zach Saucier
    May 9, 2019 at 13:12
  • Tell me one :) the @Billy Kerr answer works but I have strange colors sometimes. But so far seems good to me...
    – Simoyw
    May 9, 2019 at 13:19
  • while CSS is part of (web)design work, code implementation is sort of off topic here. It can be asked in Stack Overflow.
    – Luciano
    May 9, 2019 at 13:59

3 Answers 3

Reset to default
4

A simple method might just be to swap the R and G channels. The resulting colours may be somewhat purplish depending on how much blue there is. To get warmer reds, you could also set the B channel to 00.

For example

enter image description here

Improve this answer
0
1

You can use hue shift filtering. It's like rotating RGB color wheel. Photoshop users do it often, but it's also available for web site programmers.

Unfortunately I'm not a programmer, so I cannot write any plausible code for it. As little I know of which browsers really understand it. Check this article for a start: https://css-tricks.com/almanac/properties/f/filter/

BTW. RGB color system as well as its polar coordinate variant HSB has a weakness: Hue shift affects apparent luminosity. That can be fixed by inserting a top layer with blending mode (also a common term for Photoshop and web programming) "luminosity". That layer has original colors. Lab and HCL color systems do not have that weakness.

Improve this answer
1
  • Follow up to your answer, here is a JavaScript HSL slider. You should be able to pull the code if you inspect the page :) hslpicker.com/#c905ff
    – CTOverton
    May 10, 2019 at 6:11
0

I'd be inclined to define the new color hex values I want and the values they are to replace.

Then merely use find and replace in a text editor to alter the hex values. Find [old] replace with [new].

Depending on the number of files and colors it could be a very quick thing. Some text editors will allow you to find/replace across a number of documents at one time. (I use BBEdit and can run find/replace on dozens of files at once)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.