For details, see How to Use.
Simple Tool for Viewing and Converting Between RGB Values and Color Codes
This program is a simple tool developed in VCSSL, which allows you to display colors and convert between RGB values and color codes.
How to Use
Download and Extract
At first, click the "Download" button at the above of the title of this page by your PC (not smartphone). A ZIP file will be downloaded.
Then, please extract the ZIP file. On general environment (Windows®, major Linux distributions, etc.), you can extract the ZIP file by selecting "Extract All" and so on from right-clicking menu.
» If the extraction of the downloaded ZIP file is stopped with security warning messages...
Execute this Program
Next, open the extracted folder and execute this VCSSL program.
For Windows
Double-click the following batch file to execute:
For Linux, etc.
Execute "VCSSL.jar" on the command-line terminal as follows:
java -jar VCSSL.jar
» If the error message about non-availability of "java" command is output...
How to Operate the Tool After Launch
First, enter RGB values (ranging from 0 to 255) into the RED, GREEN, and BLUE fields on the left.
Alternatively, enter a 6-digit color code (from 000000 to ffffff) into the CODE field on the right.
Then,
- If you've entered RGB values, click the ">>" button.
- If you've entered a color code, click the "<<" button.
The color will then be displayed in the color preview area at the bottom of the window.
The values in the RGB and color code fields will also be automatically updated and synchronized.
Concept Overview
Displays and Colors
RGB values and color codes are widely used formats for representing colors across various fields such as image processing, web design, and GUI development in software.
To understand how they work, it helps to first take a look at how a display (monitor) actually represents color.
Whether it's a computer monitor or a TV, if you look closely -- very closely -- you'll find that the screen is composed of tiny light elements called pixels.
Each pixel is typically made up of red, green, and blue rectangular light sources placed side-by-side.
(Modern high-density displays make this hard to see with the naked eye, but it's easy to spot on older televisions.)
Whether it's an LCD, plasma, or CRT screen, the principle behind how colors are formed is the same -- only the light-emitting mechanism differs.
Additive Color Mixing and the Primary Colors of Light
How does the human eye perceive color?
Let's take a brief look at how our eyes work.
We perceive color using special cells in our eyes called cone cells, which respond to light. Humans typically have three types of cone cells -- each sensitive to red, green, or blue light. (Some recent research suggests some people might have four types, but we'll skip that for now.)
In other words, humans perceive color based on the relative amounts of red, green, and blue light entering the eye. By mixing light in various ratios from these three colors, we can reproduce nearly all visible colors as perceived by the human eye.
By combining red (R), green (G), and blue (B) light in various proportions, we can reproduce almost any visible color.
This diagram shows each of the primary colors mixed in equal amounts (1:1 ratios).
If you're used to mixing paint, this might seem odd-mixing red and green paint doesn't give you yellow, right? That's because paint and light behave very differently when mixed.
Paint works through subtractive color mixing, where pigments absorb certain wavelengths and reflect others. When you mix two paints, each absorbs different colors, and only the shared remaining component gets reflected -- resulting in a darker or muted color.
In contrast, mixing light is additive -- you literally add the intensity of each light's color together to form a new color.
Because of this difference, the resulting colors can be completely different depending on whether you're mixing light or pigments.
24-Bit Color and RGB Values
Let's go back to the display discussion. Most modern displays follow a format called 24-bit color.
In 24-bit color, each of the red (R), green (G), and blue (B) components is expressed as an integer from 0 to 255 -- that's 256 levels of brightness per channel.
For example, pure blue is represented as (R=0, G=0, B=255), and pure yellow is (R=255, G=255, B=0).
Each pixel expresses color by adjusting the brightness of the red (R), green (G), and blue (B) components in 256 steps (0-255), then combining them.
Each component uses 8 bits (since 28 = 256), and with 3 components, we get 24 bits in total -- hence the name "24-bit color."
Color Codes
Using raw RGB values requires three separate numbers to represent a single color.
In some cases, it's more convenient to express a color with a single number -- this is where color codes come in.
A color code is a six-digit hexadecimal number, and it represents a 24-bit color using just one string.
Hexadecimal is a number system based on 16 instead of 10. While it might seem strange at first, it's not that different from how we count seconds and minutes in 60s (which would be base-60). Once you get used to it, it's quite manageable.
In hexadecimal, numbers from 0 to 15 are represented as:
10,11,12,13,14,15,16,17,18,19,1a,1b,1c,1d,1e,1f (decimal 31),
20,21,22,23,24,25,26,27,28,29,2a,2b,2c,2d,2e,2f (decimal 47),
...
f0,f1,f2,f3,f4,f5,f6,f7,f8,f9,fa,fb,fc,fd,fe,ff (decimal 255)
So, two hexadecimal digits (00 to ff) can represent values from 0 to 255, which perfectly matches the range for each RGB component.
By using two digits each for red, green, and blue, we get six digits in total -- allowing us to represent all 24-bit colors.
This is the format of a color code. It's common to prefix the code with a "#" symbol, like #0c22ff.
Each of the six digits (two per color) represents the intensity of red, green, and blue in hexadecimal. With two digits (00-ff) per component, a color code can represent all 24-bit color values.
Code
This program is written in VCSSL, a scripting language with a C-like syntax. Here, we'll go over the contents of the code briefly. If you've used C or similar languages before, it should be easy to follow.
Full Code Listing
First, here is the full code listing for this program. It's a bit long, but here it is:
coding UTF-8; // Prevent character corruption
// Import required libraries
import GUI;
import Math;
import Text;
import Color;
import system.Int;
// Values for adjusting the GUI layout
const int WINDOW_WIDTH = 460;
const int WINDOW_HEIGHT = 300;
const int MARGIN = 10;
const int FIELD_WIDTH = 140;
const int FIELD_HEIGHT = 30;
const int BUTTON_WIDTH = 100;
const int BUTTON_HEIGHT = 45;
const int DISPLAY_WIDTH = WINDOW_WIDTH - 40;
const int DISPLAY_HEIGHT = WINDOW_HEIGHT - FIELD_HEIGHT*3 - 80;
// Variables to hold the IDs of GUI components
int window;
int displayPanel;
int redField;
int greenField;
int blueField;
int codeField;
int rgbToCodeButton;
int codeToRgbButton;
// This function is automatically called at program startup
// (Note: The event-handling flow when a button is clicked
// starts from the event handler functions at the end of the code.)
void main(){
// Build the GUI
createComponent();
// Hide the console window
hide();
// Set initial values
string code = "000000";
setColorByCode(code);
}
// Function to set the color from a color code string
void setColorByCode(string inCode){
// Set the value in the CODE field
setCodeField(inCode);
// Remove leading "#" if present
if(startsWith(inCode, "#")){
inCode = cropText(inCode, 1, countText(inCode));
}
// Add hexadecimal prefix
inCode = "0x" + inCode;
// Validate the string as hexadecimal
if(isHex(inCode)){
// Convert to int
int code = inCode;
// Check if it's within the valid color code range
if(0<=code && code<=0xffffff){
// Generate a color array
int color[] = color(code);
// Apply the color to the display panel
setDisplayColor(color);
// Set values in the RED/GREEN/BLUE fields
setRgbField(
(string)color[0], (string)color[1], (string)color[2]
);
}else{
alert("The CODE value is outside the valid range of #000000 to #ffffff.");
}
}else{
alert("The CODE value is not a valid hexadecimal number.");
}
}
// Function to set the color from RGB value strings
void setColorByRgb(string inR, string inG, string inB){
// Set values in the RED/GREEN/BLUE fields
setRgbField(inR, inG, inB);
// Check if the input values are valid integers
if( isInt(inR) && isInt(inG) && isInt(inB) ){
// Convert to int
int r = inR;
int g = inG;
int b = inB;
// Check if the values are within valid RGB range
if(0<=r&&r<=255 && 0<=g&&g<=255 && 0<=b&&<=255){
// Create a color array
int color[] = {r, g, b, 255};
// Apply the color to the display panel
setDisplayColor(color);
// Get the color code
string code = hex( getColorCode(color) );
code = formatColorCode(code);
// Set value in the CODE field
setCodeField(code);
}else{
alert("RED / GREEN / BLUE values must be in the range of 0 to 255.");
}
}else{
alert("RED / GREEN / BLUE values must be integers.");
}
}
// Function to convert hex string with "0x" prefix into 6-digit color code format
// (called from setColorByRgb)
string formatColorCode(string code){
// Get original string length
int length = countText(code);
// Remove the "0x" prefix
code = cropText(code, 2, length);
length -= 2;
// Calculate how many leading zeros are needed
int zeros = 6 - length;
// Pad the beginning with zeros to make it 6 digits
for(int i=0; i<zeros; i++){
code = "0" + code;
}
return code;
}
// ======================================================================
// Below are the routines for building the GUI layout
// ======================================================================
// Create and assemble all GUI components
void createComponent(){
// Create the main window
window = newWindow(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT, "Color Display");
// Create and mount the RGB input panel
int rgbX = MARGIN;
int rgbY = MARGIN;
int rgbW = FIELD_WIDTH;
int rgbH = FIELD_HEIGHT*3;
int rgbPanel = createRGBPanel(rgbX, rgbY, rgbW, rgbH);
mountComponent(rgbPanel, window);
// Create and mount the button panel
int bpX = rgbX + FIELD_WIDTH + MARGIN;
int bpY = MARGIN;
int bpW = BUTTON_WIDTH;
int bpH = BUTTON_HEIGHT*2;
int buttonPanel = createButtonPanel(bpX, bpY, bpW, bpH);
mountComponent(buttonPanel, window);
// Create and mount the code input panel
int codeX = bpX + BUTTON_WIDTH + MARGIN;
int codeY = MARGIN + FIELD_HEIGHT;
int codeW = FIELD_WIDTH;
int codeH = FIELD_HEIGHT;
int codePanel = createCodePanel(codeX, codeY, codeW, codeH);
mountComponent(codePanel, window);
// Create and mount the color display panel
int dpX = MARGIN;
int dpY = rgbY + rgbH + MARGIN;
int dpW = DISPLAY_WIDTH;
int dpH = DISPLAY_HEIGHT;
displayPanel = newPanel(dpX, dpY, dpW, dpH, "");
mountComponent(displayPanel, window);
}
// Create the RED/GREEN/BLUE input panel
int createRGBPanel(int x, int y, int width, int height){
int panel = newGridPanel(x, y, width, height, "", 3, 2);
// RED label and field
int redLabel = newTextLabel(0, 0, 0, 0, "RED =");
mountComponent(redLabel, panel);
redField = newTextField(0, 0, 0, 0, "");
mountComponent(redField, panel);
// GREEN label and field
int greenLabel = newTextLabel(0, 0, 0, 0, "GREEN =");
mountComponent(greenLabel, panel);
greenField = newTextField(0, 0, 0, 0, "");
mountComponent(greenField, panel);
// BLUE label and field
int blueLabel = newTextLabel(0, 0, 0, 0, "BLUE =");
mountComponent(blueLabel, panel);
blueField = newTextField(0, 0, 0, 0, "");
mountComponent(blueField, panel);
return panel;
}
// Create the CODE input panel
int createCodePanel(int x, int y, int width, int height){
int panel = newGridPanel(x, y, width, height, "", 1, 2);
int codeLabel = newTextLabel(0, 0, 0, 0, "CODE = #");
mountComponent(codeLabel, panel);
codeField = newTextField(0, 0, 0, 0, "");
mountComponent(codeField, panel);
return panel;
}
// Create the panel for the conversion buttons
int createButtonPanel(int x, int y, int width, int height){
int panel = newGridPanel(x, y, width, height, "", 2, 1);
rgbToCodeButton = newButton(0, 0, 0, 0, ">>");
mountComponent(rgbToCodeButton, panel);
codeToRgbButton = newButton(0, 0, 0, 0, "<<");
mountComponent(codeToRgbButton, panel);
return panel;
}
// ======================================================================
// The following are GUI update routines
// ======================================================================
// Function to repaint GUI components
void repaint(){
paintComponent(displayPanel); // Repaint the color display panel
paintComponent(window); // Repaint the main window
}
// Function to set the color of the display panel
void setDisplayColor(int color[]){
int fgColor[] = {0, 0, 0, 0}; // Foreground color (not used for panels)
setComponentColor(displayPanel, fgColor, color); // Set color to the display panel
repaint(); // Redraw the screen
}
// Function to set the RGB input fields
void setRgbField(string r, string g, string b){
setComponentText(redField, r); // Set value to RED field
setComponentText(greenField, g); // Set value to GREEN field
setComponentText(blueField, b); // Set value to BLUE field
repaint(); // Redraw the screen
}
// Function to set the CODE input field
private void setCodeField(string code){
setComponentText(codeField, code); // Set value to CODE field
repaint(); // Redraw the screen
}
// ======================================================================
// The following are event handler functions
// ======================================================================
// Called when a button is clicked
void onButtonClick(int componentID){
// If the ">>" button was clicked (RGB -> CODE)
if(componentID == rgbToCodeButton){
// Get the values from RED / GREEN / BLUE fields and update color
string r = getComponentText(redField);
string g = getComponentText(greenField);
string b = getComponentText(blueField);
setColorByRgb(r, g, b);
// If the "<<" button was clicked (CODE -> RGB)
}else if(componentID == codeToRgbButton){
// Get the value from the CODE field and update color
string colorCode = getComponentText(codeField);
setColorByCode(colorCode);
}
}
// Called when the window is closed
void onWindowClose(int componentID){
// If the main window was closed, exit the program
if(componentID == window){
exit();
}
}
That's it. Now, let's walk through the important parts.
Header Section
Let's start at the top:
coding UTF-8; // Prevent character corruption
// Import required libraries
import GUI;
import Math;
import Text;
import Color;
import system.Int;
The first line specifies the character encoding used in this file. While not strictly required, it's recommended to avoid garbled characters when dealing with text.
Next, it loads several standard libraries:
- GUI - for handling the graphical user interface
- Math - for mathematical functions
- Text - for string processing
- Color - for color handling
These libraries provide the main functionality needed in this program.
In addition, it loads "system.Int", a utility for working with integers. In this program, it's used to check whether user inputs are valid numeric values.
GUI Layout and Component Variables
Next are layout values and variables for managing the GUI components:
// Values for adjusting the GUI layout
const int WINDOW_WIDTH = 460;
const int WINDOW_HEIGHT = 300;
const int MARGIN = 10;
const int FIELD_WIDTH = 140;
const int FIELD_HEIGHT = 30;
const int BUTTON_WIDTH = 100;
const int BUTTON_HEIGHT = 45;
const int DISPLAY_WIDTH = WINDOW_WIDTH - 40;
const int DISPLAY_HEIGHT = WINDOW_HEIGHT - FIELD_HEIGHT*3 - 80;
// Variables to hold the IDs of GUI components
int window;
int displayPanel;
int redField;
int greenField;
int blueField;
int codeField;
int rgbToCodeButton;
int codeToRgbButton;
Each GUI component (input fields, buttons, panels, etc.) has its own ID stored in a variable. These IDs are used when setting or retrieving values from each component.
Startup Behavior
Next is the code that runs when the program launches:
// This function is automatically called at program startup
// (Note: The event-handling flow when a button is clicked
// starts from the event handler functions at the end of the code.)
void main(){
// Build the GUI
createComponent();
// Hide the console window
hide();
// Set initial values
string code = "000000";
setColorByCode(code);
}
The main() function is automatically called after all global variables are initialized. In effect, it serves as the entry point of the program.
Here's what it does, step by step:
-
Calls createComponent() to build the GUI.
(This is a function defined later in the code that just creates and places GUI components -- so we'll skim the details.) -
Calls the system function hide() to hide the console window, since itfs not needed.
Note: Hiding the console also removes the default way to close the program, so a separate mechanism is used: The event handler onWindowClose() ensures that the program exits when the main window is closed. - Initializes the display by setting the default color to black (#000000) using the function setColorByCode(...), which is defined later in the script and plays a central role in this program.
The setColorByCode() Function
Let's now take a look at one of the core functions mentioned earlier: setColorByCode.
// Function to set the color from a color code string
void setColorByCode(string inCode){
// Set the value in the CODE field
setCodeField(inCode);
// Remove leading "#" if present
if(startsWith(inCode, "#")){
inCode = cropText(inCode, 1, countText(inCode));
}
// Add hexadecimal prefix
inCode = "0x" + inCode;
// Validate the string as hexadecimal
if(isHex(inCode)){
// Convert to int
int code = inCode;
// Check if it's within the valid color code range
if(0<=code && code<=0xffffff){
// Generate a color array
int color[] = color(code);
// Apply the color to the display panel
setDisplayColor(color);
// Set values in the RED/GREEN/BLUE fields
setRgbField(
(string)color[0], (string)color[1], (string)color[2]
);
}else{
alert("The CODE value is outside the valid range of #000000 to #ffffff.");
}
}else{
alert("The CODE value is not a valid hexadecimal number.");
}
}
This function takes a color code as a string and sets the corresponding color in the GUI. Specifically, it displays the color in the preview panel and updates the RGB fields with the equivalent values.
Let's step through the logic.
First, the function begins by handling and sanitizing the input. If the input string starts with a hash symbol (#), it removes it. Then it prepends the prefix 0x, making the string a valid hexadecimal literal for interpretation as an integer.
It then checks if the resulting string is a valid hex number using the isHex() function provided by the "system.Int" library.
// Set the value in the CODE field
setCodeField(inCode);
// Remove leading "#" if present
if(startsWith(inCode, "#")){
inCode = cropText(inCode, 1, countText(inCode));
}
// Add hexadecimal prefix
inCode = "0x" + inCode;
// Validate the string as hexadecimal
if(isHex(inCode)){
...
After confirming that the input is a valid hex value, it checks whether the corresponding integer value is within the range of a valid 24-bit color code: 0x000000 to 0xffffff.
// Convert to int
int code = inCode;
// Check if it's within the valid color code range
if(0<=code && code<=0xffffff){
c
If the value passes both checks, the function proceeds to extract and apply the color:
// Generate a color array
int color[] = color(code);
// Apply the color to the display panel
setDisplayColor(color);
// Set values in the RED/GREEN/BLUE fields
setRgbField(
(string)color[0], (string)color[1], (string)color[2]
);
The function color(int colorCode) -- provided by the Color standard library -- converts a 24-bit color code into a four-element int array representing RGBA values.
Here, only the first three values (R, G, B) are used; the alpha (transparency) component is ignored.
The resulting color is then:
- Applied to the preview display using setDisplayColor(...)
- Converted to strings and displayed in the RED, GREEN, and BLUE input fields using setRgbField(...)
Both of these helper functions are defined elsewhere in the script.
The setColorByRgb() Function
Now let's look at the reverse conversion: converting from RGB values to a color code.
// Function to set the color from RGB value strings
void setColorByRgb(string inR, string inG, string inB){
// Set values in the RED/GREEN/BLUE fields
setRgbField(inR, inG, inB);
// Check if the input values are valid integers
if( isInt(inR) && isInt(inG) && isInt(inB) ){
// Convert to int
int r = inR;
int g = inG;
int b = inB;
// Check if the values are within valid RGB range
if(0<=r&&r<=255 && 0<=g&&g<=255 && 0<=b&&b<=255){
// Create a color array
int color[] = {r, g, b, 255};
// Apply the color to the display panel
setDisplayColor(color);
// Get the color code
string code = hex( getColorCode(color) );
code = formatColorCode(code);
// Set value in the CODE field
setCodeField(code);
}else{
alert("RED / GREEN / BLUE values must be in the range of 0 to 255.");
}
}else{
alert("RED / GREEN / BLUE values must be integers.");
}
}
// Function to convert hex string with "0x" prefix into 6-digit color code format
// (called from setColorByRgb)
string formatColorCode(string code){
// Get original string length
int length = countText(code);
// Remove the "0x" prefix
code = cropText(code, 2, length);
length -= 2;
// Calculate how many leading zeros are needed
int zeros = 6 - length;
// Pad the beginning with zeros to make it 6 digits
for(int i=0; i<zeros; i++){
code = "0" + code;
}
return code;
}
This function takes three string values for R, G, and B, and uses them to set the color shown in the preview panel and compute the corresponding 6-digit color code.
Let's walk through the logic:
First, it stores the input RGB values in the GUI fields using setRgbField(...). It then checks whether each of the inputs is a valid integer using the isInt(...) function from the system.Int library.
If all values are valid, they are converted to integers and grouped into an RGBA array:
// Create a color array
int color[] = {r, g, b, 255};
Here, the alpha value (transparency) is hardcoded to 255, which means fully opaque.
The color is then applied to the preview display using setDisplayColor(...), a helper function implemented elsewhere in this script.
Next, the function converts the RGB values into a color code. Instead of calculating this manually, it uses the getColorCode(...) function provided by the Color library, which accepts an RGBA array and returns the color code as an integer.
This integer is then converted to a hexadecimal string using the hex(...) function from the Math library:
// Get the color code
string code = hex( getColorCode(color) );
code = formatColorCode(code);
This string includes a 0x prefix by default, so it is passed to a helper function formatColorCode(...) to reformat it into a proper 6-digit color code string.
Let's take a look at that function:
The formatColorCode(...) Function
// Function to convert hex string with "0x" prefix into 6-digit color code format
// (called from setColorByRgb)
string formatColorCode(string code){
// Get original string length
int length = countText(code);
// Remove the "0x" prefix
code = cropText(code, 2, length);
length -= 2;
// Calculate how many leading zeros are needed
int zeros = 6 - length;
// Pad the beginning with zeros to make it 6 digits
for(int i=0; i<zeros; i++){
code = "0" + code;
}
return code;
}
This function removes the "0x" prefix and ensures the color code string is exactly 6 digits long by prepending zeros if needed.
Finally, the resulting 6-digit code is displayed in the CODE field using the setCodeField(...) function, which is defined later in the script.
All in all, setColorByRgb(...) handles:
- input validation
- value conversion
- color display
- code formatting
...all in a compact and readable structure.
GUI Construction
Now let's move on to the GUI-related part of the program.
After the initial logic, the script proceeds to GUI setup. It starts with the createComponent() function, which is called at startup to build the GUI and arrange its components. Inside that function, it calls helper functions like createRGBPanel(), createCodePanel(), and createButtonPanel() to create each individual part of the interface.
// ======================================================================
// Below are the routines for building the GUI layout
// ======================================================================
// Create and assemble all GUI components
void createComponent(){
// Create the main window
window = newWindow(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT, "Color Display");
// Create and mount the RGB input panel
int rgbX = MARGIN;
int rgbY = MARGIN;
int rgbW = FIELD_WIDTH;
int rgbH = FIELD_HEIGHT*3;
int rgbPanel = createRGBPanel(rgbX, rgbY, rgbW, rgbH);
mountComponent(rgbPanel, window);
// Create and mount the button panel
int bpX = rgbX + FIELD_WIDTH + MARGIN;
int bpY = MARGIN;
int bpW = BUTTON_WIDTH;
int bpH = BUTTON_HEIGHT*2;
int buttonPanel = createButtonPanel(bpX, bpY, bpW, bpH);
mountComponent(buttonPanel, window);
// Create and mount the code input panel
int codeX = bpX + BUTTON_WIDTH + MARGIN;
int codeY = MARGIN + FIELD_HEIGHT;
int codeW = FIELD_WIDTH;
int codeH = FIELD_HEIGHT;
int codePanel = createCodePanel(codeX, codeY, codeW, codeH);
mountComponent(codePanel, window);
// Create and mount the color display panel
int dpX = MARGIN;
int dpY = rgbY + rgbH + MARGIN;
int dpW = DISPLAY_WIDTH;
int dpH = DISPLAY_HEIGHT;
displayPanel = newPanel(dpX, dpY, dpW, dpH, "");
mountComponent(displayPanel, window);
}
// Create the RED/GREEN/BLUE input panel
int createRGBPanel(int x, int y, int width, int height){
int panel = newGridPanel(x, y, width, height, "", 3, 2);
// RED label and field
int redLabel = newTextLabel(0, 0, 0, 0, "RED =");
mountComponent(redLabel, panel);
redField = newTextField(0, 0, 0, 0, "");
mountComponent(redField, panel);
// GREEN label and field
int greenLabel = newTextLabel(0, 0, 0, 0, "GREEN =");
mountComponent(greenLabel, panel);
greenField = newTextField(0, 0, 0, 0, "");
mountComponent(greenField, panel);
// BLUE label and field
int blueLabel = newTextLabel(0, 0, 0, 0, "BLUE =");
mountComponent(blueLabel, panel);
blueField = newTextField(0, 0, 0, 0, "");
mountComponent(blueField, panel);
return panel;
}
// Create the CODE input panel
int createCodePanel(int x, int y, int width, int height){
int panel = newGridPanel(x, y, width, height, "", 1, 2);
int codeLabel = newTextLabel(0, 0, 0, 0, "CODE = #");
mountComponent(codeLabel, panel);
codeField = newTextField(0, 0, 0, 0, "");
mountComponent(codeField, panel);
return panel;
}
// Create the panel for the conversion buttons
int createButtonPanel(int x, int y, int width, int height){
int panel = newGridPanel(x, y, width, height, "", 2, 1);
rgbToCodeButton = newButton(0, 0, 0, 0, ">>");
mountComponent(rgbToCodeButton, panel);
codeToRgbButton = newButton(0, 0, 0, 0, "<<");
mountComponent(codeToRgbButton, panel);
return panel;
}
These routines are mostly straightforward: They create each GUI component, assign layout positions, and mount them to the window. The process follows a pattern:
- Use "new*" functions to create a component and get its ID
- Optionally assign coordinates and dimensions
- Call mountComponent() to place it into a container or window
It's repetitive but foundational -- like snapping building blocks into place before wiring them together.
Tip: If you're new to GUI development in VCSSL, check out the following guide for a more in-depth explanation of how to construct user interfaces:
GUI Update Functions Called from the Main Logic
Next, we have a group of utility functions responsible for updating the GUI: repainting components, updating the displayed color, and refreshing the text fields.
// ======================================================================
// The following are GUI update routines
// ======================================================================
// Function to repaint GUI components
void repaint(){
paintComponent(displayPanel); // Repaint the color display panel
paintComponent(window); // Repaint the main window
}
// Function to set the color of the display panel
void setDisplayColor(int color[]){
int fgColor[] = {0, 0, 0, 0}; // Foreground color (not used for panels)
setComponentColor(displayPanel, fgColor, color); // Set color to the display panel
repaint(); // Redraw the screen
}
// Function to set the RGB input fields
void setRgbField(string r, string g, string b){
setComponentText(redField, r); // Set value to RED field
setComponentText(greenField, g); // Set value to GREEN field
setComponentText(blueField, b); // Set value to BLUE field
repaint(); // Redraw the screen
}
// Function to set the CODE input field
private void setCodeField(string code){
setComponentText(codeField, code); // Set value to CODE field
repaint(); // Redraw the screen
}
These functions are called from the main logic functions like setColorByCode() and setColorByRgb(), which we covered earlier. They ensure the visual display stays in sync with the input values.
Event Handlers Responding to User Interaction
Finally, here are the event handler functions that react to user actions -- like clicking buttons or closing the window.
// ======================================================================
// The following are event handler functions
// ======================================================================
// Called when a button is clicked
void onButtonClick(int componentID){
// If the ">>" button was clicked (RGB -> CODE)
if(componentID == rgbToCodeButton){
// Get the values from RED / GREEN / BLUE fields and update color
string r = getComponentText(redField);
string g = getComponentText(greenField);
string b = getComponentText(blueField);
setColorByRgb(r, g, b);
// If the "<<" button was clicked (CODE -> RGB)
}else if(componentID == codeToRgbButton){
// Get the value from the CODE field and update color
string colorCode = getComponentText(codeField);
setColorByCode(colorCode);
}
}
// Called when the window is closed
void onWindowClose(int componentID){
// If the main window was closed, exit the program
if(componentID == window){
exit();
}
}
The first handler, onButtonClick(), runs whenever a button is clicked. It receives the component ID of the clicked button as an argument and branches accordingly:
- If the "<<" button is clicked: it reads RGB values from the text fields and calls setColorByRgb(...).
- If the ">>" button is clicked: it reads the color code and calls setColorByCode(...).
As we saw earlier, these two functions handle generating and displaying the color based on either RGB or color code input.
So now, from the moment a user clicks a button, to the point where the display updates with the correct color, the full chain of logic is complete.
The last function, onWindowClose(), is triggered when the main window is closed. It simply ends the program with a call to exit().
And that wraps up the entire code! It was a bit long, but we made it through. Great work if you followed along this far!
License
This VCSSL/Vnano code (files with the ".vcssl" or ".vnano" extensions) is released under the CC0 license, effectively placing it in the public domain. If any sample code in C, C++, or Java is included in this article, it is also released under the same terms. You are free to use, modify, or repurpose it as you wish.
* The distribution folder also includes the VCSSL runtime environment, so you can run the program immediately after downloading.
The license for the runtime is included in the gLicenseh folder.
(In short, it can be used freely for both commercial and non-commercial purposes, but the developers take no responsibility for any consequences arising from its use.)
For details on the files and licenses included in the distribution folder, please refer to "ReadMe.txt".
* The Vnano runtime environment is also available as open-source, so you can embed it in other software if needed. For more information, see here.
|
Simple Tool for Viewing and Converting Between RGB Values and Color Codes |
|
 |
Display and Convert RGB Values and Color Codes on a GUI Tool |
|
A Simple Tool for Making Specific Colors Transparent (Batch Processing Version) |
|
 |
Batch-Convert a Specific Color to Transparency in All PNG Files in a Folder |
|
A Simple Tool for Making Specific Colors Transparent |
|
 |
Convert a Specific Color to Transparency in PNG Image Files |
|
Simple Tool for Animating Sequential Images |
|
 |
A lightweight tool developed with VCSSL that allows you to play back sequential image files as an animation without converting them into a video file. |
|
Vertex Array-Based Model Deformation Animation |
|
 |
How to Deform 3D Surface Models Using a Grid-Based Vertex Array |
|
Creating a Model from a Vertex Array (Quadrangle Grid Mesh Format) |
|
 |
How to Create 3D Surface Models from a Grid-Based Vertex Array |
A display consists of many small pixels. Each pixel includes three rectangles -- red, green, and blue light sources. The color of the pixel is controlled by adjusting the brightness of each light source. By adjusting the brightness of these three light sources (red, green, and blue), a display can represent a wide range of colors.