Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yeun/open-color
Color scheme for UI design.
https://github.com/yeun/open-color
adobe-library color color-scheme scss stylus swatches
Last synced: 25 days ago
JSON representation
Color scheme for UI design.
- Host: GitHub
- URL: https://github.com/yeun/open-color
- Owner: yeun
- License: mit
- Created: 2016-08-06T16:10:41.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-12-10T16:29:40.000Z (11 months ago)
- Last Synced: 2024-04-14T10:00:48.508Z (7 months ago)
- Topics: adobe-library, color, color-scheme, scss, stylus, swatches
- Language: Handlebars
- Homepage: https://yeun.github.io/open-color/
- Size: 494 KB
- Stars: 5,196
- Watchers: 81
- Forks: 241
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - open-color
- made-in-korea - open-color
- awesome-discoveries - open-color - color scheme for UI design _(`CSS`)_ (Graphics)
- awesome-starred - yeun/open-color - Color scheme for UI design. (others)
- jimsghstars - yeun/open-color - Color scheme for UI design. (Handlebars)
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
## 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)
- Go : [opencolor](https://pkg.go.dev/github.com/jsynacek/go-open-color/opencolor)