{"id":1045,"date":"2022-08-24T20:25:33","date_gmt":"2022-08-24T20:25:33","guid":{"rendered":"http:\/\/www.simon-li.com\/design-and-code\/?p=1045"},"modified":"2022-08-27T20:45:40","modified_gmt":"2022-08-27T20:45:40","slug":"colors-are-relative","status":"publish","type":"post","link":"http:\/\/www.simon-li.com\/design-and-code\/colors-are-relative\/","title":{"rendered":"Colors Are&nbsp;Relative"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Colors Are Relative\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/KpDm8SA5mag?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>One of the most amazing things about colors is that they are relative. I learned this from one of my professors in university. It\u2019s an optical illusion, and it can be used to our advantage to create the perception of the color we want without actually using that color.<\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*QKJ634DRV5uvP5D_-ylkkA.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Let\u2019s first take a look at the pattern above. <strong>Squint your eyes.<\/strong> How do you feel about the colors of the two small squares inside the two big squares? To the casual eye, the one on the left looks bright and golden, whereas the one on the right looks a bit dull with a slight tinge of green. They seem to be two different colors.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*Vj2LX-FJ4eNzORi0KsQtKQ.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>And yet if we bring the two squares closer until they merge, we\u2019ll be surprised to find that they are actually the same color. How can this be possible?<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*QkQ5ogYAxkVfKAVnJoQBGw.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Well, that\u2019s because colors are relative. In this case, when the small square is placed against the big blue square, it looks brighter because the blue background is a bit dark. Also because blue is a cold hue, it makes the small square look warmer, more vibrant and more saturated.<\/p>\n\n\n\n<p>On the other hand, when we place the small square against a very vibrant yellow background, it looks a bit muted with a tinge of green and gray. This is all because of relativity. If we experiment a bit, we can also find a color that makes both small squares look roughly the same to the eyes.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*9hgQwhlsqXFkhvNjjNm-Kg.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>We can find many more such examples. In the left example below, the small square on the left looks brighter and more vibrant than the one on the right while they are actually the same color. In right example below, the small square on the left looks brighter than the one on the right.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*DlTs5lUXDAUb4QnKGWfTjg.png\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*F5fPDyuj71YCYYgYj_pgoQ.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>So now we know colors are relative. We can leverage this to create amazing palettes, which I\u2019ll talk about in detail in my Skillshare course <strong><a href=\"https:\/\/skl.sh\/3KeuslV\">Demystifying Vintage Color Palettes<\/a><\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*2ug-tYq66HPoyOxXXGOi5w.jpeg\" alt=\"\"\/><figcaption><em><a href=\"https:\/\/skl.sh\/3KeuslV\">Demystifying Vintage Color\u00a0Palettes<\/a><\/em><\/figcaption><\/figure>\n\n\n\n<p>In that course, we\u2019ll review the basics such as the color wheel and color harmonies. I\u2019ll then talk about some traits that vintage color palettes share and the general principles to follow in order to create them. I\u2019ll also talk about using the relativity of colors to create the feeling of the color you want in a more nuanced way.<\/p>\n\n\n\n<p>If you\u2019re a designer or illustrator who want to take your color skill to the next level, be sure to check out the course. <strong>Sign up using <a rel=\"noreferrer noopener\" href=\"https:\/\/www.skillshare.com\/r\/profile\/Simon-Li\/1700298?gr_tch_ref=on&amp;gr_trp=on\" target=\"_blank\">this link<\/a> and you\u2019ll get 1 free month of Skillshare.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the most amazing things about colors is that they are relative. I learned this from one of my professors in university. It\u2019s an optical illusion, and it can be used to our advantage to create the perception of the color we want without actually using that color.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[94,87],"tags":[126,129,130],"class_list":["post-1045","post","type-post","status-publish","format-standard","hentry","category-videos","category-visual-design","tag-color","tag-course","tag-skillshare"],"_links":{"self":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/1045","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/comments?post=1045"}],"version-history":[{"count":10,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/1045\/revisions"}],"predecessor-version":[{"id":1059,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/1045\/revisions\/1059"}],"wp:attachment":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/media?parent=1045"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/categories?post=1045"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/tags?post=1045"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}