Skip to content

Instantly share code, notes, and snippets.

@SalahHamza
Last active March 15, 2019 14:14
Show Gist options
  • Save SalahHamza/e9292a9d99d4be5705f526a99a228b70 to your computer and use it in GitHub Desktop.
Save SalahHamza/e9292a9d99d4be5705f526a99a228b70 to your computer and use it in GitHub Desktop.
CSS/SCSS Color Naming Convention

CSS/SCSS Color Naming Convention:

First suggestion

Overview

$color-alpha
$color-beta
$color-gamma
$color-psi
$color-omega

Dark & Light Variants

Most of the time there'll be dark and light variants of each color, in that case we can apply a --dark or --light modifiers. e.g:

$color-alpha
$color-alpha--dark
$color-alpha--light

Multiple Dark and Light Variants

In case there are more than one light or dark variants a number system can be applied, for example:

$color-alpha
$color-alpha--dark-1
$color-alpha--dark-2
//...
$color-alpha--dark-n

$color-alpha--light-1
$color-alpha--light-2
//...
$color-alpha--dark-n

dark-1 & light-1 being closest to the main color.

Resources

Second suggestion

Overview

$color-primary
$color-secondary
$color-accent
$color-semantic
$color-neutral

As mentioned in the first seggestion we can apply --dark and --light variants to each color and in case we have multiple variants we can use a numbering system, except for Semantic Colors & Neutral Colors.

Semantic Colors

Semantic colors should be described semantically:

$color-semantic--success
$color-semantic--error
$color-semantic--warning
$color-semantic--info

Neutral Colors

These colors are usually made for text and/over background. To do that, Material design has a good hack. Instead of defining specific code for black or grey, they use the opacity of black to apply typography value. In other words, no need to define grey color code, they adjust the opacity of black to 54% or 81% or so. Pretty smart, huh? — Anna Molly - Basic UI color guide

For neutral colors, since they are usually White, black or gray schemes, we can apply a numbering system "similar" to Material Design's color system, with 1 given to the lightest color in the neutral set:

$color-neutral--1
$color-neutral--2
//...
$color-neutral--n

Resources

Other Resources:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment