GUI Color Schemes lazarus / 39-Graphics ---------------------------------------------------------------------- Ten_Mile_Hike · 2023-11-08 19:53 There are websites where you can find colors that complement each other. You can use this info to decorate your living room or to design the GUI of an app or to do Whatever. I want to know if there is a mathematical way to find coordinating colors when designing a GUI. For instance if my Form1.color is $00C6C860 I would like to know some equation or process that I can use to programmatically determine that both $00A3C0BF and $00BA6D9F could be used for Memo1.color to give eye appeal when Memo1 is placed onto Form1. I know that artistic concepts are sometimes subjective, but clashing colors and eye vomit are a real thing also. Thank You ---------------------------------------------------------------------- circular · 2023-11-09 23:26 Hi Ten_Mile_Hike, Finding coordinating colors based on mathematical principles is a fascinating question. The thing that is probably the most dreadful for the eyes in a GUI interface is green/fuschia contrast, green/red, cyan/red and cyan/fuschia. In all of them, the green channel and the red channel is flipped at the same time, which triggers a strong contrast in the visual system. To avoid this, you can negate for example the red and the blue channel. You can do that by applying `xor clFuchsia`. See flip_red_and_blue.png. Otherwise you can flip only the green channel by applying `xor clLime`. See flip_green.png (in both images, the bottom band is derived from the top band). Another approach, that would give colors similar to your example is triadic colors. In the HSL colorspace, you can get two other colors by shifting by 120 degrees the hue. You can as well reduce the saturation to reduce the color contrast. See tradic_colors.png (the middle band is the source color, top and bottom bands are the two derived colors). I am looking forward to your feedback on your color experiments! Regards EDIT: In the images, I have used gamma correction, so the computation of the colors is slightly different, but the principle is the same. ---------------------------------------------------------------------- avra · 2023-11-11 00:28 Complementary colors can be calculated based on starting color. Harmonic color wheels and other methods can help. For that purpose I use program that is not sold any more, but can be still found in web archive: https://web.archive.org/web/20180724003307/http://www.tigercolor.com/c olorimpact-screenshots-pop.htm I quickly found online tool that might be useful, too: https://colors.dopely.top/color-harmony-finder/tetradic/6024e1 Here is some theory for more curious: https://www.colorsexplained.com/color-harmony/ https://en.wikipedia.org/wiki/Harmony_(color) https://www.sensationalcolor.com/creating-color-harmony/ If you want to jump straight to the math, here is some of it: https://www.ethangardner.com/posts/color-theory-math/ ---------------------------------------------------------------------- circular · 2023-11-11 10:51 Thanks for sharing this program and tools. Colors are a fascinating subject. Looking at the various color wheels, it seems they don't have the same primary colors. As a result the complementary color depends on it. For example, the opposite of red is cyan in HSL colorspace, which is the most dreadful, but it may be green, which can be pleasing, though I would not choose them for a GUI background. Here is a color wheel with the following primary colors: red, yellow, cyan and blue. I did not include green as a primary because shades green-yellow and green-cyan are not easy to perceive, so here it is an intermediate between yellow and cyan. I did not include magenta either for the same reason, magenta being an intermediate between blue and red. The following study makes the distinction between color that are pleasing together, color similarity and color preference as a figure. https://link.springer.com/article/10.3758/s13414-010-0027-0#Sec8 The conclusion is that in general, color are more pleasing when they are close in the color wheel but have some difference. There are no indication that complementary colors are considered as going particularly well together (here we are taking of solid colors, but of course in a landscape or in art complementary colors can render well). Regarding the use of color for a figure, hue is less important and what is preferred is difference of lightness and saturation. Applying this to a GUI, for various backgrounds, like a text area on a window, it is better to have close hues. Those are colors that would be adjacent in the attached color wheel. In HSL colorspace, these are approximately 30 degrees apart from the base color. See close_hue.png that shows these ranges in HSL colorspace. For texts and symbols, it is better to have dark colors on light backgrounds and light colors on dark backgrounds. If the background has an average lightness, having a different saturation can help too, for example on a gray background, a dark blue or a bright yellow would have a different saturation. ---------------------------------------------------------------------- avra · 2023-11-11 13:24 Quote from: circular on November 11, 2023, 11:51:23 amThanks for sharing this program and tools. Colors are a fascinating subject.You're welcome  Quote from: circular on November 11, 2023, 11:51:23 amFor texts and symbols, it is better to have dark colors on light backgrounds and light colors on dark backgrounds.Not always. When you do not want much distraction by shown text you might choose different. That's why my Lazarus patch used harmonic wheel of pastel colors (which reminded me that I need to add another set for dark theme) https://forum.lazarus.freepascal.org/index.php/topic,27412.msg170391.h tml#msg170391 ---------------------------------------------------------------------- Ten_Mile_Hike · 2023-11-11 13:29 Thank you avra and circular. I will examine all the information that you two have shared. It is fantastic that the Lazarus forum has so much expertise available to users.