Manipulating HTML Hex Colors

rhapdog · Nov 19, 2011#12011-11-19T20:42+00:00

I need a script or scripts that will allow me to manipulate HTML Hex Colors.

All the colors are in the format #FFFFFF, which are always 6 hex digits preceded by the "#" symbol. No colors are ever referenced by name, and none are ever referenced by a 3 digit shortcut cheat. Should be simple enough in a find/replace, but it's the manipulation I need some assistance with.

I have several files with hundreds of occurrences of the colors that need to be changed. They need to be able to be manipulated in several different ways, but I want a script that will do only one of the functions for an entire "current open file" only.

Function 1: Swap Red and Blue.
Function 2: Swap Green and Blue.
Function 3: Swap Green and Red.
Function 4: Invert Red only. (by subtracting from hex FF)
Function 5: Invert Green only. (by subtracting from hex FF)
Function 6: Invert Blue only. (by subtracting from hex FF)

Providing me with a script that will swap any 2 colors or that will invert any one color should show me how it is done, and I should be able to produce the other scripts needed. This particular work is as a hobby so I can see how certain things work, and polish my skills a bit, I hope. I'm afraid I haven't written a script for UltraEdit in a couple of years, nor have I written any JavaScript in that long. Time to start getting back into it, I suppose.

EDIT: Also, one other thing I would absolutely love to have, but am not sure how to do it, is to invert the luminosity of the color, without effecting hue and saturation. I will settle for color swapping and inversion, but could really use the luminosity invert as well.

Mofi · Nov 19, 2011#22011-11-19T23:04+00:00

Here is a script for the 6 functions you requested running on all color values in a HTML or CSS file. You can create scripts respectively script functions with the code you can see in this small script for separate execution.

Code: Select all

if (UltraEdit.document.length > 0)
{
   UltraEdit.ueReOn();
   UltraEdit.insertMode();
   UltraEdit.columnModeOff();
   UltraEdit.activeDocument.top();
   UltraEdit.activeDocument.findReplace.mode=0;
   UltraEdit.activeDocument.findReplace.matchCase=false;
   UltraEdit.activeDocument.findReplace.matchWord=false;
   UltraEdit.activeDocument.findReplace.regExp=true;
   UltraEdit.activeDocument.findReplace.searchDown=true;
   UltraEdit.activeDocument.findReplace.preserveCase=false;
   UltraEdit.activeDocument.findReplace.replaceAll=true;
   UltraEdit.activeDocument.findReplace.replaceInAllOpen=false;
   if (typeof(UltraEdit.activeDocument.findReplace.searchInColumn) == "boolean")
   {
      UltraEdit.activeDocument.findReplace.searchInColumn=false;
   }
   // Using tagged regular expressions with UltraEdit engine for swaping colors.
   // Swap Red and Blue.
   UltraEdit.activeDocument.findReplace.replace("#^([0-9A-F][0-9A-F]^)^([0-9A-F][0-9A-F]^)^([0-9A-F][0-9A-F]^)","#^3^2^1");
   // Swap Green and Blue.
   UltraEdit.activeDocument.findReplace.replace("#^([0-9A-F][0-9A-F]^)^([0-9A-F][0-9A-F]^)^([0-9A-F][0-9A-F]^)","#^1^3^2");
   // Swap Green and Red.
   UltraEdit.activeDocument.findReplace.replace("#^([0-9A-F][0-9A-F]^)^([0-9A-F][0-9A-F]^)^([0-9A-F][0-9A-F]^)","#^2^1^3");
   
   // Inverting a color is more complicated because calculations can't be done by a
   // regular expression engine. It is necessary to replace each value separately.
   var sLeadingZeros = "000000";
   while (UltraEdit.activeDocument.findReplace.find("#[0-9A-F][0-9A-F][0-9A-F][0-9A-F][0-9A-F][0-9A-F]"))
   {
      // Get found color value into a string variable.
      var sColorVal = UltraEdit.activeDocument.selection;
      // Convert hexadecimal value (base 16) of the colors from string to
      // integer and subtract them from value 255 to get the inverted value.
      var nInvRedVal   = 255 - parseInt(sColorVal.substr(1,2),16);
      var nInvGreenVal = 255 - parseInt(sColorVal.substr(3,2),16);
      var nInvBlueVal  = 255 - parseInt(sColorVal.substr(5,2),16);
      // Calculate the total color value (RGB value).
      var nColorVal = nInvRedVal * 65536 + nInvGreenVal * 256 + nInvBlueVal;
      // Convert the values from integer to string and replace the
      // still selected HTML color value. Then continue with next.
      sColorVal = nColorVal.toString(16);
      sColorVal = sColorVal.toUpperCase();
      sColorVal = "#" + sLeadingZeros.substr(1, 6 - sColorVal.length) + sColorVal;
      UltraEdit.activeDocument.write(sColorVal);
   }
   UltraEdit.activeDocument.top();
}

Your last wish is more complicated because it is not trivial to convert a color from RGB color model to HSL color model and after inverting luminosity value back to RGB. But there are a lot of pages found by Google when searching for convert RGB HSL Javascript and therefore you should have no problem to get this function too.

rhapdog · Nov 20, 2011#32011-11-20T00:05+00:00

Thanks, Mofi, that's a great help. I've already converted those to all the single scripts I needed, and made a few combinations for shifting colors as well.

I believe I have enough information on the luminosity now. It will be a good project for me to tackle after the holidays next week.