Computing: Website and Database Programming

HTML (and Free Pascal) color picker.

1. The physics of colors.
Color is a function of the human visual system, and is not an intrinsic property. Objects don't have a color, they give off light that appears to be a color. Spectral power distributions exist in the physical world, but color exists only in the mind of the beholder. Our perception of color is not an objective measure of anything about the light that enters our eyes, but it correlates pretty well with objective reality.
Color is determined first by frequency. Low frequency radiation is invisible. With an adequately bright source, starting somewhere around 400 THz, most humans begin to perceive a dull red. As the frequency is increased, the perceived color gradually changes from red to orange to yellow to green to blue to violet. The eye doesn't perceive violet so well. It always seems to look dark compared to other sources at equal intensity. Somewhere between 700 THz and 800 THz the world goes dark again.
Frequency determines color, but when it comes to light, wavelength is the easier thing to measure. A good approximate range of wavelengths for the visible spectrum is 400 nm to 700 nm, although most humans can detect light just outside that range. Since wavelength is inversely proportional to frequency the color sequence gets reversed: 400 nm is a dull violet, 700 nm is a dull red. Wavelengths below 400 nm are called ultra-violet, wavelengths above 700 nm are called infra-red.
The absence of light is darkness. Add light and human eyes to the darkness and you get color – a perception of the human visual system. The retina at the back of the human eye has three types of neurons called cones, each sensitive to a different band of wavelengths: one long, one medium, and one short. The long wavelength cones are most stimulated by light that appears red, the medium wavelength cones by light that appears green, and the short wavelength cones by light that appears blue. A monochromatic wavelength of light (electromagnetic radiation of a single frequency) can be selected as a representative for each of these colors. These become the primary colors of a system that can be used to reproduce other colors in a process known as additive color mixing.
Additive color mixing.
When no light or not enough light falls on the retina, the brain perceives this nothing as the color black. When the light from two or more sources falls on adjacent rods in the retina, the brain perceives the combination as a different color. The rules for combinations of the primary colors are as follows:
red + greenyellow
green + bluecyan
blue + redmagenta
red + green + bluewhite
Color mixing is not an all or nothing process. Red light and green light together appear yellow, but they can also appear orange when mixed with a red light that is brighter than the green one. Red light and green light can be combined in other proportions to produce light that appears to be a color halfway between red and orange, and orange and yellow, and yellow and green. We can keep dividing and subdividing like this to produce new, distinct colors.
One convenient way to represent some of the possibilities is with a continuous color wheel. Starting on the right side and going counterclockwise, red is placed on the circumference at 0°, green at 120°, and blue at 240°. The complimentary colors are halfway between the primaries: yellow at 60°, cyan at 180°, and magenta at 300°. These numbers are called hue angles. White is at the origin. The distance from the origin to any point on the color wheel stated as a fraction of the radius is known as the saturation. White is completely desaturated. Its saturation is 0%. Colors with low saturation are often identified as pale or pastel (pink, for example, is desaturated red). Colors with a high saturation are bright or vibrant. Colors with 100% saturation are said to be pure.
Subtractive color mixing.
The absence of pigment is paper that appears white when illuminated with white light. Adding a pigment to it, by subtracting the wavelength ranges corresponding to the primary colors, results in the perception of one of the complementary colors:
white − redcyan
white − greenmagenta
white − blueyellow
The subtractive color mixing rules (rules for combinations of the complementary colors) are as follows:
cyan + magentablue
magenta + yellowred
yellow + cyangreen
cyan + magenta + yellowblack
If you are interested in seeing how color addition and subtraction works in practice, you may want to have a look at my Color addition and subtraction Lazarus/Free Pascal desktop application.
The RGB and the CMYK color models.
The RGB color model is an additive color model in which the red, green, and blue primary colors of light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green, and blue.
The main purpose of the RGB color model is for the sensing, representation, and display of images in electronic systems, such as televisions and computers, though it has also been used in conventional photography. Before the electronic age, the RGB color model already had a solid theory behind it, based in human perception of colors.
RGB is a device-dependent color model: different devices detect or reproduce a given RGB value differently, since the color elements (such as phosphors or dyes) and their response to the individual red, green, and blue levels vary from manufacturer to manufacturer, or even in the same device over time. Thus an RGB value does not define the same color across devices without some kind of color management.
Typical RGB input devices are color TV and video cameras, image scanners, and digital cameras. Typical RGB output devices are TV sets of various technologies (CRT, LCD, plasma, OLED, quantum dots, etc.), computer and mobile phone displays, video projectors, multi-color LED displays and large screens such as the Jumbotron.
The CMYK color model is a subtractive color model, based on the CMY color model, used in color printing. CMYK refers to the four ink plates used in color printing: cyan, magenta, yellow, and key (black).
The CMYK model works by partially or entirely masking colors on a lighter, usually white, background. The ink reduces the light that would otherwise be reflected. Such a model is called subtractive because inks "subtract" the colors red, green and blue from white light. White light minus red leaves cyan, white light minus green leaves magenta, and white light minus blue leaves yellow.
Whereas in additive color models, such as RGB, white is the "additive" combination of all primary colored lights, black is the absence of light, in the CMYK model, it is the opposite: white is the natural color of the paper or other background, black results from a full combination of colored inks. To save cost on ink, and to produce deeper black tones, unsaturated and dark colors are produced by using black ink instead of the combination of cyan, magenta, and yellow.
Similar to monitors, the inks used in printing produce a color gamut that is "only a subset of the visible spectrum" although both color modes have their own specific ranges. As a result of this, items which are displayed on a computer monitor may not completely match the look of items which are printed if opposite color modes are being combined in both mediums. When designing items to be printed, designers view the colors which they are choosing on an RGB color mode (their computer screen), and it is often difficult to visualize the way in which the color will turn out post-printing because of this.
[Except for the color models part, that is from the corresponding Wikipedia pages, this document is extracted from an article about colors, published at the The Physics Hypertextbook website]
2. Using colors on a webpage (HTML or CSS).
There are essentially three elements that may be colored on a webpage:
  • The page background (default = white)
  • The text on the page (default = black)
  • The links on the page (default = browser dependent; often: "normal" link = blue, active/selected link = red, visited link = green)
