search

nelsonic / colors

A little experiment in color (HTML + CSS + JavaScript)
MIT License
4 stars 2 forks source link

readme

colors

A little experiment in Color (HTML + CSS + JavaScript)

Color Spectrum

Sick of not knowing the names / hex values of colors I decided to create a little colors mini app that I can keep handy when ever I need to look up a color or remember one I've used before. (Don't worry there's more to it, but I'm keeping it simple for now ;-)

Intro

Though often overlooked, color is an integral part of our lives. Nature has used color to communicate since the beginning of time and humans are no exception.

(For the people unlucky enough to be color-blind please feel free to skip this chapter)

As Web/Software developers/designers we use color all the time. Fonts, Text Highlighting, Images, Backgrounds, Borders, Tables, you name it, all enhanced with color!

Most of the time we work from a pre-defined color-scheme enshrined in some brand guidelines. but every so often we get to work on something New , if you are lucky enough to be in that position cherish it!

The process of discovering and deciding on colors can be equal parts exciting and frustrating. Several times I have come up against the claim that: "XYZ Corp. is already using that color so we can't..."

Brands and their colors

See: "T-Mobile Owns the Color Magenta" and "The Battle for Blue")

But we need not despair, there are plenty of shades still left to chose from! The RGB (RedGreenBlue) "True Color" System has 16.7 Million colors. [ 256 x 256 x 256 = 16,777,216 = 224 (Hence 24-Bit Color)]

If you looked at one color per second it would take 194 days to cycle through all the available colors. [ 256 x 256 x 256/(60 x 60 x 24) = 194.18]

Even if you viewed each color for just 20 miliseconds (50 colors per second) it would still take almost 4 days to see them all. [ 256 x 256 x 256/(60 x 60 x 24 x 50) = 3.88 ]

Obviously viewing one color at a time is inherently slow. While it would make an OK "modern art" installation in a 360-degree projected color room, not that many people have this kind of time...

If instead we view a palette of colors on a large screen (e.g. 27 inch hi-res display) we have 3.68 Million [2560 x 1440 = 3,686,400] pixels available.

To display ALL colors (symultaneously) at one color per pixel would require 5 Monitors [ 256 x 256 x 256 / (2560 x 1440) = 4.551 ] ... How many people have Five high-resolution monitors handy...? :-)

So instead we need a way of displaying fewer colors intelligently.

Random Color Generator

While playing I built a quick Random Color Generator it does exactly what you would expect.

Random Color Generator

see: ./misc/random.html

Obviously that's not very useful (it was just an experiment). So... lets get get on to something a bit more useful.

Color Slider

I tried the JQuery UI Slider plugin. http://jqueryui.com/slider/#colorpicker

It works fine in on Desktop (click) but fails on Touch (iPad/Phone)

ideaQ for ways to Discover Colors

Notes and Research

Websites Dedicated to Color

Tools

Useful Wikipedia Articles

Colorful Articles and Posts

Later