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.

Answer 1

// 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>

Answer 2

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");)

Answer 3

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.