DEV Community

Cover image for Turn a single brand color into your own Complete Web Color System... in minutes!
Arnel Enero
Arnel Enero

Posted on


Turn a single brand color into your own Complete Web Color System... in minutes!

How many times have you neglected your app's UI just because you had a deadline, and you needed to focus on your app's functionality instead?

Color forms an important foundation of every UI. It enables consistent expression of your brand/identity and style, and effective communication of intent and meaning.

However, it can be quite daunting for developers like you and me to implement a proper color system, especially when this task has to contend with working on actual functionality of our app.

For Web developers, here's where Simpler Color could help. I wrote this small library so that we no longer have to sacrifice not having a cohesive, professional UI color system while focusing on the other important stuff.

And all you need is a single brand color...

Easy as 1-2-3

Step 1: Install simpler-color

npm install simpler-color
Enter fullscreen mode Exit fullscreen mode

Step 2: Specify your brand color, and it generates the rest of the base colors!

import { harmony } from 'simpler-color'

// Generate 5 harmonious base colors from your main brand color!
const baseColors = harmony('#609E3F')
Enter fullscreen mode Exit fullscreen mode

(You can also define your own custom base colors if you prefer, or if you already have a set of brand colors)

Step 3: Create your color scheme(s) by mapping UI roles to specific colors from the auto-generated palettes

import { colorScheme } from 'simpler-color'

const scheme = colorScheme(
  baseColors, // πŸ‘ˆ From these base colors...
  // πŸ‘‡ ...your color palettes are auto-generated
  colors => ({
    // πŸ‘‡ which you then map to UI roles.
    primaryButton: colors.primary(40),
    primaryButtonText: colors.primary(95),
    surface: colors.neutral(98),
    text: colors.neutral(10),
// Access various UI colors as `scheme.primaryButton` and so on.
Enter fullscreen mode Exit fullscreen mode

Here's the complete range of colors that our example code generates from a single color value of #609E3F:

Example color set auto-generated by Simpler Color library

It's that simple! (Plus the library can do quite a bit more.)

So why don't you give Simpler Color a try. Check it out on GitHub:

Please don't forget to give it a star ⭐️ on GitHub if you like the library, its concept and the simplicity.

If some terms used above sound a bit alien to you, check out the comprehensive README in the link above for more details.

Hope you find this library useful. With proper color, even an early prototype or proof-of-concept app would certainly impress!

Top comments (0)


11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!