HTML Color Mixer

A on-line CSS color mixing tool. Choose two colors by clicking on the pallet at the right side, then click on the 'blend' button.

Inputs

Format Hex RGB RGB%
Color 1  
Color 2  
Midpoints
blend clear

Outputs

Palette  
 
 
 
 
 
 
 
 
 
 
 

Waterfall

Instructions

  • Pick a color value format, input two valid CSS color values in the format you chose, and pick the number of midpoints you'd like to see. The palette will show the colors you input as well as the requested number of midpoint colors, and the values of those colors.
  • All numbers are rounded to the nearest integer.
  • Clicking on a square in the "waterfall" display will fill in the appropriate value for whichever input is highlighted.
  • Switching between value formats will translate whatever values are in place.
  • "Clear" removes all values and colors, but does not change the current value format.
  • The URL of the page is updated with each change so you can share or bookmark the colors, blend steps, and value format currently shown.
  • If you'd like to have the HTML Color Mixer for off-line use, just view source and save to your hard drive.

Color Blender, by Eric A. Meyer. Big thanks to Eric Meyer for licensing of this wonderful Color Blender tool. Creative Commons License The Color Blender is licensed under a Creative Commons Attribution-ShareAlike 1.0 License.

This tool is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser, lock up your machine, erase your hard drive, or e-mail those naughty pictures you hid in the Utilities folder to your mother. Don't blame me if anything bad happens to you, because it's actually the aliens' fault. The code expressed herein is solely that of the author, and he's none too swift with the JavaScript, if you know what we mean, so it's likely to cause giggle fits in anyone who knows what they're doing. Not a flying toy. Thank you for playing. Insert coin to continue.

Disclaimer

While every effort is made to ensure the accuracy of the information provided on this website, we offer no warranties in relation to these informations.