Color RGB Tint Shade Tone - 200919Sa

Color RGB Tint Shade Tone

.

(ColorRgbTintShadeTone [2] based on an inspiration)

Version: 200919Sa

.

Until a few days ago I was sitting as an attendant with my niece during her online classes. I was not only enjoying those study sessions but was also revising my earlier school days. One day during online class session in drawing class teacher taught about colors, especially how tint and shade from any color can be made, giving practical examples. This was new to me so I also took keen interest in the class.

.

Drawing teacher was teaching that for making tint of any source color we mix source color with white color and for making shade of any source color we mix source color with black color. Tint is lighter then source color and shade is darker then source color. As much white color we mix with source color as much tint (lighter version of source color) we get. As much black color we mix with source color as much shade (darker version of source color) we get.

.

I am trying and making since around one year some interesting and simple computer educational games for my niece, based on her school lessons. This time also I made an idea of making a simple computer application for my niece so that she can play with colors, tints and shades. As a side effect and/or bonus I will also get opportunity to play with colors, tints and shades.

.

Application's user interface is simple and easy to understand. I named this application ColorRgbTintShadeTone. On the top left of the application are menu options and on the top right are toolbar options. At the bottom is status line and under it is progress bar. In between is the play area.

.

In play area Under Action column:

• To the right of the RGB is the area for color selection via track bar. • To the right of the Tint is the area for Tint selection via track bar. • To the right of the Shade is the area for Shade selection via track bar. • To the right of the Tone is the area for Tone selection via track bar. (Not made yet).

.

In play area Under Value column:

• To the right of RGB player can select respective values for Red, Green and/or Blue via menu. • To the right of Tint player can select Tint value via menu. • To the right of Shade player can select Shade value via menu. • To the right of Tone player can select Tone value via menu. (Not made yet).

.

In play area Under Parts column to the right of RGB, colors for Red, Green and Blue selections are displayed.

.

In play area Under View column:

• To the right of RGB, Color made by Red, Green and Blue selection is displayed. • To the right of Tint, selected Tint of the color is displayed. • To the right of Shade, selected Shade of the color is displayed. • To the right of Tone, selected Tone of the color is displayed. (Right now it displays random color).

.

Following are the photos/screenshots of the application I described above.

.

.

Application looks like this.

.

.

.

.

.

.

.

.

.

Application looks like this at start while initializing.

.

.

.

.

.

Application looks like this at End while saving settings.

.

.

.

.

.

.

Colors used in this post: Border color rgb(0, 153, 153) #009999 Background color rgb(204, 255, 255) #CCFFFF

.

.

If there are any mistakes in this post then I will remove them whenever I will know about them.

.

RGB Color Viewer - 2 - c sharp - 180227Tu

RGB color viewer in c#

.

(Displays RGB colors and let them pick)

