DARK MODE UI DESIGN - COLOR PALETTE | HOW TO PICK THE RIGHT COLORS FOR DARK THEME? | TemplateMonster

as dark mode is on the peak of its popularity there are more websites with dark interfaces than ever if you've ever wondered what are the rules behind building such layouts well we've put together a quick guide to walk you through the crucial principles and help you pick the colors so all the elements are readable and accessible so whether you're willing to create a dark version of your existing websites or are going to build a dark theme design from scratch turn in for this episode we'll only touch upon the design aspects specifically color and if you want us to continue this direct mode design series leave a comment and let us know what else you would like to learn about so we'll split this guide in four main parts backgrounds text your elements and imagery the first problem you'll need to solve is the body color your options here range from pitch black although some guys do not recommend using that to reach gray and an infinite number of shades and tints of color layers on top of gray or black the last one is a kind of a trick that you can use to find a unique color for your dog background just take your primary color put it on top of your dark or a gray surface and lower the opacity to something as low as nine percent or try and use some blending modes like overlay or soft light and play around with opacity even in dark mode you can use elevation to communicate hierarchy when using cards for example use different shades of gray by putting a white color on top of the cards and lowering the opacity to get a lighter shade of the base color the lighter the color the higher the card is hovering above the surface or the other way around for headings and titles it's okay to use pure white but for longer paragraphs and blocks of text it is better to use shades of grey because they put less strain on the user's eyes by maintaining lower level of contrast it will reflect less light making it easier to read to make sure your text is still readable use online tools to check if your colors pass the contrast requirements for labels on buttons choose the shades of white or black dependant on the brightness of the accent color or alternatively darker shades of the primary color if the contrast level is appropriate if you want assign one of your accent colors to some text elements they shouldn't be alone sentences or paragraphs of text but rather subheadings and labels and pick in this approach you also shouldn't choose the weights that are too light the rule of thumb here is make colors less vibrant and stick to one or two accent colors for your UI elements minimal color palettes and gradients generally look good on dark backgrounds let's now see what is behind these roles if it is too many different colors the dark layout will look way too busy and you don't want that it is recommended that your palette consist of the primary color and three more additional colors for links error message and success message respectively if you're going to need those elements on your site now as we pick that primary color we think that this saturated blue must be a good fit but the contrast checker tells us that it's actually not why is it important to even use a contrast checker well it's one of the most crucial decisions when designing dark layouts your colors must be pleasant to look at shouldn't vibrate against the dark background and what's even more important must make the elements readable for now the contrast checker tells us that this color combination does not pass the requirements to solve this issue we need to decide our primary color so it doesn't clash with the dark background let's see what options we might have Google material design guidelines such as the tonal values from 400 to 50 are the most suitable for dark backgrounds so based on what we've talked about above this is how you might choose to style your button nice but sometimes this might not really fit the vibe you're going for then we can try something different here so as you know you have three basic values of a color which are hue saturation and lightness we wouldn't change the hue value if we want to keep our original color and we have all the trial change in the saturation so now to make the color lighter without making it too dull we can try and move the lightness slider up a little bit and see the result now as for the state's well for the light mode we can use elevation we can change the color when sharing the state change etc it works in a similar way with the dark mode and we totally can make it a little bit more interesting by adding a shadow of the same color to create the subtle glow effect generally there are two types of visuals with these own websites photography sometimes video and illustrations either 2d or 3d when you have a dark background paired with large high contrast and colorful images the final result looks amazing let's start with illustrations here if you have a lot of light elements or accent colors you used in the light theme consider swapping them with the appropriate shades of these colors so they match dark mode palette you can use the same tricks we've talked about earlier in the video it's often even easier with photos all you do is pick an image that would fit your color palette and style and make sure you adjust the colors saturation and contrast of your image a little bit to make it pop so now we reach the end of our quick dark mode design guide if you guys liked this video give it a thumbs up and leave a comment down below feel free to share your thoughts experiences tips and tricks and even share some of your work if you recently tried experimenting with diagonal design thank you for watching stay safe take care and be creative [Music]

Channel: TemplateMonster

Views: 24,145

Rating: 4.9551191 out of 5

Keywords: templatemonster8, templatemonster, templatemonsterco, templatemonster.com, dark color palette, what is dark mode, dark colors, dark mode ui design, dark mode ui trend, dark theme color palette, dark mode color palette, colors for dark theme, dark theme color scheme, dark mode color scheme, ui design trends, web design trends 2020, dark mode everything, chrome dark mode, dark mode apps, dark mode usability, night mode, dark mode, dark theme, why is dark mode better

Id: m0N02OTgG3o

Length: 5min 5sec (305 seconds)

Published: Thu Apr 30 2020