{"id":1622,"date":"2023-05-24T08:20:43","date_gmt":"2023-05-24T06:20:43","guid":{"rendered":"https:\/\/www.risc-software.at\/ux-design-farben-im-web\/"},"modified":"2025-06-02T15:04:53","modified_gmt":"2025-06-02T13:04:53","slug":"technical-article-ux-design-colours-on-the-web","status":"publish","type":"publication","link":"https:\/\/www.risc-software.at\/en\/technicalarticles\/technical-article-ux-design-colours-on-the-web\/","title":{"rendered":"UX design: colours on the web"},"content":{"rendered":"\n<h2 class=\"wp-block-heading is-style-v2-telegrafico\">About the effect of colours and what image they convey to us.<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">by Cand. Scient. Christina Hochleitner<\/h3>\n\n\n<div class=\"wp-block-group-container alignfull \">\n<div class=\"wp-block-group alignfull is-layout-constrained wp-block-group-is-layout-constrained\">\n<p><em>Colours influence how we perceive a website or a customer portal and give users constant feedback. The usability and design process in web projects at RISC Software GmbH is initiated at a very early stage. Read here how colours are handled together with the experts at RISC Software GmbH and what impression the different colours leave on the viewers on the web.<\/em><br><br><\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile is-vertically-aligned-center\"><div class=\"wp-block-media-text__content\">\n<p><strong>Table of contents<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>What colours trigger in us: study<\/li>\n\n\n\n<li>Colours: the right choice<\/li>\n\n\n\n<li>Two special colours: red and green<\/li>\n\n\n\n<li>Author<\/li>\n<\/ul>\n<\/div><figure class=\"wp-block-media-text__media\"><img decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/www.risc-software.at\/app\/uploads\/2023\/06\/iStock-1144334607-1024x683.jpg\" alt=\"User Experience\" class=\"wp-image-1346 size-full\" srcset=\"https:\/\/www.risc-software.at\/app\/uploads\/2023\/06\/iStock-1144334607-1024x683.jpg 1024w, https:\/\/www.risc-software.at\/app\/uploads\/2023\/06\/iStock-1144334607-300x200.jpg 300w, https:\/\/www.risc-software.at\/app\/uploads\/2023\/06\/iStock-1144334607-768x512.jpg 768w, https:\/\/www.risc-software.at\/app\/uploads\/2023\/06\/iStock-1144334607-1536x1025.jpg 1536w, https:\/\/www.risc-software.at\/app\/uploads\/2023\/06\/iStock-1144334607.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n<\/div>\n<\/div>\n\n<div class=\"wp-block-group-container alignfull \">\n<div class=\"wp-block-group alignfull is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h3 class=\"wp-block-heading\">What colours trigger in us: study<\/h3>\n\n\n\n<p>Joe Hallock conducted a study on colour perception with 232 participants in 2003 (<a href=\"http:\/\/www.joehallock.com\/?page_id=1281#pref.\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/www.joehallock.com\/?page_id=1281#pref.<\/a>). He found that the colour &#8220;blue&#8221; was most frequently stated as a favourite colour by both men and women. Purple was very polarised and, for example, was only mentioned as a favourite colour by women (23%) &#8211; among men, &#8220;purple&#8221; did not appear at all. The researcher also asked the participants to describe colour associations with &#8220;safety&#8221; (result: blue 28%, black 16%), the perception of &#8220;speed&#8221; (result: red 75%) and &#8220;cheap&#8221; (result: orange 26%, yellow 22%, brown 13% &#8211; no clear result). For &#8220;high quality&#8221;, 42% of the respondents give black and 18% blue as an association.<\/p>\n\n\n\n<p>If you look at these results in relation to colours on the web, you can quickly find examples where these colours are used quite deliberately by well-known brands. For example, it is not surprising that Apple (<a href=\"http:\/\/apple.com\" target=\"_blank\" rel=\"noreferrer noopener\">apple.com<\/a>) uses the colour black as a leading and background colour. The food discounter Lidl (<a href=\"http:\/\/lidl.at\" target=\"_blank\" rel=\"noreferrer noopener\">lidl.at<\/a>), on the other hand, impresses with very colourful advertising where many different colours are used.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full is-style-rounded\"><img decoding=\"async\" width=\"724\" height=\"482\" sizes=\"(max-width: 724px) 100vw, 724px\" src=\"https:\/\/www.risc-software.at\/app\/uploads\/2023\/06\/Farben_imWeb.jpg\" alt=\"Top view creative peoples meeting with colouring in computer monitor.\" class=\"wp-image-1615\" srcset=\"https:\/\/www.risc-software.at\/app\/uploads\/2023\/06\/Farben_imWeb.jpg 724w, https:\/\/www.risc-software.at\/app\/uploads\/2023\/06\/Farben_imWeb-300x200.jpg 300w\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"wp-block-group-container alignfull \">\n<div class=\"wp-block-group alignfull is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h3 class=\"wp-block-heading\">Colours: the right choice<\/h3>\n\n\n\n<p>The use of colours in your web project will of course depend on the existing corporate design in most cases. The colours you want will be included in the colour decision and we will be happy to advise you on a more precise selection of the matching highlighting or secondary colour. On the web there is also a comprehensive selection of so-called &#8220;colour wheels&#8221; (<a href=\"https:\/\/color.adobe.com\/de\/create\/color-wheel\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/color.adobe.com\/de\/create\/color-wheel<\/a>), which provide suggestions for colours that harmonise with each other based on different colour theory methods (e.g. complementary colours, colours arranged in a square on the colour wheel,\u2026).<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full is-resized is-style-default\"><img decoding=\"async\" sizes=\"(max-width: 500px) 100vw, 500px\" src=\"https:\/\/www.risc-software.at\/app\/uploads\/2023\/06\/Artboard_1-100-removebg-preview.png\" alt=\"Color Wheel\" class=\"wp-image-1613\" width=\"400\" height=\"400\" srcset=\"https:\/\/www.risc-software.at\/app\/uploads\/2023\/06\/Artboard_1-100-removebg-preview.png 500w, https:\/\/www.risc-software.at\/app\/uploads\/2023\/06\/Artboard_1-100-removebg-preview-300x300.png 300w, https:\/\/www.risc-software.at\/app\/uploads\/2023\/06\/Artboard_1-100-removebg-preview-150x150.png 150w\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"wp-block-group-container alignfull \">\n<div class=\"wp-block-group alignfull is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h3 class=\"wp-block-heading\">Two special colours: red and green<\/h3>\n\n\n\n<p>The colours red and green are a topic of their own, as these are already very strongly pre-assigned on the web. Thus, the appearance of green colour usually stands for the statement: &#8220;Everything fits &#8211; continue&#8221; and red for the signal &#8220;Stop! Something has gone wrong here&#8221;. The use of these two colours in a different context can therefore very easily lead to usability problems on the web and should be carefully considered.<\/p>\n\n\n\n<p>At the beginning of a web project, the colours are discussed in a design sprint and determined together with you. Colours on the web are incredibly important because: &#8220;Color does not add a pleasant quality to design &#8211; it reinforces it.&#8221; &#8211; Pierre Bonnard<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"wp-block-group-container alignfull \">\n<div class=\"wp-block-group alignfull is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h3 class=\"wp-block-heading\">Contact<\/h3>\n\n\n\n<div class=\"wp-block-contact-form-7-contact-form-selector\">\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f663-o1\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"663\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/en\/wp-json\/wp\/v2\/publication\/1622#wpcf7-f663-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"663\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f663-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<div class=\"form-row\">\n\t<div class=\"form-input\">\n\t\t<p><label class=\"sr-only\" for=\"your-name\">Your name <\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" id=\"your-name\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Name\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span>\n\t\t<\/p>\n\t<\/div>\n\t<div class=\"form-input\">\n\t\t<p><label class=\"sr-only\" for=\"your-email\">Your email<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" id=\"your-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"E-Mail\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span>\n\t\t<\/p>\n\t<\/div>\n<\/div>\n<div class=\"form-row\">\n\t<div class=\"form-input\">\n\t\t<p><label class=\"sr-only\" for=\"your-company\">Company <\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-company\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"your-company\" aria-invalid=\"false\" placeholder=\"Unternehmen\" value=\"\" type=\"text\" name=\"your-company\" \/><\/span>\n\t\t<\/p>\n\t<\/div>\n\t<div class=\"form-input\">\n\t\t<p><label class=\"sr-only\" for=\"your-position\">Position<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-position\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Position\" value=\"\" type=\"text\" name=\"your-position\" \/><\/span>\n\t\t<\/p>\n\t<\/div>\n<\/div>\n<div class=\"form-row\">\n\t<div class=\"form-input\">\n\t\t<p><label class=\"sr-only\" for=\"your-subject\"> Subject <\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-subject\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" id=\"your-subject\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Thema\" value=\"\" type=\"text\" name=\"your-subject\" \/><\/span>\n\t\t<\/p>\n\t<\/div>\n<\/div>\n<p><span id=\"wpcf7-69f1d25e4b855-wrapper\" class=\"wpcf7-form-control-wrap phone-95-wrap\" style=\"display:none !important; visibility:hidden !important;\"><label for=\"wpcf7-69f1d25e4b855-field\" class=\"hp-message\">Please leave this field empty.<\/label><input id=\"wpcf7-69f1d25e4b855-field\"  class=\"wpcf7-form-control wpcf7-text\" type=\"text\" name=\"phone-95\" value=\"\" size=\"40\" tabindex=\"-1\" autocomplete=\"new-password\" \/><\/span><br \/>\n<label class=\"sr-only\" for=\"your-message\"> Your message (optional)<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" id=\"your-message\" aria-invalid=\"false\" placeholder=\"Ihre Nachricht an uns\" name=\"your-message\"><\/textarea><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"hcap-cf7\">\t\t<input\n\t\t\t\ttype=\"hidden\"\n\t\t\t\tclass=\"hcaptcha-widget-id\"\n\t\t\t\tname=\"hcaptcha-widget-id\"\n\t\t\t\tvalue=\"eyJzb3VyY2UiOlsiY29udGFjdC1mb3JtLTdcL3dwLWNvbnRhY3QtZm9ybS03LnBocCJdLCJmb3JtX2lkIjo2NjN9-5cf29316f0fc31f5a29d11a228757560\">\n\t\t\t\t<span id=\"hcap_cf7-69f1d25e4be6d8.07180431\" class=\"wpcf7-form-control h-captcha \"\n\t\t\tdata-sitekey=\"3a6a81c1-2b2e-4b2a-b1eb-d9446bc09afb\"\n\t\t\tdata-theme=\"light\"\n\t\t\tdata-size=\"normal\"\n\t\t\tdata-auto=\"false\"\n\t\t\tdata-ajax=\"false\"\n\t\t\tdata-force=\"false\">\n\t\t<\/span>\n\t\t<input type=\"hidden\" id=\"_wpnonce\" name=\"_wpnonce\" value=\"a3161df04d\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/publication\/1622\" \/><\/span><input class=\"wpcf7-form-control wpcf7-submit has-spinner btn\" type=\"submit\" value=\"Senden\" \/>\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<h3 class=\"wp-block-heading\">Author<\/h3>\n\n\n<div class=\"contact-person\">\n      <picture>\n      \n      \n      \n      \n      <img decoding=\"async\" data-aos=\"fade-zoom-in\"\n           data-aos-offset=\"0\" class=\"w-full\" width=\"212\" height=\"293\"\n           src=\"https:\/\/www.risc-software.at\/app\/uploads\/2023\/07\/chochlei1-Background-Removed.jpg\"\n           alt=\"\">\n    <\/picture>\n    \n\n<h5 class=\"wp-block-heading\">Cand. Scient. Christina Hochleitner, MSc<\/h5>\n\n\n\n<p>Research Coordinator<\/p>\n\n  <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"wp-block-group-container alignfull \">\n<div class=\"wp-block-group alignwide is-layout-constrained wp-block-group-is-layout-constrained\"><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>About the effect of colors and what image they convey to us.<\/p>\n","protected":false},"featured_media":1616,"template":"","publication-category":[49],"class_list":["post-1622","publication","type-publication","status-publish","has-post-thumbnail","hentry","publication-category-software-development"],"acf":[],"portrait_thumb_url":"https:\/\/www.risc-software.at\/app\/uploads\/2023\/06\/Farben_imWeb-360x214.jpg","_links":{"self":[{"href":"https:\/\/www.risc-software.at\/en\/wp-json\/wp\/v2\/publication\/1622","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.risc-software.at\/en\/wp-json\/wp\/v2\/publication"}],"about":[{"href":"https:\/\/www.risc-software.at\/en\/wp-json\/wp\/v2\/types\/publication"}],"version-history":[{"count":5,"href":"https:\/\/www.risc-software.at\/en\/wp-json\/wp\/v2\/publication\/1622\/revisions"}],"predecessor-version":[{"id":4552,"href":"https:\/\/www.risc-software.at\/en\/wp-json\/wp\/v2\/publication\/1622\/revisions\/4552"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.risc-software.at\/en\/wp-json\/wp\/v2\/media\/1616"}],"wp:attachment":[{"href":"https:\/\/www.risc-software.at\/en\/wp-json\/wp\/v2\/media?parent=1622"}],"wp:term":[{"taxonomy":"publication-category","embeddable":true,"href":"https:\/\/www.risc-software.at\/en\/wp-json\/wp\/v2\/publication-category?post=1622"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}