{"id":3697,"date":"2017-10-23T15:37:01","date_gmt":"2017-10-23T12:37:01","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=3697"},"modified":"2026-02-06T15:10:44","modified_gmt":"2026-02-06T15:10:44","slug":"color-matters-6-tips-on-choosing-ui-colors","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/color-matters-6-tips-on-choosing-ui-colors\/","title":{"rendered":"Color Matters. 6 Tips on Choosing UI Colors"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Choosing a UI color palette is tricky. It\u2019s not like picking paint for your living room wall\u2014unless your living room needs to convert users, guide flows, reduce bounce rates, and reinforce brand recognition in 0.3 seconds. In that case, maybe it is.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In web and mobile interface design, colors shape user perception, guide navigation, and subtly whisper (or scream) what your brand stands for. So if you\u2019ve ever spent an hour tweaking a button from #0077FF to #006AD6 and back again, congrats: you\u2019re doing it right.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here are six practical, designer-to-designer tips for choosing UI colors that don\u2019t just look good, but actually work.<\/span><\/p>\n<h2><span style=\"color: #333333;\">Tip 1. The 60\u201330\u201310 Rule<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The 60\u201330\u201310 rule comes from interior design, but works surprisingly well in digital interfaces. It&#8217;s a simple formula for visual hierarchy:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">60% dominant color<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">30% secondary color<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">10% accent color<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Think of the dominant 60% as the main background or card color (e.g., soft whites, charcoal grays). The 30% adds <a href=\"https:\/\/blog.tubikstudio.com\/contrast-in-user-interface-design\/\">contrast<\/a>\u2014your navbars, side panels, or tab bars. The final 10% is reserved for emphasis: bright CTAs, icon accents, anything you want to highlight.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Our brains like a clear foreground and background, with a little pop of surprise. It\u2019s a visual rhythm that feels composed, not chaotic. And when you skip this logic, your UI ends up looking like a first-year student\u2019s Figma file\u2014too loud, no focus, zero emotional pacing.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7743\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/web-ui-design-landing-page.png\" alt=\"web ui design landing page\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/web-ui-design-landing-page.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/web-ui-design-landing-page-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/web-ui-design-landing-page-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/web-ui-design-landing-page-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Digital Agency Landing Page<\/em><\/span><\/p>\n<h2><span style=\"color: #333333;\">Tip 2. Color Contrast: Friend, Not Frenemy<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Contrast is your best friend\u2014until it turns into that friend who talks too loud at parties.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Good color contrast helps users distinguish elements, read text, and know where to click. It\u2019s the backbone of accessibility. But bad contrast? That\u2019s how your light-gray-on-white placeholder text becomes invisible on mobile at 2pm in bright sun.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">At its best, contrast drives <a href=\"https:\/\/blog.tubikstudio.com\/elements-of-web-usability\/\">usability<\/a>. Want people to click that button? Don\u2019t bury it in a sea of same-tone neutrals. Give it a bold accent\u2014a rich green against ivory, or a red-orange against navy.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But don\u2019t go overboard. If everything screams, nothing gets heard. Excessive contrast across your entire UI feels aggressive, like a flashing banner ad from 2009.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Use contrast where it counts:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Buttons<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Alerts<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Actionable text<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Empty state illustrations<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Leave your body copy and background colors at a softer contrast ratio. Your users\u2014and their retinas\u2014will thank you.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7744\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/choice-of-color-in-UI-design.jpg\" alt=\"choice of color in UI design\" width=\"2500\" height=\"1667\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/choice-of-color-in-UI-design.jpg 2500w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/choice-of-color-in-UI-design-300x200.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/choice-of-color-in-UI-design-768x512.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/choice-of-color-in-UI-design-1024x683.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/choice-of-color-in-UI-design-150x100.jpg 150w\" sizes=\"auto, (max-width: 2500px) 100vw, 2500px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Urban Sketcher App<\/em><\/span><\/p>\n<h2><span style=\"color: #333333;\">Tip 3. Don&#8217;t Forget Color Psychology<\/span><span style=\"color: #333333;\">\u00a0<\/span><\/h2>\n<p><span style=\"color: #333333;\">As we\u2019ve mentioned in our <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/color-in-design-influence-on-users-actions\/\">previous articles<\/a>, <\/span><span style=\"font-weight: 400;\">color psychology is less about theory and more about user behavior in the wild. It\u2019s why error messages are red, success states are green, and why landing pages that use soft blues tend to feel more \u201creliable.\u201d These aren\u2019t arbitrary choices\u2014they\u2019re decisions wired into human perception.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When users open your app or website, their eyes scan before their brains process. The colors hit first, sending subconscious signals. A deep navy might whisper \u201ctrust me\u201d, a vibrant orange button might say \u201cclick me now\u201d before your microcopy even finishes the pitch.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Designers who get this don\u2019t rely on color to say something\u2014they use it to suggest, to guide, to nudge. And users rarely notice it happening. That\u2019s the power of good emotional design.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But effective use of color psychology in web design also means knowing when not to lean too hard on symbolism. Not every user experiences color the same way. Cultural background, age, and even screen settings influence perception. A red CTA might energize one audience and feel aggressive to another. That calming sage green might read as clinical or outdated if you\u2019re not careful with contrast and pairing.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The trick isn\u2019t to memorize what every color \u201cmeans.\u201d The trick is to understand what you want your user interface colors to do. Should your palette invite trust? Signal urgency? Inspire joy? Then test it, on real screens, in real lighting, with real people. Because even the most strategic hue won\u2019t matter if it fails under fluorescent office light or feels off-brand in context.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Color psychology is less about getting people to feel the \u201cright thing,\u201d and more about getting them to feel something\u2014something aligned with your product\u2019s message and your user\u2019s journey.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7745\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/dance-academy-landing-page-tubik.png\" alt=\"dance academy landing page tubik\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/dance-academy-landing-page-tubik.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/dance-academy-landing-page-tubik-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/dance-academy-landing-page-tubik-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/dance-academy-landing-page-tubik-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Dance Academy Website<\/em><\/span><\/p>\n<h2><span style=\"color: #333333;\">Tip 4. Design for the World, Not Just Your Zip Code<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">If you\u2019ve ever designed a UI for a global product, you know the moment: your \u201cclean, peaceful\u201d white-themed layout gets flagged in QA for looking funereal in East Asia. Or your vibrant yellow onboarding screen\u2014meant to radiate joy\u2014sends warning signals in France. Welcome to the world of cultural color perception.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Color is not a universal language. In fact, it\u2019s one of the most culturally loaded tools in your UX toolkit. What reads as warm and energetic in one country might signal disrespect or mourning in another. If you&#8217;re designing for a multi-region product or even might localize later, color localization in UX is not optional\u2014it\u2019s table stakes.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s be specific. In most of Europe and North America, white is tied to purity, simplicity, and weddings. But in many East Asian cultures, white is linked to death, grief, and loss. Same pigment, radically different UX impact.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">And it\u2019s not just about avoiding cultural faux pas. Smart use of international UI color strategies can actually deepen local engagement. A fintech app in India might find more resonance using saffron and green than blue and gray. A wellness brand in Brazil might do better leaning into vivid tropical palettes rather than pale minimalist pastels.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This isn\u2019t about over-customizing either. You don\u2019t need fifty regional color variants. But being aware of regional color symbolism helps you make intentional choices. You might opt for a flexible neutral base (say, cool beige or slate gray) and swap accent tones based on GEO preferences.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Better yet, validate your color palette through user testing across your top regions. Sometimes the issue won\u2019t even be symbolism\u2014it\u2019ll be legibility under low-contrast sunlit conditions in Nairobi or outdated Android screens in Jakarta.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you&#8217;re serious about global UX, this step matters. Color missteps might not crash your conversion rate, but they\u2019ll slowly chip away at trust\u2014and trust is everything in UI design.<\/span><\/p>\n<h2><span style=\"color: #333333;\">Tip 5. Color Harmony Isn\u2019t Optional<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">You can have the perfect brand color and still end up with a chaotic interface. Why? Because <a href=\"https:\/\/blog.tubikstudio.com\/color-theory-brief-guide-for-designers\/\">color<\/a> harmony in UI design isn\u2019t about liking a hue\u2014it\u2019s about making multiple hues behave together.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When colors clash, users feel it before they understand it. An interface might \u201clook off\u201d without anyone knowing why. That\u2019s usually a harmony issue. And in web design, visual harmony equals cognitive ease. If your palette feels intuitive, users don\u2019t question it\u2014they just move, click, scroll.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7746\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/color-wheel-for-designers-tubik-blog.png\" alt=\"color wheel for designers tubik blog\" width=\"2134\" height=\"1600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/color-wheel-for-designers-tubik-blog.png 2134w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/color-wheel-for-designers-tubik-blog-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/color-wheel-for-designers-tubik-blog-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/color-wheel-for-designers-tubik-blog-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/color-wheel-for-designers-tubik-blog-150x112.png 150w\" sizes=\"auto, (max-width: 2134px) 100vw, 2134px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\"><em>Detailed information and examples of color harmony can be found in our article <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/color-theory-brief-guide-for-designers\/\" target=\"_blank\" rel=\"noopener noreferrer\">Color Theory: Brief Guide for Designers.<\/a><\/em><\/span><\/p>\n<p><span style=\"font-weight: 400;\">Luckily, designers have actual tools here. We\u2019re not choosing blindly\u2014we\u2019re working with color schemes that have been tested for decades. Some of the most effective ones:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Monochromatic<\/b><span style=\"font-weight: 400;\"> (one color, multiple shades): sleek, safe, hard to mess up.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Analogous<\/b><span style=\"font-weight: 400;\"> (colors next to each other): subtle, natural, great for soft brands.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Complementary<\/b><span style=\"font-weight: 400;\"> (opposites): bold, high-impact, perfect for CTA buttons.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Triadic<\/b><span style=\"font-weight: 400;\"> or <\/span><b>Tetradic<\/b><span style=\"font-weight: 400;\">: trickier, but powerful when balanced right.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The trick is knowing what emotional weight each combo carries\u2014and how it impacts readability, focus, and user flow. Most modern UI color palettes start with one dominant tone and use others for accents, alerts, or hover states.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The goal isn\u2019t to impress other designers\u2014even if our egos would enjoy it. The goal is to make your users feel like everything just clicks. Because when UI color harmony works, nobody notices. And that\u2019s the whole point.<\/span><\/p>\n<h2><span style=\"color: #333333;\"> Tip 6. Nature Is the Best Moodboard<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Before you dive into yet another Pinterest spiral or Behance board full of neon gradients and AI-generated color wheels, step outside. No, seriously\u2014go look at a tree.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The most intuitive, time-tested, emotionally resonant color palettes on Earth don\u2019t come from trend decks. They come from nature. Natural color combinations are wired into us: the blue-orange of a sunset, the muted greens and browns of a forest trail, the icy contrast of snow against pine.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Designers who study nature\u2019s logic often end up with UIs that feel strangely \u201cright\u201d\u2014even when the color scheme itself isn\u2019t trendy. That\u2019s because nature understands balance, contrast, temperature, and tone in ways even the best color theory books struggle to explain.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7747\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/big-city-guide-webdesign-stockholm.png\" alt=\"big city guide webdesign stockholm\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/big-city-guide-webdesign-stockholm.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/big-city-guide-webdesign-stockholm-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/big-city-guide-webdesign-stockholm-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/big-city-guide-webdesign-stockholm-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-big-city-guide-landing-page-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">Big City Guide<\/a><\/em><\/span><\/p>\n<p><span style=\"font-weight: 400;\">Want a palette that feels grounded? Sample a late summer meadow. Need something fresh and modern? Try the tones of volcanic ash against fog. Looking for an emotional punch? Start with the sharp gold of autumn leaves.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This isn\u2019t metaphor. It\u2019s method. Use nature as your UI color reference. Screenshot a landscape. Color pick it. Build a palette. Then test it across dark mode, light mode, and actual devices. You\u2019ll be surprised how often it just\u2026 works.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Because nature doesn\u2019t guess. And neither should you.<\/span><\/p>\n<h2><span style=\"color: #333333;\">Recommended Reading<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Design doesn\u2019t stop at color. Check out our other articles on strategy, structure, and the little details that make users stay:<\/span><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/color-theory-brief-guide-for-designers\/\">Color Theory: Brief Guide For Designers<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/light-or-dark-ui-tips-choose-proper-color-scheme\/\">Light or Dark UI: Tips to Choose a Proper Color Scheme<\/a><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/color-in-design-influence-on-users-actions\/\">Color in Design: Influence on Users\u2019 Actions<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/color-in-ui-design-look-on-the-bright-side\/\">Color in UI Design. Look on the Bright Side<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/dark-side-of-ui-benefits-of-dark-background\/\">Dark Side of UI. Benefits of Dark Background<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/3c-of-interface-design-color-contrast-content\/\">3C of Interface Design: Color, Contrast, Content<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Choosing UI colors is less about taste and more about behavior. Here are six practical, designer-tested tips on contrast, harmony, psychology, and global-ready palettes.<\/p>\n","protected":false},"author":10003,"featured_media":7744,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7,9],"tags":[319,502,365,504,437,515,440,533,447,534,457,20,463,68,465,69,467,72,468,74,469,100,479,151,482,212,491,233,497,259,498],"coauthors":[634],"class_list":["post-3697","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-processes_and_tools","category-ui_ux","tag-mobile-app","tag-ux","tag-product-design","tag-ux-design-article","tag-tips","tag-uxui","tag-tubik","tag-web-design","tag-tubik-studio","tag-web-design-article","tag-ui","tag-app-design","tag-ui-design-article","tag-color-choice","tag-ui-design-examples","tag-color-combination","tag-ui-design-practices","tag-color-psychology","tag-ui-design-process","tag-color-theory","tag-ui-design-tips","tag-design","tag-usability","tag-design-tips","tag-user-experience","tag-graphic-design","tag-user-interface","tag-human-computer-interaction","tag-user-centered","tag-interface-color","tag-user-friendly"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Color Matters. 6 Tips on Choosing UI Colors<\/title>\n<meta name=\"description\" content=\"Learn 6 practical tips on contrast, harmony, psychology, and global color choices in web and mobile design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/color-matters-6-tips-on-choosing-ui-colors\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Color Matters. 6 Tips on Choosing UI Colors\" \/>\n<meta property=\"og:description\" content=\"The article reveals six tips on choosing colors for mobile and web interfaces. It shows techniques helping UI designers to boost user interest to a product.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/color-matters-6-tips-on-choosing-ui-colors\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-23T12:37:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-06T15:10:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/choice-of-color-in-UI-design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2500\" \/>\n\t<meta property=\"og:image:height\" content=\"1667\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Anastasiia Lutsenko\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anastasiia Lutsenko\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/color-matters-6-tips-on-choosing-ui-colors\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/color-matters-6-tips-on-choosing-ui-colors\/\",\"name\":\"Color Matters. 6 Tips on Choosing UI Colors\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/color-matters-6-tips-on-choosing-ui-colors\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/color-matters-6-tips-on-choosing-ui-colors\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/choice-of-color-in-UI-design.jpg\",\"datePublished\":\"2017-10-23T12:37:01+00:00\",\"dateModified\":\"2026-02-06T15:10:44+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/2d8ccd57b6edf253e2787561fe1e66c1\"},\"description\":\"Learn 6 practical tips on contrast, harmony, psychology, and global color choices in web and mobile design.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/color-matters-6-tips-on-choosing-ui-colors\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/color-matters-6-tips-on-choosing-ui-colors\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/color-matters-6-tips-on-choosing-ui-colors\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/choice-of-color-in-UI-design.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/choice-of-color-in-UI-design.jpg\",\"width\":2500,\"height\":1667,\"caption\":\"choice of color in UI design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/color-matters-6-tips-on-choosing-ui-colors\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Color Matters. 6 Tips on Choosing UI Colors\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/2d8ccd57b6edf253e2787561fe1e66c1\",\"name\":\"Anastasiia Lutsenko\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/d893c1e4578c8cd7a39f393978129a25\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9c0999380ab25553a4aea6cbc2224fa5f579af8ebbef2928d1d71fd4137a77a1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9c0999380ab25553a4aea6cbc2224fa5f579af8ebbef2928d1d71fd4137a77a1?s=96&d=mm&r=g\",\"caption\":\"Anastasiia Lutsenko\"},\"description\":\"7+ years of writing content that speaks, sells, and sticks. Raised on legendary Apple commercials and allergic to mediocrity, Anastasiia writes for products, interfaces, and campaigns that refuse to be ignored.\",\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/alutsenko\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Color Matters. 6 Tips on Choosing UI Colors","description":"Learn 6 practical tips on contrast, harmony, psychology, and global color choices in web and mobile design.","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:\/\/tubikstudio.com\/blog\/color-matters-6-tips-on-choosing-ui-colors\/","og_locale":"en_US","og_type":"article","og_title":"Color Matters. 6 Tips on Choosing UI Colors","og_description":"The article reveals six tips on choosing colors for mobile and web interfaces. It shows techniques helping UI designers to boost user interest to a product.","og_url":"https:\/\/tubikstudio.com\/blog\/color-matters-6-tips-on-choosing-ui-colors\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2017-10-23T12:37:01+00:00","article_modified_time":"2026-02-06T15:10:44+00:00","og_image":[{"width":2500,"height":1667,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/choice-of-color-in-UI-design.jpg","type":"image\/jpeg"}],"author":"Anastasiia Lutsenko","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Anastasiia Lutsenko","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/color-matters-6-tips-on-choosing-ui-colors\/","url":"https:\/\/tubikstudio.com\/blog\/color-matters-6-tips-on-choosing-ui-colors\/","name":"Color Matters. 6 Tips on Choosing UI Colors","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/color-matters-6-tips-on-choosing-ui-colors\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/color-matters-6-tips-on-choosing-ui-colors\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/choice-of-color-in-UI-design.jpg","datePublished":"2017-10-23T12:37:01+00:00","dateModified":"2026-02-06T15:10:44+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/2d8ccd57b6edf253e2787561fe1e66c1"},"description":"Learn 6 practical tips on contrast, harmony, psychology, and global color choices in web and mobile design.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/color-matters-6-tips-on-choosing-ui-colors\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/color-matters-6-tips-on-choosing-ui-colors\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/color-matters-6-tips-on-choosing-ui-colors\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/choice-of-color-in-UI-design.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/choice-of-color-in-UI-design.jpg","width":2500,"height":1667,"caption":"choice of color in UI design"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/color-matters-6-tips-on-choosing-ui-colors\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Color Matters. 6 Tips on Choosing UI Colors"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/2d8ccd57b6edf253e2787561fe1e66c1","name":"Anastasiia Lutsenko","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/d893c1e4578c8cd7a39f393978129a25","url":"https:\/\/secure.gravatar.com\/avatar\/9c0999380ab25553a4aea6cbc2224fa5f579af8ebbef2928d1d71fd4137a77a1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9c0999380ab25553a4aea6cbc2224fa5f579af8ebbef2928d1d71fd4137a77a1?s=96&d=mm&r=g","caption":"Anastasiia Lutsenko"},"description":"7+ years of writing content that speaks, sells, and sticks. Raised on legendary Apple commercials and allergic to mediocrity, Anastasiia writes for products, interfaces, and campaigns that refuse to be ignored.","url":"https:\/\/tubikstudio.com\/blog\/author\/alutsenko\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/3697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/10003"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=3697"}],"version-history":[{"count":4,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/3697\/revisions"}],"predecessor-version":[{"id":17088,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/3697\/revisions\/17088"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/7744"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=3697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=3697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=3697"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=3697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}