How to set "Find" Background colour?

PeterJones

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

guy038

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

PeterJones

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.

Alan Kilborn

@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.

PeterJones

@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.

guy038

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

Alan Kilborn

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…?

PeterJones

@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.

Alan Kilborn

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

PeterJones

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.)

Alan Kilborn

@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?

PeterJones

@Alan-Kilborn said:

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

Taking a screenshot and using the mspaint.exe eyedropper

PeterJones

@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.

Alan Kilborn

@PeterJones

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

Ronald Fischer

@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.

Alan Kilborn

@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).

Alan Kilborn

@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?

guy038

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

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

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
0°, 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