Change a color code to another using JavaScript in browser console

Question

I am a web designer.

When I browse web sites I like to change some colors and look at how site will appear when I change the primary color.

I do this using "inspect elements". But it is very time consuming work since I need to add lot of codes to change everywhere.

Is there any JavaScript code which I can use to change one color code to another color code using browser console.

Basically what I want to is something like below...

Change #FFF8DC color to #e6dfc6 color everywhere in this site using browser console.

Probably not. But I haven't done an exhaustive search of the features of all browsers out there. — Nisarg Shah, Aug 09 '18 at 06:42
of course ... iterate every single element - of each element get the computed style ... go through all those attributes to look for the source colour, you *may* need to look for any or all of `#fff8dc` or `rgb(255,248,220)` or `rgba(255,248,220, \d+)` (\d+ means any number) - then change that to your destination colour - should be about a dozen lines of code — Jaromanda X, Aug 09 '18 at 06:46
^ not to forget `hsla` as well. (and you might want to consider `#ffd` to `#edc` as well?) — Nisarg Shah, Aug 09 '18 at 06:47
Actually getComputedStyle should always return computed values in the format `"rgb(nnn, nnn, nnn)"` or `rgba(nnn, nnn, nnn, n)` and the whole thing can be reduced to less than a dozen lines: `switchColor=(c1, c2) => { [...document.all].forEach(e=>{ let s = getComputedStyle(e); [...s].forEach(k=>{if(s[k]===c1)e.style[k]=c2}) }) };` testable in this very page with `switchColor("rgb(0, 119, 204)", 'pink')` — Kaiido, Aug 09 '18 at 07:05
@IamtheMostStupidPerson would you like to write a feedback to my answer below, please. — Bharata, Aug 15 '18 at 08:16

score 5 · Answer 1 · edited May 10 '23 at 10:04

Principle

As Kaiido commented: “ .getComputedStyle() should always return computed values in the format rgb(nnn, nnn, nnn) or rgba(nnn, nnn, nnn, n)”.

So, after looping through all the elements computed styles properties, and replace the applicable color values, there shouldn't be much to do.

My updates

As you want to be able to “Change #FFF8DC color to #e6dfc6 color”, I modified the function from this solution (RGB to hex and hex to RGB) to be able to use it in my snippet,
Modified my function to make it work with properties values containing multiple colors (e.g. a gradient),
Added strict as an optional parameter, to be able to avoid the color replacement in values containing multiple colors.

Snippet

// Below function modified from solution here: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? "rgb(" + [
    parseInt(result[1], 16),
    parseInt(result[2], 16),
    parseInt(result[3], 16)
  ].join(', ') + ")" : null;
}

// Function to change a color to another one
function colorChange(colorOld, colorNew, strict = false) {
  // If hex notation, convert to rgb
  if (colorOld.includes('#'))
    colorOld = hexToRgb(colorOld);
  // Loop through all elements styles
  [...document.all].forEach(elm => {
    let cStyle = getComputedStyle(elm);
    [...cStyle].forEach(prop => {
      // Escape if not a string
      if (typeof cStyle[prop] !== 'string') return;
      // Check if colorOld is in property
      if (cStyle[prop].includes(colorOld)){
        // If strict, colorOld is replaced only if it's the only value of the property
        if (!strict || cStyle[prop] === colorOld)
          elm.style[prop] = cStyle[prop].replace(colorOld, colorNew); // Replace color
      }
    })
  })
};

// Then, call your function the way you like !
colorChange("rgb(255, 0, 0)", 'orange');
colorChange("#00ff00", '#125689', true); // Note the use of the “strict” parameter here
colorChange("#00f", 'rgb(255, 0, 128)');

<p style="color: rgb(255, 0, 0);">I was red !</p>
<p style="color: #00ff00;">I was green !</p>
<p style="color: #00f;">I was blue !</p>
<div style="background: linear-gradient(to right, #f00, #0000ff);">
  <p>I was a gradient from red to blue</p>
</div>
<div style="background: linear-gradient(to right, #ff0000, #0f0);">
  <p>I was a gradient from red to green (green is not replaced here, because of the use of “strict”)</p>
</div>

Of course, you can try the functions on this very page after copy/pasting those in your console. (for example colorChange("#eff0f1", "#ffaaaa");)

Ah beware, you are assuming you'll retrieve a string from `cStyle[prop]` while it may not be (it is undefined on my FF for Android on I don't know which property...). Edit: could log it, and it is some -moz-window... props and some css variables probably inserted by snippet's console. — Kaiido, Aug 17 '18 at 09:39
@Kaiido What about I correct it that way: `let cProp = cStyle[prop] || ''` and then use this variable ? — Takit Isy, Aug 17 '18 at 09:48
Since you are not trying to golf anything, I'd rather play safety and readability. You are going to use a String method (`includes`), so check that what you have is indeed a string. You never know what CSS specs will become in a few years, and if they start accepting other types (like number), you'll be glad of this little `if(typeof cStyle[prop] !== 'string') return;`. — Kaiido, Aug 17 '18 at 09:52

score 0 · Answer 2 · answered Aug 15 '18 at 07:31

You wrote: Change #FFF8DC color to #e6dfc6 color everywhere in this site using browser console.

This is very easy! On this site we have #FFF8DC as backgroundColor by "Featured on Meta" div block on the right. You have to put in the browser console:

document.querySelector('.community-bulletin').style.backgroundColor = "#e6dfc6";

Or you could choose some element using "inspect elements" like on this screenshot:

and then for changing of this foreground and background colors you have to put in the browser console:

$0.style.color = "orange";
$0.style.backgroundColor = "#e6dfc6";

press the enter key and colors will be changed.

If you want to use some code for the console all the time then you have to use snippets. Go to the developer tools and click there on the tab "Sources" like on this screenshot:

then put your code to a new snippet and then click with right mouse button the name from this snippet and in context menu click on "Run". This snippet will be executed. Do not forget to save this snippet: click with right mouse button the name from this snippet and in context menu click on "Save...", but on displayed "Save dialog box" click on "Cancel" (this is weird) and your snippet will be saved.

Change a color code to another using JavaScript in browser console

2 Answers2

Linked