{"id":20284,"date":"2016-09-26T18:51:48","date_gmt":"2016-09-26T18:51:48","guid":{"rendered":"https:\/\/codewebbarcelona.com\/technics-and-skills-duotone\/"},"modified":"2026-04-20T22:27:27","modified_gmt":"2026-04-20T22:27:27","slug":"duotone-techniques-skills","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/","title":{"rendered":"Duotone"},"content":{"rendered":"

Today I want to share some insights about a technique that has become increasingly popular in web design<\/strong>: duotone.<\/p>\n

What is duotone?<\/h2>\n

Put simply, duotone refers to the creation or reproduction of images by removing midtones\u2014what used to be the middle gray in analog photography\u2014and highlights.<\/p>\n

Most commonly, duotone designs feature shades of blue, brown, red, and yellow.<\/p>\n

Of course, as designers, we can choose whichever colors best suit our web design<\/strong> projects, and that\u2019s exactly what\u2019s happening today.<\/p>\n

Here are a few websites<\/strong> where images and illustrations are clearly influenced by this creative technique.<\/p>\n

1. Adidas Football<\/h2>\n

\"diseno-web-barcelona-estudio-duotone-01\"<\/a><\/p>\n

The main aesthetic of the Adidas website<\/strong> campaign is built around fullscreen duotone imagery.<\/p>\n

The visuals are paired with matching backgrounds, creating a striking atmosphere that delivers the impact the sports brand was aiming for.<\/p>\n

2. Mirage Festival<\/h2>\n

\"diseno-web-barcelona-estudio-duotone-02\"<\/a><\/p>\n

The Mirage Festival website features a bold and daring design<\/strong> that sets it apart from other websites<\/strong>.<\/p>\n

Its visual identity is defined by a red and blue duotone palette that transforms the imagery throughout the site.<\/p>\n

3. Fjord Trend<\/h2>\n

\"diseno-web-barcelona-estudio-duotone-03\"<\/a><\/p>\n

This example demonstrates a more subtle use of duotone, applying the technique to both images and backgrounds.<\/p>\n

The result gives the web design an extra boost, reinforcing its philosophy and creating strong contrast with the finer details.<\/p>\n

4. Triple 9<\/h2>\n

\"diseno-web-barcelona-estudio-duotone-04\"<\/a><\/p>\n

Duotone is also widely used in film and video, enriching the dialogue between image and viewer, and adding drama, intensity, and raw emotion.<\/p>\n

5. La Marine Nationale on Board Careers<\/h2>\n

\"diseno-web-barcelona-estudio-duotone-05\"<\/a><\/p>\n

This example focuses on illustration rather than photography. In this web design<\/strong>, the creator uses duotone illustration\u2014various shades of red and white\u2014to highlight the website\u2019s unique character.<\/p>\n

Ultimately, duotone comes in many forms. It can be bold, aggressive, dramatic, or the complete opposite.<\/p>\n

It\u2019s worth getting to know this technique\u2014knowledge always brings new opportunities, whether to use it, reject it, or simply learn from it.<\/p>\n","protected":false},"excerpt":{"rendered":"

Today I want to share some insights about a technique that has become increasingly popular in web design: duotone. What is duotone? Put simply, duotone refers to the creation or reproduction of images by removing midtones\u2014what used to be the middle gray in analog photography\u2014and highlights. Most commonly, duotone designs feature shades of blue, brown, […]<\/p>\n","protected":false},"author":1,"featured_media":4433,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[134],"class_list":["post-20284","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-disseny-grafic"],"acf":[],"yoast_head":"\nDuotone - Code Barcelona<\/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:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Duotone - Code Barcelona\" \/>\n<meta property=\"og:description\" content=\"Today I want to share some insights about a technique that has become increasingly popular in web design: duotone. What is duotone? Put simply, duotone refers to the creation or reproduction of images by removing midtones\u2014what used to be the middle gray in analog photography\u2014and highlights. Most commonly, duotone designs feature shades of blue, brown, […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/\" \/>\n<meta property=\"og:site_name\" content=\"Code Barcelona\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-26T18:51:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-20T22:27:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/duotone-featured.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"301\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"cd26Bc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"cd26Bc\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/\"},\"author\":{\"name\":\"cd26Bc\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\"},\"headline\":\"Duotone\",\"datePublished\":\"2016-09-26T18:51:48+00:00\",\"dateModified\":\"2026-04-20T22:27:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/\"},\"wordCount\":314,\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/duotone-featured.jpg\",\"articleSection\":[\"Dise\u00f1o gr\u00e1fico\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/\",\"url\":\"https:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/\",\"name\":\"Duotone - Code Barcelona\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/duotone-featured.jpg\",\"datePublished\":\"2016-09-26T18:51:48+00:00\",\"dateModified\":\"2026-04-20T22:27:27+00:00\",\"author\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/#primaryimage\",\"url\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/duotone-featured.jpg\",\"contentUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/duotone-featured.jpg\",\"width\":600,\"height\":301},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#website\",\"url\":\"https:\/\/codewebbarcelona.com\/en\/\",\"name\":\"Code Barcelona\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codewebbarcelona.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\",\"name\":\"cd26Bc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"caption\":\"cd26Bc\"},\"sameAs\":[\"https:\/\/codewebbarcelona.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Duotone - Code Barcelona","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:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/","og_locale":"en_US","og_type":"article","og_title":"Duotone - Code Barcelona","og_description":"Today I want to share some insights about a technique that has become increasingly popular in web design: duotone. What is duotone? Put simply, duotone refers to the creation or reproduction of images by removing midtones\u2014what used to be the middle gray in analog photography\u2014and highlights. Most commonly, duotone designs feature shades of blue, brown, […]","og_url":"https:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/","og_site_name":"Code Barcelona","article_published_time":"2016-09-26T18:51:48+00:00","article_modified_time":"2026-04-20T22:27:27+00:00","og_image":[{"width":600,"height":301,"url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/duotone-featured.jpg","type":"image\/jpeg"}],"author":"cd26Bc","twitter_card":"summary_large_image","twitter_misc":{"Written by":"cd26Bc","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/#article","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/"},"author":{"name":"cd26Bc","@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"headline":"Duotone","datePublished":"2016-09-26T18:51:48+00:00","dateModified":"2026-04-20T22:27:27+00:00","mainEntityOfPage":{"@id":"https:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/"},"wordCount":314,"image":{"@id":"https:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/duotone-featured.jpg","articleSection":["Dise\u00f1o gr\u00e1fico"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/","url":"https:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/","name":"Duotone - Code Barcelona","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/#primaryimage"},"image":{"@id":"https:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/duotone-featured.jpg","datePublished":"2016-09-26T18:51:48+00:00","dateModified":"2026-04-20T22:27:27+00:00","author":{"@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codewebbarcelona.com\/en\/duotone-techniques-skills\/#primaryimage","url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/duotone-featured.jpg","contentUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/duotone-featured.jpg","width":600,"height":301},{"@type":"WebSite","@id":"https:\/\/codewebbarcelona.com\/en\/#website","url":"https:\/\/codewebbarcelona.com\/en\/","name":"Code Barcelona","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codewebbarcelona.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567","name":"cd26Bc","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","caption":"cd26Bc"},"sameAs":["https:\/\/codewebbarcelona.com"]}]}},"_links":{"self":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/20284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/comments?post=20284"}],"version-history":[{"count":2,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/20284\/revisions"}],"predecessor-version":[{"id":20297,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/20284\/revisions\/20297"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/media\/4433"}],"wp:attachment":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/media?parent=20284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/categories?post=20284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}