Share My Creation [B4J, B4X, IDE] The ColorMix Helper App - A Standalone Standby

I (along with 8% of all other males) am somewhat color challenged.

Suppose someone points at a tree. I see a lovely green tree. If that person points out that it is full of red berries, then within a second red berries materialize in front of my eyes, a miracle of human visual processing power - small round things must be berries and must be red because if they were blue I would already have seen them.

In order to gain better control over colors, I started to research color schemes. I discovered some very interesting things. One was that I should never choose a color without getting advice from someone with unimpaired color perception.

It inspired me to create 'ColorMix' to mix colors, as well as display, select, and generally manage several popular color schemes.
I also added a color lookup function. If you put a color code variant (Integer, HEX, Octal, RGB, Name) on the clipboard and paste in the ColorMix search field,
the app will search the schemes for similar colors and display them on the screen. It uses the L*a*b* system to define color similarity.

https://sensing.konicaminolta.us/us...differences-using-l-a-b-or-l-c-h-coordinates/

ColorMix is optimized for a desktop/laptop screen and is fixed at 1200x800 pixels. It is intended to be used as a companion to the B4X IDE.
Because it is a standalone B4J project it has access to the clipboard in B4A, B4J, B4i, and B4R.

This is important. If you have some code with an unknown #AF7AC5 color, you can put that item on the clipboard, switch to ColorMix, and paste it in the search field to view the actual color and its codes (Int, Hex, RGB, HSV, CMYK) and name (Flat_Amethyst_4 = -5276987). You can then paste the result back into your app,

When you open ColorMix, you'll see a single form (you can move, minimize, and close it, but it is not resizable)

1. The Form.
WholeForm.png


There are 4 main regions visible on the form: The Cauldron, The HSV Picker, The Variants Panel, and The Search Field.

1. The Cauldron
Cauldron.png


The Cauldon mixing pot is reminiscent of a puzzle type game. You add or subtract one of 5 colors to the cauldron.
Here the primary colors are the basic Red, Green, and Blue, augmented by Yellow (itself a mixture of Red and Green) and Black.
The reason for adding Yellow is that the L*a*b* is founded on the principle that human preception is along two continua: Red<->Green and Blue<->Yellow
It also seems natural to make the mixture more or less Yellow in addition to more or less Red, Green, Blue, and Black.

The dictionary icon on this panel opens a new panel with a menu for navigating various popular color systems.

2. The HSV Picker - a standard B4X color template in Preference dialogs
HSVPicker.png

As the cauldron color changes the HSV Picker changes along with it to show the various codes and the HSV version for that color.
You can make adjustments to the color using the HSV picker and when you press OK, the cauldron will partly fill with the new color.
Pressing Cancel will reset the HSV Picker back to the Cauldron color.

3. The Variants
Variants-Search.png

In sync with changes to the Cauldron color, the Variants panel shows key color companions at various angles around the color circle. These tend to go well together in a palette.
See https://en.wikipedia.org/wiki/Color_scheme

4. The Search Field
You can enter text in the search field or paste items from the clipboard. When ready you can either press Enter or press the lookup icon.
The content of the field will be analyzed to see if it is a valid color code - Hex, Integer, RGB(r,g,b). If so, it will partly fill the Cauldron with that color.
If the search field has the text 'Cauldron Color', the search will be for similar colors in all named colors in ColorMix (more than 1000).
Otherwise, the search will go through all color names in the ColorMix dictionary.

If no color name match is found, it continues to search a list of about 650 companies’ names. If found, then that company's branding colors will be shown.
See https://brandcolors.net/

During your work with ColorMix, you'll see rectangles of colors on the form. Clicking on any of these will place that color on the clipboard. Search will focus on the color code, so the text 'Flat_Amethyst_4 = -5276987' will work. Once on the clipboard, you can either paste it in your app, or paste it right back in the ColorMix search field to see the variants or to explore further.

When you press the Dictionary icon, you'll see a menu and a Read Me panel. Press anywhere to see further explanations about ColorMix as well as restrictions on the use of some colors and color names. It also explores some of the issues related to Trademarked colors.
___________________

[@kimstudio is that what you meant by making my own app to fulfil my wish? see Post]

I have attached the source code for ColorMix (ColorMixSource.zip) as well as the Standalone App (Download Link). Use or modify it in any way you like for your own purposes - it is free to use but not to sell. I would like to see it used as a tool for B4X.
 

Attachments

  • ColorMixSource.zip
    67.5 KB · Views: 147
Last edited:

AnandGupta

Expert
Licensed User
Longtime User
WOW! WOW!! Beautiful design đź‘Ť
Never thought color picking can be so so refreshing !!

Thanks a Lot from novice members like me for giving the codes to study and get knowledge. 🙏
 

William Lancee

Well-Known Member
Licensed User
Longtime User
@AnandGupta thank you.
In a Convent and in horse racing, being a Novice is a temporary state. In my opinion you have passed from that years ago :)
[And I'm not suggesting that you are now a Nun! Or a horse!]
 

Beja

Expert
Licensed User
Longtime User
Hi Bill, I can't thank you enough.. this is exactly the color picker I always wanted.. visual mix
of colors.. no guess or approximate. keep up the good work.
 
Top