Open 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
$oc-(color)-(number)
@oc-(color)-(number)
oc-(color)-(number)
--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
@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); }
- Julia : OpenColor.jl
- Go : opencolor