Project Description

This project began as an exploration of the DOM, javascript event handlers. The exploration uses color theory for page content; javascript was used manipulate the DOM.

DOM Manipulation With Javascript

Event Listeners

In this section the DOM is manipulated to create round elements, buttons, and event listeners with standard JavaScript.

Click Me
Click Me
Click Me


Random Color Selector

DOM manipulation via Javascript is further explored in this section. Square elements were created to demonstrate various Javascript methods. Event listeners and mouse events along with javascript methods were used.

Box 1
Box 2
(Hover/click anywhere inside the box.)
Box 3


Color Theory

Paradigm: Red, Blue, Green - RGB

The RGB color model is an additive color model in which red, green, and blue light are added together in various ways to reproduce a broad array of colors.

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 R, G, and B 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.

tri-color circles
Red
rgb(255, 0, 0)
Green
rgb(0, 255, 0)
Blue
rgb(0, 0, 255))


Paradigm: Hue, Saturation, Brightness - HSB

HSL (hue, saturation, lightness) and HSV (hue, saturation, value) are alternative representations of the RGB color model, designed in the 1970s by computer graphics researchers to more closely align with the way human vision perceives color-making attributes. In these models, colors of each hue are arranged in a radial slice, around a central axis of neutral colors which ranges from black at the bottom to white at the top. The HSV representation models the way paints of different colors mix together, with the saturation dimension resembling various tints of brightly colored paint, and the value dimension resembling the mixture of those paints with varying amounts of black or white paint. The HSL model attempts to resemble more perceptual color models such as the Natural Color System (NCS) or Munsell color system, placing fully saturated colors around a circle at a lightness value of ​1⁄2, where a lightness value of 0 or 1 is fully black or white, respectively.

hsb_model
RED: H: 0°, S: 100%, B: 100%
GREEN: H: 120°, S: 100%, B: 100%
BLUE: H: 240°, S: 100%, B: 100%


Paradigm: Hexidecimal Color

Web colors are colors used in displaying web pages on the World Wide Web, and the methods for describing and specifying those colors. Colors may be specified as an RGB triplet or in hexadecimal format (a hex triplet) or according to their common English names in some cases. A color tool or other graphics software is often used to generate color values. In some uses, hexadecimal color codes are specified with notation using a leading number sign (#). A color is specified according to the intensity of its red, green and blue components, each represented by eight bits. Thus, there are 24 bits used to specify a web color within the sRGB gamut, and 16,777,216 colors that may be so specified.

Web colors have an unambiguous colorimetric definition, sRGB, which relates the chromaticities of a particular phosphor set, a given transfer curve, adaptive whitepoint, and viewing conditions. These have been chosen to be similar to many real-world monitors and viewing conditions, in order to allow rendering to be fairly close to the specified values even without color management. User agents vary in the fidelity with which they represent the specified colors. More advanced user agents use color management to provide better color fidelity; this is particularly important for Web-to-print applications.

hex_model
RED Hex: #FF0000
GREEN Hex: #00FF00
BLUE Hex: #0000FF


Paradigm: Munsell

In colorimetry, the Munsell color system is a color space that specifies colors based on three properties of color: hue, value (lightness), and chroma (color purity). It was created by Professor Albert H. Munsell in the first decade of the 20th century and adopted by the United States Department of Agriculture (USDA) as the official color system for soil research in the 1930s.

Several earlier color order systems had placed colors into a three-dimensional color solid of one form or another, but Munsell was the first to separate hue, value, and chroma into perceptually uniform and independent dimensions, and he was the first to illustrate the colors systematically in three-dimensional space.[1] Munsell's system, particularly the later renotations, is based on rigorous measurements of human subjects' visual responses to color, putting it on a firm experimental scientific basis. Because of this basis in human visual perception, Munsell's system has outlasted its contemporary color models, and though it has been superseded for some uses by models such as CIELAB(L*a*b*) and CIECAM02, it is still in wide use today.

The system consists of three independent properties of color which can be represented cylindrically in three dimensions as an irregular color solid: hue, measured by degrees around horizontal circles chroma, measured radially outward from the neutral (gray) vertical axis value, measured vertically on the core cylinder from 0 (black) to 10 (white) Munsell determined the spacing of colors along these dimensions by taking measurements of human visual responses. In each dimension, Munsell colors are as close to perceptually uniform as he could make them, which makes the resulting shape quite irregular. As Munsell explains:

"Desire to fit a chosen contour, such as the pyramid, cone, cylinder or cube, coupled with a lack of proper tests, has led to many distorted statements of color relations, and it becomes evident, when physical measurement of pigment values and chromas is studied, that no regular contour will serve."
"Desire to fit a chosen contour, such as the pyramid, cone, cylinder or cube, coupled with a lack of proper tests, has led to many distorted statements of color relations, and it becomes evident, when physical measurement of pigment values and chromas is studied, that no regular contour will serve."
— Albert H. Munsell, “A Pigment Color System and Notation”

muns_model
Munsell Model
mun_model2
Munsell Model, 3D View

Future Development Considerations

Gamma

Gamut

Web-accessibility: Contrast