| 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:
| nothing | black |
| red + green | yellow |
| green + blue | cyan |
| blue + red | magenta |
| red + green + blue | white |
|
|
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 − red | cyan |
| white − green | magenta |
| white − blue | yellow |
|
The subtractive color mixing rules (rules for combinations of the complementary colors) are as follows:
| nothing | white |
| cyan + magenta | blue |
| magenta + yellow | red |
| yellow + cyan | green |
| cyan + magenta + yellow | black |
|
|
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:
| 0 | Black |
| 1 | Blue |
| 2 | Green |
| 3 | Cyan |
| 4 | Red |
| 5 | Magenta |
| 6 | Brown |
| 7 | LightGray |
|
|
| 8 | DarkGray |
| 9 | LightBlue |
| 10 | LightGreen |
| 11 | LightCyan |
| 12 | LightRed |
| 13 | LightMagenta |
| 14 | Yellow |
| 15 | White |
|
|
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:
| Black | clBlack | $000000 |
| Maroon | clMaroon | $000080 |
| Dark green | clGreen | $008000 |
| Olive Green | clOlive | $008080 |
| Navy Blue | clNavy | $800000 |
| Purple | clPurple | $800080 |
| Teal | clTeal | $808000 |
| Gray/Dark Grey | clGray/clDkGray | $808080 |
| Silver/Light Grey | clSilver/clLtGray | $C0C0C0 |
| Red | clRed | $0000FF |
| (Lime) Green | clLime | $00FF00 |
| Yellow | clYellow | $00FFFF |
| Blue | clBlue | $FF0000 |
| Magenta | clFuchsia | $FF00FF |
| Cyan | clAqua | $FFFF00 |
| White | clWhite | $FFFFFF |
| Cream | clCream | $F0FBFF |
| Medium Grey | clMedGray | $A4A0A0 |
| Mint Green | clMoneyGreen | $C0DCC0 |
| Sky Blue | clSkyBlue | $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).
|
|