Manipulating HTML Hex Colors

Manipulating HTML Hex Colors

2362
MasterMaster
2362

    Nov 19, 2011#1

    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.

    6,604548
    Grand MasterGrand Master
    6,604548

      Nov 19, 2011#2

      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.

      2362
      MasterMaster
      2362

        Nov 20, 2011#3

        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.