How to set "Find" Background colour?



  • @PeterJones said:

    • Mark Color > foreground is the box outline around the active

    I meant Mark Color > background

    Yes, a bug was introduced in v7.7.1. In v7.7(.0), the Selected Text Colour > background was what drew the box around the active one, and Smart Highlighting > background is what coloured the other matches. That’s as I would expect.

    submitted issue #6100



  • Hello @Peterjones,

    I’m really sorry, Peter, as I could not draw any conclusion from your tests, regarding the colour change of some styles, in the Style Configurator

    First, from your animated gif picture, it happens that :

    • Some styles occur twice, as the Find Mark Style

    • Some styles are not part of the default styles list, as the Mark Color style !

    • Some styles seem to be missing, as the Fold Active style

    And, personally, I think that your image evokes different styles, at the same time which makes more difficult to understand your animation ! Don’t feel offended !


    To my mind, the default list of styles for the language Global Styles is :

    •--------------------------------------------------•----------------------•
    |  DEFAULT Styles of the "Global Styles" language  |  Modifiable Colours  |
    •--------------------------------------------------•----------------------•
    |  Global override                                 |   Back/Foreground    |
    |  Default style                                   |   Back/Foreground    |
    |  Indent guideline style                          |   Back/Foreground    |
    |  Brace highlight style                           |   Back/Foreground    |
    |  Bad brace colour                                |   Back/Foreground    |
    |  Current line background colour                  |     Background       |
    |  Selected text colour                            |     Background       |
    |  Caret colour                                    |     Foreground       |
    |  Edge colour                                     |     Foreground       |
    |  Line number margin                              |   Back/Foreground    |
    |  Fold                                            |   Back/Foreground    |
    |  Fold active                                     |     Foreground       |
    |  Fold margin                                     |   Back/Foreground    |
    |  White space symbol                              |     Foreground       |
    |  Smart Highlighting                              |     Background       |
    |  Find Mark Style                                 |     Background       |
    |  Mark Style 1                                    |     Background       |
    |  Mark Style 2                                    |     Background       |
    |  Mark Style 3                                    |     Background       |
    |  Mark Style 4                                    |     Background       |
    |  Mark Style 5                                    |     Background       |
    |  Incremental highlighting all                    |     Background       |
    |  Tags match highlighting                         |     Background       |
    |  Tag attribute                                   |     Background       |
    |  Active tab focused indicator                    |     Foreground       |
    |  Active tab unfocused indicator                  |     Foreground       |
    |  Active tab text                                 |     Foreground       |
    |  Inactive tabs                                   |   Back/Foreground    |
    |  URL howered                                     |     Foreground       |
    •--------------------------------------------------•----------------------•
    

    So, Peter, may be it would be interesting to redo your tests, after renaming your Stylers.xml file, in all your N++ versions, in order that, on starting N++, the Stylers.model.xml file would be copied as a neat Stylers.xml file !

    BR

    guy038



  • Some styles are not part of the default styles list, as the Mark Color style !

    Apparently so. When I went to my fresh npp unzip (ie, exactly what came out of the zipfile), it didn’t have that extra style, and the styles behaved as expected. My bad. I’ll go close the issue.



  • @PeterJones

    Ok…so where did extra or non-standard stuff actually come from, for you? If I look at mine, I have exactly what @guy038 has enumerated.



  • @Alan-Kilborn said:

    so where did extra or non-standard stuff actually come from

    They magically appeared out of nowhere. They aren’t in my stylers.xml, and when i looked for those styles today (after having unloaded and reloaded notepad++ multiple times in the intervening day), those styles are not listed.

    I honestly don’t know where they came from. I am guessing they came when I was experimenting with the python for Style token not saved… I’m not sure what I did (though I had tried some pretty strange scintilla commands before you posted), but even that was almost a week ago, and I usually restart Notepad++ more often than that. So I don’t know where they came from… But they are gone now.



  • Hi, @peterjones, @alan-kilborn,

    I’m rather reassured because the multiple tests I did, with, both, N++ v7.7 and v7.7.1, did not show any anomaly ;-))

    Of course, a software is never perfect and can miss some associations or mis-uses ! But the good news is that, starting from a fresh official download of Notepad++, everything just go right :-))

    Cheers,

    guy038

    P.S. :

    Off topic : I’m, now, going to have a glance to that recent issue :

    https://github.com/notepad-plus-plus/notepad-plus-plus/issues/5830



  • So I guess even after Peter’s diversionary tactic ;) , my question still remains of why the background color of text doesn’t seem to match the sample color presented in Style Configurator…?



  • @Alan-Kilborn said:

    why the background color of text doesn’t seem to match the sample color presented in Style Configurator…?

    Now that mine’s fixed, I think it match for me:
    Imgur

    The only discrepancy is the Smart Highlighting… but highlighting often has alpha/transparency, so that makes sense. Especially since it’s different depending on whether the background is normal white, or the active line, the highlight color changes slightly.



  • So I think I remain confused…or just dumb. If I create and then “mark” a bunch of whitespace (using the Search > Mark... function), and then call up the Style Configurator for Find Mark Style, the colors simply don’t match. Nothing else coloring-wise should be going on on the lines where the whitespace is to create some sort of “blend”; they were definitely “pure white” before marking. Clearly the colors are different in the screenshots (I used a freshly unzipped portable 7.7.1), below.

    It begs the question, if the user wants to set up a certain color, and after doing so gets something different, what’s the point?

    Imgur

    Imgur



  • I still maintain it’s transparency. If it is, there should be a reasonably-consistent mapping from what you program for Find Mark Style > Background to what you measure, compared to the background. Since we know that something that’s 100% transparent will only show the background, and nothing of what you program; and since we know that something that’s 0% transparent will only show the programmed value and nothing of what’s in the background, we can figure out that the formula is: transparency = (measured-programmed)/(background-programmed).

    So taking your example of red on white:

    background: 255 255 255     WHITE
    programmed: 255   0   0     BRIGHT RED
    measured  : 255 155 155
    => 155/255=60.8% of the way from programmed to background (ie, 60% transparent)
    

    Change the background to black, with the same programmed value, and I see (100,0,0) as the darker red highlight:

    background:   0   0   0     BLACK
    programmed: 255   0   0     BRIGHT RED
    measured  : 100   0   0
    => 155/255=60.8% of the way from programmed to background
    

    Change the background to charcoal:

    background:  63  63  63     CHARCOAL
    programmed: 255   0   0     BRIGHT RED
    measured  : 138  38  38
    R   CALC: (138-255=-117)/(63-255=-192) = 117/192 = 60.9%
    G,B CALC: (38-0=38)/(63-0) = 38/63 = 60.3%
    

    After three experiments getting within resolution of each other as far as measured color vs programmed and background, I am going to claim that it’s 60% transparency.

    if the user wants to set up a certain color, and after doing so gets something different, what’s the point?

    Yeah, it would be nice to have the ability to enable/disable transparency on those “highlight” styles, like Find Mark and Smart Highlighting. Maybe you should suggest it ;-). (I already made and cancelled an issue report for this thread, so I’m not going to do another.)



  • @PeterJones said:

    I still maintain it’s transparency

    And that’s fine, but I maintain that the sample shown should reflect that to show a representative sample. :)

    Maybe I will enter an issue.

    BTW, how are you “measuring” to produce your measured values above?



  • @Alan-Kilborn said:

    BTW, how are you “measuring” to produce your measured values above?

    Taking a screenshot and using the mspaint.exe eyedropper



  • @Alan-Kilborn said:

    sample shown should reflect that to show a representative sample

    How many different backgrounds should it show the sample against? Because there’s the default background, and the selected-line background, and … All of those will influence what the final result looks like. (Probably my vote would go for default background, but the results will still vary depending on circumstances.) I think if the box at least admitted which styles were used with transparency (even if it doesn’t let you choose how much transparency), then the user could be considered informed that the final result won’t match exactly what’s in the sample box.



  • @PeterJones

    Maybe we are just happy that if some sort of red (or blue, or whatever) is chosen…some sort of red (or…) results. :)



  • @Alan-Kilborn You are close! Indeed, you are right in that it takes the background from “selected text colour”, but the foreground is still taken depending on the respective syntax highlighting, which means I have to find a background colour for this, which is different from the current background colour, but at the same time sufficiently distinct from every foreground colour which might be defined by the syntax settings.



  • @Ronald-Fischer

    I supposed the true answer is that it is not a simple thing. Regarding foreground and background, even that is complicated because even though both appear for each type of setting, sometimes one or the other is ignored (see @guy038 's table above).



  • @guy038 said:

    Off topic : I’m, now, going to have a glance to that recent issue :

    https://github.com/notepad-plus-plus/notepad-plus-plus/issues/5830

    How’s that going?



  • Hello, @peterjones, @alan-kilborn and All,

    How are you, all ? You were probably wondering what was happening to me ? Fortunately, nothing serious. I’m just fine ! Actually, since more than a month, I was intensely studying numerous aspects of color, as well as color coding in computer science and, of course, some practical results for our beloved editor ! Be convinced that I’m quite pleased to be back in the Community and to share my searches ;-))

    First, in the next post, you’ll see a ( very looooooong ! ) list of links, relative to color and vision, on-line color programs and color lists. Even if you do not plan to visit all the different sites, I strongly advice you to have a look to the first section, named General Information, in order to have an overview on color matters, used in computers, which should be useful for the rest of the discussion !

    Best Regards,

    guy038



  • Hi, All,

    ----------------------------------- General Information ----------------------------------------------------------
    
    https://blog.asmartbear.com/color-wheels.html                             ( Introduction )
    
    http://www.surendranath.org/GPA/General/ColorAS/ColorAS.html              ( Additive and Subtractive coloring )
    
    https://www.w3schools.com/colors/default.asp                              ( Excellent Color Tutorial )
    
    https://www.physicsclassroom.com/class/light/Lesson-2/Color-Subtraction   ( Color Subtraction process )
    
    https://htmlcolorcodes.com/color-picker                                   ( See section "Color Harmonies", below the Color Picker area )
    
    https://www.december.com/html/spec/colorhslhexuse.html                    ( Color Schemes Definitions / Examples )
    
    https://www.december.com/html/spec/colorshadesuse.html                    ( Color Schemes Definitions / Examples )
    
    
    ---------------------------------- Wikipedia Documentation -------------------------------------------------------
    
    https://en.wikipedia.org/wiki/Color_theory
    
    https://en.wikipedia.org/wiki/Color
    
    https://en.wikipedia.org/wiki/Afterimage
    
    
    https://en.wikipedia.org/wiki/Web_colors
    
    https://en.wikipedia.org/wiki/Tints_and_shades
    
    
    https://en.wikipedia.org/wiki/Shades_of_black ( or blue, brown, cyan, green, gray, magenta, orange, pink, red, violet, white, yellow )
    
    
    https://en.wikipedia.org/wiki/RGB_color_model
    
    https://en.wikipedia.org/wiki/CMY_color_model
    
    https://en.wikipedia.org/wiki/RYB_color_model
    
    https://en.wikipedia.org/wiki/Color_scheme
    
    
    https://en.wikipedia.org/wiki/Comparison_of_color_models_in_computer_graphics
    
    https://en.wikipedia.org/wiki/HSL_and_HSV
    
    https://en.wikipedia.org/wiki/CMYK_color_model
    
    
    https://en.wikipedia.org/wiki/Color_difference
    
    https://en.wikipedia.org/wiki/Gamma_correction#Simple_monitor_tests
    
    https://en.wikipedia.org/wiki/Alpha_compositing
    
    
    ----------------------------------- Color Code Converters / Conversion Formulas ----------------------------------
    
    https://www.rapidtables.com/convert/color/index.html             ( Converter / Conversions )
    
    https://www.rapidtables.com/convert/number/hex-to-decimal.html   ( Hex - Decimal Conversion )
    
    https://www.rapidtables.com/convert/color/hex-to-rgb.html        ( Hex - RGB Conversion )
    
    
    ----------------------------------- On-Line Color Pickers (0) ----------------------------------------------------
    
    https://www.w3schools.com/colors/colors_picker.asp                                             ( Hex, RGB, HSL input )
    
    http://chir.ag/projects/name-that-color  [ /#xxxxxx ]                                    (1)   ( Hex input )
    
    https://www.color-blindness.com/color-name-hue                                           (1)   ( Hex, RGB, HSV  input )
    
    https://www.tydac.ch/color                                                                     ( Hex, RGB, HSV, Dec input )
    
    https://www.colorhexa.com  [ /xxxxxx ]                                                         ( All formats input )
    
    https://www.rapidtables.com/web/color/RGB_Color.html                                           ( Hex, RGB, HSV input )
    
    https://www.color-hex.com  [ /xxxxxx ]                                                         ( Hex, RGB, HSL, HSV input )
    
    https://htmlcolorcodes.com/color-picker                                                  (2)   ( Hex, RGB input )
    
    https://www.computerhope.com/tips/tip143.htm                                             (3)   ( Mouse gestures )
    
    http://www.copysense.co.uk/mixem.php                                                           ( Hex, RGB input )
    
    http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker  [#xxxxxx[,yyyyyy]...]    (4)   ( All formats input )
    
    https://www.colorschemer.com/color-picker                                                      ( Hex, RGB, HSL input )
    
    https://encycolorpedia.com   [ /xxxxxx ]                                                 (5)   ( All formats input )
    
    https://encycolorpedia.com/paints  [ ?color=xxxxxx ]
    
    https://www.colorcombos.com/combotester.html  [ ?color0=xxxxxx&color1=yyyyyy&.....&show_text=[N/Y] ]   ( All formats input )
    
    
    ----------------------------------- Notes on Color Pickers -------------------------------------------------------
    
    (0) - The syntaxes 'xxxxxx' and 'yyyyyy' refer to the HTML 6-Hexadecimal Digits color
    
    (1) - Displays also the Color Name
    
    (2) - Input in HSL or CMYK Color Space zones does not produce correct results !
    
    (3) - 2 simultaneous colors-pickers
    
    (4) - Preferably, select the "show all" option for the "Color Selection Mode", in order to display controls in all Color Spaces
    
        - Possibility of several simultaneous Color Pickers
    
        - To be sure to display all step colors, in the gradient list, for all color spaces, simply choose the swatches number, according to the formula :
    
              Swatches Number = Stops Number + ( Stops Number - 1 ) * k , where k is an integer >= 0
    
    (5) - Beware : Erroneous Gradient to Complementary if CIELCHuv or HSL Color Space choice
    
    
    ----------------------------------- Color Gradient Generators ----------------------------------------------------
    
    https://www.w3schools.com/colors/colors_gradient.asp
    
    https://www.colorhexa.com/color-gradient
    
    
    http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker
    
    http://davidjohnstone.net/pages/cubehelix-gradient-picker
    
    
    https://meyerweb.com/eric/tools/color-blend/#:::hex
    
    
    ----------------------------------- Color Contrast Calculators ---------------------------------------------------
    
    https://snook.ca/technical/colour_contrast/colour.html   ( Color Contrast Check )
    
    http://www.msfw.com/Services/ContrastRatioCalculator     ( Color Contrast Ratio Calculator with samples )
    
    
    ----------------------------------- Color Blind Simulators -------------------------------------------------------
    
    https://www.color-blindness.com/coblis-color-blindness-simulator
    
    
    ----------------------------------- Color Scheme Generators [ and Color Pickers ] --------------------------------
    
    https://coolors.co/app                      ( Click on Space key to generate a NEW 5-colors palette )
    
    https://color.adobe.com/create/color-wheel
    
    https://www.sessions.edu/color-calculator   ( From 1 to 3 simultaneous colors-pickers )
    
    https://bahamas10.github.io/ryb             ( Use option Mask in "Color Harmonies" and choose Color Space in "Interpolation" ! )
    
    
    ----------------------------------- Color Palette Generators from an Image or URL --------------------------------
    
    http://www.colr.org
    
    https://www.rapidtables.com/web/color/color-tester.html
    
    http://mkweb.bcgsc.ca/color-summarizer/?analyze
    
    https://labs.tineye.com/color/
    
    https://color.adobe.com/create
    
    http://colormind.io/image
    
    https://www.canva.com/colors/color-palette-generator
    
    http://www.colorfavs.com
    
    https://coolors.co/app
    
    https://encycolorpedia.com
    
    
    ----------------------------------- NET Image Search Engines -----------------------------------------------------
    
    https://color.adobe.com/explore
    
    https://labs.tineye.com/multicolr          ( Search images on Flickr, from 1 to 5 given colors, in adjustable proportions )
    
    http://designspiration.net/colors/xxxxxx   ( Search design images with colors similar to color with HTML value xxxxxx )
    
    https://www.tineye.com
    
    https://images.google.com                  ( Search [ similar ] images from text or from the uploaded image less than ~ 5.5 Mb )
    
    https://www.shutterstock.com               ( Search [ similar ] images from text or from the uploaded image less than 5 Mb )
    
    
    ----------------------------------- Color Charts / Palettes ------------------------------------------------------
    
    https://htmlcolorcodes.com/color-chart                    ( Color charts )
    
    http://html-color-codes.com                               ( HTML Color Chart in Hex )
    
    http://html-color-codes.com/rgb.html                      ( HTML Color Chart in RGB )
    
    
    https://www.december.com/html/spec/colorhslhex.html       ( Hue intervals of 30° )
    
    https://www.december.com/html/spec/colorhslhex10.html     ( Hue intervals of 10° )
    
    https://www.december.com/html/spec/colorhslhex6.html      ( Hue intervals of  6° )
    
    
    https://www.december.com/html/spec/colorhsltable.html     ( Hue intervals of 30° )
    
    https://www.december.com/html/spec/colorhsltable10.html   ( Hue intervals of 10° )
    
    https://www.december.com/html/spec/colorhsltable6.html    ( Hue intervals of  6° )
    
    
    https://www.december.com/html/spec/colorspottable.html
    
    
    http://mkweb.bcgsc.ca/colornames/#color-name-swatches     ( Hue intervals of 30° and Luminance intervals of 20 )
    
    https://www.color-hex.com/color-palettes                  ( 58520 palettes listed ! )
    
    https://www.canva.com/learn/100-color-combinations        ( 100 Brilliant Palette Combinations )
    
    http://files.culturenumerique.webnode.fr/200000039-4f4605138d/nuancier_quadri.pdf  ( 1,900 colors )
    
    
    ----------------------------------- Miscellaneous ----------------------------------------------------------------
    
    http://people.csail.mit.edu/jaffer/Color/Dictionaries.html                 ( List of color lists ! )
    
    https://www.pantone.com/color-intelligence/color-education/color-iq-test   ( Hues Vision Tester : funny and informative ! )
    
    https://www.canva.com/colors/color-meanings                                ( Color meanings )
    
    http://mkweb.bcgsc.ca/color                                                ( 'Colorconvert' and 'colorsnap' DOS mode software )
    
    
    http://pngimg.com/download/19631    ( Google logo )
    
            Red = EA4335               Green = 34A853                Yellow = FBBC05                  Blue = 4285F4
        ( ~ Cinnabar E34234 )    ( ~ Chateau Green 40A860 )    ( ~ Selective Yellow FFBA00 )    ( ~ Dodger Blue 1E90FF )
    
    
    ----------------------------------- Lists of Named colors --------------------------------------------------------
    
    https://www.color-hex.com/color-names.html                                       505 colors
    
    http://chir.ag/projects/ntc/ntc.js                                             1,566 colors
    
    https://www.colorhexa.com/color-names                                            746 colors
    
    https://color-ize.com/color-list.php#D                                           170 colors   ( Extract with Source Code )
    
    http://www.agence-casanova.fr/professionnel/identitaire/pantone.html             907 colors
    
    https://www.toutes-les-couleurs.com/nuancier-pantone.php                         992 colors   ( Extract with Source Code )
    
    http://www.stardustcolors.com/documents/fr/nuancier-pantone.pdf                  992 colors
    
    https://www.rapidtables.com/web/color/RGB_Color.html#color-table                 155 colors
    
    http://www.resene.co.nz/swatches/download_pencils.xls                         10,125 colors
    
    https://sashat.me/2017/01/11/list-of-20-simple-distinct-colors                    20 colors
    
    https://htmlcolorcodes.com/color-names                                           140 colors   ( HTML  + CSS Color Names )
    
    https://www.computerhope.com/htmcolor.htm                                        342 colors
    
    http://www.workwithcolor.com/color-chart-full-01.htm                             258 colors
    
    https://www.colorcombos.com/color-tags.html                                    1,598 Color Names
    
    https://github.com/bahamas10/css-color-names/blob/master/css-color-names.json    148 colors   ( HTML  + CSS Color Names )
    
    
    https://cloford.com/resources/colours/500col.htm                                 552 colors
    
    https://cloford.com/resources/colours/namedcol.htm                               140 colors   ( HTML + CSS Color Names )
    
    
    https://www.w3schools.com/colors/colors_crayola.asp                              318 colors
    
    https://www.w3schools.com/colors/colors_names.asp                                140 colors   ( HTML Color Names )
    
    https://www.w3schools.com/colors/colors_trends.asp                               126 colors
    
    
    http://applied-r.com/download/6568/                                              657 colors   ( PDF file with Colors by Name )
    
    http://applied-r.com/download/6577/                                              657 colors   ( PDF file with Hex Color values )
    
    
    http://people.csail.mit.edu/jaffer/Color/resenecolours.txt                     1,383 colors   ( 2007 )
    
    http://people.csail.mit.edu/jaffer/Color/Resene-2010-rgb.txt                   1,378 colors   ( Use preferably the previous list ! )
    
    http://people.csail.mit.edu/jaffer/Color/rgb.txt                                 732 colors   ( X Consortium )
    
    
    https://en.wikipedia.org/wiki/List_of_colors:_A%E2%80%93F                        334 colors   \
                                                                                                  |
    https://en.wikipedia.org/wiki/List_of_colors:_G%E2%80%93M                        235 colors    >  956 colors
                                                                                                  |
    https://en.wikipedia.org/wiki/List_of_colors:_N%E2%80%93Z                        387 colors   /
    
    
    https://en.wikipedia.org/wiki/List_of_colors_%28compact%29                     1,537 colors   ( Extract with Source Code )
    
    https://en.wikipedia.org/wiki/List_of_colors_by_shade                            526 colors   ( Extract with Source Code )
    
    
    https://en.wikipedia.org/wiki/X11_color_names#Color_name_chart                   145 colors   ( X11 Color Names )
    
    https://en.wikipedia.org/wiki/Web_colors#X11_color_names                         140 colors   ( X11 Color Names )
    
    
    https://en.wikipedia.org/wiki/Web_colors#Color_table                             216 colors   ( = 6 * 6 * 6 Web-Safe Colors )
    
    https://en.wikipedia.org/wiki/List_of_Crayola_crayon_colors                      164 colors
    
    
    https://www.december.com/html/spec/colorcodes.html                             1,109 colors
    
    https://www.december.com/html/spec/colorucl.html      \
                                                           >                         932 colors   ( + 42 NON-defined )
    https://www.december.com/html/spec/colorucl2.html     /
    
    
    https://encycolorpedia.com/html                                                  148 colors   ( HTML  + CSS Color Names )
    
    https://encycolorpedia.com/named                                               1,690 colors
    
    
    http://mkweb.bcgsc.ca/colornames/color.names.rgbonly.txt                       9,284 colors
    
    http://mkweb.bcgsc.ca/colornames/color.names.txt                               9,284 colors
    
    http://mkweb.bcgsc.ca/colornames/rgb.names.txt.gz                                             ( 217 Mo file ! )
    
    http://mkweb.bcgsc.ca/colornames/#color-name-swatches                          7,820 colors
    
    
    https://xkcd.com/color/rgb                                                       954 colors
    
    https://xkcd.com/color/rgb.txt )                                                 954 colors
    
    https://blog.xkcd.com/2010/05/03/color-survey-results                             48 colors   ( Section "RGB values" )
    
    
    https://www.colorschemer.com/roblox-color-codes                                  208 colors
    
    https://www.colorschemer.com/color-names                                         139 colors   ( HTML and CSS Color Names )
    
    https://www.colorschemer.com/rgb-color-codes                                     139 colors   ( RGB Color Names )
    
    
    ----------------------------------- Additional Theoretical Information on Color ----------------------------------
    
    http://www.handprint.com/HP/WCL/wcolor.html   ( Color Theory )
    
    http://www.handprint.com/LS/CVS/color.html    ( Color Vision )
    
    http://www.handprint.com/HP/WCL/wtech.html    ( Color Techniques )
    
    
    http://www.handprint.com/HP/WCL/color1.html   ( Light and the Eye )
    
    http://www.handprint.com/HP/WCL/color4.html   ( Color Constancy )
    
    http://www.handprint.com/HP/WCL/tech13.html   ( Color Harmony and Design )
    
    
    ------------------------------------------------------------------------------------------------------------------
    

    guy038



  • Hi, @peterjones, @alan-kilborn and All,

    Now, that you’ve got some color notions, here are, in this post, the general algorithms to switch from RGB color space encoding to HSL space encoding and vice versa. I, intentionally, used natural language and the different calculations are very basic. I also made sure that the areas of validity, of each entry, were indicated !

    So, you should apply these 2 algorithms to your preferred programming language, very easily ! I personally tested them and all results are correct :-))

    
    #-----------------------
    # Conversion RGB -> HSL
    #-----------------------
    
    
    # ---------- Assumptions on Red, Green and Blue components -----------------------------------------
    
       Red in interval [ 0 - 255 ]    Grn in interval [ 0 - 255 ]    Blu in interval [ 0 - 255 ]
    
    # ---------- Normalization to interval [ 0 - 1 ] ---------------------------------------------------
    
        r = Red / 255    g = Grn / 255    b = Blu / 255
    
    # ---------- Calculus of min RGB [ 0 - 1 ] and max RGB [ 0 - 1 ]------------------------------------
    
        min = MIN ( r , g , b )    max = MAX ( r , g , b )
    
    # ---------- Calculus of c [ 0 - 1 ] ---------------------------------------------------------------
    
        c = max - min
    
    # ---------- Calculus of h [ 0 - 6 [ ---------------------------------------------------------------
    
        IF c = 0 THEN
    
          h = 0        # in fact, " undefined " !
    
        ELSE
    
          IF max = g THEN h = 2 + ( b - r ) / c
    
          IF max = b THEN h = 4 + ( r - g ) / c
    
          IF max = r THEN h = ( 6 + ( g - b ) / c ) MOD 6
    
        END IF
    
    # ---------- Calculus of l [ 0 - 1 ] ---------------------------------------------------------------
    
        l = ( max + min ) / 2
    
    # ---------- Calculus of s [ 0 - 1 ] ---------------------------------------------------------------
    
        IF l = 0 OR l = 1 THEN    #  Or if c = 0
    
          s = 0
    
        ELSE
    
          s = c / ( 1 - ABS ( max + min - 1 ) )
    
        END IF
    
    # ---------- Results : Hue [ 0 - 360 [ , Saturation [ 0 - 100 ] and Lightness [ 0 - 100 ] ----------
    
        Hue = 60 * h    Sat = 100 * s    Lgt = 100 * l
    
        IF c > 0 THEN PRINT Hue ; ELSE PRINT "N/A" ;
    
        PRINT Sat ; Lgt
    
    # --------------------------------------------------------------------------------------------------
    
    
    #-----------------------
    # Conversion HSL -> RGB
    # ----------------------
    
    
    # ---------- Assumptions on Hue, Saturation and Lightness ------------------------------------------
    
        Hue in interval [ 0 - 360 [    Sat in interval [ 0 - 100 ]    Lgt in interval [ 0 - 100 ]
    
    # ---------- Normalization to intervals [ 0 - 6 [ and [ 0 - 1 ] ------------------------------------
    
        h = Hue / 60    s = Sat / 100    l = Lgt / 100
    
    # ---------- Additional hypothesis -----------------------------------------------------------------
    
        IF l = 0 OR l = 1 THEN s = 0
    
    # ---------- Calculus of c ( 0 - 1 ] ---------------------------------------------------------------
    
        c = s * ( 1 - ABS ( 2 * l - 1 ) )
    
    # ---------- Calculus of min RGB [ 0 - 1 ] and max RGB [ 0 - 1 ] -----------------------------------
    
        min = l - c / 2    max = l + c / 2
    
    # ---------- Calculus of the intermediate value x [0 - 1 ] -----------------------------------------
    
        x = c * ( 1 - ABS ( h MOD 2 - 1 ) )
    
    # ---------- Calculus of r [ 0 - 1 ] , g [ 0 - 1 ] and b [ 0 - 1 ] ---------------------------------
    
        IF h >= 0 AND h < 1 THEN    r = max        g = x + min    b = min
    
        IF h >= 1 AND h < 2 THEN    r = x + min    g = max        b = min
    
        IF h >= 2 AND h < 3 THEN    r = min        g = max        b = x + min
    
        IF h >= 3 AND h < 4 THEN    r = min        g = x + min    b = max
    
        IF h >= 4 AND h < 5 THEN    r = x + min    g = min        b = max
    
        IF h >= 5 AND h < 6 THEN    r = max        g = min        b = x + min
    
    # ---------- Results : Red [ 0 - 255 ] , Green [ 0 - 255 ] , Blue [ 0 - 255 ] components -----------
    
        Red = 255 * r    Grn = 255 * g    Blu = 255 * b
    
        PRINT Red ; Grn ; Blu
    
    # --------------------------------------------------------------------------------------------------
    

    However, when you’re using the traditional Windows Color dialog, below :

    You may have noticed that Microsoft varies the 3 values ( Hue, Saturation, Lightness ) in ranges [0 - 240] !

    Thus, here are, below, 2 similar algorithms to get correct HSL and RGB values, when using the Windows Color dialog :

    
    #------------------------------------------------
    # Conversion RGB -> HSL, in Windows Color dialog
    #------------------------------------------------
    
    
    # ---------- Assumptions on Red, Green and Blue components -----------------------------------------
    
       r in interval [ 0 - 255 ]    g in interval [ 0 - 255 ]    b in interval [ 0 - 255 ]
    
    # ---------- Calculus of min [ 0 - 255 ] and max [ 0 - 255 ] ---------------------------------------
    
        min = MIN ( r , g , b )    max = MAX ( r , g , b )
    
    # ---------- Calculus of c [ 0 - 255 ] -------------------------------------------------------------
    
        c = max - min
    
    # ---------- Calculus of h [ 0 - 6 [ ---------------------------------------------------------------
    
        IF c = 0 THEN
    
          h = 0        # in fact, " undefined " !
    
        ELSE
    
          IF max = g THEN h = 2 + ( b - r ) / c
    
          IF max = b THEN h = 4 + ( r - g ) / c
    
          IF max = r THEN h = ( 6 + ( g - b ) / c ) MOD 6
    
        END IF
    
    # ---------- Calculus of l [ 0 - 255 ] -------------------------------------------------------------
    
        l = ( max + min ) / 2
    
    # ---------- Calculus of s [ 0 - 1 ] ---------------------------------------------------------------
    
        IF l = 0 OR l = 255 THEN    #  Or if c = 0
    
          s = 0
    
        ELSE
    
          s = c / ( 255 - ABS ( max + min - 255 ) )
    
        END IF
    
    # ---------- Results : Hue [ 0 - 240 [ , Saturation [ 0 - 240 ] and Lightness [ 0 - 240 ] ----------
    
        Hue = 40 * h    Sat = 240 * s    Lgt = 16 * l / 17
    
        IF c > 0 THEN PRINT Hue ; ELSE PRINT "N/A" ;
    
        PRINT Sat ; Lgt
    
    # --------------------------------------------------------------------------------------------------
    
    
    #------------------------------------------------
    # Conversion HSL -> RGB, in Windows Color dialog
    #------------------------------------------------
    
    
    # ---------- Assumptions on Hue, Saturation and Lightness ------------------------------------------
    
        Hue in interval [ 0 - 240 [    Sat in interval [ 0 - 240 ]    Lgt in interval [ 0 - 240 ]
    
    # ---------- Normalization to intervals [ 0 - 6 [ and [ 0 - 1 ] ------------------------------------
    
        h = Hue / 40    s = Sat / 240    l = Lgt / 240
    
    # ---------- Additional hypothesis -----------------------------------------------------------------
    
        IF l = 0 OR l = 1 THEN s = 0
    
    # ---------- Calculus of c ( 0 - 1 ] ---------------------------------------------------------------
    
        c = s * ( 1 - ABS ( 2 * l - 1 ) )
    
    # ---------- Calculus of min [ 0 - 1 ] and max [ 0 - 1 ] -------------------------------------------
    
        min = l - c / 2    max = l + c / 2
    
    # ---------- Calculus of the intermediate value x [0 - 1 ] -----------------------------------------
    
        x = c * ( 1 - ABS ( h MOD 2 - 1 ) )
    
    # ---------- Calculus of r [ 0 - 1 ] , g [ 0 - 1 ] and b [ 0 - 1 ] ---------------------------------
    
        IF h >= 0 AND h < 1 THEN   r = max        g = x + min     b = min
    
        IF h >= 1 AND h < 2 THEN   r = x + min    g = max         b = min
    
        IF h >= 2 AND h < 3 THEN   r = min        g = max         b = x + min
    
        IF h >= 3 AND h < 4 THEN   r = min        g = x + min     b = max
    
        IF h >= 4 AND h < 5 THEN   r = x + min    g = min         b = max
    
        IF h >= 5 AND h < 6 THEN   r = max        g = min         b = x + min
    
    # ---------- Results : Red [ 0 - 255 ] , Green [ 0 - 255 ] , Blue [ 0 - 255 ] components -----------
    
        Red = 255 * r    Grn = 255 * g    Blu = 255 * b
    
        PRINT Red ; Grn ; Blu
    
    # --------------------------------------------------------------------------------------------------
    

    After a while, it seemed obvious to me that the study of color schemes, shades, tints and tones is considerably simplified when using the HSL color space instead of the RGB one. Briefly, for a color Cx, with HSL values equal, respectively, to Hx, Sx and Lx :

    • A Pure Hue is a color with values H variable in range [ 0 - 359 ] , S = 100 and L = 50

    In RGB, this implies that one of the RGB values must be 255, the second must be 0 and the third is variable in range [ 0 - 255 ]

    • Shades of color Cx have HSL values Hx, Sx, and L variable in range [ 0 - 50 ]

    • Tints of color Cx have HSL values Hx, Sx, and L variable in range [ 50 - 100 ]

    • Tones of color Cx have HSL values Hx, S in range [ 0 - 100 ]] and Lx

    • Black achromatic color has HSL values H undefined , S = 0 and L = 0

    • All Grey achromatic colors have HSL values H undefined , S = 0 and L variable in range ] 0 - 100 [

    • White achromatic color has HSL values H undefined , S = 0 and L = 100

    • Colors involved in Gradient between color Cx and its complementary color Cc, have HSL values H variable in range [Hx - Hc], Sx and Lx


    Now, for all color schemes, regarding the color Cx ( Hx, Sx, Lx ), any other color of a particular scheme keeps the Sx and Lx values. Only, the hue Hx is different for each color of the scheme. Thus, we can summarize :

    • In the Complementary scheme : 2 colors, with respective hues Hx and Hx + 180° ( or Hx - 180° and Hx )

    • In the Diadic scheme : 2 colors, with respective hues Hx and Hx + 60° ( or hues Hx - 60° and Hx )

    • In the Neutral scheme : 3 colors, with respective hues Hx , H - 15° and H + 15°

    • In the Analog scheme : 3 colors, with respective hues Hx , H - 30° and H + 30°

    • In the Split Complementary scheme : 3 colors, with respective hues Hx , Hx - 150° and Hx + 150°

    • In the Triadic scheme : 3 colors, with respective hues Hx , Hx - 120° and Hx + 120°

    • In the Tetradic scheme : 4 colors, with respective hues Hx - 60°, Hx, Hx + 120° and Hx + 180°

    ( or Hx - 180°, Hx - 120°, Hx and Hx + 60° )

    • In the Square scheme : 4 colors, with respective hues Hx - 90°, Hx, Hx + 90° and Hx + 180°

    • In the Monochromatic scheme, 7 colors are generally involved and have the HSL values Hx, Sx and the following L values :

      • Lx - 15%, Lx - 10%, Lx - 5%, Lx, Lx + 5%, Lx + 10%, Lx + 15%

    Remark that when the color hue is equal to :

    • 60°, 180° or 300°, this implies that 2 values, of the RGB triplet, are equal to 255

    • , 120° or 240°, this implies that 2 values, of the RGB triplet, are equal to 0

    At last, when 1 or 2 values, of the RGB triplet are equal to 0 or 255 and the third value in range [ 1 - 254 ], this implies that saturation S = 100


    In the next post, I’ll speak about the Notepad++ plugin Quick Color Picker +, which is necessary to study color matters, in N++, as well as various calculations to obtain the actual colors resulting after one or simultaneous highlightings from N++ or other plugins

    Cheers,

    guy038


Log in to reply