You can specify colors on page level using the <body> tag or you can set colors for individual tags. Color related attributes in HTML:
  • bgcolor sets a color for the background of the page;
  • text sets a color for the body text;
  • link sets a color for linked text;
  • alink sets a color for active links or selected links;
  • vlink sets a color for visited links.
In CSS, you use background-color to define the color of the background of the page or a given element (as for example a table or table cell) and color to define the foreground color, in particular the color of the text of the whole page or of a given element (such as <h1> header, <p> paragraph, table cell, any kind of link). The color of table cell borders may be defined within the border attribute of the <td> tag.
But, how colors are coded on a webpage? There are essentially two ways to do it: Using named color values, or using hexadecimal color codes, directly related with the RGB color model. Note that there is also the possibility to use decimal color codes, that may be specified using the rgb() property. However, this property is not supported by all browsers, thus better not to use it.
The W3C Standard defines 16 basic color names, that are supported by all browsers since the beginning of website coding, I guess. These color names are: black, gray, silver, white, yellow, lime, aqua, fuchsia, red, green, blue, purple, maroon, olive, navy, and teal. Note, that aqua corresponds to what is normally called cyan, and that fuchsia corresponds to what normally is called magenta. Example of a webpage with white text on a blue background:
    <body text = "white" bgcolor = "blue">
