open-color
    TypeScript icon, indicating that this package has built-in type declarations

    1.9.1 • Public • Published

    Open color

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

    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

    Note

    • The colors are subject to change in the future. Thus, using an Open color as a main identity color is not recommended.

    Available Colors

    available colors

    Installation

    $ npm install open-color
    

    or

    $ bower install open-color
    

    Currently Supported Formats, Language Environments, Libraries

    CSS, Sass, Less, Stylus, JSON, SVG, TeX, Open Color Tools (.oco), PowerPaint (.rcpx), Sketch (.sketchpalette), Inkscape, aco, clr, Tailwind, TypeScript

    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 such as gray, red, lime, etc.
    • (number): 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

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

    Other Language Bindings

    Install

    npm i open-color

    DownloadsWeekly Downloads

    10,248

    Version

    1.9.1

    License

    MIT

    Unpacked Size

    48.4 kB

    Total Files

    10

    Last publish

    Collaborators

    • sairion
    • heeyeun