Getting dirty in RGB

Rate Topic:

Renegade

418 I'm a teapot

Group: Members
Posts: 748
Joined: 08-March 10
Expertise:HTML,CSS,PHP,Javascript,Node.js,SQL,Graphics

Posted 13 April 2012 - 04:47 PM (#1)

Getting dirty in RGB

Lately I've been digging deep in pixels and RGB. I;m trying to understand colors and the computations behind filters such as hue or saturation so I built this little tool to input different formulas to calculate the RGB values. It's literally just for to visualize the color transforming. Take a look: http://fiddle.jshell...7pQ/show/light/

To zoom out (in Chrome anyway) is to Ctrl + - key. It's useful for viewing the bigger picture.

Has anyone any experience with computing RGB values for filters etc.?
(That's with JSFiddle)

EDIT: Couple of fancy ones which are nothing but pretty:

Red:

(x % 2 == 0) ? x : 255-x

Green:

(y % 2 == 0) ? y : 255-y

Blue:

x * y

Psychedelic examples using

createImageData

:
http://jsfiddle.net/renegade/HRwsd/

http://adriancooney.ie ₪ Github ₪ Twitter ₪ Dribbble ₪ Forrst
We all die. The goal isn't to live forever. The goal is to create something that will.

Array(16).join({}-{}) + " Batman!";

alexdavey

Bringing XKCD to a post near you

Group: Members
Posts: 848
Joined: 05-November 10
LocationLondon
Expertise:HTML,CSS,PHP,Javascript

Posted 15 April 2012 - 02:25 AM (#2)

The RGB colour model is actually very unintuitive. There is a much more intuitive colour model, HSV (Hue, Saturation, Value), which is often used in colour pickers such as the one in photoshop. Once you convert your RGB values into HSV, all you need to do is modify the hue and saturation values as required and then convert back to RGB. The RGB to HSV formula is quite simple and you can find it on Wikipedia, but you can always use this code if you are lazy

Renegade

418 I'm a teapot

Group: Members
Posts: 748
Joined: 08-March 10
Expertise:HTML,CSS,PHP,Javascript,Node.js,SQL,Graphics

Posted 15 April 2012 - 06:48 AM (#3)

alexdavey, on 15 April 2012 - 02:25 AM, said:

Gah, this is so much better! It really is more intuitive. The cylindrical representation on that Wikipedia page shows it perfectly. This will make applying filters ridiculously easy. Thanks!

http://adriancooney.ie ₪ Github ₪ Twitter ₪ Dribbble ₪ Forrst
We all die. The goal isn't to live forever. The goal is to create something that will.

Array(16).join({}-{}) + " Batman!";