All modern browsers support 140 color names, corresponding to a predefined hexadecimal color value. You may find a list of them in the CSS Colors article on the W3 Schools website. Example of the CSS describing the colors of some HTML element (MediumBlue text on LightYellow background, delimited by a golden border):
    .element {
        background-color: LightYellow;
        color: MediumBlue;
        border: 2px solid Gold;
The hexadecimal color codes, used in HTML and CSS, start with a hash (#) sign, followed by a 6-digits hexadecimal number. These numbers are in direct relationship with the RGB color model. In fact, the first two digits represent the "quantity" of red, the middle two digits represent the "quantity" of green, and the last two digits represent the "quantity" of blue. As a two-digits hexadecimal number may have a value between 00 (0) and FF (255), 00 means no red/green/blue at all, and FF means red/green/blue saturation. Thus, for the 3 primary colors and black and white, we get the following hexadecimal color codes:
    #000000 = black; #ff0000 = red; #00ff00 = green; #0000ff = blue; #ffffff = white.
Can you guess the code for yellow? Yellow is a complementary color, that may be obtained by addition of red and green; thus yellow = #ffff00. An important note concerning the predefined color names: The name Green corresponds to a dark green color and to the hexadecimal value #008000, whereas the name Lime is used for the color, that we usually call "green" and that corresponds to the hexadecimal value #00ff00. CSS of the element, described above, using hexadecimal color codes:
    .element {
        background-color: #ffffe0;
        color: #0000cd;
        border: 2px solid #ffd700;
Adding two further digits between 00 and FF to the hexadecimal color values, it becomes possible to add transparency to the #RRGGBB colors. Example:
    background-color: #ff000080;
corresponds to red with 80/255 transparency.
Colors with transparency may also be described with decimal color values, using the rgba() instead of the rgb() property. With rgb(), there are three parameters, for red, green and blue, respectively, and expressed either as a value between 0 and 255 or a percentage between 0% and 100%. For example, rgb(255, 0, 0) or rgb(100%, 0%, 0%) is, if the webbrowser supports the property, rendered as red. With rgba(), a fourth parameter is added: an alpha channel which specifies the opacity of the object. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). Example:
    background-color: rgb(255, 255, 0, 0.5);
corresponds to a "half-opaque" yellow.
Note: Beside defining the colors based on the RGB color model, it is also possible to define them by using hue, saturation, and lightness values. This may be done by using the properties hsl() with 3 parameters for each of these values respectively, or hsla(), where a fourth parameter describes an opacity alpha channel. Have a look at the article CSS Legal Color Values on the W3 Schools website for details.
3. Using colors with Free Pascal.
When working with command line programs, you are limited to 16 colors, that you may use by including the Crt unit. The 16 colors are defined as byte values from 0 to 15; declared constants allow to use the color name. Here's the list:
When working with GUI applications, you can use the TColor type, defined within the LCL. TColor values are actually integers; they can represent either an RGB (3x8bit) value, or a system color like clDefault. The easiest way to work with TColor values is to indicate them as hexadecimals. Starting from the HTML/CSS hexadecimal color value, just exchange the first and last two digits to get the Free Pascal hexadecimal number. Examples:
red #ff0000 $0000FF  blue #0000ff $FF0000
yellow #ffff00 $00FFFF  gold #ffd700 $00D7FF
Some 20 RGB colors (together with a whole bunch of system colors) are defined as constants within the LCL and thus may be used by indicating their name. All these constant names start with "cl". Examples: clRed, clBlue, clYellow. Note, that similar to HTML/CSS, magenta is defined as clFuchsia and cyan as clAqua. Also clGreen is dark green and "normal" green is clLime. Here the standard colors list:
Dark greenclGreen$008000
Olive GreenclOlive$008080
Navy BlueclNavy$800000
Gray/Dark GreyclGray/clDkGray$808080
Silver/Light GreyclSilver/clLtGray$C0C0C0
(Lime) GreenclLime$00FF00
Medium GreyclMedGray$A4A0A0
Mint GreenclMoneyGreen$C0DCC0
Sky BlueclSkyBlue$F0CAA6
In FPC 3.2.0+ there are constants (of type TColor) for the W3C standard HTML/CSS colors that are declared in System.Uitypes (cf. Free Pascal Wiki: Colors for details). The constant names for these colors are the color name without cl- at the beginning (ex: Aqua, Aquamarine) and the Free Pascal hexadecimal TColor value corresponds to the HTML/CSS hexadecimal color value without any digits exchange (ex: red = $FF0000; blue = $0000FF; yellow = $FFFF00). Also note, that these constants aren't actually available in Lazarus, because the current Lazarus versions still support FPC 3.0.x.
4. My Color picker 2019 online application.
The Color picker 2019 online application allows you to preview how a given color looks like on a webpage (respectively on a Free Pascal form). Colors are organized by color groups (Pink, Purple, Red, Orange, Yellow, Green, Cyan, Blue, Brown, White, Gray), displayed at the top of the screen. Clicking on one of these color groups names opens a list with this color group elements (for the Pink color group, for example, the colors: Pink, LightPink, HotPink...). You can now choose one of these colors (by clicking on its name); it will be used as either text or background color (depending on the radio button that is selected). In the middle pane of the page, all relevant HTML color values, concerning this color will be displayed (in either the text related or the background related table): HTML color name, color code, (decimal) RGB value. The tables also contain the Free Pascal TColor code and name and the color name, as defined within the Perl "Chart" module. The TColor names and values displayed are those used with FPC 3.0.x (supported by the actual Lazarus versions), i.e. that the colors defined in System.Uitypes are not considered here. A preview of how this color looks like is given in the right pane of the page. Please, note that to use the selected color as text (you can choose your own text and display it with normal or large font-size) or background in the preview, the corresponding checkbox at the top of the middle pane must be selected (if you unselect it, text color will be black and background color will be white). Beneath the color preview box, the CSS style rule syntax, corresponding to the box content, is displayed.
To allow the user to experiment with any possible RGB colors, the color group menu at the top of the page contains the special item Custom colors. If you click this item, there's not a color list that will be displayed, but several input fields that allow you to enter any RGB color value. Just choose if you want to use decimal or hexadecimal values and enter the values for red, green and blue. Push the Select button to display the corresponding data in the middle pane and the color preview in the right pane of the page.
Use the following link to start the online application.
5. Color picker 2019 Javascript code.
Click the following link to download the Color picker 2019 Javascript code and all other files needed to run this application on your web server. Have a look at the ReadMe.txt file, included in the download archive, for details about the different files, and where to place them on the server. As the application is pure Javascript, it is possible to run it in any web browser without the need of a webserver. Use the following link to download the offline version of Color picker 2019.
The script is rather long and I do not display the source code here. Just some remarks, concerning how the application works:
  • The application is a pure event driven Javascript application: the webpage colors.html includes plenty of objects, that react on a user click by calling one of the Javascript functions, defined in the file colors.js.
  • The function colGroupSel is called when the user clicks one of the color groups names at the top of the page, a string value, identifying which color group must be used, being passed as argument. The function displays the color list for the given color group and also makes the other page elements (color values, color preview and CSS rule panes) visible.
  • The function colorSel is called when the user clicks one of the name items in the color list for the actual color group, a string value, identifying which color must be used, being passed as argument. The function retrieves the HTML color name and code from the list on the webpage, calculates the corresponding decimal RGB values (using the function html2rgb and finally calls the function display that does the entire display for the color selected.
  • The function rgbSel (no arguments) retrieves the red, green, blue values entered by the user (if the user used decimal numbers, the function rgb2html is called to get the HTML color code; if they used hexadecimal numbers, the function html2rgb is called to get the RGB values), looks up the HTML color name (if it exists), and finally calls the function display that does the entire display for the color selected.
  • The function display (no arguments) does the entire display for the actually set text and background color: It fills in the HTML, Free Pascal and Perl "Chart" color values tables (the Free Pascal and Perl "Chart" values being taken from hard coded arrays), changes the HTML code of the preview box to set the actual colors (and the text size), constructs and displays the CSS rule.
  • Some other functions are used for conversion purposes: hex2dec (with a 2 digits hexadecimal number as argument), dec2hex (with a decimal number between 0 and 255 as argument), html2rgb (with a HTML color code as argument), rgb2html (with the decimal red, green, blue values as arguments).

If you find this page helpful or if you like my Color picker 2019 web application, please, support me and this website by signing my guestbook.