{"id":2037807,"date":"2021-04-30T12:44:28","date_gmt":"2021-04-30T12:44:28","guid":{"rendered":"https:\/\/toolset.com\/course-lesson\/choosing-and-applying-colors-in-your-site\/"},"modified":"2021-05-11T07:02:33","modified_gmt":"2021-05-11T07:02:33","slug":"choosing-and-applying-colors-in-your-site","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/de\/course-lesson\/choosing-and-applying-colors-in-your-site\/","title":{"rendered":"Choosing and Applying Colors in Your Site"},"content":{"rendered":"\n<p>Picking a good color combination can make basic site designs appear professional, but this also means that poor color combinations can make top-quality sites look bad. To create a good color scheme that complements your design, you need to understand what color palettes are, how to create your own, and how to use them without reducing content readability.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Understanding a color palette<\/h2>\n\n\n\n<p>Your color palette, also known as a color scheme, is the basis of all the colors present on a website. There are countless combinations out there and they are not all suitable for website design, so pick a palette that suits your brand identity and apply them using the information below:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Pick at least 3 colors: dark, light, and an accent (bright).<\/li><li>Apply the dark or light color to either the background or text. Don\u2019t make the text and background color similar to one another, only one can be light or dark at a time.&nbsp;<\/li><li>Apply the accent to places you want attention, such as buttons or links.<\/li><\/ul>\n\n\n\n<p>You can add more colors for different reasons, but we recommend a maximum of 5 colors.<\/p>\n\n\n\n<p>The following example has colors that are simple but complement one another well:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"4ab7ecad515e6ec6a83f809b5a2a8ab4\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-minimalist-color-palette-500x166.png\" alt=\"\" class=\"wp-image-2042611\"\/><div class=\"tb-image-caption\"><figcaption>A minimalist color palette\u00a0<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>To replicate the same color, you need to use hexadecimal codes (e.g. #ffffff for white). These are what you insert in color-pickers to make sure you get the same color every time. To do this, use free services such as <a href=\"https:\/\/www.google.com\/search?q=color+picker+hex&amp;oq=color+picker+hex&amp;aqs=chrome..69i57j0l9.2487j0j9&amp;sourceid=chrome&amp;ie=UTF-8\">Google\u2019s Color Picker<\/a>.&nbsp;<\/p>\n\n\n\n<p>As you can tell, our example&#8217;s palette has three colors that follow the color rules:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>White for the main background<\/li><li>Very dark blue for plain text and headings<\/li><li>Dark cyan as an accent color for buttons, links, and special backgrounds<\/li><\/ul>\n\n\n\n<p>Since these colors complement one another, they won\u2019t clash and distract users from the content of the site.&nbsp;<\/p>\n\n\n\n<p>Here is how this looks on a webpage:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"be525dc7d9d858ed9b9403701656eaeb\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-enhance-content-1.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-enhance-content-1-500x1094.png\" alt=\"\" class=\"wp-image-2042633\"\/><\/a><div class=\"tb-image-caption\"><figcaption>An example of a website that uses colors effectively to enhance its content<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Using color contrast for site readability<\/h3>\n\n\n\n<p>Color contrast is how well a color stands out from another color, and it controls whether or not people can read the content on your site. To make sure your site has good readability, never let your background color be too similar to your text or image colors.&nbsp;<\/p>\n\n\n\n<p>For example, the WordPress theme <strong>Twenty Twenty-One<\/strong> follows these color contrast rules:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"a3b75663b8578e6a07d4a4aa129c2373\"><img decoding=\"async\" width=\"640\" height=\"640\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-customizer-color.gif\" alt=\"\" class=\"wp-image-2046149\"\/><div class=\"tb-image-caption\"><figcaption>Adjusting the color automatically updates the text to a better color<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>Please note that if you find it difficult to follow contrast rules, you can use a service such as <a href=\"https:\/\/colourcontrast.cc\/.\">ColourContrast<\/a> to help you test your color combinations.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating your color palette&nbsp;<\/h2>\n\n\n\n<p>You can easily use online services to help you choose the perfect color combination, such as <a href=\"https:\/\/colors.muz.li\/\">Colors.Muz<\/a>, <a href=\"https:\/\/colorhunt.co\/\">Color Hunt<\/a>, <a href=\"https:\/\/coolors.co\">Coolors<\/a>, and <a href=\"http:\/\/colormind.io\/\">Colormind<\/a>. These work by suggesting colors that are complementary to the ones you want to use or save.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"bc0014747ded75f28c12a439cc489173\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-genrated-palette.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-genrated-palette-500x500.png\" alt=\"\" class=\"wp-image-2042675\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Examples of color palettes generated from online services<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>In case you do not know what to pick for your website palette, we suggest the following combination:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>White&nbsp;<\/li><li>Your brand\u2019s main color<\/li><li>Dark grey&nbsp;<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"a6cb8ff6f467038f459e36067429ee2f\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-minimalist-color-palette-2-500x166.png\" alt=\"\" class=\"wp-image-2042729\"\/><div class=\"tb-image-caption\"><figcaption>A website color palette consisting of White, Coral Pink, and Dark Grey<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>If you want to base all of the colors on your brand design then you can just take the colors from your logo by selecting:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The lightest shade on the logo, or the lightest shade of your main color<\/li><li>An eye-catching accent that complements the other colors, or simply the main color<\/li><li>The darkest shade on the logo, or the darkest shade of your main color<\/li><\/ul>\n\n\n\n<p>If you have a business with a purple logo, the site palette might look like this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"bcc400a2552378262fae0f0914c4e122\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-minimalist-color-palette-3-500x166.png\" alt=\"\" class=\"wp-image-2042741\"\/><div class=\"tb-image-caption\"><figcaption>A website color palette consisting of variations of Purple<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>If you are not familiar with design, you can also hire a graphics designer to create color scheme proposals from the logo you want to use.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to add colors to your site<\/h2>\n\n\n\n<p>To add the color palette you want, go to <strong>Appearance<\/strong> \u2192 <strong>Customize<\/strong> and find the <strong>Colors<\/strong> or <strong>Base Colors<\/strong> panel. Sometimes this has a different name or is located in different panels in the Customizer. Refer to your theme documentation if you aren\u2019t sure where it is.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"553548de49bbc9827e125369df2f1de0\"><img decoding=\"async\" width=\"373\" height=\"519\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-minimalist-color-palette-customizer.png\" alt=\"\" class=\"wp-image-2042751\" srcset=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-minimalist-color-palette-customizer.png 373w, https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-minimalist-color-palette-customizer-216x300.png 216w, https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-minimalist-color-palette-customizer-108x150.png 108w, https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-minimalist-color-palette-customizer-300x417.png 300w\" sizes=\"auto, (max-width: 373px) 100vw, 373px\" \/><div class=\"tb-image-caption\"><figcaption>Setting up the website palette in the Customizer<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>Some themes only offer basic color customization. If you need to customize all of your site colors, check that the theme you want to use allows this. You can also install plugins that add this functionality to your site.<\/p>\n\n\n\n<p>For more information, visit the <a href=\"https:\/\/wordpress.com\/support\/custom-colors\/\" target=\"_blank\" rel=\"noreferrer noopener\">official WordPress documentation about colors<\/a>.<\/p>\n","protected":false},"author":84277,"featured_media":2037931,"template":"","related-lesson":[8417],"class_list":["post-2037807","course-lesson","type-course-lesson","status-publish","has-post-thumbnail","hentry","related-lesson-designing"],"_links":{"self":[{"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/course-lesson\/2037807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/course-lesson"}],"about":[{"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/types\/course-lesson"}],"author":[{"embeddable":true,"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/users\/84277"}],"version-history":[{"count":8,"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/course-lesson\/2037807\/revisions"}],"predecessor-version":[{"id":2050725,"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/course-lesson\/2037807\/revisions\/2050725"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/media\/2037931"}],"wp:attachment":[{"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/media?parent=2037807"}],"wp:term":[{"taxonomy":"related-lesson","embeddable":true,"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/related-lesson?post=2037807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}