(Written by me in c# 2010)

Version: 180227Tu

.

A few decades ago I made an application in html/JScript in windows 98 running over Pentium 2 for viewing all colors available in 24bit RGB. Result was excellent and exciting. I was able to watch all possible colors in one place so easily. Plus it was so colorful also. Then a few years ago I repeated that application in c# and this time I did that for viewing all 32bit ARGB colors. Result of this time was exciting again.

Every thing was going so fine and ok but suddenly a problem arises. Problem I was facing was that I was not able to find lighter or darker color easily for selected RGB color by scrolling Red, Green or Blue color values.  Then I stumbled upon HSB/HSL color space and my problem got solved. But then new problem started. This time problem was to get any color in RGB color space and then get it's lighter or darker shade in HSB/HSL color space. So I made an application in c# for doing so. During that process I made some other utility applications as well.

One of those application was to display HSB colors with ability to copy selected color to clipboard. In that application colors were displayed via 2 colored rectangles. First I called Z box and initially used that for displaying Hue of HSB color. Second I called XY box and initially used that for displaying Brightness and Saturation of HSB color. During that process I found that by changing assignments for XYZ axis in both boxes, color view in XY box becomes interestingly different.

After that I made another application, this time for RGB color space. And I am sharing code for this RGB color space application here.

..

Salient features of application:

In this application colors are displayed vie 2 color boxes. One is called Z box and other is called XY box. Initially Blue color is assigned to Z box. Green color is assigned to Y of XY box and Red color is assigned to X of XY box. Color assignment for XY and Z can be changed via 'Axis' menu. Color can be selected by mouse click, scrolling scroll bars or by entering values in Red, Green and Blue fields. Selected color's values are displayed in RGB and HSB section. Selected color can be copied to clipboard in decimal or hex format for bot RGB and HSB. All this is explained in 'How to use' and 'User Interface' of help menu'

.

Screen shots of 'RGB Color viewer' with description:

Following are screen shots of 'RGB Color viewer' at different stages with their description.

.

Application on Load:

'RGB Color viewer' looks like in the following image when it loads. Menus are on top line and status is at bottom line. Area in between them is divided in 2 columns.  In left column are 2 colored rectangles and 3 scroll bars. Rectangles display Red, Green and Blue part of RGB color. Scroll bars are for selecting value of respective color. In right column selected color information is displayed. At start Z is Blue, Y is Green and X is Red and their initial values are 175, 128, 128.

.

.

.

Help menu expanded:

'RGB Color viewer' looks like in the following image when help menu is clicked. Showing it's 5 options: About, Purpose, User interface, How to use and Copyright. Each option of help menu is shown and explained separately in following.

.

.

.

Help/About:

'RGB Color viewer' looks like in the following image when 'About' in 'Help' menu is clicked. This menu-item displays basic information about application and it's author.

.

.

.

Help/Purpose:

'RGB Color viewer' looks like in the following image when 'Purpose' in 'Help' menu is clicked. This menu-item displays text explaining purpose of the application.

.

.

.

Help/User interface:

'RGB Color viewer' looks like in the following image when 'User interface' in 'Help' menu is clicked. This menu option explains application's user interface as visible in following image.

.

.

.

Help/How to use:

'RGB Color viewer' looks like in the following image when 'How to use' in 'Help' menu is clicked. This menu option explains how to use this application as visible in following image.

.

.

.

Help/Copyright:

'RGB Color viewer' looks like in the following image when 'Copyright' in 'Help' menu is clicked. This menu-item displays copyright text for this application.

.

.

.

Help/Axis:

'RGB Color viewer' looks like in the following image when 'Axis' menu is clicked. Showing it's 6 options with all possible color combinations for xyz axis. Clicking on any of these options updates colors of xyz axis.

.

.

.

Colors for axis changed:

'RGB Color viewer' looks like in the following image when 'RGB (ZXY)' is clicked in 'Axis' menu. Colors for X, Y and Z axis are changed and Z and XY boxes are updated.

.

.

.

Help/Copy:

'RGB Color viewer' looks like in the following image when 'Copy' menu is clicked. This menu allows copying to clipboard RGB or HSB values in decimal or hex.

.

.

.

Outputs for all Axiz values:

I liked the look of colors in XY box when I changed axis values from 'Axis' menu and enjoyed as well. All options from 'Axis' menu gave good looking result. Screen shot of 'RGB Color viewer' for all axis values when values for Red, Green and Blue are set to 128 are displayed in following images.

.

XYZ:

'RGB Color viewer' looks like in the following image when axis is set to XYZ by clicking 'RGB (XYZ)' in 'Axis' menu.

.

.

.

XZY:

'RGB Color viewer' looks like in the following image when axis is set to XZY by clicking 'RGB (XZY)' in 'Axis' menu.

.

.

.

YXZ:

'RGB Color viewer' looks like in the following image when axis is set to YXZ by clicking 'RGB (YXZ)' in 'Axis' menu.

.

.

.

YZX:

'RGB Color viewer' looks like in the following image when axis is set to YZX by clicking 'RGB (YZX)' in 'Axis' menu.

.

.

.

ZXY:

'RGB Color viewer' looks like in the following image when axis is set to ZXY by clicking 'RGB (ZXY)' in 'Axis' menu.

.

.

.

ZYX:

'RGB Color viewer' looks like in the following image when axis is set to ZYX by clicking 'RGB (ZYX)' in 'Axis' menu.

.

.

.

[Note: During first posting] During development I gave this application 'Color-Model-RGB-Space-RGB-2' as name but during writing this post I used 'RGB-Color-Viewer-2' as it's name. In it's next version I will use 'RGB-Color-Viewer-x'' as it's name during development also.

[Note: 2018 02 27 Tue _ PST 05:52 PM] LoL by mistake during development (for changing name of project) I gave it 'RGB_Color_Viewer_01' name but in this post I used 'RGB-Color-Viewer-2' as it's name. I am not going to change anything (project's name or post's title) any more.

.

Enjoy Complete Source code of application written and compiled in visual studio 2010 Ultimate by me. Download it. Extract it. Read 'ReadMeFirst.txt' file and do as is explained in it.