{"id":13849,"date":"2024-08-03T11:38:29","date_gmt":"2024-08-03T18:38:29","guid":{"rendered":"http:\/\/imprint.li\/ritsandcompany\/?p=13849"},"modified":"2024-08-03T11:38:29","modified_gmt":"2024-08-03T18:38:29","slug":"the-science-of-color","status":"publish","type":"post","link":"https:\/\/ritsandcompany.com\/index.php\/2024\/08\/03\/the-science-of-color\/","title":{"rendered":"The Science of Color"},"content":{"rendered":"<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1144px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-1\"><h1><\/h1>\n<div id=\"attachment_13808\" style=\"width: 893px\" class=\"wp-caption alignnone\"><img data-recalc-dims=\"1\" decoding=\"async\" aria-describedby=\"caption-attachment-13808\" data-attachment-id=\"13808\" data-permalink=\"https:\/\/ritsandcompany.com\/index.php\/2017\/06\/19\/color-my-digital-world\/screen-shot-2017-06-18-at-11-02-34-am\/\" data-orig-file=\"https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-11.02.34-AM.png?fit=883%2C427&ssl=1\" data-orig-size=\"883,427\" data-comments-opened=\"1\" data-image-meta=\"\" data-image-title=\"RGB v CMYK\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-11.02.34-AM.png?fit=883%2C427&ssl=1\" class=\"wp-image-13808 size-full\" src=\"https:\/\/i0.wp.com\/imprint.li\/ritsandcompany\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-11.02.34-AM.png?resize=883%2C427&#038;ssl=1\" alt=\"\" width=\"883\" height=\"427\" srcset=\"https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-11.02.34-AM.png?resize=200%2C97&amp;ssl=1 200w, https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-11.02.34-AM.png?resize=300%2C145&amp;ssl=1 300w, https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-11.02.34-AM.png?resize=400%2C193&amp;ssl=1 400w, https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-11.02.34-AM.png?resize=600%2C290&amp;ssl=1 600w, https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-11.02.34-AM.png?resize=768%2C371&amp;ssl=1 768w, https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-11.02.34-AM.png?resize=800%2C387&amp;ssl=1 800w, https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-11.02.34-AM.png?fit=883%2C427&amp;ssl=1 883w\" sizes=\"(max-width: 883px) 100vw, 883px\" \/><p id=\"caption-attachment-13808\" class=\"wp-caption-text\">Additive vs subtractive color systems.<\/p><\/div>\n<p>For most of my design career I had a pretty fuzzy understanding of additive and subtractive color systems. I knew enough to select RGB in my design programs for anything online, and CMYK for anything that was going to be printed. But why those two different color systems behaved so differently was a mystery. I blame my second-grade art teacher.<\/p>\n<p>Most of us remember mixing paints together in primary school and learning that if you mix red with blue, you get a shade of purple, and if you mixed red with yellow you'd get a shade of green. We also learned that mixing all our paints together in a great big puddle in the middle of the art room made a muddy shade of brown and our teacher a shade of orange.<\/p>\n<p>What we learned in second grade that passed for color theory is what is called a subtractive color system. In print design language, CMYK, which stands for Cyan, Magenta, Yellow and blacK, the primary colors of ink and the color you get if you mix them all together.<\/p>\n<h2><\/h2>\n<h2>RGB vs CMYK<\/h2>\n<p>RGB stands for Red, Green and Blue, the primary colors in additive color system, and is based on how light behaves when it's mixed together. Mix red and green <em>light<\/em> together and you get yellow. Mix green and blue light and get cyan. Mix all light together\u00a0and you get white. Like looking at the reverse effect of sunlight through a prism.<\/p>\n<p><img data-recalc-dims=\"1\" data-attachment-id=\"13809\" data-permalink=\"https:\/\/ritsandcompany.com\/index.php\/2017\/06\/19\/color-my-digital-world\/screen-shot-2017-06-18-at-3-51-47-pm\/\" data-orig-file=\"https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-3.51.47-PM.png?fit=627%2C347&ssl=1\" data-orig-size=\"627,347\" data-comments-opened=\"1\" data-image-meta=\"\" data-image-title=\"prism\" data-image-description=\"\" data-image-caption=\"\n\n<p>Mix all light waves together and get white light in the additive color system.<\/p>\n<p>\" data-large-file=\"https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-3.51.47-PM.png?fit=627%2C347&ssl=1\" class=\" wp-image-13809 alignnone\" src=\"https:\/\/i0.wp.com\/imprint.li\/ritsandcompany\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-3.51.47-PM.png?resize=743%2C411&#038;ssl=1\" alt=\"\" width=\"743\" height=\"411\" \/><\/p>\n<p>When we're designing for monitors\u2013which use light to project the images onto the screen\u2013we're working in the RGB color system. But that doesn't explain why color works differently in light waves than in pigments. It all seems such a mystery, until you know a little more about the physics of color.<\/p>\n<h2><\/h2>\n<p><img data-recalc-dims=\"1\" data-attachment-id=\"13810\" data-permalink=\"https:\/\/ritsandcompany.com\/index.php\/2017\/06\/19\/color-my-digital-world\/screen-shot-2017-06-18-at-11-05-04-am\/\" data-orig-file=\"https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-11.05.04-AM.png?fit=389%2C468&ssl=1\" data-orig-size=\"389,468\" data-comments-opened=\"1\" data-image-meta=\"\" data-image-title=\"Wavelengths of color\" data-image-description=\"\" data-image-caption=\"\n\n<p>Long wavelengths look red to human eyes, medium lengths look green, and short lengths look blue.<\/p>\n<p>\" data-large-file=\"https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-11.05.04-AM.png?fit=389%2C468&ssl=1\" class=\"alignright wp-image-13810\" src=\"https:\/\/i0.wp.com\/imprint.li\/ritsandcompany\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-11.05.04-AM.png?resize=400%2C481&#038;ssl=1\" alt=\"\" width=\"400\" height=\"481\" \/><\/p>\n<h2>Wavelengths and Eyeballs<\/h2>\n<p>Light is made up of wavelengths. Photo receptors in the human eye are sensitive to short, medium and long wavelengths, which we perceive as a color: blue, green & red, plus all the colors in between.<\/p>\n<p>Great, that (kinda) makes sense. But we don't see colors in the light\u2014unless it's through a prism\u2014we see them in objects. How does an object get its color?<\/p>\n<p>Turns out, that's light too. This is where the \"additive\" part of color systems comes in.<\/p>\n<h2><\/h2>\n<h2><\/h2>\n<h2><\/h2>\n<h2><\/h2>\n<h2>Why is my shirt red and my jeans blue?<\/h2>\n<p>Objects appear different colors because they absorb some wavelengths and reflect back to us others. When we see a red shirt, what we're really seeing is what's left after all the other lightwaves\u2014blue, green, purple, yellow\u2014have been absorbed by that shirt. Only the red isn't absorbed, so \u00a0our eyes see red.<\/p>\n<p>Same thing with those blue jeans. All the red, green, yellow and magenta wavelengths were absorbed, and only the cyan bounced back for us to see.<\/p>\n<p><img data-recalc-dims=\"1\" data-attachment-id=\"13811\" data-permalink=\"https:\/\/ritsandcompany.com\/index.php\/2017\/06\/19\/color-my-digital-world\/screen-shot-2017-06-18-at-3-59-01-pm\/\" data-orig-file=\"https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-3.59.01-PM.png?fit=576%2C285&ssl=1\" data-orig-size=\"576,285\" data-comments-opened=\"1\" data-image-meta=\"\" data-image-title=\"Screen Shot 2017-06-18 at 3.59.01 PM\" data-image-description=\"\" data-image-caption=\"\n\n<p>A red shirt has absorbed all lightwaves but red. Blue shorts absorbed all lightwaves but blue.<\/p>\n<p>\" data-large-file=\"https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-3.59.01-PM.png?fit=576%2C285&ssl=1\" class=\"wp-image-13811 aligncenter\" src=\"https:\/\/i0.wp.com\/imprint.li\/ritsandcompany\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-3.59.01-PM.png?resize=725%2C359&#038;ssl=1\" alt=\"\" width=\"725\" height=\"359\" \/><\/p>\n<p>But wait\u2013you're asking\u2013magenta and cyan, aren't those part of CMYK? How did they get into our RGB colors? Turns out, cyan, magenta and yellow are the secondary colors of RGB. Does your head hurt yet?<\/p>\n<p>Check out the color wheel below. Red, green and blue are the primary colors, while cyan, yellow and magenta are the colors you get when you mix two of those lightwaves together in equal parts. There are some fun Youtube videos where physicists with red, green and blue flashlights show this mixing together. Go look at them!<\/p>\n<h2><\/h2>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" data-attachment-id=\"13812\" data-permalink=\"https:\/\/ritsandcompany.com\/index.php\/2017\/06\/19\/color-my-digital-world\/screen-shot-2017-06-18-at-9-37-25-am\/\" data-orig-file=\"https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-9.37.25-AM.png?fit=1106%2C607&ssl=1\" data-orig-size=\"1106,607\" data-comments-opened=\"1\" data-image-meta=\"\" data-image-title=\"Screen Shot 2017-06-18 at 9.37.25 AM\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-9.37.25-AM.png?fit=1024%2C562&ssl=1\" class=\"wp-image-13812 aligncenter\" src=\"https:\/\/i0.wp.com\/imprint.li\/ritsandcompany\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-9.37.25-AM.png?resize=624%2C343&#038;ssl=1\" alt=\"\" width=\"624\" height=\"343\" srcset=\"https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-9.37.25-AM.png?resize=200%2C110&amp;ssl=1 200w, https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-9.37.25-AM.png?resize=300%2C165&amp;ssl=1 300w, https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-9.37.25-AM.png?resize=400%2C220&amp;ssl=1 400w, https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-9.37.25-AM.png?resize=600%2C329&amp;ssl=1 600w, https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-9.37.25-AM.png?resize=768%2C421&amp;ssl=1 768w, https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-9.37.25-AM.png?resize=800%2C439&amp;ssl=1 800w, https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-9.37.25-AM.png?resize=1024%2C562&amp;ssl=1 1024w, https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-9.37.25-AM.png?fit=1106%2C607&amp;ssl=1 1106w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/p>\n<h2><\/h2>\n<h2>Hue, saturation and brightness (HSB)<\/h2>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" data-attachment-id=\"13813\" data-permalink=\"https:\/\/ritsandcompany.com\/index.php\/2017\/06\/19\/color-my-digital-world\/screen-shot-2017-06-18-at-4-02-47-pm\/\" data-orig-file=\"https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-4.02.47-PM.png?fit=735%2C324&ssl=1\" data-orig-size=\"735,324\" data-comments-opened=\"1\" data-image-meta=\"\" data-image-title=\"Screen Shot 2017-06-18 at 4.02.47 PM\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-4.02.47-PM.png?fit=735%2C324&ssl=1\" class=\"wp-image-13813 alignleft\" src=\"https:\/\/i0.wp.com\/imprint.li\/ritsandcompany\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-4.02.47-PM.png?resize=477%2C210&#038;ssl=1\" alt=\"\" width=\"477\" height=\"210\" srcset=\"https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-4.02.47-PM.png?resize=200%2C88&amp;ssl=1 200w, https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-4.02.47-PM.png?resize=300%2C132&amp;ssl=1 300w, https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-4.02.47-PM.png?resize=400%2C176&amp;ssl=1 400w, https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-4.02.47-PM.png?resize=600%2C264&amp;ssl=1 600w, https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-4.02.47-PM.png?fit=735%2C324&amp;ssl=1 735w\" sizes=\"(max-width: 477px) 100vw, 477px\" \/><\/p>\n<p>There are a couple of other ways you can mix light to make colors. If you've ever played around with the HSB settings on your Sketch color palette, you've seen how to make colors blacker, more pastel, and more vivid using combinations of hue, saturation and brightness.<\/p>\n<p><b>Hue. <\/b>Remember the lightwaves? Some area really long, some are really short, some in between. Those are all the hues\u2014also known as color.<\/p>\n<p><b>Saturation. <\/b>The best way to understand how saturation works is to play around with a flashlight on a piece of paper. If you were really into this, you'd get yourself a red, green and blue light flashlight. But just an ordinary white light beam will work. Shine the light on a piece of paper. Notice how the spotlight on the paper gets stronger and more focused as you move the flashlight toward the paper, and weaker and more diffused as you move it away from the paper? That's what saturation does.<\/p>\n<p>The more intense colors are a more focused beam of light\u2014like a flashlight close to the paper. The less intense, the more diffused the light\u2014light a flashlight shining from across the room.<\/p>\n<p><b>Brightness. <\/b>Now turn off all the lights so you're in a dark room with only a flashlight. As the batteries on your flashlight fade, so does the beam of light, getting slowly darker and darker. That is the effect of the brightness levels\u2014how much light is mixed with absence of light (darkness).<\/p>\n<div id=\"attachment_13815\" style=\"width: 981px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-13815\" data-attachment-id=\"13815\" data-permalink=\"https:\/\/ritsandcompany.com\/index.php\/2017\/06\/19\/color-my-digital-world\/screen-shot-2017-06-18-at-9-47-08-am\/\" data-orig-file=\"https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-9.47.08-AM.png?fit=971%2C453&ssl=1\" data-orig-size=\"971,453\" data-comments-opened=\"1\" data-image-meta=\"\" data-image-title=\"Screen Shot 2017-06-18 at 9.47.08 AM\" data-image-description=\"\" data-image-caption=\"\n\n<p><p id=\"caption-attachment-13815\" class=\"wp-caption-text\">The Sketch color selector with varying HSB values for red, green and blue.<\/p>\n<p>\" data-large-file=\"https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-9.47.08-AM.png?fit=971%2C453&ssl=1\" class=\"size-full wp-image-13815\" src=\"https:\/\/imprint.li\/ritsandcompany\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-9.47.08-AM.png\" alt=\"\" width=\"971\" height=\"453\" \/> The Sketch color selector with varying HSB values for red, green and blue.<\/p><\/div>\n<p>You can see it in action in the screenshot above. Notice what happens to our primary colors when the saturation is reduced, or when the brightness is reduced. Red becomes a pastel pink with full brightness but 50% saturation; and a brick red with full saturation but 50% of brightness.<\/p>\n<h1><\/h1>\n<h1>Translate that into HTML<\/h1>\n<p>When it comes to using colors in online applications, things begin to get complicated. Since I'm a designer, I am going to avoid math wherever possible to explain how your browser know what color to display to the user when it reads the CSS and HTML.<\/p>\n<p>To denote colors in a website, we have to turn a perceptual lightwave HSB into a value that can be displayed online consistently for every viewer, on every kind of hardware. This is hard to do! It used to be even harder.<\/p>\n<div id=\"attachment_13816\" style=\"width: 791px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-13816\" data-attachment-id=\"13816\" data-permalink=\"https:\/\/ritsandcompany.com\/index.php\/2017\/06\/19\/color-my-digital-world\/screen-shot-2017-06-18-at-10-32-30-am\/\" data-orig-file=\"https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-10.32.30-AM.png?fit=972%2C422&ssl=1\" data-orig-size=\"972,422\" data-comments-opened=\"1\" data-image-meta=\"\" data-image-title=\"Screen Shot 2017-06-18 at 10.32.30 AM\" data-image-description=\"\" data-image-caption=\"\n\n<p><p id=\"caption-attachment-13816\" class=\"wp-caption-text\">Old monitors could only display 256 colors. Designers were forced to limit their color palettes to these colors.<\/p>\n<p>\" data-large-file=\"https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-10.32.30-AM.png?fit=972%2C422&ssl=1\" class=\"wp-image-13816\" src=\"https:\/\/imprint.li\/ritsandcompany\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-10.32.30-AM.png\" alt=\"\" width=\"781\" height=\"339\" \/> Back in the early days of color monitors, designers could only chose from those web-safe colors when selecting a palette, because monitors only displayed 216 colors.<\/p><\/div>\n<p>A pixel on a screen is made by combining saturation and brightness of various hues, usually with 8 bits (256 values) for each. In HTML, these values are given a number on a scale of 0-255, where 255 represents full intensity for that hue and 0 represents no intensity (so, no color).<\/p>\n<p>You can see this in action on your color pickers in any design application, and in the graph below, where red is given the decimal number of 255 (and green 0 and blue 0). In the corresponding color picker, you can see how that decimal is translated into the hexadecimal value that goes into the CSS and HTML. (Designers like to sound smart by referring to this as the \"hex number.\")<\/p>\n<div id=\"attachment_13817\" style=\"width: 788px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-13817\" data-attachment-id=\"13817\" data-permalink=\"https:\/\/ritsandcompany.com\/index.php\/2017\/06\/19\/color-my-digital-world\/screen-shot-2017-06-18-at-10-53-31-am\/\" data-orig-file=\"https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-10.53.31-AM.png?fit=737%2C404&ssl=1\" data-orig-size=\"737,404\" data-comments-opened=\"1\" data-image-meta=\"\" data-image-title=\"Screen Shot 2017-06-18 at 10.53.31 AM\" data-image-description=\"\" data-image-caption=\"\n\n<p><p id=\"caption-attachment-13817\" class=\"wp-caption-text\">Above is the table with decimal values for each primary and secondary color. Next to it is the Sketch color picker showing the same values for the color red: 255. The picker also handily translates that into the hexadecimal value of FF0000, which goes into the CSS or HTML.<\/p>\n<p>\" data-large-file=\"https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-10.53.31-AM.png?fit=737%2C404&ssl=1\" class=\" wp-image-13817\" src=\"https:\/\/imprint.li\/ritsandcompany\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-10.53.31-AM.png\" alt=\"\" width=\"778\" height=\"427\" \/> Above is the table with decimal values for each primary and secondary color. Next to it is the Sketch color picker showing the same values for the color red: 255. The picker also handily translates that into the hexadecimal value of FF0000, which goes into the CSS or HTML.<\/p><\/div>\n<p>Designers were once restricted to \"web-safe\" colors to ensure that the colors they selected were the colors every user saw on all those crappy monitors. Today, displays can show millions of colors\u2014which is still less than the billions of colors the human eye sees in the real world. We've still got a long way to go.<\/p>\n<div id=\"attachment_13818\" style=\"width: 797px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-13818\" data-attachment-id=\"13818\" data-permalink=\"https:\/\/ritsandcompany.com\/index.php\/2017\/06\/19\/color-my-digital-world\/screen-shot-2017-06-18-at-10-23-05-am\/\" data-orig-file=\"https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-10.23.05-AM.png?fit=734%2C290&ssl=1\" data-orig-size=\"734,290\" data-comments-opened=\"1\" data-image-meta=\"\" data-image-title=\"Screen Shot 2017-06-18 at 10.23.05 AM\" data-image-description=\"\" data-image-caption=\"\n\n<p><p id=\"caption-attachment-13818\" class=\"wp-caption-text\">Today, most shades a designer wants to use can be converted into a hexadecimal number and included in the CSS of a webpage.<\/p>\n<p>\" data-large-file=\"https:\/\/i0.wp.com\/ritsandcompany.com\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-10.23.05-AM.png?fit=734%2C290&ssl=1\" class=\" wp-image-13818\" src=\"https:\/\/imprint.li\/ritsandcompany\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-10.23.05-AM.png\" alt=\"\" width=\"787\" height=\"311\" \/> Today, most shades a designer wants to use can be converted into a hexadecimal number and included in the CSS of a webpage.<\/p><\/div>\n<h1><\/h1>\n<\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-13849","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>The Science of Color - Rits and Company<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ritsandcompany.com\/index.php\/2024\/08\/03\/the-science-of-color\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Science of Color - Rits and Company\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ritsandcompany.com\/index.php\/2024\/08\/03\/the-science-of-color\/\" \/>\n<meta property=\"og:site_name\" content=\"Rits and Company\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-03T18:38:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/imprint.li\/ritsandcompany\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-11.02.34-AM.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ritsandcompany.com\\\/index.php\\\/2024\\\/08\\\/03\\\/the-science-of-color\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ritsandcompany.com\\\/index.php\\\/2024\\\/08\\\/03\\\/the-science-of-color\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/ritsandcompany.com\\\/#\\\/schema\\\/person\\\/4a125dadb4ce6e841558ebd0e8c6c40a\"},\"headline\":\"The Science of Color\",\"datePublished\":\"2024-08-03T18:38:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ritsandcompany.com\\\/index.php\\\/2024\\\/08\\\/03\\\/the-science-of-color\\\/\"},\"wordCount\":1472,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/ritsandcompany.com\\\/index.php\\\/2024\\\/08\\\/03\\\/the-science-of-color\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/imprint.li\\\/ritsandcompany\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2017\\\/06\\\/Screen-Shot-2017-06-18-at-11.02.34-AM.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ritsandcompany.com\\\/index.php\\\/2024\\\/08\\\/03\\\/the-science-of-color\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ritsandcompany.com\\\/index.php\\\/2024\\\/08\\\/03\\\/the-science-of-color\\\/\",\"url\":\"https:\\\/\\\/ritsandcompany.com\\\/index.php\\\/2024\\\/08\\\/03\\\/the-science-of-color\\\/\",\"name\":\"The Science of Color - Rits and Company\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ritsandcompany.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ritsandcompany.com\\\/index.php\\\/2024\\\/08\\\/03\\\/the-science-of-color\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ritsandcompany.com\\\/index.php\\\/2024\\\/08\\\/03\\\/the-science-of-color\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/imprint.li\\\/ritsandcompany\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2017\\\/06\\\/Screen-Shot-2017-06-18-at-11.02.34-AM.png\",\"datePublished\":\"2024-08-03T18:38:29+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/ritsandcompany.com\\\/#\\\/schema\\\/person\\\/4a125dadb4ce6e841558ebd0e8c6c40a\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ritsandcompany.com\\\/index.php\\\/2024\\\/08\\\/03\\\/the-science-of-color\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ritsandcompany.com\\\/index.php\\\/2024\\\/08\\\/03\\\/the-science-of-color\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ritsandcompany.com\\\/index.php\\\/2024\\\/08\\\/03\\\/the-science-of-color\\\/#primaryimage\",\"url\":\"https:\\\/\\\/imprint.li\\\/ritsandcompany\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2017\\\/06\\\/Screen-Shot-2017-06-18-at-11.02.34-AM.png\",\"contentUrl\":\"https:\\\/\\\/imprint.li\\\/ritsandcompany\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2017\\\/06\\\/Screen-Shot-2017-06-18-at-11.02.34-AM.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ritsandcompany.com\\\/index.php\\\/2024\\\/08\\\/03\\\/the-science-of-color\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ritsandcompany.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Science of Color\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ritsandcompany.com\\\/#website\",\"url\":\"https:\\\/\\\/ritsandcompany.com\\\/\",\"name\":\"Rits and Company\",\"description\":\"Experience Design &amp; Research Consulting\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ritsandcompany.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ritsandcompany.com\\\/#\\\/schema\\\/person\\\/4a125dadb4ce6e841558ebd0e8c6c40a\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6bf37e67f4a9e4f81b7f8d8d82f6e827635839452bc0505021a3392b3f417a79?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6bf37e67f4a9e4f81b7f8d8d82f6e827635839452bc0505021a3392b3f417a79?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6bf37e67f4a9e4f81b7f8d8d82f6e827635839452bc0505021a3392b3f417a79?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/ritsandcompany.com\\\/index.php\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Science of Color - Rits and Company","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ritsandcompany.com\/index.php\/2024\/08\/03\/the-science-of-color\/","og_locale":"en_US","og_type":"article","og_title":"The Science of Color - Rits and Company","og_url":"https:\/\/ritsandcompany.com\/index.php\/2024\/08\/03\/the-science-of-color\/","og_site_name":"Rits and Company","article_published_time":"2024-08-03T18:38:29+00:00","og_image":[{"url":"https:\/\/imprint.li\/ritsandcompany\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-11.02.34-AM.png","type":"","width":"","height":""}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ritsandcompany.com\/index.php\/2024\/08\/03\/the-science-of-color\/#article","isPartOf":{"@id":"https:\/\/ritsandcompany.com\/index.php\/2024\/08\/03\/the-science-of-color\/"},"author":{"name":"admin","@id":"https:\/\/ritsandcompany.com\/#\/schema\/person\/4a125dadb4ce6e841558ebd0e8c6c40a"},"headline":"The Science of Color","datePublished":"2024-08-03T18:38:29+00:00","mainEntityOfPage":{"@id":"https:\/\/ritsandcompany.com\/index.php\/2024\/08\/03\/the-science-of-color\/"},"wordCount":1472,"commentCount":0,"image":{"@id":"https:\/\/ritsandcompany.com\/index.php\/2024\/08\/03\/the-science-of-color\/#primaryimage"},"thumbnailUrl":"https:\/\/imprint.li\/ritsandcompany\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-11.02.34-AM.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ritsandcompany.com\/index.php\/2024\/08\/03\/the-science-of-color\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ritsandcompany.com\/index.php\/2024\/08\/03\/the-science-of-color\/","url":"https:\/\/ritsandcompany.com\/index.php\/2024\/08\/03\/the-science-of-color\/","name":"The Science of Color - Rits and Company","isPartOf":{"@id":"https:\/\/ritsandcompany.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ritsandcompany.com\/index.php\/2024\/08\/03\/the-science-of-color\/#primaryimage"},"image":{"@id":"https:\/\/ritsandcompany.com\/index.php\/2024\/08\/03\/the-science-of-color\/#primaryimage"},"thumbnailUrl":"https:\/\/imprint.li\/ritsandcompany\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-11.02.34-AM.png","datePublished":"2024-08-03T18:38:29+00:00","author":{"@id":"https:\/\/ritsandcompany.com\/#\/schema\/person\/4a125dadb4ce6e841558ebd0e8c6c40a"},"breadcrumb":{"@id":"https:\/\/ritsandcompany.com\/index.php\/2024\/08\/03\/the-science-of-color\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ritsandcompany.com\/index.php\/2024\/08\/03\/the-science-of-color\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ritsandcompany.com\/index.php\/2024\/08\/03\/the-science-of-color\/#primaryimage","url":"https:\/\/imprint.li\/ritsandcompany\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-11.02.34-AM.png","contentUrl":"https:\/\/imprint.li\/ritsandcompany\/wp-content\/uploads\/sites\/3\/2017\/06\/Screen-Shot-2017-06-18-at-11.02.34-AM.png"},{"@type":"BreadcrumbList","@id":"https:\/\/ritsandcompany.com\/index.php\/2024\/08\/03\/the-science-of-color\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ritsandcompany.com\/"},{"@type":"ListItem","position":2,"name":"The Science of Color"}]},{"@type":"WebSite","@id":"https:\/\/ritsandcompany.com\/#website","url":"https:\/\/ritsandcompany.com\/","name":"Rits and Company","description":"Experience Design &amp; Research Consulting","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ritsandcompany.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/ritsandcompany.com\/#\/schema\/person\/4a125dadb4ce6e841558ebd0e8c6c40a","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/6bf37e67f4a9e4f81b7f8d8d82f6e827635839452bc0505021a3392b3f417a79?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/6bf37e67f4a9e4f81b7f8d8d82f6e827635839452bc0505021a3392b3f417a79?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6bf37e67f4a9e4f81b7f8d8d82f6e827635839452bc0505021a3392b3f417a79?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/ritsandcompany.com\/index.php\/author\/admin\/"}]}},"jetpack_shortlink":"https:\/\/wp.me\/p8wO1W-3Bn","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ritsandcompany.com\/index.php\/wp-json\/wp\/v2\/posts\/13849","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ritsandcompany.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ritsandcompany.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ritsandcompany.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ritsandcompany.com\/index.php\/wp-json\/wp\/v2\/comments?post=13849"}],"version-history":[{"count":3,"href":"https:\/\/ritsandcompany.com\/index.php\/wp-json\/wp\/v2\/posts\/13849\/revisions"}],"predecessor-version":[{"id":16566,"href":"https:\/\/ritsandcompany.com\/index.php\/wp-json\/wp\/v2\/posts\/13849\/revisions\/16566"}],"wp:attachment":[{"href":"https:\/\/ritsandcompany.com\/index.php\/wp-json\/wp\/v2\/media?parent=13849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ritsandcompany.com\/index.php\/wp-json\/wp\/v2\/categories?post=13849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ritsandcompany.com\/index.php\/wp-json\/wp\/v2\/tags?post=13849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}