# open-color

> Open color scheme for web UI

Latest version **1.9.1** (published 2021-08-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install open-color
pnpm add open-color
yarn add open-color
bun add open-color
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.9.1 |
| Published | 2021-08-17 |
| First published | 2016-09-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 47.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5564 |
| Author | Jeong Heeyeun |
| Maintainers | sairion, heeyeun |
| Keywords | color, colorscheme, color swatches, SCSS, Less, Stylus, CSS |

## Links

- npm: https://www.npmjs.com/package/open-color
- Repository: https://github.com/yeun/open-color
- Issues: https://github.com/yeun/open-color/issues
- npm.io page: https://npm.io/package/open-color

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.9.1 (latest) — 2021-08-17
- 1.9.0 — 2021-08-17
- 1.8.0 — 2021-01-05
- 1.7.0 — 2019-06-02
- 1.6.3 — 2018-03-11
- 1.6.2 — 2017-12-26
- 1.6.1 — 2017-12-10
- 1.6.0 — 2017-12-10
- 1.5.1 — 2017-03-11
- 1.5.0 — 2017-03-11
- 1.4.2 — 2017-01-17
- 1.4.0 — 2016-10-03
- 1.3.2 — 2016-09-29
- 1.3.1 — 2016-09-29
- 1.2.1 — 2016-09-24
- … 3 more at https://npm.io/package/open-color/versions

## README

# Open color

Open color is an [open-source](https://en.wikipedia.org/wiki/Open-source_software) 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](https://yeun.github.io/open-color/asset/images/open-color.svg)

## 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

```sass
$oc-(color)-(number)
```

### Less

```less
@oc-(color)-(number)
```

### Stylus

```styl
oc-(color)-(number)
```
### CSS

```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**

```sass
@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**

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

```

**Example for Less**

```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**

```styl
@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**

```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

- Julia : [OpenColor.jl](https://github.com/appleparan/OpenColor.jl)

---
_Source: https://npm.io/package/open-color · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._