Complexity Score
Low
Open Issues
N/A
Dependent Projects
64
Weekly Downloadsglobal
7,408
License
- MIT
- Yesattribution
- Permissivelinking
- Permissivedistribution
- Permissivemodification
- Nopatent grant
- Yesprivate use
- Permissivesublicensing
- Notrademark grant
Downloads
Readme
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
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
- Julia : OpenColor.jl
- Go : opencolor
Dependencies
No runtime dependency information found for this package.
CVE IssuesActive
0
Scorecards Score
2.50
Test Coverage
No Data
Follows Semver
Yes
Github Stars
5,295
Dependenciestotal
5
DependenciesOutdated
3
DependenciesDeprecated
0
Threat Modelling
No Data
Repo Audits
No Data
Learn how to distribute open-color in your own private NPM registry
18 Releases
NPM on Cloudsmith