Open color scheme for web UI
npm install open-colorOpen color is an open-source color scheme optimized for UI like font, background, border, etc.
- 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.
```
$ npm install open-color`
or`
$ bower install open-color
CSS, Sass, Less, Stylus, JSON, SVG, TeX, Open Color Tools (.oco), PowerPaint (.rcpx), Sketch (.sketchpalette), Inkscape, aco, clr, Tailwind, TypeScript
`sass`
$oc-(color)-(number)
`less`
@oc-(color)-(number)
`styl`
oc-(color)-(number)$3
`css`
--oc-(color)-(number)
---
- oc: Abbreviation for Open color(color)
- : Color name such as gray, red, lime, etc.(number)
- : 0 to 9. Brightness spectrum.
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);
}
``
- Julia : OpenColor.jl