Open color is an
open-source color scheme
Optimized for UI like font, background, border, etc.

Version 1.9.1
MIT license

Goals

  • All colors shall have adequate use
  • Provide general color for UI design
  • All colors will be beautiful in itself and harmonious
  • At the same brightness level, the perceived brightness will be constant

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 Tailwind CSS

// tailwind.config.js      
module.exports = {
  presets: [require("./open-color.js")],
  purge: [],
  mode: "jit",
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

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);
  }

Contribution

Check out the list below.

Color value

  • open-color.json
    • Change and $ npm run compile-templates
  • docs/asset/download/open-color_*.*.*.aco
  • docs/asset/download/open-color_*.*.*.clr
  • Adobe library (admin rights)

Version number

  • package.json
  • docs/asset/download/open-color_*.*.*.aco
  • Adobe library (admin rights)

Document

  • README.md
  • docs/documents.html

Introduction

  • README.md