CSS Color Mixer

HTML and CSS Color Mixer

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.
  • The color's name only when the color is selected from the right column of CSS's and HTML's named colors.

The color mixer applications are written Processing.js and only require an internet connection and that Javascript is enabled.

brinkje@plu.edu   Version: Mar. 6, 2013

Java Color mixer
JavaFX Color mixer
Processing and Processing.js Color mixer