HTML and CSS Color Mixer

Used in Javascript and p5.js

The CSS Color Mixer provides four ways to select colors and provides 1 or 2 ways that color can be written into HTML files and CSS style sheets.

The specified color intensities are shown in the three outer circles in the upper right. Each circle shows the intensity of its color. The small circles show the colors resulting from combination of red and green, red and blue, and green and blue. The center circle in the middle shows the resulting color.

Colors can be selected in four different ways:

• You can move or click the Red, Green and Blue sliders.
• You can click on one of the 216 so called "browser-safe colors" in left hand two columns of color squares.
• In the middle of the right column, you can click on one of the 140 named colors in CSS.
• In the bottom of the right column, you can click on one of the 16 named colors in HTML.

The resulting color is displayed in 1 or 2 of the ways that are allowed in HTML and CSS:

• The color is given in hexadecimal #rrggbb and decimal for p5.js.
• The color's name only when the color has a name which specified in the right column of CSS's and HTML's named colors.

This color mixer application is written in p5.js and only requires an internet connection and that Javascript is enabled.

brinkje@plu.edu   Version: Aug. 4, 2020