5 Tools that add color to my Web Apps
Tags: tools, design
Published: 2020-05-21 11:54:48

<!-- wp:paragraph -->
<p>I'm bad with colors. It's one of those facts of Life, sorta how the sky is blue or pigs don't fly. It's one of my greatest artistic weakness (along with my inability to draw straight lines).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>However, humans are not the dominant species on the planet because of their ability or lack thereof, but because of their development and use of tools.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>So, in the spirit of the human spirit (🤫) of overcoming our inherent limitations, here are the tools I use to improve my <em>color grade</em>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>1. Coolors.co</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Coolors is a great tool for generating cool looking and complementary color schemes. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"full","id":75,"sizeSlug":"large"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://services.etin.space/notes/wp-content/uploads/2020/01/Screenshot-2020-01-04-at-1.34.39-PM-1024x525.png" alt="" class="wp-image-75"/><figcaption>Coolors.co Interface</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>It allows you ‘lock’ a color (or several) and then generate other colors that would go well with it or alternatively, generate your entire palette from scratch.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It also has a really cool feature for extracting color palettes from images.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Check it out <a href="https://coolors.co" target="_blank" rel="noreferrer noopener" aria-label="here (opens in a new tab)">here</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>2. Material.io Color Tool </h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Material Design isn't the dad it was a few years ago, but it remains hugely relevant as an approach to designing modern interfaces.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The Color Tool from Material.io allows you select a primary and secondary color and then let's you preview how these will look on different material design inspired layouts.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"full","id":73,"sizeSlug":"large"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://services.etin.space/notes/wp-content/uploads/2020/01/Screenshot-2020-01-04-at-1.36.35-PM-1024x526.png" alt="" class="wp-image-73"/><figcaption>The Color Tool from Material.io</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>The tool also provided tips on readability based on the color scheme you've selected. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Link <a href="https://material.io/resources/color/#!/" target="_blank" rel="noreferrer noopener" aria-label="here (opens in a new tab)">here</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>3. Material Palette</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Material Palette is another Material Design oriented tool. This one is a bit more interesting than the former in that it actively alters the colors you pick to make them fit better.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"full","id":74,"sizeSlug":"large"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://services.etin.space/notes/wp-content/uploads/2020/01/Screenshot-2020-01-04-at-1.35.25-PM-1024x523.png" alt="" class="wp-image-74"/><figcaption>Material Palette's generator.</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>After you pick two colors, it generates a palette of eight colors along with recommendations on how and where they should be used.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://www.materialpalette.com/" target="_blank" rel="noreferrer noopener" aria-label="Link (opens in a new tab)">Link</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>4. uiGradients</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>UIGradients provides a wide range of premade gradient backgrounds and allows you either download as an image or get the CSS rules to create the gradient in your app.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"full","id":76,"sizeSlug":"large"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://services.etin.space/notes/wp-content/uploads/2020/01/Screenshot-2020-01-04-at-1.43.33-PM-1024x525.png" alt="" class="wp-image-76"/><figcaption>uiGradient's selection</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Gradients are great alternative to solid color backgrounds, although you'll need to be careful to ensure that your app maintains it's readability.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://uigradients.com/#Flare" target="_blank" rel="noreferrer noopener" aria-label="Check it out (opens in a new tab)">Check it out</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>5. Subtle Patterns by TopTal</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Sometimes, I want to break the monotony of solid color backgrounds with getting anything too extravagant. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Subtle Patterns are great for that. The repository of several background images is maintained by TopTal and has found plenty of use in many of my projects.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"full","id":77,"sizeSlug":"large"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://services.etin.space/notes/wp-content/uploads/2020/01/Screenshot-2020-01-04-at-1.41.43-PM-1024x526.png" alt="" class="wp-image-77"/><figcaption>Toptal's Subtle Patterns</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>The site allows you search for patterns and offers a live preview of each background.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Convinced? <a rel="noreferrer noopener" aria-label="Give it a try. (opens in a new tab)" href="https://www.toptal.com/designers/subtlepatterns/" target="_blank">Give it a try.</a></p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Do you have different tools that you use to help with color/design issues in your web apps? I'd love to hear about them. I need all the help I can get. 😅.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Hit me up on Twitter! <a href="https://twitter.com/obasekietinosa" target="_blank" rel="noreferrer noopener" aria-label="@obasekietinosa (opens in a new tab)">@obasekietinosa</a></p>
<!-- /wp:paragraph -->