JuxtaPrism and Color Management

1. JuxtaPrism and Color Management Lorrae Famiglietti Spring 2012

2. Introduction • How do human perceive color? • People evaluate pairs of colors on the website • Users vote whether pairs go well together or not • Information useful for psychologists, marketers, graphic designers

3. Introduction • Color Theory • Color Scales • Color Schemes • Color Management • How color is displayed

4. Introduction • Color Schemes • JuxtaPrism uses two: • RGB • (Red, Green, Blue) • HSL • (Hue, Saturation, Brightness/Light) • Must convert from HSL -> RGB

5. Introduction • Color Management • List of colors to be displayed is already stored in database • Users vote on their own personal machines • JuxtaPrism does not control what hardware/software they use to take survey

6. Introduction The problem: “How can JuxtaPrism ensure that the data is accurate if users do not see the correct colors displayed?”

7. Introduction The solution: Ensure that everyone surveyed sees the exact color values

8. Introduction • Current data does not take this data into account • The way the website is currently designed does not offer a solution for this problem

9. Color Scales • Additive Color Scales • Ex: RGB • Subtractive Color Scales • Ex: CYMK • Cylindrical Coordinate Color Scales • Ex: HSL

10. Additive Color Scale • Combines primary values to make distinct colors • Additive reproduction • This property is important when trying to solve the color management problem

11. RGB • Additive color scale • Red, Green, Blue are the three primary colors • Based off the way the human eye was though to perceive color

12. RGB • Color broken down into three primary components • Reconstructed to form a color

13. RGB • Benefit • Ease of use with HTML (website needs to look good) • Limitation • Relies on primary color values • Arbitrary

14. RGB Solutions • RGB standard • Instituted by the International Color Consortium (ICC) • sRGB • Ensures that colors are consistent across devices • Opt-In, though most manufacturers have opted in

15. HSL • Cylindrical coordinate system • Similar to HSV (hue, saturation, value) • Hue range: [0, 360] • Saturation range: [0, 1] • Light range: [0, 1]

16. HSL • Can easily represent gradual shades and tints found in nature • Use regular intervals of the three parameters to get regular color sample • JuxtaPrism uses 30 degree increments from hue, 10% increments for light and saturation

17. HSL • Limitations • Multiple representations of white, black, and grey scale • Not all colors generated are totally unique • Does not represent the same thing as RGB • JuxtaPrism needs the colors in RGB to be displayed on the website

18. HSL and RGB together • Colors generated in HSL • RGB color values calculated • RGB value checked against database • If the value already exists, throw it out

19. Conversion Algorithm • If saturation is 0, then color is grey scale • Red, Green, Blue = light percentage • Hue doesn’t matter, does not change the color at all • 2 Temp variables calculate the ratios of light and saturation • Used to determine the amount of overall color needed

20. Conversion Algorithm • The proportion variables, along with the color’s hue is passed to another function • Based on the amount of that hue present, the red, green, and blue values are assigned.

21. HSL and RGB • JuxtaPrism keeps color values for the HSL ad RGB scale • More parameters = more comparisons/analysis

22. Color Management • Means in which colors are portrayed accurately through media • Colors adjusted across devices to show the correct tones/hues • Ensures that images are reproduced true to the original

23. International Color Consortium (ICC) • Addresses the issue of color management • Created standard color profiles for hardware and software • sRGB • Optional for manufacturers

24. Color and the Human Eye • Representations of color attempt to reproduce the way humans see color • Color is result of a wavelength of light • Each color has a unique wavelength

25. Color and the Human Eye • Your eyes interpret wavelengths of light as color • Entirely personal experience • No guarantee what you see as “blue” is what I see as “blue” • Environment also changes the appearance of colors (well lit room vs. dark room)

26. Color and the Human Eye • Large and unknown variable • Cannot correct or prevent this issue from occurring • Nothing we can do about it

27. Color and Hardware

28. Color and Hardware • Every time a new device is used, that device changes the color values of an image • Every transfer involves estimations • Every device probably isn’t calibrated correctly

29. Color and Hardware • Different devices display color differently • Hopefully users are using ICC approved and calibrated devices • JuxtaPrism has no way of ensuring this

30. Color and Software • Different representations of color • Crayon example • Lukasz draws a picture using his 200 color Crayola crayon box (with built in sharpener!) and tells me to copy his picture exactly. I only have a Roseart 12 color crayon box. Even if I draw exactly the same lines as Lukasz does, our picture won’t be identical. 

31. Color Gamuts • Devices and software are limited by their color gamuts. • Lukasz is drawing using the colors available to Adobe RGB, and I’m stuck with the printing press’s colors.

32. How this affects JuxtaPrism • Colors are rounded in the conversion algorithm • Not a problem – I just kept track of both • User’s web browser may not support the color that needs to be displayed

33. Existing solutions • ICC • International Color Consortium • Leave it to the ICC to manage color protocols

34. Existing Solutions • Calibrate Specific devices • Assume scanner is working good (probably is) • Print an image, scan it back in, let printer calibrate itself • Now printer is calibrated • Print a new image on calibrated printer, scan using (hopefully) calibrated scanner, adjust monitor accordingly • Spectrophotometer • Reads color values on screen, comes with software to calibrate monitor to standard

35. Existing Solutions • Default device profile • Use spectrophotometer to read current color profile • Calibrate device back to default

36. Solutions for JuxtaPrism

37. Why this won’t work • Color on left is control color • Color on right is adjusted by user to match left color • In the end, the color values are the same, so we get: (255, 0, 0) = (255, 0, 0) Color distance = 0

38. Color Distance, take 2

39. Color Distance, take 2 • Ask users to set red, green, and blue to their true values • Use color distance to adjust output of website • Relies too much on user knowledge and opinion • Need unbiased third party

40. Controlled Environment • JuxtaPrism establishes a “survey center” • Every workspace has exact same computers • Every computer calibrated • Lighting for the room is always the same

41. Conclusion • For now: • Assume everyone’s computer is reasonably calibrated • Results subject to random error • In marketing and graphic design, this will be the case anyway • Best representation of what users are actually seeing

42. Questions?