{"id":9374,"date":"2020-03-09T23:23:42","date_gmt":"2020-03-09T15:23:42","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=9374"},"modified":"2020-03-09T21:08:58","modified_gmt":"2020-03-09T13:08:58","slug":"basics-behind-color-theory-for-web-designer","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/basics-behind-color-theory-for-web-designer\/","title":{"rendered":"Basics Behind Color Theory for Web Designer"},"content":{"rendered":"<p>As a collective digital artist, it is important to understand the fundamental science behind color theory. It\u2019s a popular topic with a vast spread of information to retain and digest. Not only does this topic focus on arts and design, but it also involves gist of optics science.<\/p>\n<p>There is plenty to cover on this topic so we\u2019ll be glossing over some of the key points to extract what should be emphasized. Each of these topics consists of examples on which pertain to color schemes and combinations. Expanding further knowledge on such a rich topic will flourish your creativity for future projects.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/best-color-tools-for-web-designers\/\" class=\"ref-block__link\" title=\"Read More: Best Color Tools for Web Designers\" rel=\"bookmark\"><span class=\"screen-reader-text\">Best Color Tools for Web Designers<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/best-color-tools-for-web-designers.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-960 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/best-color-tools-for-web-designers.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Best Color Tools for Web Designers<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tSetting a basic color theme for your web design project might be easy, but deciding the right color...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Beginnings of Color Theory<\/h2>\n<p>When starting off into the pool of colors, we should base ourselves in square one. After breaking through all the mixes we are left with only 3 <strong>primary colors<\/strong>. These are red, blue, and yellow, and they are the root ingredients from which all other colors manifest.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/basics-behind-color-theory-for-web-designer\/color-theory-basics.jpg\" alt=\"color-theory-basics\" width=\"800\" height=\"720\"><\/figure>\n<p>These primary colors may be combined together in a mixing process to create other color schemes. These are known as <strong>secondary colors<\/strong> and will always contain a mix of 2 primaries. These three secondary colors are orange, violet, and green.<\/p>\n<p>This color scheme is based on the sample default style. When you start designing for web and print it may be required to switch between different color models. These include RGB and CMYK which are notoriously utilized in digital and print design, respectively.<\/p>\n<h2>Tertiary Color Pallet<\/h2>\n<p>Once we have our color wheel started we can use these resources to create tertiary colors. This group holds a 2nd layer beneath primary\/secondary which is created when mixing between all six original colors. With this, we are now able to create six brand new colors (2 from each primary). This will give out a blend of 12 colors in total. At this stage, we are able to design a full pallet and fill in a 12-sided color wheel. This is often used within Adobe Illustrator to create color swatches and patterns.<\/p>\n<p>Next we\u2019ll be going over some of the most popular color schemes. These are useful for all digital artists looking to create illustrations, icons, vectors, or Photoshop graphics. Understanding how to combine colors to strike a chord will take practice, but through determination, you will be able to create almost anything!<\/p>\n<h2>Monochromatic Colors<\/h2>\n<p>When delving into <strong>color schemes<\/strong> we can find an endless supply of creativity. This realm holds the possibility to create hundreds of different color pallets all with varying intensities.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/basics-behind-color-theory-for-web-designer\/monochromatic-colors.jpg\" alt=\"monochromatic-colors\" width=\"800\" height=\"533\"><\/figure>\n<p>Monochromatic color schemes are the raw colors as they only refer to a single hue. This can be green, blue, orange, aqua, or whatever fits best into your design. These are commonly seen with branding and background patterns to fit into an  existing pallet.<\/p>\n<p>In this reference colors are usually created by dimming opacity between each color (or hue) and a background. The most common example is creating an alpha channel and adding more white\/black into a selected hue at varying degrees. Through this method, you are able to design a useful monochromatic color scheme to blend into simple digital graphics.<\/p>\n<h2>Analogous Scheme<\/h2>\n<p>These colors are put into a generation based on their location on the standard color wheel. Analogous sets are created by points located directly adjacent to each other. Common examples include green\/yellow-green\/yellow or red\/orange\/yellow.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/basics-behind-color-theory-for-web-designer\/analogous-scheme.jpg\" alt=\"analogous-scheme\" width=\"800\" height=\"534\"><\/figure>\n<p>These are 3-part schemes also known as a <strong>base triad<\/strong>. You may combine two analogous schemes together to create a hybrid set. Often analogous sets are found naturally and promote a pleasing sight to the eyes.<\/p>\n<p>Between the 3 colors it\u2019s generally common to assign roles in a design piece. One of the three is used as a base to hold the project together. The second is an accompanied color and the third is referenced as an accent. This effect can be used to create contrast and vibrant edges or shadows.<\/p>\n<h2>Complementary Themes<\/h2>\n<p>Colors residing in opposing positions on the color wheel are known as <strong>complementary<\/strong>. They naturally complement each other and provide an equal level of energy to a piece of art. Examples of these include red and green, purple and yellow, or blue and orange.<\/p>\n<p>These color schemes will create a high level of contrast between elements.  are great when used in illustrations to highlight a piece of scenery or cartoon character. Often we\u2019ll see this used on an article of clothing or wardrobe attire. The matches can become very overpowering so, do use them sparingly.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/basics-behind-color-theory-for-web-designer\/complementary-color-themes.jpg\" alt=\"complementary-color-themes\" width=\"800\" height=\"800\"><\/figure>\n<p>Text will often perform well over high-contrast black\/white but is best rendered with slightly less saturation. In this way text off the page won\u2019t hurt the readers\u2019 eyes but is still easy enough to follow.<\/p>\n<p>There is also a second lesser-known scheme titled <strong>split complementary<\/strong>. This contains a base color which also brings in two colors opposite the spectrum. It\u2019s derived by the two adjacent neighbors to the base complementary.<\/p>\n<p>As an example for a split complementary with red as our base we would need both adjacent colors besides green (but not including green). This would target green-yellow and blue-green. This pair provides the benefits of a high-contrast ratio without the jagged tension from a strictly complementary relationship. Often, these can be difficult color schemes to balance out.<\/p>\n<p>The base color of choice is usually located in the warmer region so you have 2 cooler color options for highlights, backgrounds, and smaller graphics.<\/p>\n<h2>Triad Color Sets<\/h2>\n<p>The triadic color scheme is one of the most popular amongst designers, and this is especially the case for digital artists. This scheme uses 3 colors which are equal distance from each other on the color wheel.<\/p>\n<p>As common examples, we could include red, blue, and yellow or orange, purple, and green. We derive this by picking our base color (red) and moving 3 equal paces over to the right. Once we hit this (blue) move 3 more units clockwise to hit yellow, with just three more placements separating between red.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/basics-behind-color-theory-for-web-designer\/triadic-color-scheme.jpg\" alt=\"triadic-color-scheme\" width=\"800\" height=\"800\"><\/figure>\n<p>Triads create a sense of equality and security. In most cases you\u2019re pulling an even distribution of colors out to balance graphics & icons nicely. These can be used to create beautiful artistic illustrations of towns, oceans, forests, and many other scenes as well.<\/p>\n<h2>Conclusion<\/h2>\n<p>This basic overview covers the general aspects of getting started in color theory. Understanding the vast number of options available to you as a web designer is important for creating top-quality artwork.<\/p>\n<p>There are also countless resources to be found throughout the Internet. Try checking through Google or other common design blogs for follow-up articles on in-depth color theory. You may also be interested in <a href=\"https:\/\/www.hongkiat.com\/blog\/best-color-tools-for-web-designers\/\">popular color tools for designers<\/a> which can really shave time off project work.<\/p>","protected":false},"excerpt":{"rendered":"<p>As a collective digital artist, it is important to understand the fundamental science behind color theory. It\u2019s a popular topic with a vast spread of information to retain and digest. Not only does this topic focus on arts and design, but it also involves gist of optics science. There is plenty to cover on this&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[4497],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Basics Behind Color Theory for Web Designer - Hongkiat<\/title>\n<meta name=\"description\" content=\"As a collective digital artist, it is important to understand the fundamental science behind color theory. It&#039;s a popular topic with a vast spread of\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/basics-behind-color-theory-for-web-designer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Basics Behind Color Theory for Web Designer\" \/>\n<meta property=\"og:description\" content=\"As a collective digital artist, it is important to understand the fundamental science behind color theory. It&#039;s a popular topic with a vast spread of\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/basics-behind-color-theory-for-web-designer\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-09T15:23:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/basics-behind-color-theory-for-web-designer\/color-theory-basics.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-behind-color-theory-for-web-designer\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-behind-color-theory-for-web-designer\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Basics Behind Color Theory for Web Designer\",\"datePublished\":\"2020-03-09T15:23:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-behind-color-theory-for-web-designer\\\/\"},\"wordCount\":1118,\"commentCount\":50,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-behind-color-theory-for-web-designer\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/basics-behind-color-theory-for-web-designer\\\/color-theory-basics.jpg\",\"keywords\":[\"Colors Theory\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-behind-color-theory-for-web-designer\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-behind-color-theory-for-web-designer\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-behind-color-theory-for-web-designer\\\/\",\"name\":\"Basics Behind Color Theory for Web Designer - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-behind-color-theory-for-web-designer\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-behind-color-theory-for-web-designer\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/basics-behind-color-theory-for-web-designer\\\/color-theory-basics.jpg\",\"datePublished\":\"2020-03-09T15:23:42+00:00\",\"description\":\"As a collective digital artist, it is important to understand the fundamental science behind color theory. It's a popular topic with a vast spread of\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-behind-color-theory-for-web-designer\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-behind-color-theory-for-web-designer\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-behind-color-theory-for-web-designer\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/basics-behind-color-theory-for-web-designer\\\/color-theory-basics.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/basics-behind-color-theory-for-web-designer\\\/color-theory-basics.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-behind-color-theory-for-web-designer\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Basics Behind Color Theory for Web Designer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Basics Behind Color Theory for Web Designer - Hongkiat","description":"As a collective digital artist, it is important to understand the fundamental science behind color theory. It's a popular topic with a vast spread of","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:\/\/www.hongkiat.com\/blog\/basics-behind-color-theory-for-web-designer\/","og_locale":"en_US","og_type":"article","og_title":"Basics Behind Color Theory for Web Designer","og_description":"As a collective digital artist, it is important to understand the fundamental science behind color theory. It's a popular topic with a vast spread of","og_url":"https:\/\/www.hongkiat.com\/blog\/basics-behind-color-theory-for-web-designer\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-03-09T15:23:42+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/basics-behind-color-theory-for-web-designer\/color-theory-basics.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/basics-behind-color-theory-for-web-designer\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/basics-behind-color-theory-for-web-designer\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Basics Behind Color Theory for Web Designer","datePublished":"2020-03-09T15:23:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/basics-behind-color-theory-for-web-designer\/"},"wordCount":1118,"commentCount":50,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/basics-behind-color-theory-for-web-designer\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/basics-behind-color-theory-for-web-designer\/color-theory-basics.jpg","keywords":["Colors Theory"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/basics-behind-color-theory-for-web-designer\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/basics-behind-color-theory-for-web-designer\/","url":"https:\/\/www.hongkiat.com\/blog\/basics-behind-color-theory-for-web-designer\/","name":"Basics Behind Color Theory for Web Designer - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/basics-behind-color-theory-for-web-designer\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/basics-behind-color-theory-for-web-designer\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/basics-behind-color-theory-for-web-designer\/color-theory-basics.jpg","datePublished":"2020-03-09T15:23:42+00:00","description":"As a collective digital artist, it is important to understand the fundamental science behind color theory. It's a popular topic with a vast spread of","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/basics-behind-color-theory-for-web-designer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/basics-behind-color-theory-for-web-designer\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/basics-behind-color-theory-for-web-designer\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/basics-behind-color-theory-for-web-designer\/color-theory-basics.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/basics-behind-color-theory-for-web-designer\/color-theory-basics.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/basics-behind-color-theory-for-web-designer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Basics Behind Color Theory for Web Designer"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-2rc","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/9374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=9374"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/9374\/revisions"}],"predecessor-version":[{"id":49537,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/9374\/revisions\/49537"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=9374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=9374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=9374"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=9374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}