Color scheme for UI design

Back to Posts

Color scheme for UI design

Open color is a color scheme for UI design. You can use it for font, background, border etc.
Open color is provided as CSS, SCSS, LESS, Stylus, Adobe library, Photoshop/Illustrator swatches and Sketch palette.
* All the color is tested on deuteranopia and protanopia mode. The process will soon be published in the article.
* The colors are subject to change in the future. Thus, using an Open color as a main identity color is not recommended.

Installation

$ npm install open-color

Variable convention

  • SASS, SCSS:
    $oc-(color)-(number)
  • LESS:
    @oc-(color)-(number)
  • Stylus:
    oc-(color)-(number)
  • CSS:
    --oc-(color)-(number)
  • oc Abbreviation for Open color
  • (color) Color name like gray, red, lime ect.
  • (number) 0 to 9. 0 to 9. Brightness spectrum.

How to use

Import the file to your project and use the variables.

Example for SASS, SCSS

@import 'path/open-color';

.body {
  background-color: $oc-gray-0;
  color: $oc-gray-7;
}

a {
  color: $oc-teal-7;

  &:hover,
  &:focus,
  &:active {
    color: $oc-indigo-7;
  }
}

Example for LESS

@import 'path/open-color';

.body {
  background-color: @oc-gray-0;
  color: @oc-gray-7;
}

a {
  color: @oc-teal-7;

  &:hover,
  &:focus,
  &:active {
    color: @oc-indigo-7;
  }
}

Example for Stylus

@import 'path/open-color.styl'

.body
  background-color: oc-gray-0
  color: oc-gray-7

a
  color: oc-teal-7;

  &:hover
  &:focus
  &:active
    color: oc-indigo-7

Example for CSS

@import 'path/open-color.css';

.body {
  background-color: var(--oc-gray-0);
  color: var(--oc-gray-7);
}

a {
  color: var(--oc-teal-7);
}

a:hover,
a:focus,
a:active {
  color: var(--oc-indigo-7);
}

[button size='large' style='' text='Knoe more' icon='' icon_color='' link='https://yeun.github.io/open-color/' target='_blank' color='' hover_color='' border_color='' hover_border_color='' background_color='' hover_background_color='' font_style='' font_weight='' text_align='' margin='']
Back to Posts