{"id":16418,"date":"2013-02-11T21:01:51","date_gmt":"2013-02-11T13:01:51","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=16418"},"modified":"2023-09-13T16:34:35","modified_gmt":"2023-09-13T08:34:35","slug":"less-color-functions","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/less-color-functions\/","title":{"rendered":"Mastering LESS Color Functions for Web Design"},"content":{"rendered":"<p>LESS is a powerful tool for web designers. We\u2019ve previously discussed <strong><a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/less\/\">various aspects of LESS<\/a><\/strong>, from <a href=\"https:\/\/www.hongkiat.com\/blog\/less-css-tutorial-design-slick-menu-nav-bar\/\">designing sleek navigation bars<\/a> to <a href=\"https:\/\/www.hongkiat.com\/blog\/less-tips-tools\/\">efficiently working with LESS<\/a>. However, there\u2019s more to explore. In this article, we\u2019ll delve into the world of LESS Color Functions.<\/p>\n<p>Color plays a pivotal role in web design. Take a look at our <a href=\"https:\/\/www.hongkiat.com\/blog\/three-color-websites\/\">collection of stunning three-color websites<\/a> for inspiration. LESS not only allows you to define colors through variables for consistent application but also offers <strong>Color Functions<\/strong> to customize colors without needing a <a href=\"https:\/\/www.hongkiat.com\/blog\/eyedroppers-color-pickers-for-designers\/\">color picker<\/a>.<\/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\/less-basic\/\" class=\"ref-block__link\" title=\"Read More: LESS CSS \u2013 Beginner\u2019s Guide\" rel=\"bookmark\"><span class=\"screen-reader-text\">LESS CSS \u2013 Beginner\u2019s Guide<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/less-basic.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-15230 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/less-basic.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">LESS CSS \u2013 Beginner\u2019s Guide<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tCSS Pre-processors have now become a staple in web development. They enhance plain CSS with programming features such...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Exploring Functions<\/h2>\n<p><strong><a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/less\/\">LESS<\/a><\/strong> offers a variety of functions with self-explanatory names for color manipulation. These include <code>lighten()<\/code>, <code>darken()<\/code>, <code>saturate()<\/code>, <code>desaturate()<\/code>, <code>fadein()<\/code>, <code>fadeout()<\/code>, <code>fade()<\/code>, <code>spin()<\/code>, and <code>mix()<\/code>.<\/p>\n<p>For demonstration purposes, let\u2019s use the color <strong>green<\/strong> (<code>#7bab2e<\/code>) as our variable.<\/p>\n<pre>\r\n @color: #7bab2e;\r\n<\/pre>\n<h2>Darkening and Lightening<\/h2>\n<p>Modifying colors using LESS Color Functions is quite straightforward. In the following example, we\u2019ll darken the <code>@color<\/code> by 20%:<\/p>\n<pre>\r\n .box.darken {\r\n   background-color: @color;\r\n   border: 3px solid darken(@color, 20%);\r\n }\r\n<\/pre>\n<p>The resulting output shows that the border is darker than the green box\u2019s interior color.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/less-color-functions\/darken.jpg\" width=\"500\" height=\"300\" alt=\"Darkened green box\"><\/figure>\n<p>Similarly, you can lighten the <code>@color<\/code> as follows:<\/p>\n<pre>\r\n .box.lighten {\r\n   border: 3px solid lighten(@color, 20%);\r\n }\r\n<\/pre>\n<p>The border now appears lighter than the background.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/less-color-functions\/lighten.jpg\" width=\"500\" height=\"300\" alt=\"Lightened green box\"><\/figure>\n<p>You can also store these functions in variables for later use in your stylesheet:<\/p>\n<pre>\r\n @colorDark: darken(@color, 20%);\r\n \r\n .box.darken {\r\n   background-color: @color;\r\n   border: 3px solid @colorDark;\r\n }\r\n<\/pre>\n<h2>Manipulating Hue with Spin<\/h2>\n<p>The <code>spin()<\/code> function in LESS allows you to adjust a color\u2019s hue. If you\u2019re familiar with the <strong>Hue\/Saturation<\/strong> feature in Photoshop, you\u2019ll find this function works in a similar manner.<\/p>\n<p>Let\u2019s examine the following code snippet:<\/p>\n<pre>\r\n .box.hue {\r\n   background-color: spin(@color, 123);\r\n }\r\n<\/pre>\n<p>The maximum value for hue manipulation is <code>180<\/code>, but negative values like <code>-123<\/code> are also acceptable.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/less-color-functions\/hue.jpg\" width=\"500\" height=\"300\" alt=\"Hue manipulation with LESS\"><\/figure>\n<p>In LESS, you can also combine multiple functions. Here\u2019s an example:<\/p>\n<pre>\r\n .box.desaturate {\r\n   background-color: desaturate(spin(@color, 123), 50%);\r\n }\r\n<\/pre>\n<p>In this example, we first adjust the hue of <code>@color<\/code> by <code>123<\/code> and then reduce its saturation by <code>50%<\/code>. Here are the results:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/less-color-functions\/desaturate.jpg\" width=\"500\" height=\"300\" alt=\"Desaturating and spinning color with LESS\"><\/figure>\n<h2>Blending Colors with Mix<\/h2>\n<p>The <code>mix()<\/code> function in LESS allows you to blend two colors to create a new one. For instance, green is a mix of <strong>blue<\/strong> and <strong>yellow<\/strong>. Let\u2019s try this in LESS:<\/p>\n<pre>\r\n .box.mix {\r\n   background-color: mix(@blue, @yellow, 50%);\r\n }\r\n<\/pre>\n<p>This function requires three parameters: the two colors to mix and their respective weights, which we\u2019ve set to <code>50%<\/code>. The weight parameter can yield unexpected results, so it\u2019s worth experimenting with.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/less-color-functions\/mix.jpg\" width=\"500\" height=\"300\" alt=\"Mixing colors with LESS\"><\/figure>\n<h2>Concluding Remarks<\/h2>\n<p>Color functions in LESS are incredibly versatile. With just a single base color, you can use these functions to create a comprehensive color scheme for your website. For further reading on color theory and application, check out the following resources:<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/webdesign.tutsplus.com\/articles\/an-introduction-to-color-theory-for-web-designers--webdesign-1437\">An Introduction to Color Theory for Web Designers<\/a> \u2013 Webdesigntuts+<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/trentwalton.com\/2010\/12\/21\/rgba-hsla-css-color\/\">RGBa & HSLa CSS Color<\/a> \u2013 Trent Walton<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3schools.com\/html\/html_colors.asp\">HTML Colors<\/a> \u2013 W3Schools<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>LESS is a powerful tool for web designers. We\u2019ve previously discussed various aspects of LESS, from designing sleek navigation bars to efficiently working with LESS. However, there\u2019s more to explore. In this article, we\u2019ll delve into the world of LESS Color Functions. Color plays a pivotal role in web design. Take a look at our&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[507,1980],"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.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Mastering LESS Color Functions for Web Design - Hongkiat<\/title>\n<meta name=\"description\" content=\"LESS is a powerful tool for web designers. We&#039;ve previously discussed various aspects of LESS, from designing sleek navigation bars to efficiently working\" \/>\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\/less-color-functions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mastering LESS Color Functions for Web Design\" \/>\n<meta property=\"og:description\" content=\"LESS is a powerful tool for web designers. We&#039;ve previously discussed various aspects of LESS, from designing sleek navigation bars to efficiently working\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/less-color-functions\/\" \/>\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=\"2013-02-11T13:01:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-13T08:34:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/less-color-functions\/darken.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-color-functions\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-color-functions\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Mastering LESS Color Functions for Web Design\",\"datePublished\":\"2013-02-11T13:01:51+00:00\",\"dateModified\":\"2023-09-13T08:34:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-color-functions\\\/\"},\"wordCount\":419,\"commentCount\":15,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-color-functions\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/less-color-functions\\\/darken.jpg\",\"keywords\":[\"CSS\",\"Less\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-color-functions\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-color-functions\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-color-functions\\\/\",\"name\":\"Mastering LESS Color Functions for Web Design - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-color-functions\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-color-functions\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/less-color-functions\\\/darken.jpg\",\"datePublished\":\"2013-02-11T13:01:51+00:00\",\"dateModified\":\"2023-09-13T08:34:35+00:00\",\"description\":\"LESS is a powerful tool for web designers. We've previously discussed various aspects of LESS, from designing sleek navigation bars to efficiently working\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-color-functions\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-color-functions\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-color-functions\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/less-color-functions\\\/darken.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/less-color-functions\\\/darken.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-color-functions\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mastering LESS Color Functions for Web Design\"}]},{\"@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\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Mastering LESS Color Functions for Web Design - Hongkiat","description":"LESS is a powerful tool for web designers. We've previously discussed various aspects of LESS, from designing sleek navigation bars to efficiently working","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\/less-color-functions\/","og_locale":"en_US","og_type":"article","og_title":"Mastering LESS Color Functions for Web Design","og_description":"LESS is a powerful tool for web designers. We've previously discussed various aspects of LESS, from designing sleek navigation bars to efficiently working","og_url":"https:\/\/www.hongkiat.com\/blog\/less-color-functions\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-02-11T13:01:51+00:00","article_modified_time":"2023-09-13T08:34:35+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/less-color-functions\/darken.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/less-color-functions\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/less-color-functions\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Mastering LESS Color Functions for Web Design","datePublished":"2013-02-11T13:01:51+00:00","dateModified":"2023-09-13T08:34:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/less-color-functions\/"},"wordCount":419,"commentCount":15,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/less-color-functions\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/less-color-functions\/darken.jpg","keywords":["CSS","Less"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/less-color-functions\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/less-color-functions\/","url":"https:\/\/www.hongkiat.com\/blog\/less-color-functions\/","name":"Mastering LESS Color Functions for Web Design - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/less-color-functions\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/less-color-functions\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/less-color-functions\/darken.jpg","datePublished":"2013-02-11T13:01:51+00:00","dateModified":"2023-09-13T08:34:35+00:00","description":"LESS is a powerful tool for web designers. We've previously discussed various aspects of LESS, from designing sleek navigation bars to efficiently working","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/less-color-functions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/less-color-functions\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/less-color-functions\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/less-color-functions\/darken.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/less-color-functions\/darken.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/less-color-functions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Mastering LESS Color Functions for Web Design"}]},{"@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\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4gO","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16418","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\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=16418"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16418\/revisions"}],"predecessor-version":[{"id":69217,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16418\/revisions\/69217"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=16418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=16418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=16418"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=16418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}