├── .github └── FUNDING.yml ├── .gitignore ├── .npmignore ├── .travis.yml ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── bower.json ├── build_release ├── builder ├── ase.js ├── base.js ├── craft-library.js ├── gvswatch.js ├── templated.js └── util │ ├── color.js │ └── string.js ├── compile-templates.js ├── docs ├── _config.yml ├── _includes │ └── shortcuts.html ├── _layouts │ └── default.html ├── _sass │ ├── _carbonads.scss │ ├── _cover.scss │ ├── _grid.scss │ ├── _ingredients.scss │ ├── _layout.scss │ ├── _mobile.scss │ ├── _navbar.scss │ ├── _open-color.scss │ ├── _posts.scss │ ├── _shortcuts.scss │ ├── _swatches.scss │ └── _variables.scss ├── asset │ ├── download │ │ ├── open-color_1.6.3.aco │ │ ├── open-color_1.6.3.ase │ │ ├── open-color_1.6.3.clr │ │ ├── open-color_1.6.3.gpl │ │ ├── open-color_1.6.3.gvswatch │ │ ├── open-color_1.6.3.library.zip │ │ ├── open-color_1.6.3.sketchpalette │ │ ├── open-color_1.7.0.ase │ │ ├── open-color_1.7.0.code-snippets │ │ ├── open-color_1.7.0.gpl │ │ ├── open-color_1.7.0.gvswatch │ │ ├── open-color_1.7.0.library.zip │ │ ├── open-color_1.7.0.sketchpalette │ │ ├── open-color_1.8.0.ase │ │ ├── open-color_1.8.0.code-snippets │ │ ├── open-color_1.8.0.gpl │ │ ├── open-color_1.8.0.gvswatch │ │ ├── open-color_1.8.0.library.zip │ │ ├── open-color_1.8.0.sketchpalette │ │ ├── open-color_1.9.0.ase │ │ ├── open-color_1.9.0.code-snippets │ │ ├── open-color_1.9.0.gpl │ │ ├── open-color_1.9.0.gvswatch │ │ ├── open-color_1.9.0.library.zip │ │ ├── open-color_1.9.0.sketchpalette │ │ ├── open-color_1.9.1.ase │ │ ├── open-color_1.9.1.code-snippets │ │ ├── open-color_1.9.1.gpl │ │ ├── open-color_1.9.1.gvswatch │ │ ├── open-color_1.9.1.library.zip │ │ └── open-color_1.9.1.sketchpalette │ ├── favicon │ │ ├── apple-touch-icon-144x144.png │ │ ├── apple-touch-icon-152x152.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon.ico │ │ └── mstile-144x144.png │ └── images │ │ ├── logo.svg │ │ ├── og-image.png │ │ └── open-color.svg ├── chromatic-colors.html ├── documents.html ├── google0904dd74a74c9d91.html ├── gray-color.html ├── index.html ├── ingredients.html ├── params.json └── stylesheets │ ├── normalize.css │ └── style.scss ├── open-color.css ├── open-color.d.ts ├── open-color.js ├── open-color.json ├── open-color.less ├── open-color.oco ├── open-color.rcpx ├── open-color.scss ├── open-color.styl ├── open-color.tex ├── package-lock.json ├── package.json ├── templates ├── _config.yml.hbs ├── open-color.code-snippets.hbs ├── open-color.css.hbs ├── open-color.d.ts.hbs ├── open-color.inkscape.hbs ├── open-color.js.hbs ├── open-color.less.hbs ├── open-color.oco.hbs ├── open-color.rcpx.hbs ├── open-color.scss.hbs ├── open-color.sketchpalette.hbs ├── open-color.styl.hbs ├── open-color.svg.hbs └── open-color.tex.hbs └── tests └── typescript.ts /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: yeun # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: heeyeun # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | custom: # Replace with a single custom sponsorship URL 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | docs/.sass-cache/ 2 | docs/_site/ 3 | .DS_Store 4 | *.log 5 | node_modules 6 | yarn.lock 7 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | docs/ 2 | templates/ 3 | builder/ 4 | build_release 5 | .travis.yml 6 | CONTRIBUTING.md 7 | compile-templates.js 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: bash 2 | before_deploy: 3 | - ./build_release 4 | deploy: 5 | skip_cleanup: true 6 | provider: releases 7 | api_key: 8 | secure: RNpxzRSgCzyxofenxx8lalWgyAaKu8mh0DLugJdrk/nTH6ryNNnMKdQ7GAtR6IOWQKZkmEedH39qxDxRb84r4NzW/Ul5Yvug1UWc845PVb+K/m5yqE0E54oL43OcHHryD26iSU4tg8HjqVBWbC1W13FuMcOh/tvjwabogVVZAO99KGRTpe8KQYRiK4A1DsSjtF1gaToPW0BramsL8Qiy8cH85NvqQCm/d/8M9pfXGH1h7jqL2SyDJXYG25T4G+LZWC1wiqKnuVi+NMGnaLQPVUbxBcr7iTcdnLExIqbMel9YODeFqzjfF1LbJ6v+hz16fDTsZyEUeiXJR3sSo7UUYIqAE/OqBw8Pct21PyriBCIK87Jn/yqGThLBMyBbJBAjBLHDK7Xzlo7MhH9MBTMLq722YmeVkPVdRQ51/2uSuDVKiw6o4H+UllhWIoUteJt9QDg20JgADpjyoXldDbMynfyh/NmlOm+FlhoOl9yeQf50SpB7b9kWRi2X7QDeXYNkN7wu/jt0OOtjU1Z8LUp2luQZRBF/gg7DQhIfx0HNTALdYYCG/tq7HPXEAIRMvC1ls33DjfP+dVlwRbutogeuzd9qorsTha1Vg91uFwHgCUSUjOCachvxKvynG11DOas2RB1JYUBKeWNRpM3Mpr1A8Sq03qRBurS9XHQDOiosh4c= 9 | file: 10 | - release/open-color.zip 11 | on: 12 | tags: true 13 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Open Color 2 | 3 | Hi! We could use your help. Let us help you help us. Or something. 4 | 5 | ## General 6 | 7 | 1. If you are looking for a place to begin, **please send PRs for bugfixes instead of new features.** 8 | 9 | 2. **Help with documentation is always appreciated**. 10 | 11 | 3. Please **be courteous and constructive** when commenting on issues, commits, and pull requests. 12 | 13 | ## Bug Reports & Issues 14 | 15 | 1. When reporting a bug, please **provide steps to reproduce**. If possible, show code. 16 | 17 | 2. If you report a bug, and it is inactive for a significant amount of time, it may be closed. **Please respond promptly to requests for more information**. 18 | 19 | ## Pull Requests 20 | 21 | 1. Before sending a large PR, it's recommended to **create an issue to propose the change**. Nobody wants to write a book of code and throw it away. 22 | 23 | 2. Due to the above, before creating a PR for a new feature, **create an issue to propose the feature.** 24 | 25 | 3. Please **respect existing coding conventions**, whatever those may be. 26 | 27 | 4. If your PR has been waiting in limbo for some time, it's very helpful to **rebase against master**, which will make it easier to merge. 28 | 29 | 7. **Always run `npm run compile-templates` before sending a PR.** 30 | 31 | ## Source Control 32 | 33 | 1. Please **squash your commits** when sending a pull request. If you are unfamiliar with this process, see [this guide](https://help.github.com/articles/about-git-rebase/). If you have already pushed your changesets and are squashing thereafter, this may necessitate the use of a "force push". Please [read the docs](http://git-scm.com/docs/git-push) before you attempt this. 34 | 35 | ## Adding new languages 36 | 37 | 1. To add support for an additional language, create a [handlebars](http://handlebarsjs.com/) template in the [`/templates` directory](https://github.com/yeun/open-color/tree/master/templates). 38 | 39 | 2. The template naming scheme should follow `open-color.ext.hbs` where `ext` is the file extension of the new language (Example: a `svg` templates should use `open-color.svg.hbs`). 40 | 41 | 3. Register your new template in the [compile-templates file](https://github.com/yeun/open-color/blob/master/compile-templates.js) by adding a call to the `templatedBuilder.build` function: 42 | 43 | ```js 44 | templatedBuilder.build('open-color.ext', 45 | [path.join(__dirname, 'open-color.ext')]); 46 | ``` 47 | 48 | __Note__ if you want to add support for a new binary file format, please orient yourself at the usage of our [`.ase` builder](https://github.com/yeun/open-color/blob/master/builder/ase.js). 49 | 50 | ## TL;DR 51 | 52 | **Be kind, be diligent, look before you leap into a PR, and follow common community conventions**. 53 | 54 | *- The Open Color Team* 55 | 56 | *this contributing guide is heavily inspired by [mocha](https://github.com/mochajs/mocha/blob/master/CONTRIBUTING.md)* -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 heeyeun 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Open color 2 | 3 | Open color is an [open-source](https://en.wikipedia.org/wiki/Open-source_software) color scheme optimized for UI like font, background, border, etc. 4 | 5 | ## Goals 6 | 7 | - All colors shall have adequate use 8 | - Provide general color for UI design 9 | - All colors will be beautiful in itself and harmonious 10 | - At the same brightness level, the perceived brightness will be constant 11 | 12 | **Note** 13 | 14 | * The colors are subject to change in the future. Thus, using an Open color as a main identity color is not recommended. 15 | 16 | ## Available Colors 17 | 18 | ![available colors](https://yeun.github.io/open-color/asset/images/open-color.svg) 19 | 20 | ## Installation 21 | 22 | ``` 23 | $ npm install open-color 24 | ``` 25 | or 26 | ``` 27 | $ bower install open-color 28 | ``` 29 | 30 | ## Currently Supported Formats, Language Environments, Libraries 31 | 32 | CSS, Sass, Less, Stylus, JSON, SVG, TeX, Open Color Tools (.oco), PowerPaint (.rcpx), Sketch (.sketchpalette), Inkscape, aco, clr, Tailwind, TypeScript 33 | 34 | ## Variable Convention 35 | 36 | ### Sass, SCSS 37 | 38 | ```sass 39 | $oc-(color)-(number) 40 | ``` 41 | 42 | ### Less 43 | 44 | ```less 45 | @oc-(color)-(number) 46 | ``` 47 | 48 | ### Stylus 49 | 50 | ```styl 51 | oc-(color)-(number) 52 | ``` 53 | ### CSS 54 | 55 | ```css 56 | --oc-(color)-(number) 57 | ``` 58 | 59 | --- 60 | 61 | - `oc`: Abbreviation for Open color 62 | - `(color)`: Color name such as gray, red, lime, etc. 63 | - `(number)`: 0 to 9. Brightness spectrum. 64 | 65 | ## How to Use 66 | 67 | Import the file to your project and use the variables. 68 | 69 | **Example for Sass, SCSS** 70 | 71 | ```sass 72 | @import 'path/open-color'; 73 | 74 | .body { 75 | background-color: $oc-gray-0; 76 | color: $oc-gray-7; 77 | } 78 | 79 | a { 80 | color: $oc-teal-7; 81 | 82 | &:hover, 83 | &:focus, 84 | &:active { 85 | color: $oc-indigo-7; 86 | } 87 | } 88 | ``` 89 | 90 | **Example for Tailwind CSS** 91 | 92 | ```js 93 | module.exports = { 94 | presets: [require("./open-color.js")], 95 | purge: [], 96 | mode: "jit", 97 | darkMode: false, 98 | theme: { 99 | extend: {}, 100 | }, 101 | variants: { 102 | extend: {}, 103 | }, 104 | plugins: [], 105 | }; 106 | 107 | ``` 108 | 109 | **Example for Less** 110 | 111 | ```less 112 | @import 'path/open-color'; 113 | 114 | .body { 115 | background-color: @oc-gray-0; 116 | color: @oc-gray-7; 117 | } 118 | 119 | a { 120 | color: @oc-teal-7; 121 | 122 | &:hover, 123 | &:focus, 124 | &:active { 125 | color: @oc-indigo-7; 126 | } 127 | } 128 | ``` 129 | 130 | **Example for Stylus** 131 | 132 | ```styl 133 | @import 'path/open-color.styl' 134 | 135 | .body 136 | background-color: oc-gray-0 137 | color: oc-gray-7 138 | 139 | a 140 | color: oc-teal-7 141 | 142 | &:hover 143 | &:focus 144 | &:active 145 | color: oc-indigo-7 146 | ``` 147 | 148 | **Example for CSS** 149 | 150 | ```css 151 | @import 'path/open-color.css'; 152 | 153 | .body { 154 | background-color: var(--oc-gray-0); 155 | color: var(--oc-gray-7); 156 | } 157 | 158 | a { 159 | color: var(--oc-teal-7); 160 | } 161 | 162 | a:hover, 163 | a:focus, 164 | a:active { 165 | color: var(--oc-indigo-7); 166 | } 167 | ``` 168 | 169 | ## Other Language Bindings 170 | 171 | - Julia : [OpenColor.jl](https://github.com/appleparan/OpenColor.jl) 172 | - Go : [opencolor](https://pkg.go.dev/github.com/jsynacek/go-open-color/opencolor) 173 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "open-color", 3 | "description": "Open color scheme for web UI", 4 | "main": [ 5 | "open-color.scss", 6 | "open-color.styl", 7 | "open-color.less", 8 | "open-color.css", 9 | "open-color.js" 10 | ], 11 | "authors": [ 12 | "Jeong Heeyeun " 13 | ], 14 | "license": "MIT", 15 | "keywords": [ 16 | "color", 17 | "colorscheme", 18 | "swatches", 19 | "SCSS", 20 | "Less", 21 | "Stylus", 22 | "Tailwind", 23 | "CSS" 24 | ], 25 | "homepage": "https://github.com/yeun/open-color", 26 | "ignore": [ 27 | "docs", 28 | "builder", 29 | "templates", 30 | "builder", 31 | "node_modules", 32 | "bower_components", 33 | "package.json", 34 | "CONTRIBUTING.md", 35 | "build_release", 36 | "**/.*", 37 | "*.js" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /build_release: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | set -e 3 | 4 | release_tag="${TRAVIS_TAG:-"$(git tag | tail -n 1)"}"; 5 | project_root="$(pwd)"; 6 | release_base_dir="$project_root/release"; 7 | 8 | mkdir -p "$release_base_dir"; 9 | zip release/open-color.zip open-color.css open-color.js open-color.less open-color.scss open-color.styl 10 | 11 | echo "Release $release_tag"; 12 | echo "${TRAVIS_REPO_SLUG:-"origin"}/${TRAVIS_BRANCH:-"master"}"; 13 | echo "release done."; 14 | -------------------------------------------------------------------------------- /builder/ase.js: -------------------------------------------------------------------------------- 1 | const BaseBuilder = require('./base'); 2 | const ase = require('ase-utils'); 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | const {capitalize} = require('./util/string'); 6 | 7 | function hex2rgb(hex) { 8 | var bigint = parseInt(hex.substring(1), 16); 9 | return [(bigint >> 16) & 255, (bigint >> 8) & 255, (bigint >> 0) & 255]; 10 | } 11 | 12 | class AseBuilder extends BaseBuilder { 13 | constructor(colors, version, templatesDir = path.join(__dirname, '..', 'templates')) { 14 | super(...arguments); 15 | 16 | const inputColors = Object.keys(colors) 17 | .filter(name => typeof colors[name] !== 'string') 18 | .map(name => colors[name].map((hex, index) => ({ 19 | "name": `${capitalize(name)} 0${index} ${hex.toUpperCase()}`, 20 | "model": "RGB", 21 | "color": hex2rgb(hex).map(value => value / 255), 22 | "type": "global" 23 | }))) 24 | .reduce((a, b) => a.concat(b), []); 25 | 26 | this.aseColors = { 27 | version: '1.0', 28 | groups: [], 29 | colors: inputColors 30 | }; 31 | } 32 | 33 | build(file, outputPaths) { 34 | const buffer = ase.encode(this.aseColors); 35 | 36 | outputPaths.forEach(outputPath => 37 | fs.writeFileSync(path.join(outputPath), buffer)); 38 | } 39 | } 40 | 41 | module.exports = AseBuilder; -------------------------------------------------------------------------------- /builder/base.js: -------------------------------------------------------------------------------- 1 | class BaseBuilder{ 2 | constructor(colors, version) { 3 | this.colors = colors; 4 | this.version = version; 5 | } 6 | 7 | build(file, outputPaths, extraData = {}){ 8 | 9 | } 10 | } 11 | 12 | module.exports = BaseBuilder; -------------------------------------------------------------------------------- /builder/craft-library.js: -------------------------------------------------------------------------------- 1 | const uuidV4 = require('uuid/v4'); 2 | const BaseBuilder = require('./base'); 3 | const {hex2rgb} = require('./util/color'); 4 | const {capitalize} = require('./util/string'); 5 | const fs = require('fs'); 6 | const path = require('path'); 7 | const archiver = require('archiver'); 8 | 9 | function hex2rgba255(string) { 10 | const {r, g, b} = hex2rgb(string); 11 | return {r: r / 255, g: g / 255, b: b / 255, a: 1} 12 | } 13 | 14 | /** 15 | * How craft library expects the directory to look like: 16 | * 17 | * Open Color.library 18 | * ├── ${UUIDv4}.color 19 | * │   └── metadata.json 20 | * └── metadata.json 21 | * 22 | * What the /metadata.json should look like: 23 | * { 24 | * // "package" name 25 | * name: `Open Color v ${this.version}`, 26 | * // some modification timestamp 27 | * modificationTime: Date.now(), 28 | * // categories that the package includes (uses locked to not be editable inside sketch) 29 | * categories: [{name: 'Colors', type: 'color', locked: true}], 30 | * // color groups, i.e. reds, greens, blues, ... 31 | * groups: colorGroups 32 | * } 33 | * 34 | * what each /${UUIDv4}.color/metadata.json should look like: 35 | * { 36 | * // color name 37 | * "name": "Cyan 9" 38 | * // color channels, 39 | * "color": { 40 | * "r": 0.043137254901960784, 41 | * "g": 0.4470588235294118, 42 | * "b": 0.5215686274509804, 43 | * "a": 1 44 | * }, 45 | * // index inside the group 46 | * "secondaryIndex": 9, 47 | * // global color group index 48 | * "index": 9, 49 | * // hardcoded craft category 50 | * "category": "Colors" 51 | * } 52 | * 53 | */ 54 | class CraftLibraryBuilder extends BaseBuilder { 55 | constructor(colors, version) { 56 | super(...arguments); 57 | 58 | this.generalColors = Object.keys(colors) 59 | .filter(name => typeof colors[name] === 'string') 60 | .map((name, index) => ({ 61 | name: capitalize(name), 62 | index, 63 | category: 'Colors', 64 | color: hex2rgba255(colors[name]) 65 | })); 66 | 67 | const swatches = Object.keys(colors) 68 | .filter(name => typeof colors[name] !== 'string'); 69 | 70 | this.groups = swatches 71 | .map((name, index) => ({ 72 | index: this.generalColors.length + index, 73 | name: capitalize(name), 74 | category: 'Colors' 75 | })); 76 | 77 | this.colorSwatches = swatches 78 | .map((name, index) => 79 | colors[name].map((hex, colorIndex) => ({ 80 | name: `${capitalize(name)} ${colorIndex}`, 81 | color: hex2rgba255(hex), 82 | secondaryIndex: colorIndex, 83 | index: this.generalColors.length + index, 84 | category: 'Colors' 85 | }))) 86 | .reduce((all, colors) => all.concat(colors), []); 87 | 88 | this.metadata = { 89 | name: `Open Color v ${this.version}`, 90 | modificationTime: Date.now(), 91 | categories: [{name: 'Colors', type: 'color', locked: true}], 92 | groups: this.groups 93 | }; 94 | } 95 | 96 | buildColorArchive(path) { 97 | const pathPrefix = 'Open Color.library'; 98 | const output = fs.createWriteStream(`${path}.zip`); 99 | const archive = archiver('zip', { 100 | zlib: {level: 9} 101 | }); 102 | 103 | output.on('close', () => console.log(`Build Craft library archive (${archive.pointer()} total bytes)`)); 104 | archive.on('error', (err) => { 105 | throw err; 106 | }); 107 | archive.pipe(output); 108 | 109 | archive.append(JSON.stringify(this.metadata), {name: `${pathPrefix}/metadata.json`}); 110 | [...this.generalColors, ...this.colorSwatches] 111 | .forEach(color => archive.append(JSON.stringify(color), {name: `${pathPrefix}/${uuidV4()}.color/metadata.json`})); 112 | 113 | archive.finalize(); 114 | } 115 | 116 | build(outputPaths) { 117 | outputPaths.forEach(path => this.buildColorArchive(path)); 118 | } 119 | } 120 | 121 | module.exports = CraftLibraryBuilder; -------------------------------------------------------------------------------- /builder/gvswatch.js: -------------------------------------------------------------------------------- 1 | const BaseBuilder = require('./base'); 2 | const {hex2rgb} = require('./util/color'); 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | const zlib = require('zlib'); 6 | 7 | /** 8 | * GVSWATCH file format: 9 | * 10 | * - gzipped json file: 11 | * 12 | * interface GVSwatch { 13 | * "@": "swatch", 14 | * "_pt": string; 15 | * } 16 | * interface GVSwatchFile { 17 | * '@': 'swatches'; 18 | * '$': GVSwatch[]; 19 | * } 20 | * 21 | * - _pt is `C#[${r},${g},${b}] 22 | * 23 | */ 24 | class GVSwatchBuilder extends BaseBuilder { 25 | constructor(colors, version) { 26 | super(...arguments); 27 | 28 | const colorNames = Object.keys(colors); 29 | const hexColors = Object.keys(colors) 30 | // transform to list of colors/colors lists 31 | .map(name => typeof colors[name] === 'string' ? colors[name] : colors[name]) 32 | .reduce((all, hex) => all.concat(hex), []) 33 | .map(hex => hex2rgb(hex)); 34 | 35 | this.gvswatch = JSON.stringify({ 36 | "@": "swatches", 37 | "$": hexColors.map(({r, g, b}) => ({'@': 'swatch', '_pt': `C#[${r},${g},${b}]`})) 38 | }); 39 | } 40 | 41 | build(outputPaths) { 42 | const gzipped = zlib.gzipSync(Buffer.from(this.gvswatch, 'utf8')); 43 | 44 | outputPaths.forEach(outputPath => 45 | fs.writeFileSync(path.join(outputPath), gzipped)); 46 | } 47 | } 48 | 49 | module.exports = GVSwatchBuilder; -------------------------------------------------------------------------------- /builder/templated.js: -------------------------------------------------------------------------------- 1 | const Handlebars = require('handlebars'); 2 | const BaseBuilder = require('./base'); 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | const {hex2rgb} = require('./util/color'); 6 | const {capitalize} = require('./util/string'); 7 | 8 | let hbsArgs = (fn) => (...values) => fn(...values.slice(0, -1)); 9 | 10 | Handlebars.registerHelper('capitalize', capitalize); 11 | Handlebars.registerHelper('eq', (a, b) => a === b); 12 | Handlebars.registerHelper('and', (a, b) => a && b); 13 | Handlebars.registerHelper('join', (a, b) => a.join(b)); 14 | Handlebars.registerHelper('add', hbsArgs((...values) => values.reduce((a, b) => a + b, 0))); 15 | Handlebars.registerHelper('sub', (a, b) => a - b); 16 | Handlebars.registerHelper('div', (a, b) => a / b); 17 | Handlebars.registerHelper('mul', (a, b) => a * b); 18 | Handlebars.registerHelper('upper', (a) => a.toUpperCase()); 19 | Handlebars.registerHelper('apply', hbsArgs((fn, ...args) => fn.apply(undefined, args))); 20 | Handlebars.registerHelper('hex2rgb', hex2rgb); 21 | Handlebars.registerHelper('block-params', function() { 22 | var args = [], 23 | options = arguments[arguments.length - 1]; 24 | for (var i = 0; i < arguments.length - 1; i++) { 25 | args.push(arguments[i]); 26 | } 27 | 28 | return options.fn(this, {data: options.data, blockParams: args}); 29 | }); 30 | 31 | class TemplatedBuilder extends BaseBuilder { 32 | constructor(colors, version, templatesDir = path.join(__dirname, '..', 'templates')) { 33 | super(...arguments); 34 | 35 | this.templatesDir = templatesDir; 36 | this.colorsArray = Object.keys(colors) 37 | .filter(name => typeof colors[name] !== 'string') 38 | .map(name => ({name, hex: colors[name]})); 39 | this.generalColors = Object.keys(colors) 40 | .filter(name => typeof colors[name] === 'string') 41 | .map(name => ({name, hex: colors[name]})); 42 | 43 | this.spectrum = this.colorsArray[0].hex.length - 1; 44 | } 45 | 46 | 47 | build(file, outputPaths, extraData = {}){ 48 | const template = fs.readFileSync(path.join(this.templatesDir, `${file}.hbs`), {encoding: 'utf8'}); 49 | const compile = Handlebars.compile(template); 50 | 51 | const compiled = compile({ 52 | version: this.version, 53 | colors: this.colorsArray, 54 | general: this.generalColors, 55 | spectrum: this.spectrum, 56 | filter: extraData.filter ? extraData.filter : color => color 57 | }); 58 | 59 | outputPaths.forEach(outputPath => 60 | fs.writeFileSync(path.join(outputPath), compiled)); 61 | } 62 | } 63 | 64 | module.exports = TemplatedBuilder; -------------------------------------------------------------------------------- /builder/util/color.js: -------------------------------------------------------------------------------- 1 | function hex2rgb(hex) { 2 | const bigint = parseInt(hex.substring(1), 16); 3 | return {r: (bigint >> 16) & 255, g: (bigint >> 8) & 255, b: bigint & 255}; 4 | } 5 | 6 | module.exports = {hex2rgb}; -------------------------------------------------------------------------------- /builder/util/string.js: -------------------------------------------------------------------------------- 1 | function capitalize(text){ 2 | return text.charAt(0).toUpperCase() + text.slice(1); 3 | } 4 | 5 | module.exports = {capitalize}; -------------------------------------------------------------------------------- /compile-templates.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const pkg = require('./package.json'); 3 | 4 | const TemplatedBuilder = require('./builder/templated'); 5 | const AseBuilder = require('./builder/ase'); 6 | const CraftLibraryBuilder = require('./builder/craft-library'); 7 | const GVSwatchBuilder = require('./builder/gvswatch'); 8 | 9 | const COLORS_FILE = path.join(__dirname, 'open-color.json'); 10 | 11 | const colors = require(COLORS_FILE); 12 | 13 | const templatedBuilder = new TemplatedBuilder(colors, pkg.version); 14 | const aseBuilder = new AseBuilder(colors, pkg.version); 15 | const craftLibraryBuilder = new CraftLibraryBuilder(colors, pkg.version); 16 | const gvswatchBuilder = new GVSwatchBuilder(colors, pkg.version); 17 | 18 | templatedBuilder.build('_config.yml', 19 | [path.join(__dirname, 'docs', '_config.yml')]); 20 | templatedBuilder.build('open-color.scss', 21 | [path.join(__dirname, 'open-color.scss'), path.join(__dirname, 'docs', '_sass', '_open-color.scss')]); 22 | templatedBuilder.build('open-color.css', 23 | [path.join(__dirname, 'open-color.css')]); 24 | templatedBuilder.build('open-color.js', 25 | [path.join(__dirname, 'open-color.js')]); 26 | templatedBuilder.build('open-color.less', 27 | [path.join(__dirname, 'open-color.less')]); 28 | templatedBuilder.build('open-color.styl', 29 | [path.join(__dirname, 'open-color.styl')]); 30 | templatedBuilder.build('open-color.svg', 31 | [path.join(__dirname, 'docs', 'asset', 'images', 'open-color.svg')]); 32 | templatedBuilder.build('open-color.tex', 33 | [path.join(__dirname, 'open-color.tex')]); 34 | 35 | templatedBuilder.build('open-color.sketchpalette', 36 | [path.join(__dirname, 'docs', 'asset', 'download', `open-color_${pkg.version}.sketchpalette`)]); 37 | 38 | templatedBuilder.build('open-color.inkscape', 39 | [path.join(__dirname, 'docs', 'asset', 'download', `open-color_${pkg.version}.gpl`)]); 40 | 41 | templatedBuilder.build('open-color.code-snippets', 42 | [path.join(__dirname, 'docs', 'asset', 'download', `open-color_${pkg.version}.code-snippets`)]); 43 | 44 | aseBuilder.build('ase', 45 | [path.join(__dirname, 'docs', 'asset', 'download', `open-color_${pkg.version}.ase`)]); 46 | 47 | craftLibraryBuilder.build( 48 | [path.join(__dirname, 'docs', 'asset', 'download', `open-color_${pkg.version}.library`)]); 49 | 50 | gvswatchBuilder.build( 51 | [path.join(__dirname, 'docs', 'asset', 'download', `open-color_${pkg.version}.gvswatch`)]) 52 | 53 | templatedBuilder.build('open-color.oco', 54 | [path.join(__dirname, 'open-color.oco')]); 55 | 56 | templatedBuilder.build('open-color.rcpx', 57 | [path.join(__dirname, 'open-color.rcpx')]); 58 | 59 | templatedBuilder.build('open-color.d.ts', 60 | [path.join(__dirname, 'open-color.d.ts')]); 61 | 62 | templatedBuilder.build('open-color.js', 63 | [path.join(__dirname, 'open-color.js')]); 64 | -------------------------------------------------------------------------------- /docs/_config.yml: -------------------------------------------------------------------------------- 1 | baseurl: /open-color 2 | host: 0.0.0.0 3 | markdown: kramdown 4 | highlighter: rouge 5 | 6 | oc-version: 1.9.1 7 | colors: [ 8 | "gray", 9 | "red", 10 | "pink", 11 | "grape", 12 | "violet", 13 | "indigo", 14 | "blue", 15 | "cyan", 16 | "teal", 17 | "green", 18 | "lime", 19 | "yellow", 20 | "orange" 21 | ] 22 | 23 | gray-hexs: [ 24 | "#f8f9fa", 25 | "#f1f3f5", 26 | "#e9ecef", 27 | "#dee2e6", 28 | "#ced4da", 29 | "#adb5bd", 30 | "#868e96", 31 | "#495057", 32 | "#343a40", 33 | "#212529" 34 | ] 35 | 36 | red-hexs: [ 37 | "#fff5f5", 38 | "#ffe3e3", 39 | "#ffc9c9", 40 | "#ffa8a8", 41 | "#ff8787", 42 | "#ff6b6b", 43 | "#fa5252", 44 | "#f03e3e", 45 | "#e03131", 46 | "#c92a2a" 47 | ] 48 | 49 | pink-hexs: [ 50 | "#fff0f6", 51 | "#ffdeeb", 52 | "#fcc2d7", 53 | "#faa2c1", 54 | "#f783ac", 55 | "#f06595", 56 | "#e64980", 57 | "#d6336c", 58 | "#c2255c", 59 | "#a61e4d" 60 | ] 61 | 62 | grape-hexs: [ 63 | "#f8f0fc", 64 | "#f3d9fa", 65 | "#eebefa", 66 | "#e599f7", 67 | "#da77f2", 68 | "#cc5de8", 69 | "#be4bdb", 70 | "#ae3ec9", 71 | "#9c36b5", 72 | "#862e9c" 73 | ] 74 | 75 | violet-hexs: [ 76 | "#f3f0ff", 77 | "#e5dbff", 78 | "#d0bfff", 79 | "#b197fc", 80 | "#9775fa", 81 | "#845ef7", 82 | "#7950f2", 83 | "#7048e8", 84 | "#6741d9", 85 | "#5f3dc4" 86 | ] 87 | 88 | indigo-hexs: [ 89 | "#edf2ff", 90 | "#dbe4ff", 91 | "#bac8ff", 92 | "#91a7ff", 93 | "#748ffc", 94 | "#5c7cfa", 95 | "#4c6ef5", 96 | "#4263eb", 97 | "#3b5bdb", 98 | "#364fc7" 99 | ] 100 | 101 | blue-hexs: [ 102 | "#e7f5ff", 103 | "#d0ebff", 104 | "#a5d8ff", 105 | "#74c0fc", 106 | "#4dabf7", 107 | "#339af0", 108 | "#228be6", 109 | "#1c7ed6", 110 | "#1971c2", 111 | "#1864ab" 112 | ] 113 | 114 | cyan-hexs: [ 115 | "#e3fafc", 116 | "#c5f6fa", 117 | "#99e9f2", 118 | "#66d9e8", 119 | "#3bc9db", 120 | "#22b8cf", 121 | "#15aabf", 122 | "#1098ad", 123 | "#0c8599", 124 | "#0b7285" 125 | ] 126 | 127 | teal-hexs: [ 128 | "#e6fcf5", 129 | "#c3fae8", 130 | "#96f2d7", 131 | "#63e6be", 132 | "#38d9a9", 133 | "#20c997", 134 | "#12b886", 135 | "#0ca678", 136 | "#099268", 137 | "#087f5b" 138 | ] 139 | 140 | green-hexs: [ 141 | "#ebfbee", 142 | "#d3f9d8", 143 | "#b2f2bb", 144 | "#8ce99a", 145 | "#69db7c", 146 | "#51cf66", 147 | "#40c057", 148 | "#37b24d", 149 | "#2f9e44", 150 | "#2b8a3e" 151 | ] 152 | 153 | lime-hexs: [ 154 | "#f4fce3", 155 | "#e9fac8", 156 | "#d8f5a2", 157 | "#c0eb75", 158 | "#a9e34b", 159 | "#94d82d", 160 | "#82c91e", 161 | "#74b816", 162 | "#66a80f", 163 | "#5c940d" 164 | ] 165 | 166 | yellow-hexs: [ 167 | "#fff9db", 168 | "#fff3bf", 169 | "#ffec99", 170 | "#ffe066", 171 | "#ffd43b", 172 | "#fcc419", 173 | "#fab005", 174 | "#f59f00", 175 | "#f08c00", 176 | "#e67700" 177 | ] 178 | 179 | orange-hexs: [ 180 | "#fff4e6", 181 | "#ffe8cc", 182 | "#ffd8a8", 183 | "#ffc078", 184 | "#ffa94d", 185 | "#ff922b", 186 | "#fd7e14", 187 | "#f76707", 188 | "#e8590c", 189 | "#d9480f" 190 | ] 191 | 192 | -------------------------------------------------------------------------------- /docs/_includes/shortcuts.html: -------------------------------------------------------------------------------- 1 |
2 | 9 |
-------------------------------------------------------------------------------- /docs/_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Open Color 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 48 | 49 | 50 |
51 |
52 | 53 |
54 | 55 | 56 | 100 |
101 |
102 |
103 | 104 |
105 |
106 |
107 |

108 | Open color is an
109 | open-source 110 | color scheme 111 |
Optimized for UI like font, background, border, etc.
112 |

113 |
114 |
115 | Version {{ site.oc-version }} 116 |
117 |
118 | MIT license 119 |
120 |
121 |
122 | 123 |
124 |
125 |
126 | {{ content }} 127 |
128 | 129 | 130 | -------------------------------------------------------------------------------- /docs/_sass/_carbonads.scss: -------------------------------------------------------------------------------- 1 | #carbonads { 2 | display: none; 3 | float: right; 4 | overflow: hidden; 5 | text-transform: none; 6 | font-size: 12px; 7 | line-height: 1.5; 8 | 9 | @media (max-width: 543px) { 10 | margin-top: 50px; 11 | } 12 | } 13 | 14 | .carbon-text { 15 | color: $oc-gray-6; 16 | transition: all .2s ease-out; 17 | 18 | &:hover, 19 | &:focus, 20 | &:active { 21 | color: $text-color; 22 | } 23 | } 24 | 25 | #carbonads span { 26 | display: block; 27 | overflow: hidden; 28 | } 29 | 30 | .carbon-img { 31 | display: block; 32 | margin-bottom: 10px; 33 | 34 | img { 35 | border-radius: 2px; 36 | } 37 | 38 | @media (max-width: 543px) { 39 | display: inline-block; 40 | margin-bottom: 0; 41 | } 42 | } 43 | 44 | .carbon-text { 45 | display: block; 46 | text-align: left; 47 | 48 | @media (max-width: 543px) { 49 | display: inline-block; 50 | width: calc(100% - 130px); 51 | padding-left: 20px; 52 | vertical-align: top; 53 | } 54 | } 55 | 56 | a.carbon-poweredby { 57 | display: block; 58 | margin-top: 10px; 59 | font-size: 11px; 60 | color: $oc-gray-6; 61 | 62 | &:hover, 63 | &:focus, 64 | &:active { 65 | color: $text-color; 66 | } 67 | 68 | @media (max-width: 543px) { 69 | margin-top: -22px; 70 | line-height: 2; 71 | margin-left: 150px; 72 | } 73 | } -------------------------------------------------------------------------------- /docs/_sass/_cover.scss: -------------------------------------------------------------------------------- 1 | .cover { 2 | padding: 100px 0; 3 | border-bottom: $border-base; 4 | 5 | h1 { 6 | margin: 0 40px 40px 0; 7 | font-weight: 600; 8 | color: $text-color; 9 | font-size: 36px; 10 | line-height: 1.2; 11 | 12 | .sub { 13 | padding-top: 20px; 14 | font-size: 18px; 15 | font-weight: 400; 16 | color: $text-color-gray; 17 | line-height: 1.5; 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /docs/_sass/_grid.scss: -------------------------------------------------------------------------------- 1 | // 2 | // 3 | // 𝗚 𝗥 𝗜 𝗗 4 | // 5 | // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 6 | 7 | 8 | @mixin clearfix() { 9 | &:before, 10 | &:after { 11 | content: " "; // 1 12 | display: table; // 2 13 | } 14 | &:after { 15 | clear: both; 16 | } 17 | } 18 | 19 | .clearfix { 20 | @include clearfix(); 21 | } 22 | 23 | // Container 24 | // ─────────────────────────────────── 25 | 26 | .container { 27 | margin-left: auto; 28 | margin-right: auto; 29 | @include clearfix(); 30 | 31 | padding-left: $container-padding-base; 32 | padding-right: $container-padding-base; 33 | @media (max-width: 543px) { 34 | padding-left: $container-padding-lg; 35 | padding-right: $container-padding-lg; 36 | } 37 | 38 | max-width: $container-max-width; 39 | @media (min-width: $container-max-width-lg) { 40 | max-width: $container-max-width-lg; 41 | } 42 | } 43 | 44 | 45 | // Row 46 | // ─────────────────────────────────── 47 | 48 | @mixin make-row { 49 | margin-left: ($grid-gutter-width / -2); 50 | margin-right: ($grid-gutter-width / -2); 51 | @include clearfix(); 52 | } 53 | 54 | .row { 55 | @include make-row; 56 | } 57 | 58 | // Columns 59 | // ─────────────────────────────────── 60 | 61 | @mixin make-col($size: 100%) { 62 | position: relative; 63 | min-height: 1px; 64 | padding-right: ($grid-gutter-width / 2); 65 | padding-left: ($grid-gutter-width / 2); 66 | float: left; 67 | width: $size; 68 | } -------------------------------------------------------------------------------- /docs/_sass/_ingredients.scss: -------------------------------------------------------------------------------- 1 | .color-tables { 2 | padding-top: 40px; 3 | margin-bottom: 60px; 4 | } 5 | 6 | .value-table { 7 | border-collapse: separate; 8 | font-size: 14px; 9 | width: 100%; 10 | 11 | thead > tr > th { 12 | padding-top: 10px; 13 | padding-bottom: 10px; 14 | text-transform: uppercase; 15 | font-size: 14px; 16 | letter-spacing: 0.04em; 17 | line-height: 1; 18 | color: $text-color; 19 | } 20 | 21 | tbody > tr > td { 22 | border-top: 1px solid $oc-gray-2; 23 | } 24 | 25 | tr > th, 26 | tr > td { 27 | padding: 8px 12px; 28 | text-align: right; 29 | background-color: transparent; 30 | transition: background-color 0.2s ease-out; 31 | font-family: $font-family-headline; 32 | width: calc(100% / 8); 33 | color: $text-color-gray; 34 | transition: all 0.2s ease-out; 35 | 36 | &.level { 37 | text-align: left; 38 | } 39 | 40 | &:first-child { 41 | padding-left: 0; 42 | } 43 | 44 | & > .color-preview { 45 | display: inline-block; 46 | margin-right: 4px; 47 | width: 16px; 48 | height: 16px; 49 | border-radius: 3px; 50 | vertical-align: text-top; 51 | } 52 | } 53 | 54 | 55 | tr > td.level { 56 | min-width: 110px; 57 | text-transform: uppercase; 58 | letter-spacing: $letter-spacing-sm; 59 | color: $text-color; 60 | font-weight: 500; 61 | } 62 | 63 | > tbody > tr { 64 | transition: all 0.2s ease-out; 65 | 66 | &:hover { 67 | background-color: $oc-gray-0; 68 | 69 | > th, 70 | > td { 71 | color: $text-color; 72 | 73 | &.rgb-red { 74 | color: $oc-pink-6; 75 | } 76 | 77 | &.rgb-green { 78 | color: $oc-teal-6; 79 | } 80 | 81 | &.rgb-blue { 82 | color: $oc-indigo-6; 83 | } 84 | } 85 | } 86 | } 87 | 88 | @media (max-width: 879px) { 89 | margin-left: -$container-padding-base; 90 | margin-right: -$container-padding-base; 91 | width: 100vw; 92 | 93 | thead > tr > th, 94 | tbody > tr > td { 95 | 96 | &:first-child { 97 | padding-left: $container-padding-base; 98 | } 99 | 100 | &:last-child { 101 | padding-right: $container-padding-base; 102 | } 103 | } 104 | } 105 | } 106 | 107 | -------------------------------------------------------------------------------- /docs/_sass/_layout.scss: -------------------------------------------------------------------------------- 1 | .col-half { 2 | @include make-col(); 3 | 4 | @media (min-width: 768px) { 5 | @include make-col(50%); 6 | } 7 | } 8 | 9 | .blog-logo { 10 | @include make-col(25%); 11 | 12 | @media (min-width: 768px) { 13 | @include make-col(20%); 14 | } 15 | 16 | @media (min-width: 1600px) { 17 | @include make-col(10%); 18 | } 19 | } 20 | 21 | .cover { 22 | @include make-row; 23 | } 24 | 25 | .cover-content { 26 | @include make-col(); 27 | 28 | @media (min-width: 544px) { 29 | @include make-col(75%); 30 | } 31 | @media (min-width: 768px) { 32 | @include make-col(80%); 33 | } 34 | } 35 | 36 | #carbonads { 37 | @include make-col(); 38 | 39 | @media (min-width: 544px) { 40 | @include make-col(25%); 41 | } 42 | @media (min-width: 768px) { 43 | @include make-col(20%); 44 | } 45 | } 46 | 47 | .shortcut-wrap { 48 | .shortcut-menus { 49 | height: 232px; 50 | -webkit-column-count: 2; 51 | -moz-column-count: 2; 52 | column-count: 2; 53 | -webkit-column-gap: 4px; 54 | -moz-column-gap: 4px; 55 | column-gap: 4px; 56 | -moz-column-fill: auto; 57 | column-fill: auto; 58 | 59 | @media (min-width: 544px) { 60 | height: 150px; 61 | -webkit-column-count: 4; 62 | -moz-column-count: 4; 63 | column-count: 4; 64 | } 65 | 66 | @media (min-width: 768px) { 67 | height: 110px; 68 | -webkit-column-count: 5; 69 | -moz-column-count: 5; 70 | column-count: 5; 71 | } 72 | 73 | @media (min-width: 1600px) { 74 | height: 80px; 75 | -webkit-column-count: 10; 76 | -moz-column-count: 10; 77 | column-count: 10; 78 | } 79 | } 80 | } 81 | 82 | .color-chips { 83 | @extend .row; 84 | } 85 | 86 | .color-chip { 87 | @include make-col(); 88 | 89 | @media (min-width: 544px) { 90 | @include make-col(25%); 91 | } 92 | 93 | @media (min-width: 768px) { 94 | @include make-col(20%); 95 | } 96 | 97 | @media (min-width: 1600px) { 98 | @include make-col(10%); 99 | } 100 | } 101 | 102 | .docs-section, 103 | .introduction-section { 104 | @media (min-width: 544px) { 105 | @include make-col(75%); 106 | } 107 | 108 | @media (min-width: 768px) { 109 | @include make-col(80%); 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /docs/_sass/_mobile.scss: -------------------------------------------------------------------------------- 1 | @media (max-width: 543px) { 2 | // cover 3 | // ------------------------- 4 | 5 | .cover { 6 | padding: 20px 0; 7 | 8 | h1 { 9 | margin-bottom: 30px; 10 | font-size: 26px; 11 | 12 | .sub { 13 | padding-top: 10px; 14 | font-size: 15px; 15 | } 16 | } 17 | 18 | .version, 19 | .license { 20 | display: inline-block; 21 | float: left; 22 | margin-right: 20px; 23 | } 24 | } 25 | 26 | 27 | // shortcut 28 | // ------------------------- 29 | .shortcut-wrap { 30 | padding: 10px 0; 31 | } 32 | 33 | // swatches 34 | // ------------------------- 35 | 36 | $color-chip-height: 50px; 37 | 38 | .color-group, 39 | .color-tables { 40 | margin-top: 3vw; 41 | margin-bottom: 5vw; 42 | padding-top: 2vw; 43 | padding-bottom: 5vw; 44 | } 45 | 46 | .color-title { 47 | margin-bottom: 5vw; 48 | padding: 2vw 0; 49 | font-size: 20px; 50 | } 51 | 52 | .color-chips { 53 | -webkit-column-count: 2; 54 | -moz-column-count: 2; 55 | column-count: 2; 56 | -webkit-column-gap: 4px; 57 | -moz-column-gap: 4px; 58 | column-gap: 4px; 59 | -moz-column-fill: auto; 60 | column-fill: auto; 61 | } 62 | 63 | .color-chip { 64 | margin-bottom: 4vw; 65 | } 66 | 67 | .color-chip-bg { 68 | width: $color-chip-height; 69 | height: $color-chip-height; 70 | float: left; 71 | border-radius: 6px; 72 | } 73 | 74 | .color-name, 75 | .color-hex { 76 | width: calc(100% - #{$color-chip-height}); 77 | float: left; 78 | } 79 | 80 | .color-name { 81 | padding: 8px 0 0 12px; 82 | } 83 | 84 | .color-hex { 85 | padding: 2px 0 2px 12px; 86 | } 87 | 88 | // color tables 89 | .value-table { 90 | margin-left: -$container-padding-lg; 91 | margin-right: -$container-padding-lg; 92 | width: 100vw; 93 | 94 | thead > tr > th, 95 | tbody > tr > td { 96 | padding: 12px; 97 | font-size: 14px; 98 | 99 | &:first-child { 100 | padding-left: $container-padding-lg; 101 | } 102 | 103 | &:nth-child(5) { 104 | padding-right: $container-padding-lg; 105 | } 106 | 107 | &:nth-child(6), 108 | &:nth-child(7), 109 | &:nth-child(8) { 110 | display: none; 111 | } 112 | } 113 | } 114 | // ripple effect 115 | @keyframes ripple { 116 | 0% { 117 | width: 0; 118 | height: 0; 119 | opacity: 0; 120 | } 121 | 122 | 100% { 123 | width: 0; 124 | height: 0; 125 | opacity: 0; 126 | } 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /docs/_sass/_navbar.scss: -------------------------------------------------------------------------------- 1 | a.blog-logo { 2 | display: inline-block; 3 | height: 63px; 4 | background: url('../asset/images/logo.svg') no-repeat; 5 | background-size: 40px 40px; 6 | background-position: center left; 7 | vertical-align: top; 8 | } 9 | 10 | .metadata { 11 | padding: 0; 12 | color: $text-color-gray; 13 | font-size: 12px; 14 | font-weight: 400; 15 | line-height: 18px; 16 | } 17 | 18 | .nav-menus-wrap { 19 | display: inline-block; 20 | margin: 0; 21 | padding: 0; 22 | float: right; 23 | } 24 | 25 | .nav-menus-group { 26 | position: relative; 27 | margin: 0; 28 | list-style: none; 29 | float: left; 30 | 31 | &:hover, 32 | &:focus, 33 | &:active { 34 | .nav-menus { 35 | display: block; 36 | } 37 | } 38 | } 39 | 40 | .menus-title { 41 | display: inline-block; 42 | margin: 10px 5px; 43 | padding: 10px 25px 13px; 44 | font-size: 14px; 45 | color: $nav-color; 46 | background-color: transparent; 47 | border: none; 48 | border-radius: 22px; 49 | transition: font-weight 0.2s ease, 50 | background-color 0.2s ease, 51 | color 0.2s ease; 52 | 53 | &:hover { 54 | color: $nav-color-highlight; 55 | background-color: $oc-gray-1; 56 | } 57 | &:focus, 58 | &:active, 59 | &.active { 60 | color: $nav-color-highlight; 61 | font-weight: $font-weight-b; 62 | background-color: $oc-gray-1; 63 | } 64 | } 65 | 66 | .nav-menus { 67 | position: absolute; 68 | top: 100%; 69 | left: 6px; 70 | z-index: 1000; 71 | display: none; // none by default, but block on "open" of the menu 72 | float: left; 73 | min-width: 160px; 74 | margin: 0; // override default ul 75 | padding: 8px 0; 76 | list-style: none; 77 | font-size: 12px; 78 | background-color: $oc-white; 79 | border: 1px solid $oc-gray-4; 80 | border-radius: 4px; 81 | box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); 82 | background-clip: padding-box; 83 | line-height: 24px; 84 | 85 | // Links within the dropdown menu 86 | > li > a { 87 | display: block; 88 | min-width: 160px; 89 | padding: 1px 40px 1px 20px; 90 | clear: both; 91 | font-size: 14px; 92 | font-weight: normal; 93 | color: $nav-color; 94 | line-height: 2.5; 95 | white-space: nowrap; 96 | transition: background 0.2s ease, 97 | color 0.2s ease; 98 | 99 | &:hover, 100 | &:focus, 101 | &:active { 102 | background-color: $oc-gray-0; 103 | color: $nav-color-highlight; 104 | } 105 | } 106 | } 107 | 108 | 109 | // Responsive menu 110 | // ─────────────────────────────────── 111 | 112 | #navbar-toggle, 113 | .navbar-toggle { 114 | display: none; 115 | } 116 | 117 | .navbar-toggle { 118 | z-index: 2; 119 | margin-bottom: 0; //Remove default `ul` style 120 | padding: 0; 121 | width: auto; 122 | font-weight: 400; 123 | float: right; 124 | 125 | &:hover:after { 126 | color: $nav-color-highlight; 127 | font-weight: 700; 128 | } 129 | 130 | &:after { 131 | content: 'MENU'; 132 | display: inline-block; 133 | margin-right: -4.8vw; 134 | padding: 15px 30px; 135 | background: transparent; 136 | text-align: center; 137 | font-size: 13px; 138 | color: $nav-color-highlight; 139 | line-height: 2.5; 140 | -webkit-transition: all 0.5s linear; 141 | -moz-transition: all 0.5s linear; 142 | -o-transition: all 0.5s linear; 143 | transition: all 0.5s linear; 144 | -webkit-box-sizing: border-box; 145 | -moz-box-sizing: border-box; 146 | box-sizing: border-box; 147 | } 148 | } 149 | 150 | #navbar-toggle:checked + .navbar-toggle:after { 151 | color: $nav-color-highlight; 152 | font-weight: 700; 153 | } 154 | 155 | @media only screen and (max-width: $topnav-collapse-width) { 156 | .navbar-toggle { 157 | display: inline-block; 158 | position: relative; 159 | cursor: pointer; 160 | -webkit-touch-callout: none; 161 | -webkit-user-select: none; 162 | user-select: none; 163 | } 164 | 165 | #navbar-toggle:checked ~ .nav-menus-wrap { 166 | display: block; 167 | opacity: 1; 168 | } 169 | 170 | .nav-menus-wrap { 171 | @include clearfix; 172 | display: none; 173 | opacity: 0; 174 | margin-left: 0; 175 | padding: 20px 0; 176 | z-index: 1; 177 | background: $oc-white; 178 | text-align: center; 179 | padding-top: 70px; 180 | } 181 | 182 | .nav-menus-group, 183 | .menus-title, 184 | .nav-menus { 185 | width: 100%; 186 | } 187 | 188 | .nav-menus-group { 189 | margin-bottom: 10px; 190 | } 191 | 192 | .menus-title:not(.menus-github){ 193 | &, 194 | &:hover, 195 | &:focus, 196 | &:active, 197 | &.active { 198 | margin: 0 0 10px; 199 | padding: 10px 0; 200 | color: $nav-color-highlight; 201 | font-weight: $font-weight-b; 202 | } 203 | } 204 | 205 | .menus-github { 206 | margin: 0; 207 | padding: 20px 0; 208 | border: 1px solid $oc-gray-4; 209 | border-radius: 3px; 210 | } 211 | 212 | .nav-menus { 213 | display: block; 214 | position: relative; 215 | left: 0; 216 | text-align: center; 217 | border: none; 218 | box-shadow: none; 219 | padding: 0; 220 | 221 | .nav-menu { 222 | padding: 6px 0; 223 | } 224 | } 225 | } 226 | -------------------------------------------------------------------------------- /docs/_sass/_posts.scss: -------------------------------------------------------------------------------- 1 | .docs-section, 2 | .introduction-section { 3 | padding: 40px 0; 4 | @include clearfix; 5 | } 6 | 7 | .docs-title, 8 | .introduction-title { 9 | margin-top: 0; 10 | margin-bottom: 30px; 11 | font-size: 24px; 12 | font-weight: $font-weight-b; 13 | line-height: 1.5; 14 | 15 | @media (max-width: 543px) { 16 | font-size: 20px; 17 | } 18 | } 19 | 20 | .docs-content, 21 | .introduction-content { 22 | font-size: 20px; 23 | line-height: 1.6; 24 | 25 | @media (max-width: 543px) { 26 | font-size: 16px; 27 | } 28 | 29 | h5 { 30 | font-size: 16px; 31 | margin-top: 0; 32 | } 33 | p { 34 | margin-top: 0; 35 | } 36 | 37 | ul { 38 | padding-left: 1.5em; 39 | } 40 | 41 | li .list-title { 42 | font-weight: $font-weight-b; 43 | width: 100px; 44 | display: inline-block; 45 | } 46 | 47 | .row { 48 | margin-left: -15px; 49 | margin-right: -15px; 50 | 51 | .col-half { 52 | padding-left: 15px; 53 | padding-right: 15px; 54 | } 55 | } 56 | 57 | .example { 58 | margin-top: 2em; 59 | margin-bottom: 2em; 60 | 61 | @for $number from 0 through $oc-color-spectrum { 62 | @each $color in map-get($oc-gray-list, "#{$number}") { 63 | .color-gray-#{$number} { 64 | color: $color; 65 | } 66 | .bg-gray-#{$number} { 67 | background-color: $color; 68 | } 69 | .box.border-gray-#{$number} { 70 | border: 1px solid $color; 71 | } 72 | } 73 | } 74 | 75 | .box { 76 | padding: 2em 0; 77 | text-align: center; 78 | border-radius: 4px; 79 | margin-bottom: 10px; 80 | display: block; 81 | width: 100%; 82 | border: 1px solid transparent; 83 | transition: background-color 0.2s ease; 84 | 85 | > .box { 86 | margin: 2em 2em 0; 87 | width: auto; 88 | } 89 | 90 | &.button { 91 | background: $oc-white; 92 | border: 1px solid $oc-gray-4; 93 | 94 | &:hover, 95 | &:focus, 96 | &:active { 97 | background-color: $oc-gray-1; 98 | } 99 | 100 | &.bg-gray-0 { 101 | background-color: $oc-gray-0; 102 | &:hover, 103 | &:focus, 104 | &:active { 105 | background-color: $oc-gray-2; 106 | } 107 | } 108 | } 109 | } 110 | } 111 | } 112 | 113 | .highlight { 114 | margin-left: 0; 115 | margin-right: 0; 116 | padding: 20px 30px; 117 | background-color: $oc-gray-0; 118 | border-radius: 4px; 119 | } 120 | 121 | pre { 122 | display: block; 123 | margin-top: 0; 124 | margin-bottom: 0; 125 | padding: 0; 126 | line-height: $line-height-base; 127 | white-space: pre; /* css-3 */ 128 | white-space: -moz-pre; /* Mozilla, since 1999 */ 129 | white-space: -pre; /* Opera 4-6 */ 130 | white-space: -o-pre; /* Opera 7 */ 131 | word-wrap: break-word; /* Internet Explorer 5.5+ */ 132 | word-break: break-all; 133 | 134 | code { 135 | margin: 0; 136 | padding: 0; 137 | font-size: inherit; 138 | white-space: pre-wrap; 139 | word-break: break-all; 140 | background-color: transparent; 141 | border-radius: 0; 142 | } 143 | } -------------------------------------------------------------------------------- /docs/_sass/_shortcuts.scss: -------------------------------------------------------------------------------- 1 | .shortcut-wrap { 2 | padding: 20px 0; 3 | 4 | .shortcut-menus { 5 | list-style: none; 6 | margin-top: 0; 7 | margin-bottom: 0; 8 | padding: 0; 9 | } 10 | 11 | a.shortcut { 12 | display: block; 13 | padding: 6px 0; 14 | width: 100%; 15 | font-size: 12px; 16 | color: $text-color-gray; 17 | font-weight: 400; 18 | text-transform: uppercase; 19 | letter-spacing: $letter-spacing-sm; 20 | transition: all 0.2s ease-out; 21 | 22 | @each $color-list, $selector in $oc-color-list { 23 | $font-color: map-get($color-list , "7"); 24 | &.#{$selector} { 25 | &:hover, 26 | &:focus, 27 | &:active { 28 | @if $selector == "gray" { 29 | color: $text-color; 30 | } @else { 31 | color: #{$font-color}; 32 | } 33 | } 34 | } 35 | .list-color { 36 | display: inline-block; 37 | margin-top: -2px; 38 | margin-right: 10px; 39 | width: 12px; 40 | height: 12px; 41 | border-radius: 3px; 42 | vertical-align: middle; 43 | } 44 | 45 | .list-color-#{$selector} { 46 | background: $font-color; 47 | } 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /docs/_sass/_swatches.scss: -------------------------------------------------------------------------------- 1 | 2 | .color-wrap { 3 | display: inline-block; 4 | } 5 | 6 | .color-group { 7 | padding-top: 40px; 8 | } 9 | 10 | .color-title { 11 | margin: 0 0 30px; 12 | font-size: 24px; 13 | text-transform: capitalize; 14 | font-weight: $font-weight-b; 15 | line-height: 1.5; 16 | 17 | span { 18 | margin-right: 0.5em; 19 | } 20 | } 21 | 22 | .color-chips { 23 | text-align: center; 24 | } 25 | 26 | .color-chip { 27 | margin-bottom: 40px; 28 | line-height: 1.25; 29 | 30 | input[type="text"] { 31 | border: none; 32 | font-family: $font-family-mono; 33 | background-color: transparent; 34 | } 35 | } 36 | 37 | .color-name { 38 | padding: 14px 3px 2px; 39 | text-transform: uppercase; 40 | text-align: left; 41 | font-size: 14px; 42 | font-weight: 500; 43 | } 44 | 45 | .color-hex { 46 | padding: 2px 3px; 47 | width: 100%; 48 | font-size: 14px; 49 | color: $text-color-gray; 50 | line-height: 1.3; 51 | } 52 | 53 | 54 | // Style sample 55 | $style-list: ( 56 | "color": color, 57 | "bg": background-color, 58 | "border": border-color 59 | ); 60 | 61 | .color-chip-bg { 62 | height: 80px; 63 | border-radius: 2px; 64 | position: relative; 65 | cursor: pointer; 66 | 67 | span { 68 | position: absolute; 69 | top: 0; 70 | left: 0; 71 | margin: 10px; 72 | font-size: 12px; 73 | text-transform: uppercase; 74 | } 75 | } 76 | 77 | .color-chip-bg:hover { 78 | transform: scale(0.92); 79 | } 80 | 81 | // ripple 82 | // ─────────────────────────────────── 83 | .ripple { 84 | &:before { 85 | content: ''; 86 | position: absolute; 87 | top: 50%; 88 | left: 50%; 89 | width: 0; 90 | height: 0; 91 | transform: translate(-50%, -50%); 92 | border-radius: 50%; 93 | background-color: $oc-white; 94 | visibility: hidden; 95 | z-index: 2; 96 | } 97 | 98 | &:not(:active):before { 99 | animation: ripple .3s cubic-bezier(0, .4, .8, 1); 100 | transition: visibility .2s step-end; 101 | } 102 | 103 | &:active:before { 104 | visibility: visible; 105 | } 106 | } 107 | 108 | // ripple animation 109 | // ─────────────────────────────────── 110 | @keyframes ripple { 111 | 0% { 112 | width: 0; 113 | height: 0; 114 | opacity: 0; 115 | } 116 | 117 | 100% { 118 | width: 212px; 119 | height: 212px; 120 | opacity: .18; 121 | } 122 | } 123 | 124 | @each $color in map-keys($oc-color-list) { 125 | @for $number from 0 through $oc-color-spectrum { 126 | @each $color-value in map-get($color, #{$number}) { 127 | @each $color-name in map-get($oc-color-list, $color) { 128 | .bg-#{$color-name}-#{$number} { 129 | background-color: #{$color-value}; 130 | } 131 | } 132 | } 133 | } 134 | } 135 | 136 | -------------------------------------------------------------------------------- /docs/_sass/_variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // Grid 3 | // ─────────────────────────────────── 4 | 5 | $container-padding-base: 4%; 6 | $container-padding-lg: ($container-padding-base * 1.2); 7 | $grid-gutter-width: 4px; 8 | $container-max-width: 1000px; 9 | $container-max-width-lg: 1600px; 10 | $topnav-collapse-width: 870px; 11 | 12 | 13 | // Typography 14 | // ─────────────────────────────────── 15 | 16 | $font-family-base: -apple-system, BlinkMacSystemFont, Lato, "Segoe UI", Verdana, Arial, sans-serif; 17 | $font-family-headline: $font-family-base; 18 | $font-family-mono: 'Roboto Mono', monospace; 19 | 20 | $font-size-base: 14px; 21 | $line-height-base: 1.5; 22 | $font-weight-b: 700; 23 | $letter-spacing-base: 0.1em; 24 | $letter-spacing-lg: 0.3em; 25 | $letter-spacing-sm: 0.05em; 26 | 27 | $text-color: $oc-gray-7; 28 | $text-color-gray: $oc-gray-6; 29 | 30 | $link-color: $oc-blue-5; 31 | $link-hover-color: $oc-blue-7; 32 | 33 | $nav-color: $oc-gray-6; 34 | $nav-color-highlight: $oc-gray-7; 35 | 36 | 37 | // ─────────────────────────────────── 38 | 39 | $selection-bg: $oc-gray-2; 40 | $border-base: 1px solid $oc-gray-3; 41 | 42 | -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.6.3.aco: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/download/open-color_1.6.3.aco -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.6.3.ase: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/download/open-color_1.6.3.ase -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.6.3.clr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/download/open-color_1.6.3.clr -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.6.3.gpl: -------------------------------------------------------------------------------- 1 | GIMP Palette 2 | Name: Open Color Palette 1.6.3 3 | Columns: 0 4 | # 5 | 248 249 250 gray0 6 | 241 243 245 gray1 7 | 233 236 239 gray2 8 | 222 226 230 gray3 9 | 206 212 218 gray4 10 | 173 181 189 gray5 11 | 134 142 150 gray6 12 | 73 80 87 gray7 13 | 52 58 64 gray8 14 | 33 37 41 gray9 15 | 255 245 245 red0 16 | 255 227 227 red1 17 | 255 201 201 red2 18 | 255 168 168 red3 19 | 255 135 135 red4 20 | 255 107 107 red5 21 | 250 82 82 red6 22 | 240 62 62 red7 23 | 224 49 49 red8 24 | 201 42 42 red9 25 | 255 240 246 pink0 26 | 255 222 235 pink1 27 | 252 194 215 pink2 28 | 250 162 193 pink3 29 | 247 131 172 pink4 30 | 240 101 149 pink5 31 | 230 73 128 pink6 32 | 214 51 108 pink7 33 | 194 37 92 pink8 34 | 166 30 77 pink9 35 | 248 240 252 grape0 36 | 243 217 250 grape1 37 | 238 190 250 grape2 38 | 229 153 247 grape3 39 | 218 119 242 grape4 40 | 204 93 232 grape5 41 | 190 75 219 grape6 42 | 174 62 201 grape7 43 | 156 54 181 grape8 44 | 134 46 156 grape9 45 | 243 240 255 violet0 46 | 229 219 255 violet1 47 | 208 191 255 violet2 48 | 177 151 252 violet3 49 | 151 117 250 violet4 50 | 132 94 247 violet5 51 | 121 80 242 violet6 52 | 112 72 232 violet7 53 | 103 65 217 violet8 54 | 95 61 196 violet9 55 | 237 242 255 indigo0 56 | 219 228 255 indigo1 57 | 186 200 255 indigo2 58 | 145 167 255 indigo3 59 | 116 143 252 indigo4 60 | 92 124 250 indigo5 61 | 76 110 245 indigo6 62 | 66 99 235 indigo7 63 | 59 91 219 indigo8 64 | 54 79 199 indigo9 65 | 231 245 255 blue0 66 | 208 235 255 blue1 67 | 165 216 255 blue2 68 | 116 192 252 blue3 69 | 77 171 247 blue4 70 | 51 154 240 blue5 71 | 34 139 230 blue6 72 | 28 126 214 blue7 73 | 25 113 194 blue8 74 | 24 100 171 blue9 75 | 227 250 252 cyan0 76 | 197 246 250 cyan1 77 | 153 233 242 cyan2 78 | 102 217 232 cyan3 79 | 59 201 219 cyan4 80 | 34 184 207 cyan5 81 | 21 170 191 cyan6 82 | 16 152 173 cyan7 83 | 12 133 153 cyan8 84 | 11 114 133 cyan9 85 | 230 252 245 teal0 86 | 195 250 232 teal1 87 | 150 242 215 teal2 88 | 99 230 190 teal3 89 | 56 217 169 teal4 90 | 32 201 151 teal5 91 | 18 184 134 teal6 92 | 12 166 120 teal7 93 | 9 146 104 teal8 94 | 8 127 91 teal9 95 | 235 251 238 green0 96 | 211 249 216 green1 97 | 178 242 187 green2 98 | 140 233 154 green3 99 | 105 219 124 green4 100 | 81 207 102 green5 101 | 64 192 87 green6 102 | 55 178 77 green7 103 | 47 158 68 green8 104 | 43 138 62 green9 105 | 244 252 227 lime0 106 | 233 250 200 lime1 107 | 216 245 162 lime2 108 | 192 235 117 lime3 109 | 169 227 75 lime4 110 | 148 216 45 lime5 111 | 130 201 30 lime6 112 | 116 184 22 lime7 113 | 102 168 15 lime8 114 | 92 148 13 lime9 115 | 255 249 219 yellow0 116 | 255 243 191 yellow1 117 | 255 236 153 yellow2 118 | 255 224 102 yellow3 119 | 255 212 59 yellow4 120 | 252 196 25 yellow5 121 | 250 176 5 yellow6 122 | 245 159 0 yellow7 123 | 240 140 0 yellow8 124 | 230 119 0 yellow9 125 | 255 244 230 orange0 126 | 255 232 204 orange1 127 | 255 216 168 orange2 128 | 255 192 120 orange3 129 | 255 169 77 orange4 130 | 255 146 43 orange5 131 | 253 126 20 orange6 132 | 247 103 7 orange7 133 | 232 89 12 orange8 134 | 217 72 15 orange9 135 | -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.6.3.gvswatch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/download/open-color_1.6.3.gvswatch -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.6.3.library.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/download/open-color_1.6.3.library.zip -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.6.3.sketchpalette: -------------------------------------------------------------------------------- 1 | {"compatibleVersion":"1.4","pluginVersion":"1.5","colors":[{"red":0.9725490196078431,"green":0.9764705882352941,"blue":0.9803921568627451,"alpha":1},{"red":0.9450980392156862,"green":0.9529411764705882,"blue":0.9607843137254902,"alpha":1},{"red":0.9137254901960784,"green":0.9254901960784314,"blue":0.9372549019607843,"alpha":1},{"red":0.8705882352941177,"green":0.8862745098039215,"blue":0.9019607843137255,"alpha":1},{"red":0.807843137254902,"green":0.8313725490196079,"blue":0.8549019607843137,"alpha":1},{"red":0.6784313725490196,"green":0.7098039215686275,"blue":0.7411764705882353,"alpha":1},{"red":0.5254901960784314,"green":0.5568627450980392,"blue":0.5882352941176471,"alpha":1},{"red":0.28627450980392155,"green":0.3137254901960784,"blue":0.3411764705882353,"alpha":1},{"red":0.20392156862745098,"green":0.22745098039215686,"blue":0.25098039215686274,"alpha":1},{"red":0.12941176470588237,"green":0.1450980392156863,"blue":0.1607843137254902,"alpha":1},{"red":1,"green":0.9607843137254902,"blue":0.9607843137254902,"alpha":1},{"red":1,"green":0.8901960784313725,"blue":0.8901960784313725,"alpha":1},{"red":1,"green":0.788235294117647,"blue":0.788235294117647,"alpha":1},{"red":1,"green":0.6588235294117647,"blue":0.6588235294117647,"alpha":1},{"red":1,"green":0.5294117647058824,"blue":0.5294117647058824,"alpha":1},{"red":1,"green":0.4196078431372549,"blue":0.4196078431372549,"alpha":1},{"red":0.9803921568627451,"green":0.3215686274509804,"blue":0.3215686274509804,"alpha":1},{"red":0.9411764705882353,"green":0.24313725490196078,"blue":0.24313725490196078,"alpha":1},{"red":0.8784313725490196,"green":0.19215686274509805,"blue":0.19215686274509805,"alpha":1},{"red":0.788235294117647,"green":0.16470588235294117,"blue":0.16470588235294117,"alpha":1},{"red":1,"green":0.9411764705882353,"blue":0.9647058823529412,"alpha":1},{"red":1,"green":0.8705882352941177,"blue":0.9215686274509803,"alpha":1},{"red":0.9882352941176471,"green":0.7607843137254902,"blue":0.8431372549019608,"alpha":1},{"red":0.9803921568627451,"green":0.6352941176470588,"blue":0.7568627450980392,"alpha":1},{"red":0.9686274509803922,"green":0.5137254901960784,"blue":0.6745098039215687,"alpha":1},{"red":0.9411764705882353,"green":0.396078431372549,"blue":0.5843137254901961,"alpha":1},{"red":0.9019607843137255,"green":0.28627450980392155,"blue":0.5019607843137255,"alpha":1},{"red":0.8392156862745098,"green":0.2,"blue":0.4235294117647059,"alpha":1},{"red":0.7607843137254902,"green":0.1450980392156863,"blue":0.3607843137254902,"alpha":1},{"red":0.6509803921568628,"green":0.11764705882352941,"blue":0.30196078431372547,"alpha":1},{"red":0.9725490196078431,"green":0.9411764705882353,"blue":0.9882352941176471,"alpha":1},{"red":0.9529411764705882,"green":0.8509803921568627,"blue":0.9803921568627451,"alpha":1},{"red":0.9333333333333333,"green":0.7450980392156863,"blue":0.9803921568627451,"alpha":1},{"red":0.8980392156862745,"green":0.6,"blue":0.9686274509803922,"alpha":1},{"red":0.8549019607843137,"green":0.4666666666666667,"blue":0.9490196078431372,"alpha":1},{"red":0.8,"green":0.36470588235294116,"blue":0.9098039215686274,"alpha":1},{"red":0.7450980392156863,"green":0.29411764705882354,"blue":0.8588235294117647,"alpha":1},{"red":0.6823529411764706,"green":0.24313725490196078,"blue":0.788235294117647,"alpha":1},{"red":0.611764705882353,"green":0.21176470588235294,"blue":0.7098039215686275,"alpha":1},{"red":0.5254901960784314,"green":0.1803921568627451,"blue":0.611764705882353,"alpha":1},{"red":0.9529411764705882,"green":0.9411764705882353,"blue":1,"alpha":1},{"red":0.8980392156862745,"green":0.8588235294117647,"blue":1,"alpha":1},{"red":0.8156862745098039,"green":0.7490196078431373,"blue":1,"alpha":1},{"red":0.6941176470588235,"green":0.592156862745098,"blue":0.9882352941176471,"alpha":1},{"red":0.592156862745098,"green":0.4588235294117647,"blue":0.9803921568627451,"alpha":1},{"red":0.5176470588235295,"green":0.3686274509803922,"blue":0.9686274509803922,"alpha":1},{"red":0.4745098039215686,"green":0.3137254901960784,"blue":0.9490196078431372,"alpha":1},{"red":0.4392156862745098,"green":0.2823529411764706,"blue":0.9098039215686274,"alpha":1},{"red":0.403921568627451,"green":0.2549019607843137,"blue":0.8509803921568627,"alpha":1},{"red":0.37254901960784315,"green":0.23921568627450981,"blue":0.7686274509803922,"alpha":1},{"red":0.9294117647058824,"green":0.9490196078431372,"blue":1,"alpha":1},{"red":0.8588235294117647,"green":0.8941176470588236,"blue":1,"alpha":1},{"red":0.7294117647058823,"green":0.7843137254901961,"blue":1,"alpha":1},{"red":0.5686274509803921,"green":0.6549019607843137,"blue":1,"alpha":1},{"red":0.4549019607843137,"green":0.5607843137254902,"blue":0.9882352941176471,"alpha":1},{"red":0.3607843137254902,"green":0.48627450980392156,"blue":0.9803921568627451,"alpha":1},{"red":0.2980392156862745,"green":0.43137254901960786,"blue":0.9607843137254902,"alpha":1},{"red":0.25882352941176473,"green":0.38823529411764707,"blue":0.9215686274509803,"alpha":1},{"red":0.23137254901960785,"green":0.3568627450980392,"blue":0.8588235294117647,"alpha":1},{"red":0.21176470588235294,"green":0.30980392156862746,"blue":0.7803921568627451,"alpha":1},{"red":0.9058823529411765,"green":0.9607843137254902,"blue":1,"alpha":1},{"red":0.8156862745098039,"green":0.9215686274509803,"blue":1,"alpha":1},{"red":0.6470588235294118,"green":0.8470588235294118,"blue":1,"alpha":1},{"red":0.4549019607843137,"green":0.7529411764705882,"blue":0.9882352941176471,"alpha":1},{"red":0.30196078431372547,"green":0.6705882352941176,"blue":0.9686274509803922,"alpha":1},{"red":0.2,"green":0.6039215686274509,"blue":0.9411764705882353,"alpha":1},{"red":0.13333333333333333,"green":0.5450980392156862,"blue":0.9019607843137255,"alpha":1},{"red":0.10980392156862745,"green":0.49411764705882355,"blue":0.8392156862745098,"alpha":1},{"red":0.09803921568627451,"green":0.44313725490196076,"blue":0.7607843137254902,"alpha":1},{"red":0.09411764705882353,"green":0.39215686274509803,"blue":0.6705882352941176,"alpha":1},{"red":0.8901960784313725,"green":0.9803921568627451,"blue":0.9882352941176471,"alpha":1},{"red":0.7725490196078432,"green":0.9647058823529412,"blue":0.9803921568627451,"alpha":1},{"red":0.6,"green":0.9137254901960784,"blue":0.9490196078431372,"alpha":1},{"red":0.4,"green":0.8509803921568627,"blue":0.9098039215686274,"alpha":1},{"red":0.23137254901960785,"green":0.788235294117647,"blue":0.8588235294117647,"alpha":1},{"red":0.13333333333333333,"green":0.7215686274509804,"blue":0.8117647058823529,"alpha":1},{"red":0.08235294117647059,"green":0.6666666666666666,"blue":0.7490196078431373,"alpha":1},{"red":0.06274509803921569,"green":0.596078431372549,"blue":0.6784313725490196,"alpha":1},{"red":0.047058823529411764,"green":0.5215686274509804,"blue":0.6,"alpha":1},{"red":0.043137254901960784,"green":0.4470588235294118,"blue":0.5215686274509804,"alpha":1},{"red":0.9019607843137255,"green":0.9882352941176471,"blue":0.9607843137254902,"alpha":1},{"red":0.7647058823529411,"green":0.9803921568627451,"blue":0.9098039215686274,"alpha":1},{"red":0.5882352941176471,"green":0.9490196078431372,"blue":0.8431372549019608,"alpha":1},{"red":0.38823529411764707,"green":0.9019607843137255,"blue":0.7450980392156863,"alpha":1},{"red":0.2196078431372549,"green":0.8509803921568627,"blue":0.6627450980392157,"alpha":1},{"red":0.12549019607843137,"green":0.788235294117647,"blue":0.592156862745098,"alpha":1},{"red":0.07058823529411765,"green":0.7215686274509804,"blue":0.5254901960784314,"alpha":1},{"red":0.047058823529411764,"green":0.6509803921568628,"blue":0.47058823529411764,"alpha":1},{"red":0.03529411764705882,"green":0.5725490196078431,"blue":0.40784313725490196,"alpha":1},{"red":0.03137254901960784,"green":0.4980392156862745,"blue":0.3568627450980392,"alpha":1},{"red":0.9215686274509803,"green":0.984313725490196,"blue":0.9333333333333333,"alpha":1},{"red":0.8274509803921568,"green":0.9764705882352941,"blue":0.8470588235294118,"alpha":1},{"red":0.6980392156862745,"green":0.9490196078431372,"blue":0.7333333333333333,"alpha":1},{"red":0.5490196078431373,"green":0.9137254901960784,"blue":0.6039215686274509,"alpha":1},{"red":0.4117647058823529,"green":0.8588235294117647,"blue":0.48627450980392156,"alpha":1},{"red":0.3176470588235294,"green":0.8117647058823529,"blue":0.4,"alpha":1},{"red":0.25098039215686274,"green":0.7529411764705882,"blue":0.3411764705882353,"alpha":1},{"red":0.21568627450980393,"green":0.6980392156862745,"blue":0.30196078431372547,"alpha":1},{"red":0.1843137254901961,"green":0.6196078431372549,"blue":0.26666666666666666,"alpha":1},{"red":0.16862745098039217,"green":0.5411764705882353,"blue":0.24313725490196078,"alpha":1},{"red":0.9568627450980393,"green":0.9882352941176471,"blue":0.8901960784313725,"alpha":1},{"red":0.9137254901960784,"green":0.9803921568627451,"blue":0.7843137254901961,"alpha":1},{"red":0.8470588235294118,"green":0.9607843137254902,"blue":0.6352941176470588,"alpha":1},{"red":0.7529411764705882,"green":0.9215686274509803,"blue":0.4588235294117647,"alpha":1},{"red":0.6627450980392157,"green":0.8901960784313725,"blue":0.29411764705882354,"alpha":1},{"red":0.5803921568627451,"green":0.8470588235294118,"blue":0.17647058823529413,"alpha":1},{"red":0.5098039215686274,"green":0.788235294117647,"blue":0.11764705882352941,"alpha":1},{"red":0.4549019607843137,"green":0.7215686274509804,"blue":0.08627450980392157,"alpha":1},{"red":0.4,"green":0.6588235294117647,"blue":0.058823529411764705,"alpha":1},{"red":0.3607843137254902,"green":0.5803921568627451,"blue":0.050980392156862744,"alpha":1},{"red":1,"green":0.9764705882352941,"blue":0.8588235294117647,"alpha":1},{"red":1,"green":0.9529411764705882,"blue":0.7490196078431373,"alpha":1},{"red":1,"green":0.9254901960784314,"blue":0.6,"alpha":1},{"red":1,"green":0.8784313725490196,"blue":0.4,"alpha":1},{"red":1,"green":0.8313725490196079,"blue":0.23137254901960785,"alpha":1},{"red":0.9882352941176471,"green":0.7686274509803922,"blue":0.09803921568627451,"alpha":1},{"red":0.9803921568627451,"green":0.6901960784313725,"blue":0.0196078431372549,"alpha":1},{"red":0.9607843137254902,"green":0.6235294117647059,"blue":0,"alpha":1},{"red":0.9411764705882353,"green":0.5490196078431373,"blue":0,"alpha":1},{"red":0.9019607843137255,"green":0.4666666666666667,"blue":0,"alpha":1},{"red":1,"green":0.9568627450980393,"blue":0.9019607843137255,"alpha":1},{"red":1,"green":0.9098039215686274,"blue":0.8,"alpha":1},{"red":1,"green":0.8470588235294118,"blue":0.6588235294117647,"alpha":1},{"red":1,"green":0.7529411764705882,"blue":0.47058823529411764,"alpha":1},{"red":1,"green":0.6627450980392157,"blue":0.30196078431372547,"alpha":1},{"red":1,"green":0.5725490196078431,"blue":0.16862745098039217,"alpha":1},{"red":0.9921568627450981,"green":0.49411764705882355,"blue":0.0784313725490196,"alpha":1},{"red":0.9686274509803922,"green":0.403921568627451,"blue":0.027450980392156862,"alpha":1},{"red":0.9098039215686274,"green":0.34901960784313724,"blue":0.047058823529411764,"alpha":1},{"red":0.8509803921568627,"green":0.2823529411764706,"blue":0.058823529411764705,"alpha":1}]} -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.7.0.ase: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/download/open-color_1.7.0.ase -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.7.0.gpl: -------------------------------------------------------------------------------- 1 | GIMP Palette 2 | Name: Open Color Palette 1.7.0 3 | Columns: 0 4 | # 5 | 248 249 250 gray0 6 | 241 243 245 gray1 7 | 233 236 239 gray2 8 | 222 226 230 gray3 9 | 206 212 218 gray4 10 | 173 181 189 gray5 11 | 134 142 150 gray6 12 | 73 80 87 gray7 13 | 52 58 64 gray8 14 | 33 37 41 gray9 15 | 255 245 245 red0 16 | 255 227 227 red1 17 | 255 201 201 red2 18 | 255 168 168 red3 19 | 255 135 135 red4 20 | 255 107 107 red5 21 | 250 82 82 red6 22 | 240 62 62 red7 23 | 224 49 49 red8 24 | 201 42 42 red9 25 | 255 240 246 pink0 26 | 255 222 235 pink1 27 | 252 194 215 pink2 28 | 250 162 193 pink3 29 | 247 131 172 pink4 30 | 240 101 149 pink5 31 | 230 73 128 pink6 32 | 214 51 108 pink7 33 | 194 37 92 pink8 34 | 166 30 77 pink9 35 | 248 240 252 grape0 36 | 243 217 250 grape1 37 | 238 190 250 grape2 38 | 229 153 247 grape3 39 | 218 119 242 grape4 40 | 204 93 232 grape5 41 | 190 75 219 grape6 42 | 174 62 201 grape7 43 | 156 54 181 grape8 44 | 134 46 156 grape9 45 | 243 240 255 violet0 46 | 229 219 255 violet1 47 | 208 191 255 violet2 48 | 177 151 252 violet3 49 | 151 117 250 violet4 50 | 132 94 247 violet5 51 | 121 80 242 violet6 52 | 112 72 232 violet7 53 | 103 65 217 violet8 54 | 95 61 196 violet9 55 | 237 242 255 indigo0 56 | 219 228 255 indigo1 57 | 186 200 255 indigo2 58 | 145 167 255 indigo3 59 | 116 143 252 indigo4 60 | 92 124 250 indigo5 61 | 76 110 245 indigo6 62 | 66 99 235 indigo7 63 | 59 91 219 indigo8 64 | 54 79 199 indigo9 65 | 231 245 255 blue0 66 | 208 235 255 blue1 67 | 165 216 255 blue2 68 | 116 192 252 blue3 69 | 77 171 247 blue4 70 | 51 154 240 blue5 71 | 34 139 230 blue6 72 | 28 126 214 blue7 73 | 25 113 194 blue8 74 | 24 100 171 blue9 75 | 227 250 252 cyan0 76 | 197 246 250 cyan1 77 | 153 233 242 cyan2 78 | 102 217 232 cyan3 79 | 59 201 219 cyan4 80 | 34 184 207 cyan5 81 | 21 170 191 cyan6 82 | 16 152 173 cyan7 83 | 12 133 153 cyan8 84 | 11 114 133 cyan9 85 | 230 252 245 teal0 86 | 195 250 232 teal1 87 | 150 242 215 teal2 88 | 99 230 190 teal3 89 | 56 217 169 teal4 90 | 32 201 151 teal5 91 | 18 184 134 teal6 92 | 12 166 120 teal7 93 | 9 146 104 teal8 94 | 8 127 91 teal9 95 | 235 251 238 green0 96 | 211 249 216 green1 97 | 178 242 187 green2 98 | 140 233 154 green3 99 | 105 219 124 green4 100 | 81 207 102 green5 101 | 64 192 87 green6 102 | 55 178 77 green7 103 | 47 158 68 green8 104 | 43 138 62 green9 105 | 244 252 227 lime0 106 | 233 250 200 lime1 107 | 216 245 162 lime2 108 | 192 235 117 lime3 109 | 169 227 75 lime4 110 | 148 216 45 lime5 111 | 130 201 30 lime6 112 | 116 184 22 lime7 113 | 102 168 15 lime8 114 | 92 148 13 lime9 115 | 255 249 219 yellow0 116 | 255 243 191 yellow1 117 | 255 236 153 yellow2 118 | 255 224 102 yellow3 119 | 255 212 59 yellow4 120 | 252 196 25 yellow5 121 | 250 176 5 yellow6 122 | 245 159 0 yellow7 123 | 240 140 0 yellow8 124 | 230 119 0 yellow9 125 | 255 244 230 orange0 126 | 255 232 204 orange1 127 | 255 216 168 orange2 128 | 255 192 120 orange3 129 | 255 169 77 orange4 130 | 255 146 43 orange5 131 | 253 126 20 orange6 132 | 247 103 7 orange7 133 | 232 89 12 orange8 134 | 217 72 15 orange9 135 | -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.7.0.gvswatch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/download/open-color_1.7.0.gvswatch -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.7.0.library.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/download/open-color_1.7.0.library.zip -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.7.0.sketchpalette: -------------------------------------------------------------------------------- 1 | {"compatibleVersion":"1.4","pluginVersion":"1.5","colors":[{"red":0.9725490196078431,"green":0.9764705882352941,"blue":0.9803921568627451,"alpha":1},{"red":0.9450980392156862,"green":0.9529411764705882,"blue":0.9607843137254902,"alpha":1},{"red":0.9137254901960784,"green":0.9254901960784314,"blue":0.9372549019607843,"alpha":1},{"red":0.8705882352941177,"green":0.8862745098039215,"blue":0.9019607843137255,"alpha":1},{"red":0.807843137254902,"green":0.8313725490196079,"blue":0.8549019607843137,"alpha":1},{"red":0.6784313725490196,"green":0.7098039215686275,"blue":0.7411764705882353,"alpha":1},{"red":0.5254901960784314,"green":0.5568627450980392,"blue":0.5882352941176471,"alpha":1},{"red":0.28627450980392155,"green":0.3137254901960784,"blue":0.3411764705882353,"alpha":1},{"red":0.20392156862745098,"green":0.22745098039215686,"blue":0.25098039215686274,"alpha":1},{"red":0.12941176470588237,"green":0.1450980392156863,"blue":0.1607843137254902,"alpha":1},{"red":1,"green":0.9607843137254902,"blue":0.9607843137254902,"alpha":1},{"red":1,"green":0.8901960784313725,"blue":0.8901960784313725,"alpha":1},{"red":1,"green":0.788235294117647,"blue":0.788235294117647,"alpha":1},{"red":1,"green":0.6588235294117647,"blue":0.6588235294117647,"alpha":1},{"red":1,"green":0.5294117647058824,"blue":0.5294117647058824,"alpha":1},{"red":1,"green":0.4196078431372549,"blue":0.4196078431372549,"alpha":1},{"red":0.9803921568627451,"green":0.3215686274509804,"blue":0.3215686274509804,"alpha":1},{"red":0.9411764705882353,"green":0.24313725490196078,"blue":0.24313725490196078,"alpha":1},{"red":0.8784313725490196,"green":0.19215686274509805,"blue":0.19215686274509805,"alpha":1},{"red":0.788235294117647,"green":0.16470588235294117,"blue":0.16470588235294117,"alpha":1},{"red":1,"green":0.9411764705882353,"blue":0.9647058823529412,"alpha":1},{"red":1,"green":0.8705882352941177,"blue":0.9215686274509803,"alpha":1},{"red":0.9882352941176471,"green":0.7607843137254902,"blue":0.8431372549019608,"alpha":1},{"red":0.9803921568627451,"green":0.6352941176470588,"blue":0.7568627450980392,"alpha":1},{"red":0.9686274509803922,"green":0.5137254901960784,"blue":0.6745098039215687,"alpha":1},{"red":0.9411764705882353,"green":0.396078431372549,"blue":0.5843137254901961,"alpha":1},{"red":0.9019607843137255,"green":0.28627450980392155,"blue":0.5019607843137255,"alpha":1},{"red":0.8392156862745098,"green":0.2,"blue":0.4235294117647059,"alpha":1},{"red":0.7607843137254902,"green":0.1450980392156863,"blue":0.3607843137254902,"alpha":1},{"red":0.6509803921568628,"green":0.11764705882352941,"blue":0.30196078431372547,"alpha":1},{"red":0.9725490196078431,"green":0.9411764705882353,"blue":0.9882352941176471,"alpha":1},{"red":0.9529411764705882,"green":0.8509803921568627,"blue":0.9803921568627451,"alpha":1},{"red":0.9333333333333333,"green":0.7450980392156863,"blue":0.9803921568627451,"alpha":1},{"red":0.8980392156862745,"green":0.6,"blue":0.9686274509803922,"alpha":1},{"red":0.8549019607843137,"green":0.4666666666666667,"blue":0.9490196078431372,"alpha":1},{"red":0.8,"green":0.36470588235294116,"blue":0.9098039215686274,"alpha":1},{"red":0.7450980392156863,"green":0.29411764705882354,"blue":0.8588235294117647,"alpha":1},{"red":0.6823529411764706,"green":0.24313725490196078,"blue":0.788235294117647,"alpha":1},{"red":0.611764705882353,"green":0.21176470588235294,"blue":0.7098039215686275,"alpha":1},{"red":0.5254901960784314,"green":0.1803921568627451,"blue":0.611764705882353,"alpha":1},{"red":0.9529411764705882,"green":0.9411764705882353,"blue":1,"alpha":1},{"red":0.8980392156862745,"green":0.8588235294117647,"blue":1,"alpha":1},{"red":0.8156862745098039,"green":0.7490196078431373,"blue":1,"alpha":1},{"red":0.6941176470588235,"green":0.592156862745098,"blue":0.9882352941176471,"alpha":1},{"red":0.592156862745098,"green":0.4588235294117647,"blue":0.9803921568627451,"alpha":1},{"red":0.5176470588235295,"green":0.3686274509803922,"blue":0.9686274509803922,"alpha":1},{"red":0.4745098039215686,"green":0.3137254901960784,"blue":0.9490196078431372,"alpha":1},{"red":0.4392156862745098,"green":0.2823529411764706,"blue":0.9098039215686274,"alpha":1},{"red":0.403921568627451,"green":0.2549019607843137,"blue":0.8509803921568627,"alpha":1},{"red":0.37254901960784315,"green":0.23921568627450981,"blue":0.7686274509803922,"alpha":1},{"red":0.9294117647058824,"green":0.9490196078431372,"blue":1,"alpha":1},{"red":0.8588235294117647,"green":0.8941176470588236,"blue":1,"alpha":1},{"red":0.7294117647058823,"green":0.7843137254901961,"blue":1,"alpha":1},{"red":0.5686274509803921,"green":0.6549019607843137,"blue":1,"alpha":1},{"red":0.4549019607843137,"green":0.5607843137254902,"blue":0.9882352941176471,"alpha":1},{"red":0.3607843137254902,"green":0.48627450980392156,"blue":0.9803921568627451,"alpha":1},{"red":0.2980392156862745,"green":0.43137254901960786,"blue":0.9607843137254902,"alpha":1},{"red":0.25882352941176473,"green":0.38823529411764707,"blue":0.9215686274509803,"alpha":1},{"red":0.23137254901960785,"green":0.3568627450980392,"blue":0.8588235294117647,"alpha":1},{"red":0.21176470588235294,"green":0.30980392156862746,"blue":0.7803921568627451,"alpha":1},{"red":0.9058823529411765,"green":0.9607843137254902,"blue":1,"alpha":1},{"red":0.8156862745098039,"green":0.9215686274509803,"blue":1,"alpha":1},{"red":0.6470588235294118,"green":0.8470588235294118,"blue":1,"alpha":1},{"red":0.4549019607843137,"green":0.7529411764705882,"blue":0.9882352941176471,"alpha":1},{"red":0.30196078431372547,"green":0.6705882352941176,"blue":0.9686274509803922,"alpha":1},{"red":0.2,"green":0.6039215686274509,"blue":0.9411764705882353,"alpha":1},{"red":0.13333333333333333,"green":0.5450980392156862,"blue":0.9019607843137255,"alpha":1},{"red":0.10980392156862745,"green":0.49411764705882355,"blue":0.8392156862745098,"alpha":1},{"red":0.09803921568627451,"green":0.44313725490196076,"blue":0.7607843137254902,"alpha":1},{"red":0.09411764705882353,"green":0.39215686274509803,"blue":0.6705882352941176,"alpha":1},{"red":0.8901960784313725,"green":0.9803921568627451,"blue":0.9882352941176471,"alpha":1},{"red":0.7725490196078432,"green":0.9647058823529412,"blue":0.9803921568627451,"alpha":1},{"red":0.6,"green":0.9137254901960784,"blue":0.9490196078431372,"alpha":1},{"red":0.4,"green":0.8509803921568627,"blue":0.9098039215686274,"alpha":1},{"red":0.23137254901960785,"green":0.788235294117647,"blue":0.8588235294117647,"alpha":1},{"red":0.13333333333333333,"green":0.7215686274509804,"blue":0.8117647058823529,"alpha":1},{"red":0.08235294117647059,"green":0.6666666666666666,"blue":0.7490196078431373,"alpha":1},{"red":0.06274509803921569,"green":0.596078431372549,"blue":0.6784313725490196,"alpha":1},{"red":0.047058823529411764,"green":0.5215686274509804,"blue":0.6,"alpha":1},{"red":0.043137254901960784,"green":0.4470588235294118,"blue":0.5215686274509804,"alpha":1},{"red":0.9019607843137255,"green":0.9882352941176471,"blue":0.9607843137254902,"alpha":1},{"red":0.7647058823529411,"green":0.9803921568627451,"blue":0.9098039215686274,"alpha":1},{"red":0.5882352941176471,"green":0.9490196078431372,"blue":0.8431372549019608,"alpha":1},{"red":0.38823529411764707,"green":0.9019607843137255,"blue":0.7450980392156863,"alpha":1},{"red":0.2196078431372549,"green":0.8509803921568627,"blue":0.6627450980392157,"alpha":1},{"red":0.12549019607843137,"green":0.788235294117647,"blue":0.592156862745098,"alpha":1},{"red":0.07058823529411765,"green":0.7215686274509804,"blue":0.5254901960784314,"alpha":1},{"red":0.047058823529411764,"green":0.6509803921568628,"blue":0.47058823529411764,"alpha":1},{"red":0.03529411764705882,"green":0.5725490196078431,"blue":0.40784313725490196,"alpha":1},{"red":0.03137254901960784,"green":0.4980392156862745,"blue":0.3568627450980392,"alpha":1},{"red":0.9215686274509803,"green":0.984313725490196,"blue":0.9333333333333333,"alpha":1},{"red":0.8274509803921568,"green":0.9764705882352941,"blue":0.8470588235294118,"alpha":1},{"red":0.6980392156862745,"green":0.9490196078431372,"blue":0.7333333333333333,"alpha":1},{"red":0.5490196078431373,"green":0.9137254901960784,"blue":0.6039215686274509,"alpha":1},{"red":0.4117647058823529,"green":0.8588235294117647,"blue":0.48627450980392156,"alpha":1},{"red":0.3176470588235294,"green":0.8117647058823529,"blue":0.4,"alpha":1},{"red":0.25098039215686274,"green":0.7529411764705882,"blue":0.3411764705882353,"alpha":1},{"red":0.21568627450980393,"green":0.6980392156862745,"blue":0.30196078431372547,"alpha":1},{"red":0.1843137254901961,"green":0.6196078431372549,"blue":0.26666666666666666,"alpha":1},{"red":0.16862745098039217,"green":0.5411764705882353,"blue":0.24313725490196078,"alpha":1},{"red":0.9568627450980393,"green":0.9882352941176471,"blue":0.8901960784313725,"alpha":1},{"red":0.9137254901960784,"green":0.9803921568627451,"blue":0.7843137254901961,"alpha":1},{"red":0.8470588235294118,"green":0.9607843137254902,"blue":0.6352941176470588,"alpha":1},{"red":0.7529411764705882,"green":0.9215686274509803,"blue":0.4588235294117647,"alpha":1},{"red":0.6627450980392157,"green":0.8901960784313725,"blue":0.29411764705882354,"alpha":1},{"red":0.5803921568627451,"green":0.8470588235294118,"blue":0.17647058823529413,"alpha":1},{"red":0.5098039215686274,"green":0.788235294117647,"blue":0.11764705882352941,"alpha":1},{"red":0.4549019607843137,"green":0.7215686274509804,"blue":0.08627450980392157,"alpha":1},{"red":0.4,"green":0.6588235294117647,"blue":0.058823529411764705,"alpha":1},{"red":0.3607843137254902,"green":0.5803921568627451,"blue":0.050980392156862744,"alpha":1},{"red":1,"green":0.9764705882352941,"blue":0.8588235294117647,"alpha":1},{"red":1,"green":0.9529411764705882,"blue":0.7490196078431373,"alpha":1},{"red":1,"green":0.9254901960784314,"blue":0.6,"alpha":1},{"red":1,"green":0.8784313725490196,"blue":0.4,"alpha":1},{"red":1,"green":0.8313725490196079,"blue":0.23137254901960785,"alpha":1},{"red":0.9882352941176471,"green":0.7686274509803922,"blue":0.09803921568627451,"alpha":1},{"red":0.9803921568627451,"green":0.6901960784313725,"blue":0.0196078431372549,"alpha":1},{"red":0.9607843137254902,"green":0.6235294117647059,"blue":0,"alpha":1},{"red":0.9411764705882353,"green":0.5490196078431373,"blue":0,"alpha":1},{"red":0.9019607843137255,"green":0.4666666666666667,"blue":0,"alpha":1},{"red":1,"green":0.9568627450980393,"blue":0.9019607843137255,"alpha":1},{"red":1,"green":0.9098039215686274,"blue":0.8,"alpha":1},{"red":1,"green":0.8470588235294118,"blue":0.6588235294117647,"alpha":1},{"red":1,"green":0.7529411764705882,"blue":0.47058823529411764,"alpha":1},{"red":1,"green":0.6627450980392157,"blue":0.30196078431372547,"alpha":1},{"red":1,"green":0.5725490196078431,"blue":0.16862745098039217,"alpha":1},{"red":0.9921568627450981,"green":0.49411764705882355,"blue":0.0784313725490196,"alpha":1},{"red":0.9686274509803922,"green":0.403921568627451,"blue":0.027450980392156862,"alpha":1},{"red":0.9098039215686274,"green":0.34901960784313724,"blue":0.047058823529411764,"alpha":1},{"red":0.8509803921568627,"green":0.2823529411764706,"blue":0.058823529411764705,"alpha":1}]} -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.8.0.ase: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/download/open-color_1.8.0.ase -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.8.0.gpl: -------------------------------------------------------------------------------- 1 | GIMP Palette 2 | Name: Open Color Palette 1.8.0 3 | Columns: 0 4 | # 5 | 248 249 250 gray0 6 | 241 243 245 gray1 7 | 233 236 239 gray2 8 | 222 226 230 gray3 9 | 206 212 218 gray4 10 | 173 181 189 gray5 11 | 134 142 150 gray6 12 | 73 80 87 gray7 13 | 52 58 64 gray8 14 | 33 37 41 gray9 15 | 255 245 245 red0 16 | 255 227 227 red1 17 | 255 201 201 red2 18 | 255 168 168 red3 19 | 255 135 135 red4 20 | 255 107 107 red5 21 | 250 82 82 red6 22 | 240 62 62 red7 23 | 224 49 49 red8 24 | 201 42 42 red9 25 | 255 240 246 pink0 26 | 255 222 235 pink1 27 | 252 194 215 pink2 28 | 250 162 193 pink3 29 | 247 131 172 pink4 30 | 240 101 149 pink5 31 | 230 73 128 pink6 32 | 214 51 108 pink7 33 | 194 37 92 pink8 34 | 166 30 77 pink9 35 | 248 240 252 grape0 36 | 243 217 250 grape1 37 | 238 190 250 grape2 38 | 229 153 247 grape3 39 | 218 119 242 grape4 40 | 204 93 232 grape5 41 | 190 75 219 grape6 42 | 174 62 201 grape7 43 | 156 54 181 grape8 44 | 134 46 156 grape9 45 | 243 240 255 violet0 46 | 229 219 255 violet1 47 | 208 191 255 violet2 48 | 177 151 252 violet3 49 | 151 117 250 violet4 50 | 132 94 247 violet5 51 | 121 80 242 violet6 52 | 112 72 232 violet7 53 | 103 65 217 violet8 54 | 95 61 196 violet9 55 | 237 242 255 indigo0 56 | 219 228 255 indigo1 57 | 186 200 255 indigo2 58 | 145 167 255 indigo3 59 | 116 143 252 indigo4 60 | 92 124 250 indigo5 61 | 76 110 245 indigo6 62 | 66 99 235 indigo7 63 | 59 91 219 indigo8 64 | 54 79 199 indigo9 65 | 231 245 255 blue0 66 | 208 235 255 blue1 67 | 165 216 255 blue2 68 | 116 192 252 blue3 69 | 77 171 247 blue4 70 | 51 154 240 blue5 71 | 34 139 230 blue6 72 | 28 126 214 blue7 73 | 25 113 194 blue8 74 | 24 100 171 blue9 75 | 227 250 252 cyan0 76 | 197 246 250 cyan1 77 | 153 233 242 cyan2 78 | 102 217 232 cyan3 79 | 59 201 219 cyan4 80 | 34 184 207 cyan5 81 | 21 170 191 cyan6 82 | 16 152 173 cyan7 83 | 12 133 153 cyan8 84 | 11 114 133 cyan9 85 | 230 252 245 teal0 86 | 195 250 232 teal1 87 | 150 242 215 teal2 88 | 99 230 190 teal3 89 | 56 217 169 teal4 90 | 32 201 151 teal5 91 | 18 184 134 teal6 92 | 12 166 120 teal7 93 | 9 146 104 teal8 94 | 8 127 91 teal9 95 | 235 251 238 green0 96 | 211 249 216 green1 97 | 178 242 187 green2 98 | 140 233 154 green3 99 | 105 219 124 green4 100 | 81 207 102 green5 101 | 64 192 87 green6 102 | 55 178 77 green7 103 | 47 158 68 green8 104 | 43 138 62 green9 105 | 244 252 227 lime0 106 | 233 250 200 lime1 107 | 216 245 162 lime2 108 | 192 235 117 lime3 109 | 169 227 75 lime4 110 | 148 216 45 lime5 111 | 130 201 30 lime6 112 | 116 184 22 lime7 113 | 102 168 15 lime8 114 | 92 148 13 lime9 115 | 255 249 219 yellow0 116 | 255 243 191 yellow1 117 | 255 236 153 yellow2 118 | 255 224 102 yellow3 119 | 255 212 59 yellow4 120 | 252 196 25 yellow5 121 | 250 176 5 yellow6 122 | 245 159 0 yellow7 123 | 240 140 0 yellow8 124 | 230 119 0 yellow9 125 | 255 244 230 orange0 126 | 255 232 204 orange1 127 | 255 216 168 orange2 128 | 255 192 120 orange3 129 | 255 169 77 orange4 130 | 255 146 43 orange5 131 | 253 126 20 orange6 132 | 247 103 7 orange7 133 | 232 89 12 orange8 134 | 217 72 15 orange9 135 | -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.8.0.gvswatch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/download/open-color_1.8.0.gvswatch -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.8.0.library.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/download/open-color_1.8.0.library.zip -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.9.0.ase: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/download/open-color_1.9.0.ase -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.9.0.gpl: -------------------------------------------------------------------------------- 1 | GIMP Palette 2 | Name: Open Color Palette 1.9.0 3 | Columns: 0 4 | # 5 | 248 249 250 gray0 6 | 241 243 245 gray1 7 | 233 236 239 gray2 8 | 222 226 230 gray3 9 | 206 212 218 gray4 10 | 173 181 189 gray5 11 | 134 142 150 gray6 12 | 73 80 87 gray7 13 | 52 58 64 gray8 14 | 33 37 41 gray9 15 | 255 245 245 red0 16 | 255 227 227 red1 17 | 255 201 201 red2 18 | 255 168 168 red3 19 | 255 135 135 red4 20 | 255 107 107 red5 21 | 250 82 82 red6 22 | 240 62 62 red7 23 | 224 49 49 red8 24 | 201 42 42 red9 25 | 255 240 246 pink0 26 | 255 222 235 pink1 27 | 252 194 215 pink2 28 | 250 162 193 pink3 29 | 247 131 172 pink4 30 | 240 101 149 pink5 31 | 230 73 128 pink6 32 | 214 51 108 pink7 33 | 194 37 92 pink8 34 | 166 30 77 pink9 35 | 248 240 252 grape0 36 | 243 217 250 grape1 37 | 238 190 250 grape2 38 | 229 153 247 grape3 39 | 218 119 242 grape4 40 | 204 93 232 grape5 41 | 190 75 219 grape6 42 | 174 62 201 grape7 43 | 156 54 181 grape8 44 | 134 46 156 grape9 45 | 243 240 255 violet0 46 | 229 219 255 violet1 47 | 208 191 255 violet2 48 | 177 151 252 violet3 49 | 151 117 250 violet4 50 | 132 94 247 violet5 51 | 121 80 242 violet6 52 | 112 72 232 violet7 53 | 103 65 217 violet8 54 | 95 61 196 violet9 55 | 237 242 255 indigo0 56 | 219 228 255 indigo1 57 | 186 200 255 indigo2 58 | 145 167 255 indigo3 59 | 116 143 252 indigo4 60 | 92 124 250 indigo5 61 | 76 110 245 indigo6 62 | 66 99 235 indigo7 63 | 59 91 219 indigo8 64 | 54 79 199 indigo9 65 | 231 245 255 blue0 66 | 208 235 255 blue1 67 | 165 216 255 blue2 68 | 116 192 252 blue3 69 | 77 171 247 blue4 70 | 51 154 240 blue5 71 | 34 139 230 blue6 72 | 28 126 214 blue7 73 | 25 113 194 blue8 74 | 24 100 171 blue9 75 | 227 250 252 cyan0 76 | 197 246 250 cyan1 77 | 153 233 242 cyan2 78 | 102 217 232 cyan3 79 | 59 201 219 cyan4 80 | 34 184 207 cyan5 81 | 21 170 191 cyan6 82 | 16 152 173 cyan7 83 | 12 133 153 cyan8 84 | 11 114 133 cyan9 85 | 230 252 245 teal0 86 | 195 250 232 teal1 87 | 150 242 215 teal2 88 | 99 230 190 teal3 89 | 56 217 169 teal4 90 | 32 201 151 teal5 91 | 18 184 134 teal6 92 | 12 166 120 teal7 93 | 9 146 104 teal8 94 | 8 127 91 teal9 95 | 235 251 238 green0 96 | 211 249 216 green1 97 | 178 242 187 green2 98 | 140 233 154 green3 99 | 105 219 124 green4 100 | 81 207 102 green5 101 | 64 192 87 green6 102 | 55 178 77 green7 103 | 47 158 68 green8 104 | 43 138 62 green9 105 | 244 252 227 lime0 106 | 233 250 200 lime1 107 | 216 245 162 lime2 108 | 192 235 117 lime3 109 | 169 227 75 lime4 110 | 148 216 45 lime5 111 | 130 201 30 lime6 112 | 116 184 22 lime7 113 | 102 168 15 lime8 114 | 92 148 13 lime9 115 | 255 249 219 yellow0 116 | 255 243 191 yellow1 117 | 255 236 153 yellow2 118 | 255 224 102 yellow3 119 | 255 212 59 yellow4 120 | 252 196 25 yellow5 121 | 250 176 5 yellow6 122 | 245 159 0 yellow7 123 | 240 140 0 yellow8 124 | 230 119 0 yellow9 125 | 255 244 230 orange0 126 | 255 232 204 orange1 127 | 255 216 168 orange2 128 | 255 192 120 orange3 129 | 255 169 77 orange4 130 | 255 146 43 orange5 131 | 253 126 20 orange6 132 | 247 103 7 orange7 133 | 232 89 12 orange8 134 | 217 72 15 orange9 135 | -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.9.0.gvswatch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/download/open-color_1.9.0.gvswatch -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.9.0.library.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/download/open-color_1.9.0.library.zip -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.9.1.ase: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/download/open-color_1.9.1.ase -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.9.1.gpl: -------------------------------------------------------------------------------- 1 | GIMP Palette 2 | Name: Open Color Palette 1.9.1 3 | Columns: 0 4 | # 5 | 248 249 250 gray0 6 | 241 243 245 gray1 7 | 233 236 239 gray2 8 | 222 226 230 gray3 9 | 206 212 218 gray4 10 | 173 181 189 gray5 11 | 134 142 150 gray6 12 | 73 80 87 gray7 13 | 52 58 64 gray8 14 | 33 37 41 gray9 15 | 255 245 245 red0 16 | 255 227 227 red1 17 | 255 201 201 red2 18 | 255 168 168 red3 19 | 255 135 135 red4 20 | 255 107 107 red5 21 | 250 82 82 red6 22 | 240 62 62 red7 23 | 224 49 49 red8 24 | 201 42 42 red9 25 | 255 240 246 pink0 26 | 255 222 235 pink1 27 | 252 194 215 pink2 28 | 250 162 193 pink3 29 | 247 131 172 pink4 30 | 240 101 149 pink5 31 | 230 73 128 pink6 32 | 214 51 108 pink7 33 | 194 37 92 pink8 34 | 166 30 77 pink9 35 | 248 240 252 grape0 36 | 243 217 250 grape1 37 | 238 190 250 grape2 38 | 229 153 247 grape3 39 | 218 119 242 grape4 40 | 204 93 232 grape5 41 | 190 75 219 grape6 42 | 174 62 201 grape7 43 | 156 54 181 grape8 44 | 134 46 156 grape9 45 | 243 240 255 violet0 46 | 229 219 255 violet1 47 | 208 191 255 violet2 48 | 177 151 252 violet3 49 | 151 117 250 violet4 50 | 132 94 247 violet5 51 | 121 80 242 violet6 52 | 112 72 232 violet7 53 | 103 65 217 violet8 54 | 95 61 196 violet9 55 | 237 242 255 indigo0 56 | 219 228 255 indigo1 57 | 186 200 255 indigo2 58 | 145 167 255 indigo3 59 | 116 143 252 indigo4 60 | 92 124 250 indigo5 61 | 76 110 245 indigo6 62 | 66 99 235 indigo7 63 | 59 91 219 indigo8 64 | 54 79 199 indigo9 65 | 231 245 255 blue0 66 | 208 235 255 blue1 67 | 165 216 255 blue2 68 | 116 192 252 blue3 69 | 77 171 247 blue4 70 | 51 154 240 blue5 71 | 34 139 230 blue6 72 | 28 126 214 blue7 73 | 25 113 194 blue8 74 | 24 100 171 blue9 75 | 227 250 252 cyan0 76 | 197 246 250 cyan1 77 | 153 233 242 cyan2 78 | 102 217 232 cyan3 79 | 59 201 219 cyan4 80 | 34 184 207 cyan5 81 | 21 170 191 cyan6 82 | 16 152 173 cyan7 83 | 12 133 153 cyan8 84 | 11 114 133 cyan9 85 | 230 252 245 teal0 86 | 195 250 232 teal1 87 | 150 242 215 teal2 88 | 99 230 190 teal3 89 | 56 217 169 teal4 90 | 32 201 151 teal5 91 | 18 184 134 teal6 92 | 12 166 120 teal7 93 | 9 146 104 teal8 94 | 8 127 91 teal9 95 | 235 251 238 green0 96 | 211 249 216 green1 97 | 178 242 187 green2 98 | 140 233 154 green3 99 | 105 219 124 green4 100 | 81 207 102 green5 101 | 64 192 87 green6 102 | 55 178 77 green7 103 | 47 158 68 green8 104 | 43 138 62 green9 105 | 244 252 227 lime0 106 | 233 250 200 lime1 107 | 216 245 162 lime2 108 | 192 235 117 lime3 109 | 169 227 75 lime4 110 | 148 216 45 lime5 111 | 130 201 30 lime6 112 | 116 184 22 lime7 113 | 102 168 15 lime8 114 | 92 148 13 lime9 115 | 255 249 219 yellow0 116 | 255 243 191 yellow1 117 | 255 236 153 yellow2 118 | 255 224 102 yellow3 119 | 255 212 59 yellow4 120 | 252 196 25 yellow5 121 | 250 176 5 yellow6 122 | 245 159 0 yellow7 123 | 240 140 0 yellow8 124 | 230 119 0 yellow9 125 | 255 244 230 orange0 126 | 255 232 204 orange1 127 | 255 216 168 orange2 128 | 255 192 120 orange3 129 | 255 169 77 orange4 130 | 255 146 43 orange5 131 | 253 126 20 orange6 132 | 247 103 7 orange7 133 | 232 89 12 orange8 134 | 217 72 15 orange9 135 | -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.9.1.gvswatch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/download/open-color_1.9.1.gvswatch -------------------------------------------------------------------------------- /docs/asset/download/open-color_1.9.1.library.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/download/open-color_1.9.1.library.zip -------------------------------------------------------------------------------- /docs/asset/favicon/apple-touch-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/favicon/apple-touch-icon-144x144.png -------------------------------------------------------------------------------- /docs/asset/favicon/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/favicon/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /docs/asset/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /docs/asset/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /docs/asset/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/favicon/favicon.ico -------------------------------------------------------------------------------- /docs/asset/favicon/mstile-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/favicon/mstile-144x144.png -------------------------------------------------------------------------------- /docs/asset/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 9 | 10 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /docs/asset/images/og-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yeun/open-color/3a716ee1f5ff5456db33cb8a6e964afdca1e7bc3/docs/asset/images/og-image.png -------------------------------------------------------------------------------- /docs/chromatic-colors.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
5 |
6 | In writing... 7 |
8 |
-------------------------------------------------------------------------------- /docs/documents.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
5 | 6 |
7 |

Goals

8 |
9 |
    10 |
  • All colors shall have adequate use
    • 11 |
  • Provide general color for UI design
    • 12 |
  • All colors will be beautiful in itself and harmonious
    • 13 |
  • At the same brightness level, the perceived brightness will be constant
    • 14 |
15 |
16 |
17 |
18 |

Installation

19 |
20 | {% highlight bash %}$ npm install open-color{% endhighlight %} 21 |
22 |
23 |
24 |

Variable convention

25 |
26 |
    27 |
  • Sass, SCSS: {% highlight scss %}$oc-(color)-(number){% endhighlight %}
    • 28 |
  • Less: {% highlight less %}@oc-(color)-(number){% endhighlight %}
    • 29 |
  • Stylus: {% highlight stylus %}oc-(color)-(number){% endhighlight %}
    • 30 |
  • CSS: {% highlight css %}--oc-(color)-(number){% endhighlight %}
    • 31 |
32 |
    33 |
  • 34 | oc 35 | Abbreviation for Open color 36 |
    • 37 |
  • 38 | (color) 39 | Color name like gray, red, lime ect. 40 |
    • 41 |
  • 42 | (number) 43 | 0 to 9. 0 to 9. Brightness spectrum. 44 |
    • 45 |
46 |
47 |
48 |
49 |

How to use

50 |
51 | Import the file to your project and use the variables. 52 |

Example for Sass, SCSS

53 | 54 | {% highlight scss %} 55 | @import 'path/open-color'; 56 | 57 | .body { 58 | background-color: $oc-gray-0; 59 | color: $oc-gray-7; 60 | } 61 | 62 | a { 63 | color: $oc-teal-7; 64 | 65 | &:hover, 66 | &:focus, 67 | &:active { 68 | color: $oc-indigo-7; 69 | } 70 | }{% endhighlight %} 71 | 72 |

Example for Tailwind CSS

73 | {% highlight js %} 74 | // tailwind.config.js 75 | module.exports = { 76 | presets: [require("./open-color.js")], 77 | purge: [], 78 | mode: "jit", 79 | darkMode: false, 80 | theme: { 81 | extend: {}, 82 | }, 83 | variants: { 84 | extend: {}, 85 | }, 86 | plugins: [], 87 | }; 88 | {% endhighlight %} 89 | 90 | 91 |

Example for Less

92 | {% highlight scss %} 93 | @import 'path/open-color'; 94 | 95 | .body { 96 | background-color: @oc-gray-0; 97 | color: @oc-gray-7; 98 | } 99 | 100 | a { 101 | color: @oc-teal-7; 102 | 103 | &:hover, 104 | &:focus, 105 | &:active { 106 | color: @oc-indigo-7; 107 | } 108 | }{% endhighlight %} 109 | 110 |

Example for Stylus

111 | {% highlight stylus %} 112 | @import 'path/open-color.styl' 113 | 114 | .body 115 | background-color: oc-gray-0 116 | color: oc-gray-7 117 | 118 | a 119 | color: oc-teal-7; 120 | 121 | &:hover 122 | &:focus 123 | &:active 124 | color: oc-indigo-7{% endhighlight %} 125 | 126 |

Example for CSS

127 | {% highlight css %} 128 | @import 'path/open-color.css'; 129 | 130 | .body { 131 | background-color: var(--oc-gray-0); 132 | color: var(--oc-gray-7); 133 | } 134 | 135 | a { 136 | color: var(--oc-teal-7); 137 | } 138 | 139 | a:hover, 140 | a:focus, 141 | a:active { 142 | color: var(--oc-indigo-7); 143 | }{% endhighlight %} 144 | 145 |
146 |
147 |
148 |

Contribution

149 |
150 |

Check out the list below.

151 |

Color value

152 |
    153 |
  • open-color.json 154 |
      155 |
    • Change and $ npm run compile-templates
      • 156 |
    157 |
    • 158 |
  • docs/asset/download/open-color_*.*.*.aco
    • 159 |
  • docs/asset/download/open-color_*.*.*.clr
    • 160 |
  • Adobe library (admin rights)
    • 161 |
162 |

Version number

163 |
    164 |
  • package.json
    • 165 |
  • docs/asset/download/open-color_*.*.*.aco
    • 166 |
  • Adobe library (admin rights)
    • 167 |
168 |

Document

169 |
    170 |
  • README.md
    • 171 |
  • docs/documents.html
    • 172 |
173 | 174 |

Introduction

175 |
    176 |
  • README.md
    • 177 |
178 |
179 |
180 |
181 | -------------------------------------------------------------------------------- /docs/google0904dd74a74c9d91.html: -------------------------------------------------------------------------------- 1 | google-site-verification: google0904dd74a74c9d91.html -------------------------------------------------------------------------------- /docs/gray-color.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
5 |
6 |

Before we start

7 |
8 |

Open Color defines specified usage of each color. This post describes supposed usage of colors. Open Color will help you easily decide what color to use for your product. You might want to call it a manual. If you aren't quite sure about the colors you choose, this manual can help you figure out. Open Color is not a rule set. It only suggests you affordable options. Issue reports and Pull requests are always welcome.

9 |
10 |
11 |
12 |

Gray spectrum composition

13 |
14 |

When gray is used for a UI element, the brightness itself can imply specific significance. When an element turns dark as you hover your mouse, this indicates that the element is clickable. A distinctively bright gray one indicates that the element has been disabled or expired. Other colors in Open Color have a constant difference in brightness separated into ten different levels. However, gray colors of Open Color don't vary in the same degree because specific brightness holds implications as mentioned.

15 |

Let's find out how each color is used.

16 |
17 |
18 |
19 |

Text

20 |
21 |

Gray 7 or Gray 8 is recommended for body text. The soft color of Gray 7 naturally matches with a background. Therefore it is appropriate for a UI element with concrete function such as menu labels or buttons. If a content itself is emphasized as in blog posts, SNS or headline, Gray 8 can make a clearly readable text.

22 |
23 |
24 |
25 |
Text in Gray 7
26 |

Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.

27 |
28 |
29 |
Text in Gray 8
30 |

Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.

31 |
32 |
33 |
34 |

Text is often written in gray as well as black. Text in gray can be categorized into two usages. Gray is useful for text which isn’t as important as others. For example, additional explanations below headlines or metadata. Gray 6 is handy because it is a brighter color compared to the body text yet read as disabled. On the other hand, gray is also appropriate to indicate disabled forms, buttons and links. In this case, Gray 5 is recommended.

35 | 36 |
37 |
38 |
39 |
Text in Gray 5
40 |

Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.

41 |
42 |
43 |
Text in Gray 6
44 |

Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.

45 |
46 |
47 |
48 |
49 |
50 |

Background

51 |
52 |

In many products, we can see the background in white, but if you want to switch modes or separate spaces, light gray such as Gray 0 or Gray 1 can be chosen. Until recently, Gray 0 (#f8f9fa) which is fairly close to white wasn’t used. However, as display technology in digital devices advance and extremely simple designs come in trend, a very bright gray color started to appear in UI. For that reason, Gray 1 can seem a bit old-fashioned, but it is affordable for low-end devices and users who don’t have clear eyesight.When separating spaces with color over Gray 0 background, Gray 1 is useful.

53 |
54 |
55 |
56 | Backgound in Gray 0 57 |
58 |
59 |
60 |
61 | Backgound in Gray 1 62 |
63 |
64 |
65 |
66 |
67 | Backgound in Gray 0 68 |
69 | Backgound in Gray 1 70 |
71 |
72 |
73 |

You can use darker background color to represent status change such as active, hover for elements like buttons. In this case, 2 levels darker than normal buttons are suggested.

74 |
75 |
76 | 79 |
80 |
81 | 84 |
85 |
86 |
87 |
88 |
89 |

Stroke

90 |
91 |

Stroke elements use Gray 3 and Gray 4. Gray 3 is affordable for strokes which divide compartments such as <hr>. Gray 4 is appropriate for strokes implying boundary of forms or buttons can be operated.

92 |
93 |
94 |
95 | Stroke in Gray 3 96 |
97 |
98 |
99 |
100 | Stroke in Gray 4 101 |
102 |
103 |
104 |

Use Gray 2 when hinting a disabled status.

105 |
106 |
107 |
108 | Stroke in Gray 4 109 |
110 |
111 |
112 |
113 | Stroke in Gray 2 114 |
115 |
116 |
117 |
118 |
119 |
120 |

Inverted color

121 |
122 |

Although Open Color is based on UI style of a white background with elements in strokes, the black background is often chosen along with the white text. At this point, the Gray 9 for background, Gray 7 for strokes and text can be in Gray 0, Gray 5, Gray 6.

123 |
124 |
125 | Background in Gray 9 126 |
127 |
128 | Text in Gray 0 129 |
130 |
131 | Text in Gray 5 132 |
133 |
134 | Text in Gray 6 135 |
136 |
137 | Background in Gray 8 138 |
139 |
140 |
141 |
142 |
143 |
144 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
5 | {% include shortcuts.html %} 6 |
7 | {% for color in site.colors %} 8 |
9 |

10 | {{ site['colors'][forloop.index0] }} 11 |

12 |
13 |
14 | {% assign idx = color | append: '-hexs' %} 15 | {% for i in (0..9) %} 16 |
17 |
18 |
19 |
{{ color }} {{ i }}
20 | 21 |
22 | {% endfor %} 23 |
24 |
25 |
26 | {% endfor %} 27 |
28 |
29 | -------------------------------------------------------------------------------- /docs/ingredients.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
6 | {% include shortcuts.html %} 7 |
8 | {% for color in site.colors %} 9 |
10 |

11 | {{ site['colors'][forloop.index0] }} 12 |

13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | {% assign hex = color | append: '-hexs' %} 28 | {% for level in (0..9) %} 29 | {% assign rgb = site[hex][level] | remove: '#' | split: '' %} 30 | {% assign str = '' %} 31 | {% assign chars = 'a,b,c,d,e,f' | split: ',' %} 32 | {% assign remainders = '10,11,12,13,14,15' | split: ',' %} 33 | {% for n in (0..5) %} 34 | {% assign char = 0 %} 35 | {% for c in (0..5) %} 36 | {% if char != 1 %} 37 | {% if rgb[n] == chars[c] %} 38 | {% assign char = 1 %} 39 | {% capture str %}{{ str }}{{ remainders[c] }}|{% endcapture %} 40 | {% endif %} 41 | {% endif %} 42 | {% endfor %} 43 | {% if char == 0 %} 44 | {% capture str %}{{ str }}{{ rgb[n] }}|{% endcapture %} 45 | {% endif %} 46 | {% endfor %} 47 | {% assign rgb = str | split: "|" %} 48 | {% assign red = rgb[0] | times: 16 | plus: rgb[1] %} 49 | {% assign green = rgb[2] | times: 16 | plus: rgb[3] %} 50 | {% assign blue = rgb[4] | times: 16 | plus: rgb[5] %} 51 | 52 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | {% endfor %} 65 | 66 |
NameRGBLHSV
53 |
54 | {{ color }} {{ level }} 55 | 		{{ red }}{{ green }}{{ blue }}
67 |
68 | {% endfor %} 69 |
70 |
71 | -------------------------------------------------------------------------------- /docs/params.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Open-color", 3 | "tagline": "Open color scheme for web UI", 4 | "body": "### Welcome to GitHub Pages.\r\nThis automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here [using GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/), select a template crafted by a designer, and publish. After your page is generated, you can check out the new `gh-pages` branch locally. If you’re using GitHub Desktop, simply sync your repository and you’ll see the new branch.\r\n\r\n### Designer Templates\r\nWe’ve crafted some handsome templates for you to use. Go ahead and click 'Continue to layouts' to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved.\r\n\r\n### Creating pages manually\r\nIf you prefer to not use the automatic generator, push a branch named `gh-pages` to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.\r\n\r\n### Authors and Contributors\r\nYou can @mention a GitHub username to generate a link to their profile. The resulting `` element will link to the contributor’s GitHub Profile. For example: In 2007, Chris Wanstrath (@defunkt), PJ Hyett (@pjhyett), and Tom Preston-Werner (@mojombo) founded GitHub.\r\n\r\n### Support or Contact\r\nHaving trouble with Pages? Check out our [documentation](https://help.github.com/pages) or [contact support](https://github.com/contact) and we’ll help you sort it out.\r\n", 5 | "note": "Don't delete this file! It's used internally to help with page regeneration." 6 | } -------------------------------------------------------------------------------- /docs/stylesheets/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; /* 1 */ 59 | vertical-align: baseline; /* 2 */ 60 | } 61 | 62 | /** 63 | * Prevent modern browsers from displaying `audio` without controls. 64 | * Remove excess height in iOS 5 devices. 65 | */ 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 75 | */ 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | /* Links 83 | ========================================================================== */ 84 | 85 | /** 86 | * Remove the gray background color from active links in IE 10. 87 | */ 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | /** 94 | * Improve readability when focused and also mouse hovered in all browsers. 95 | */ 96 | 97 | a:active, 98 | a:hover { 99 | outline: 0; 100 | } 101 | 102 | /* Text-level semantics 103 | ========================================================================== */ 104 | 105 | /** 106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 107 | */ 108 | 109 | abbr[title] { 110 | border-bottom: 1px dotted; 111 | } 112 | 113 | /** 114 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 115 | */ 116 | 117 | b, 118 | strong { 119 | font-weight: bold; 120 | } 121 | 122 | /** 123 | * Address styling not present in Safari and Chrome. 124 | */ 125 | 126 | dfn { 127 | font-style: italic; 128 | } 129 | 130 | /** 131 | * Address variable `h1` font-size and margin within `section` and `article` 132 | * contexts in Firefox 4+, Safari, and Chrome. 133 | */ 134 | 135 | h1 { 136 | font-size: 2em; 137 | margin: 0.67em 0; 138 | } 139 | 140 | /** 141 | * Address styling not present in IE 8/9. 142 | */ 143 | 144 | mark { 145 | background: #ff0; 146 | color: #000; 147 | } 148 | 149 | /** 150 | * Address iningredientent and variable font size in all browsers. 151 | */ 152 | 153 | small { 154 | font-size: 80%; 155 | } 156 | 157 | /** 158 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 159 | */ 160 | 161 | sub, 162 | sup { 163 | font-size: 75%; 164 | line-height: 0; 165 | position: relative; 166 | vertical-align: baseline; 167 | } 168 | 169 | sup { 170 | top: -0.5em; 171 | } 172 | 173 | sub { 174 | bottom: -0.25em; 175 | } 176 | 177 | /* Embedded content 178 | ========================================================================== */ 179 | 180 | /** 181 | * Remove border when inside `a` element in IE 8/9/10. 182 | */ 183 | 184 | img { 185 | border: 0; 186 | } 187 | 188 | /** 189 | * Correct overflow not hidden in IE 9/10/11. 190 | */ 191 | 192 | svg:not(:root) { 193 | overflow: hidden; 194 | } 195 | 196 | /* Grouping content 197 | ========================================================================== */ 198 | 199 | /** 200 | * Address margin not present in IE 8/9 and Safari. 201 | */ 202 | 203 | figure { 204 | margin: 1em 40px; 205 | } 206 | 207 | /** 208 | * Address differences between Firefox and other browsers. 209 | */ 210 | 211 | hr { 212 | box-sizing: content-box; 213 | height: 0; 214 | } 215 | 216 | /** 217 | * Contain overflow in all browsers. 218 | */ 219 | 220 | pre { 221 | overflow: auto; 222 | } 223 | 224 | /** 225 | * Address odd `em`-unit font size rendering in all browsers. 226 | */ 227 | 228 | code, 229 | kbd, 230 | pre, 231 | samp { 232 | font-family: monospace, monospace; 233 | font-size: 1em; 234 | } 235 | 236 | /* Forms 237 | ========================================================================== */ 238 | 239 | /** 240 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 241 | * styling of `select`, unless a `border` property is set. 242 | */ 243 | 244 | /** 245 | * 1. Correct color not being inherited. 246 | * Known issue: affects color of disabled elements. 247 | * 2. Correct font properties not being inherited. 248 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 249 | */ 250 | 251 | button, 252 | input, 253 | optgroup, 254 | select, 255 | textarea { 256 | color: inherit; /* 1 */ 257 | font: inherit; /* 2 */ 258 | margin: 0; /* 3 */ 259 | } 260 | 261 | /** 262 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 263 | */ 264 | 265 | button { 266 | overflow: visible; 267 | } 268 | 269 | /** 270 | * Address iningredientent `text-transform` inheritance for `button` and `select`. 271 | * All other form control elements do not inherit `text-transform` values. 272 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 273 | * Correct `select` style inheritance in Firefox. 274 | */ 275 | 276 | button, 277 | select { 278 | text-transform: none; 279 | } 280 | 281 | /** 282 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 283 | * and `video` controls. 284 | * 2. Correct inability to style clickable `input` types in iOS. 285 | * 3. Improve usability and ingredientency of cursor style between image-type 286 | * `input` and others. 287 | */ 288 | 289 | button, 290 | html input[type="button"], /* 1 */ 291 | input[type="reset"], 292 | input[type="submit"] { 293 | -webkit-appearance: button; /* 2 */ 294 | cursor: pointer; /* 3 */ 295 | } 296 | 297 | /** 298 | * Re-set default cursor for disabled elements. 299 | */ 300 | 301 | button[disabled], 302 | html input[disabled] { 303 | cursor: default; 304 | } 305 | 306 | /** 307 | * Remove inner padding and border in Firefox 4+. 308 | */ 309 | 310 | button::-moz-focus-inner, 311 | input::-moz-focus-inner { 312 | border: 0; 313 | padding: 0; 314 | } 315 | 316 | /** 317 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 318 | * the UA stylesheet. 319 | */ 320 | 321 | input { 322 | line-height: normal; 323 | } 324 | 325 | /** 326 | * It's recommended that you don't attempt to style these elements. 327 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 328 | * 329 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 330 | * 2. Remove excess padding in IE 8/9/10. 331 | */ 332 | 333 | input[type="checkbox"], 334 | input[type="radio"] { 335 | box-sizing: border-box; /* 1 */ 336 | padding: 0; /* 2 */ 337 | } 338 | 339 | /** 340 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 341 | * `font-size` values of the `input`, it causes the cursor style of the 342 | * decrement button to change from `default` to `text`. 343 | */ 344 | 345 | input[type="number"]::-webkit-inner-spin-button, 346 | input[type="number"]::-webkit-outer-spin-button { 347 | height: auto; 348 | } 349 | 350 | /** 351 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 352 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 353 | * (include `-moz` to future-proof). 354 | */ 355 | 356 | input[type="search"] { 357 | -webkit-appearance: textfield; /* 1 */ /* 2 */ 358 | box-sizing: content-box; 359 | } 360 | 361 | /** 362 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 363 | * Safari (but not Chrome) clips the cancel button when the search input has 364 | * padding (and `textfield` appearance). 365 | */ 366 | 367 | input[type="search"]::-webkit-search-cancel-button, 368 | input[type="search"]::-webkit-search-decoration { 369 | -webkit-appearance: none; 370 | } 371 | 372 | /** 373 | * Define ingredientent border, margin, and padding. 374 | */ 375 | 376 | fieldset { 377 | border: 1px solid #c0c0c0; 378 | margin: 0 2px; 379 | padding: 0.35em 0.625em 0.75em; 380 | } 381 | 382 | /** 383 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 384 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 385 | */ 386 | 387 | legend { 388 | border: 0; /* 1 */ 389 | padding: 0; /* 2 */ 390 | } 391 | 392 | /** 393 | * Remove default vertical scrollbar in IE 8/9/10/11. 394 | */ 395 | 396 | textarea { 397 | overflow: auto; 398 | } 399 | 400 | /** 401 | * Don't inherit the `font-weight` (applied by a rule above). 402 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 403 | */ 404 | 405 | optgroup { 406 | font-weight: bold; 407 | } 408 | 409 | /* Tables 410 | ========================================================================== */ 411 | 412 | /** 413 | * Remove most spacing between table cells. 414 | */ 415 | 416 | table { 417 | border-collapse: collapse; 418 | border-spacing: 0; 419 | } 420 | 421 | td, 422 | th { 423 | padding: 0; 424 | } 425 | -------------------------------------------------------------------------------- /docs/stylesheets/style.scss: -------------------------------------------------------------------------------- 1 | --- 2 | # Front matter comment to ensure Jekyll properly reads file. 3 | --- 4 | 5 | 6 | @import 'open-color'; 7 | @import 'variables'; 8 | @import 'grid'; 9 | @import 'layout'; 10 | @import 'navbar'; 11 | @import 'cover'; 12 | @import 'shortcuts'; 13 | @import 'swatches'; 14 | @import 'ingredients'; 15 | @import 'posts'; 16 | @import 'mobile'; 17 | @import 'carbonads'; 18 | 19 | 20 | html { 21 | box-sizing: border-box; 22 | font-size: $font-size-base; 23 | } 24 | 25 | *, 26 | *:before, 27 | *:after { 28 | box-sizing: inherit; 29 | } 30 | 31 | body { 32 | color: $text-color; 33 | font-family: $font-family-headline; 34 | font-size: $font-size-base; 35 | line-height: $line-height-base; 36 | letter-spacing: 0; 37 | -webkit-text-size-adjust: none; 38 | } 39 | 40 | ::selection { 41 | background: $selection-bg; 42 | } 43 | 44 | a { 45 | color: $link-color; 46 | text-decoration: none; 47 | 48 | &:focus, 49 | &:hover { 50 | color: $link-hover-color; 51 | } 52 | } 53 | 54 | abbr[title] { 55 | border-bottom: none; 56 | } 57 | 58 | hr { 59 | margin: 40px auto; 60 | width: 50%; 61 | height: 1px; 62 | border: none; 63 | background: $oc-gray-3; 64 | } 65 | 66 | ul > li + li { 67 | margin-top: 0.25em; 68 | } 69 | 70 | .no-wrap { 71 | display: inline-block; 72 | white-space: nowrap; 73 | } 74 | 75 | .in-writing { 76 | margin-top: 40px; 77 | font-size: 22px; 78 | color: $oc-gray-6; 79 | } 80 | -------------------------------------------------------------------------------- /open-color.css: -------------------------------------------------------------------------------- 1 | /* 2 | * 3 | * 𝗖 𝗢 𝗟 𝗢 𝗥 4 | * v 1.9.1 5 | * 6 | * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ 7 | 8 | :root { 9 | 10 | /* General 11 | * ─────────────────────────────────── */ 12 | 13 | --oc-white: #ffffff; 14 | --oc-white-rgb: 255, 255, 255; 15 | --oc-black: #000000; 16 | --oc-black-rgb: 0, 0, 0; 17 | 18 | 19 | /* Gray 20 | * ─────────────────────────────────── */ 21 | 22 | --oc-gray-0: #f8f9fa; 23 | --oc-gray-0-rgb: 248, 249, 250; 24 | --oc-gray-1: #f1f3f5; 25 | --oc-gray-1-rgb: 241, 243, 245; 26 | --oc-gray-2: #e9ecef; 27 | --oc-gray-2-rgb: 233, 236, 239; 28 | --oc-gray-3: #dee2e6; 29 | --oc-gray-3-rgb: 222, 226, 230; 30 | --oc-gray-4: #ced4da; 31 | --oc-gray-4-rgb: 206, 212, 218; 32 | --oc-gray-5: #adb5bd; 33 | --oc-gray-5-rgb: 173, 181, 189; 34 | --oc-gray-6: #868e96; 35 | --oc-gray-6-rgb: 134, 142, 150; 36 | --oc-gray-7: #495057; 37 | --oc-gray-7-rgb: 73, 80, 87; 38 | --oc-gray-8: #343a40; 39 | --oc-gray-8-rgb: 52, 58, 64; 40 | --oc-gray-9: #212529; 41 | --oc-gray-9-rgb: 33, 37, 41; 42 | 43 | 44 | /* Red 45 | * ─────────────────────────────────── */ 46 | 47 | --oc-red-0: #fff5f5; 48 | --oc-red-0-rgb: 255, 245, 245; 49 | --oc-red-1: #ffe3e3; 50 | --oc-red-1-rgb: 255, 227, 227; 51 | --oc-red-2: #ffc9c9; 52 | --oc-red-2-rgb: 255, 201, 201; 53 | --oc-red-3: #ffa8a8; 54 | --oc-red-3-rgb: 255, 168, 168; 55 | --oc-red-4: #ff8787; 56 | --oc-red-4-rgb: 255, 135, 135; 57 | --oc-red-5: #ff6b6b; 58 | --oc-red-5-rgb: 255, 107, 107; 59 | --oc-red-6: #fa5252; 60 | --oc-red-6-rgb: 250, 82, 82; 61 | --oc-red-7: #f03e3e; 62 | --oc-red-7-rgb: 240, 62, 62; 63 | --oc-red-8: #e03131; 64 | --oc-red-8-rgb: 224, 49, 49; 65 | --oc-red-9: #c92a2a; 66 | --oc-red-9-rgb: 201, 42, 42; 67 | 68 | 69 | /* Pink 70 | * ─────────────────────────────────── */ 71 | 72 | --oc-pink-0: #fff0f6; 73 | --oc-pink-0-rgb: 255, 240, 246; 74 | --oc-pink-1: #ffdeeb; 75 | --oc-pink-1-rgb: 255, 222, 235; 76 | --oc-pink-2: #fcc2d7; 77 | --oc-pink-2-rgb: 252, 194, 215; 78 | --oc-pink-3: #faa2c1; 79 | --oc-pink-3-rgb: 250, 162, 193; 80 | --oc-pink-4: #f783ac; 81 | --oc-pink-4-rgb: 247, 131, 172; 82 | --oc-pink-5: #f06595; 83 | --oc-pink-5-rgb: 240, 101, 149; 84 | --oc-pink-6: #e64980; 85 | --oc-pink-6-rgb: 230, 73, 128; 86 | --oc-pink-7: #d6336c; 87 | --oc-pink-7-rgb: 214, 51, 108; 88 | --oc-pink-8: #c2255c; 89 | --oc-pink-8-rgb: 194, 37, 92; 90 | --oc-pink-9: #a61e4d; 91 | --oc-pink-9-rgb: 166, 30, 77; 92 | 93 | 94 | /* Grape 95 | * ─────────────────────────────────── */ 96 | 97 | --oc-grape-0: #f8f0fc; 98 | --oc-grape-0-rgb: 248, 240, 252; 99 | --oc-grape-1: #f3d9fa; 100 | --oc-grape-1-rgb: 243, 217, 250; 101 | --oc-grape-2: #eebefa; 102 | --oc-grape-2-rgb: 238, 190, 250; 103 | --oc-grape-3: #e599f7; 104 | --oc-grape-3-rgb: 229, 153, 247; 105 | --oc-grape-4: #da77f2; 106 | --oc-grape-4-rgb: 218, 119, 242; 107 | --oc-grape-5: #cc5de8; 108 | --oc-grape-5-rgb: 204, 93, 232; 109 | --oc-grape-6: #be4bdb; 110 | --oc-grape-6-rgb: 190, 75, 219; 111 | --oc-grape-7: #ae3ec9; 112 | --oc-grape-7-rgb: 174, 62, 201; 113 | --oc-grape-8: #9c36b5; 114 | --oc-grape-8-rgb: 156, 54, 181; 115 | --oc-grape-9: #862e9c; 116 | --oc-grape-9-rgb: 134, 46, 156; 117 | 118 | 119 | /* Violet 120 | * ─────────────────────────────────── */ 121 | 122 | --oc-violet-0: #f3f0ff; 123 | --oc-violet-0-rgb: 243, 240, 255; 124 | --oc-violet-1: #e5dbff; 125 | --oc-violet-1-rgb: 229, 219, 255; 126 | --oc-violet-2: #d0bfff; 127 | --oc-violet-2-rgb: 208, 191, 255; 128 | --oc-violet-3: #b197fc; 129 | --oc-violet-3-rgb: 177, 151, 252; 130 | --oc-violet-4: #9775fa; 131 | --oc-violet-4-rgb: 151, 117, 250; 132 | --oc-violet-5: #845ef7; 133 | --oc-violet-5-rgb: 132, 94, 247; 134 | --oc-violet-6: #7950f2; 135 | --oc-violet-6-rgb: 121, 80, 242; 136 | --oc-violet-7: #7048e8; 137 | --oc-violet-7-rgb: 112, 72, 232; 138 | --oc-violet-8: #6741d9; 139 | --oc-violet-8-rgb: 103, 65, 217; 140 | --oc-violet-9: #5f3dc4; 141 | --oc-violet-9-rgb: 95, 61, 196; 142 | 143 | 144 | /* Indigo 145 | * ─────────────────────────────────── */ 146 | 147 | --oc-indigo-0: #edf2ff; 148 | --oc-indigo-0-rgb: 237, 242, 255; 149 | --oc-indigo-1: #dbe4ff; 150 | --oc-indigo-1-rgb: 219, 228, 255; 151 | --oc-indigo-2: #bac8ff; 152 | --oc-indigo-2-rgb: 186, 200, 255; 153 | --oc-indigo-3: #91a7ff; 154 | --oc-indigo-3-rgb: 145, 167, 255; 155 | --oc-indigo-4: #748ffc; 156 | --oc-indigo-4-rgb: 116, 143, 252; 157 | --oc-indigo-5: #5c7cfa; 158 | --oc-indigo-5-rgb: 92, 124, 250; 159 | --oc-indigo-6: #4c6ef5; 160 | --oc-indigo-6-rgb: 76, 110, 245; 161 | --oc-indigo-7: #4263eb; 162 | --oc-indigo-7-rgb: 66, 99, 235; 163 | --oc-indigo-8: #3b5bdb; 164 | --oc-indigo-8-rgb: 59, 91, 219; 165 | --oc-indigo-9: #364fc7; 166 | --oc-indigo-9-rgb: 54, 79, 199; 167 | 168 | 169 | /* Blue 170 | * ─────────────────────────────────── */ 171 | 172 | --oc-blue-0: #e7f5ff; 173 | --oc-blue-0-rgb: 231, 245, 255; 174 | --oc-blue-1: #d0ebff; 175 | --oc-blue-1-rgb: 208, 235, 255; 176 | --oc-blue-2: #a5d8ff; 177 | --oc-blue-2-rgb: 165, 216, 255; 178 | --oc-blue-3: #74c0fc; 179 | --oc-blue-3-rgb: 116, 192, 252; 180 | --oc-blue-4: #4dabf7; 181 | --oc-blue-4-rgb: 77, 171, 247; 182 | --oc-blue-5: #339af0; 183 | --oc-blue-5-rgb: 51, 154, 240; 184 | --oc-blue-6: #228be6; 185 | --oc-blue-6-rgb: 34, 139, 230; 186 | --oc-blue-7: #1c7ed6; 187 | --oc-blue-7-rgb: 28, 126, 214; 188 | --oc-blue-8: #1971c2; 189 | --oc-blue-8-rgb: 25, 113, 194; 190 | --oc-blue-9: #1864ab; 191 | --oc-blue-9-rgb: 24, 100, 171; 192 | 193 | 194 | /* Cyan 195 | * ─────────────────────────────────── */ 196 | 197 | --oc-cyan-0: #e3fafc; 198 | --oc-cyan-0-rgb: 227, 250, 252; 199 | --oc-cyan-1: #c5f6fa; 200 | --oc-cyan-1-rgb: 197, 246, 250; 201 | --oc-cyan-2: #99e9f2; 202 | --oc-cyan-2-rgb: 153, 233, 242; 203 | --oc-cyan-3: #66d9e8; 204 | --oc-cyan-3-rgb: 102, 217, 232; 205 | --oc-cyan-4: #3bc9db; 206 | --oc-cyan-4-rgb: 59, 201, 219; 207 | --oc-cyan-5: #22b8cf; 208 | --oc-cyan-5-rgb: 34, 184, 207; 209 | --oc-cyan-6: #15aabf; 210 | --oc-cyan-6-rgb: 21, 170, 191; 211 | --oc-cyan-7: #1098ad; 212 | --oc-cyan-7-rgb: 16, 152, 173; 213 | --oc-cyan-8: #0c8599; 214 | --oc-cyan-8-rgb: 12, 133, 153; 215 | --oc-cyan-9: #0b7285; 216 | --oc-cyan-9-rgb: 11, 114, 133; 217 | 218 | 219 | /* Teal 220 | * ─────────────────────────────────── */ 221 | 222 | --oc-teal-0: #e6fcf5; 223 | --oc-teal-0-rgb: 230, 252, 245; 224 | --oc-teal-1: #c3fae8; 225 | --oc-teal-1-rgb: 195, 250, 232; 226 | --oc-teal-2: #96f2d7; 227 | --oc-teal-2-rgb: 150, 242, 215; 228 | --oc-teal-3: #63e6be; 229 | --oc-teal-3-rgb: 99, 230, 190; 230 | --oc-teal-4: #38d9a9; 231 | --oc-teal-4-rgb: 56, 217, 169; 232 | --oc-teal-5: #20c997; 233 | --oc-teal-5-rgb: 32, 201, 151; 234 | --oc-teal-6: #12b886; 235 | --oc-teal-6-rgb: 18, 184, 134; 236 | --oc-teal-7: #0ca678; 237 | --oc-teal-7-rgb: 12, 166, 120; 238 | --oc-teal-8: #099268; 239 | --oc-teal-8-rgb: 9, 146, 104; 240 | --oc-teal-9: #087f5b; 241 | --oc-teal-9-rgb: 8, 127, 91; 242 | 243 | 244 | /* Green 245 | * ─────────────────────────────────── */ 246 | 247 | --oc-green-0: #ebfbee; 248 | --oc-green-0-rgb: 235, 251, 238; 249 | --oc-green-1: #d3f9d8; 250 | --oc-green-1-rgb: 211, 249, 216; 251 | --oc-green-2: #b2f2bb; 252 | --oc-green-2-rgb: 178, 242, 187; 253 | --oc-green-3: #8ce99a; 254 | --oc-green-3-rgb: 140, 233, 154; 255 | --oc-green-4: #69db7c; 256 | --oc-green-4-rgb: 105, 219, 124; 257 | --oc-green-5: #51cf66; 258 | --oc-green-5-rgb: 81, 207, 102; 259 | --oc-green-6: #40c057; 260 | --oc-green-6-rgb: 64, 192, 87; 261 | --oc-green-7: #37b24d; 262 | --oc-green-7-rgb: 55, 178, 77; 263 | --oc-green-8: #2f9e44; 264 | --oc-green-8-rgb: 47, 158, 68; 265 | --oc-green-9: #2b8a3e; 266 | --oc-green-9-rgb: 43, 138, 62; 267 | 268 | 269 | /* Lime 270 | * ─────────────────────────────────── */ 271 | 272 | --oc-lime-0: #f4fce3; 273 | --oc-lime-0-rgb: 244, 252, 227; 274 | --oc-lime-1: #e9fac8; 275 | --oc-lime-1-rgb: 233, 250, 200; 276 | --oc-lime-2: #d8f5a2; 277 | --oc-lime-2-rgb: 216, 245, 162; 278 | --oc-lime-3: #c0eb75; 279 | --oc-lime-3-rgb: 192, 235, 117; 280 | --oc-lime-4: #a9e34b; 281 | --oc-lime-4-rgb: 169, 227, 75; 282 | --oc-lime-5: #94d82d; 283 | --oc-lime-5-rgb: 148, 216, 45; 284 | --oc-lime-6: #82c91e; 285 | --oc-lime-6-rgb: 130, 201, 30; 286 | --oc-lime-7: #74b816; 287 | --oc-lime-7-rgb: 116, 184, 22; 288 | --oc-lime-8: #66a80f; 289 | --oc-lime-8-rgb: 102, 168, 15; 290 | --oc-lime-9: #5c940d; 291 | --oc-lime-9-rgb: 92, 148, 13; 292 | 293 | 294 | /* Yellow 295 | * ─────────────────────────────────── */ 296 | 297 | --oc-yellow-0: #fff9db; 298 | --oc-yellow-0-rgb: 255, 249, 219; 299 | --oc-yellow-1: #fff3bf; 300 | --oc-yellow-1-rgb: 255, 243, 191; 301 | --oc-yellow-2: #ffec99; 302 | --oc-yellow-2-rgb: 255, 236, 153; 303 | --oc-yellow-3: #ffe066; 304 | --oc-yellow-3-rgb: 255, 224, 102; 305 | --oc-yellow-4: #ffd43b; 306 | --oc-yellow-4-rgb: 255, 212, 59; 307 | --oc-yellow-5: #fcc419; 308 | --oc-yellow-5-rgb: 252, 196, 25; 309 | --oc-yellow-6: #fab005; 310 | --oc-yellow-6-rgb: 250, 176, 5; 311 | --oc-yellow-7: #f59f00; 312 | --oc-yellow-7-rgb: 245, 159, 0; 313 | --oc-yellow-8: #f08c00; 314 | --oc-yellow-8-rgb: 240, 140, 0; 315 | --oc-yellow-9: #e67700; 316 | --oc-yellow-9-rgb: 230, 119, 0; 317 | 318 | 319 | /* Orange 320 | * ─────────────────────────────────── */ 321 | 322 | --oc-orange-0: #fff4e6; 323 | --oc-orange-0-rgb: 255, 244, 230; 324 | --oc-orange-1: #ffe8cc; 325 | --oc-orange-1-rgb: 255, 232, 204; 326 | --oc-orange-2: #ffd8a8; 327 | --oc-orange-2-rgb: 255, 216, 168; 328 | --oc-orange-3: #ffc078; 329 | --oc-orange-3-rgb: 255, 192, 120; 330 | --oc-orange-4: #ffa94d; 331 | --oc-orange-4-rgb: 255, 169, 77; 332 | --oc-orange-5: #ff922b; 333 | --oc-orange-5-rgb: 255, 146, 43; 334 | --oc-orange-6: #fd7e14; 335 | --oc-orange-6-rgb: 253, 126, 20; 336 | --oc-orange-7: #f76707; 337 | --oc-orange-7-rgb: 247, 103, 7; 338 | --oc-orange-8: #e8590c; 339 | --oc-orange-8-rgb: 232, 89, 12; 340 | --oc-orange-9: #d9480f; 341 | --oc-orange-9-rgb: 217, 72, 15; 342 | 343 | } 344 | -------------------------------------------------------------------------------- /open-color.d.ts: -------------------------------------------------------------------------------- 1 | // 2 | // 3 | // 𝗖 𝗢 𝗟 𝗢 𝗥 4 | // v 1.9.1 5 | // 6 | // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 7 | declare module 'open-color' { 8 | type Color = string; 9 | 10 | interface OpenColor { 11 | white: Color 12 | black: Color 13 | 14 | gray: Color[] 15 | red: Color[] 16 | pink: Color[] 17 | grape: Color[] 18 | violet: Color[] 19 | indigo: Color[] 20 | blue: Color[] 21 | cyan: Color[] 22 | teal: Color[] 23 | green: Color[] 24 | lime: Color[] 25 | yellow: Color[] 26 | orange: Color[] 27 | } 28 | 29 | const OpenColor: OpenColor; 30 | export default OpenColor; 31 | } 32 | -------------------------------------------------------------------------------- /open-color.js: -------------------------------------------------------------------------------- 1 | /* 2 | * 3 | * 𝗖 𝗢 𝗟 𝗢 𝗥 4 | * v 1.9.1 5 | * 6 | * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ 7 | 8 | module.exports = { 9 | theme: { 10 | colors: { 11 | white: "#ffffff", 12 | black: "#000000", 13 | gray: { 14 | 50: "#f8f9fa", 15 | 100: "#f1f3f5", 16 | 200: "#e9ecef", 17 | 300: "#dee2e6", 18 | 400: "#ced4da", 19 | 500: "#adb5bd", 20 | 600: "#868e96", 21 | 700: "#495057", 22 | 800: "#343a40", 23 | 900: "#212529", 24 | }, 25 | red: { 26 | 50: "#fff5f5", 27 | 100: "#ffe3e3", 28 | 200: "#ffc9c9", 29 | 300: "#ffa8a8", 30 | 400: "#ff8787", 31 | 500: "#ff6b6b", 32 | 600: "#fa5252", 33 | 700: "#f03e3e", 34 | 800: "#e03131", 35 | 900: "#c92a2a", 36 | }, 37 | pink: { 38 | 50: "#fff0f6", 39 | 100: "#ffdeeb", 40 | 200: "#fcc2d7", 41 | 300: "#faa2c1", 42 | 400: "#f783ac", 43 | 500: "#f06595", 44 | 600: "#e64980", 45 | 700: "#d6336c", 46 | 800: "#c2255c", 47 | 900: "#a61e4d", 48 | }, 49 | grape: { 50 | 50: "#f8f0fc", 51 | 100: "#f3d9fa", 52 | 200: "#eebefa", 53 | 300: "#e599f7", 54 | 400: "#da77f2", 55 | 500: "#cc5de8", 56 | 600: "#be4bdb", 57 | 700: "#ae3ec9", 58 | 800: "#9c36b5", 59 | 900: "#862e9c", 60 | }, 61 | violet: { 62 | 50: "#f3f0ff", 63 | 100: "#e5dbff", 64 | 200: "#d0bfff", 65 | 300: "#b197fc", 66 | 400: "#9775fa", 67 | 500: "#845ef7", 68 | 600: "#7950f2", 69 | 700: "#7048e8", 70 | 800: "#6741d9", 71 | 900: "#5f3dc4", 72 | }, 73 | indigo: { 74 | 50: "#edf2ff", 75 | 100: "#dbe4ff", 76 | 200: "#bac8ff", 77 | 300: "#91a7ff", 78 | 400: "#748ffc", 79 | 500: "#5c7cfa", 80 | 600: "#4c6ef5", 81 | 700: "#4263eb", 82 | 800: "#3b5bdb", 83 | 900: "#364fc7", 84 | }, 85 | blue: { 86 | 50: "#e7f5ff", 87 | 100: "#d0ebff", 88 | 200: "#a5d8ff", 89 | 300: "#74c0fc", 90 | 400: "#4dabf7", 91 | 500: "#339af0", 92 | 600: "#228be6", 93 | 700: "#1c7ed6", 94 | 800: "#1971c2", 95 | 900: "#1864ab", 96 | }, 97 | cyan: { 98 | 50: "#e3fafc", 99 | 100: "#c5f6fa", 100 | 200: "#99e9f2", 101 | 300: "#66d9e8", 102 | 400: "#3bc9db", 103 | 500: "#22b8cf", 104 | 600: "#15aabf", 105 | 700: "#1098ad", 106 | 800: "#0c8599", 107 | 900: "#0b7285", 108 | }, 109 | teal: { 110 | 50: "#e6fcf5", 111 | 100: "#c3fae8", 112 | 200: "#96f2d7", 113 | 300: "#63e6be", 114 | 400: "#38d9a9", 115 | 500: "#20c997", 116 | 600: "#12b886", 117 | 700: "#0ca678", 118 | 800: "#099268", 119 | 900: "#087f5b", 120 | }, 121 | green: { 122 | 50: "#ebfbee", 123 | 100: "#d3f9d8", 124 | 200: "#b2f2bb", 125 | 300: "#8ce99a", 126 | 400: "#69db7c", 127 | 500: "#51cf66", 128 | 600: "#40c057", 129 | 700: "#37b24d", 130 | 800: "#2f9e44", 131 | 900: "#2b8a3e", 132 | }, 133 | lime: { 134 | 50: "#f4fce3", 135 | 100: "#e9fac8", 136 | 200: "#d8f5a2", 137 | 300: "#c0eb75", 138 | 400: "#a9e34b", 139 | 500: "#94d82d", 140 | 600: "#82c91e", 141 | 700: "#74b816", 142 | 800: "#66a80f", 143 | 900: "#5c940d", 144 | }, 145 | yellow: { 146 | 50: "#fff9db", 147 | 100: "#fff3bf", 148 | 200: "#ffec99", 149 | 300: "#ffe066", 150 | 400: "#ffd43b", 151 | 500: "#fcc419", 152 | 600: "#fab005", 153 | 700: "#f59f00", 154 | 800: "#f08c00", 155 | 900: "#e67700", 156 | }, 157 | orange: { 158 | 50: "#fff4e6", 159 | 100: "#ffe8cc", 160 | 200: "#ffd8a8", 161 | 300: "#ffc078", 162 | 400: "#ffa94d", 163 | 500: "#ff922b", 164 | 600: "#fd7e14", 165 | 700: "#f76707", 166 | 800: "#e8590c", 167 | 900: "#d9480f", 168 | }, 169 | }, 170 | }, 171 | plugins: [], 172 | }; 173 | -------------------------------------------------------------------------------- /open-color.json: -------------------------------------------------------------------------------- 1 | { 2 | "white": "#ffffff", 3 | "black": "#000000", 4 | "gray": [ 5 | "#f8f9fa", 6 | "#f1f3f5", 7 | "#e9ecef", 8 | "#dee2e6", 9 | "#ced4da", 10 | "#adb5bd", 11 | "#868e96", 12 | "#495057", 13 | "#343a40", 14 | "#212529" 15 | ], 16 | "red": [ 17 | "#fff5f5", 18 | "#ffe3e3", 19 | "#ffc9c9", 20 | "#ffa8a8", 21 | "#ff8787", 22 | "#ff6b6b", 23 | "#fa5252", 24 | "#f03e3e", 25 | "#e03131", 26 | "#c92a2a" 27 | ], 28 | "pink": [ 29 | "#fff0f6", 30 | "#ffdeeb", 31 | "#fcc2d7", 32 | "#faa2c1", 33 | "#f783ac", 34 | "#f06595", 35 | "#e64980", 36 | "#d6336c", 37 | "#c2255c", 38 | "#a61e4d" 39 | ], 40 | "grape": [ 41 | "#f8f0fc", 42 | "#f3d9fa", 43 | "#eebefa", 44 | "#e599f7", 45 | "#da77f2", 46 | "#cc5de8", 47 | "#be4bdb", 48 | "#ae3ec9", 49 | "#9c36b5", 50 | "#862e9c" 51 | ], 52 | "violet": [ 53 | "#f3f0ff", 54 | "#e5dbff", 55 | "#d0bfff", 56 | "#b197fc", 57 | "#9775fa", 58 | "#845ef7", 59 | "#7950f2", 60 | "#7048e8", 61 | "#6741d9", 62 | "#5f3dc4" 63 | ], 64 | "indigo": [ 65 | "#edf2ff", 66 | "#dbe4ff", 67 | "#bac8ff", 68 | "#91a7ff", 69 | "#748ffc", 70 | "#5c7cfa", 71 | "#4c6ef5", 72 | "#4263eb", 73 | "#3b5bdb", 74 | "#364fc7" 75 | ], 76 | "blue": [ 77 | "#e7f5ff", 78 | "#d0ebff", 79 | "#a5d8ff", 80 | "#74c0fc", 81 | "#4dabf7", 82 | "#339af0", 83 | "#228be6", 84 | "#1c7ed6", 85 | "#1971c2", 86 | "#1864ab" 87 | ], 88 | "cyan": [ 89 | "#e3fafc", 90 | "#c5f6fa", 91 | "#99e9f2", 92 | "#66d9e8", 93 | "#3bc9db", 94 | "#22b8cf", 95 | "#15aabf", 96 | "#1098ad", 97 | "#0c8599", 98 | "#0b7285" 99 | ], 100 | "teal": [ 101 | "#e6fcf5", 102 | "#c3fae8", 103 | "#96f2d7", 104 | "#63e6be", 105 | "#38d9a9", 106 | "#20c997", 107 | "#12b886", 108 | "#0ca678", 109 | "#099268", 110 | "#087f5b" 111 | ], 112 | "green": [ 113 | "#ebfbee", 114 | "#d3f9d8", 115 | "#b2f2bb", 116 | "#8ce99a", 117 | "#69db7c", 118 | "#51cf66", 119 | "#40c057", 120 | "#37b24d", 121 | "#2f9e44", 122 | "#2b8a3e" 123 | ], 124 | "lime": [ 125 | "#f4fce3", 126 | "#e9fac8", 127 | "#d8f5a2", 128 | "#c0eb75", 129 | "#a9e34b", 130 | "#94d82d", 131 | "#82c91e", 132 | "#74b816", 133 | "#66a80f", 134 | "#5c940d" 135 | ], 136 | "yellow": [ 137 | "#fff9db", 138 | "#fff3bf", 139 | "#ffec99", 140 | "#ffe066", 141 | "#ffd43b", 142 | "#fcc419", 143 | "#fab005", 144 | "#f59f00", 145 | "#f08c00", 146 | "#e67700" 147 | ], 148 | "orange": [ 149 | "#fff4e6", 150 | "#ffe8cc", 151 | "#ffd8a8", 152 | "#ffc078", 153 | "#ffa94d", 154 | "#ff922b", 155 | "#fd7e14", 156 | "#f76707", 157 | "#e8590c", 158 | "#d9480f" 159 | ] 160 | } -------------------------------------------------------------------------------- /open-color.less: -------------------------------------------------------------------------------- 1 | // 2 | // 3 | // 𝗖 𝗢 𝗟 𝗢 𝗥 4 | // v 1.9.1 5 | // 6 | // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 7 | 8 | 9 | // General 10 | // ─────────────────────────────────── 11 | 12 | @oc-white: #ffffff; 13 | @oc-black: #000000; 14 | 15 | 16 | // Gray 17 | // ─────────────────────────────────── 18 | 19 | @oc-gray-list: #f8f9fa, #f1f3f5, #e9ecef, #dee2e6, #ced4da, #adb5bd, #868e96, #495057, #343a40, #212529; 20 | 21 | @oc-gray-0: extract(@oc-gray-list, 1); 22 | @oc-gray-1: extract(@oc-gray-list, 2); 23 | @oc-gray-2: extract(@oc-gray-list, 3); 24 | @oc-gray-3: extract(@oc-gray-list, 4); 25 | @oc-gray-4: extract(@oc-gray-list, 5); 26 | @oc-gray-5: extract(@oc-gray-list, 6); 27 | @oc-gray-6: extract(@oc-gray-list, 7); 28 | @oc-gray-7: extract(@oc-gray-list, 8); 29 | @oc-gray-8: extract(@oc-gray-list, 9); 30 | @oc-gray-9: extract(@oc-gray-list, 10); 31 | 32 | 33 | // Red 34 | // ─────────────────────────────────── 35 | 36 | @oc-red-list: #fff5f5, #ffe3e3, #ffc9c9, #ffa8a8, #ff8787, #ff6b6b, #fa5252, #f03e3e, #e03131, #c92a2a; 37 | 38 | @oc-red-0: extract(@oc-red-list, 1); 39 | @oc-red-1: extract(@oc-red-list, 2); 40 | @oc-red-2: extract(@oc-red-list, 3); 41 | @oc-red-3: extract(@oc-red-list, 4); 42 | @oc-red-4: extract(@oc-red-list, 5); 43 | @oc-red-5: extract(@oc-red-list, 6); 44 | @oc-red-6: extract(@oc-red-list, 7); 45 | @oc-red-7: extract(@oc-red-list, 8); 46 | @oc-red-8: extract(@oc-red-list, 9); 47 | @oc-red-9: extract(@oc-red-list, 10); 48 | 49 | 50 | // Pink 51 | // ─────────────────────────────────── 52 | 53 | @oc-pink-list: #fff0f6, #ffdeeb, #fcc2d7, #faa2c1, #f783ac, #f06595, #e64980, #d6336c, #c2255c, #a61e4d; 54 | 55 | @oc-pink-0: extract(@oc-pink-list, 1); 56 | @oc-pink-1: extract(@oc-pink-list, 2); 57 | @oc-pink-2: extract(@oc-pink-list, 3); 58 | @oc-pink-3: extract(@oc-pink-list, 4); 59 | @oc-pink-4: extract(@oc-pink-list, 5); 60 | @oc-pink-5: extract(@oc-pink-list, 6); 61 | @oc-pink-6: extract(@oc-pink-list, 7); 62 | @oc-pink-7: extract(@oc-pink-list, 8); 63 | @oc-pink-8: extract(@oc-pink-list, 9); 64 | @oc-pink-9: extract(@oc-pink-list, 10); 65 | 66 | 67 | // Grape 68 | // ─────────────────────────────────── 69 | 70 | @oc-grape-list: #f8f0fc, #f3d9fa, #eebefa, #e599f7, #da77f2, #cc5de8, #be4bdb, #ae3ec9, #9c36b5, #862e9c; 71 | 72 | @oc-grape-0: extract(@oc-grape-list, 1); 73 | @oc-grape-1: extract(@oc-grape-list, 2); 74 | @oc-grape-2: extract(@oc-grape-list, 3); 75 | @oc-grape-3: extract(@oc-grape-list, 4); 76 | @oc-grape-4: extract(@oc-grape-list, 5); 77 | @oc-grape-5: extract(@oc-grape-list, 6); 78 | @oc-grape-6: extract(@oc-grape-list, 7); 79 | @oc-grape-7: extract(@oc-grape-list, 8); 80 | @oc-grape-8: extract(@oc-grape-list, 9); 81 | @oc-grape-9: extract(@oc-grape-list, 10); 82 | 83 | 84 | // Violet 85 | // ─────────────────────────────────── 86 | 87 | @oc-violet-list: #f3f0ff, #e5dbff, #d0bfff, #b197fc, #9775fa, #845ef7, #7950f2, #7048e8, #6741d9, #5f3dc4; 88 | 89 | @oc-violet-0: extract(@oc-violet-list, 1); 90 | @oc-violet-1: extract(@oc-violet-list, 2); 91 | @oc-violet-2: extract(@oc-violet-list, 3); 92 | @oc-violet-3: extract(@oc-violet-list, 4); 93 | @oc-violet-4: extract(@oc-violet-list, 5); 94 | @oc-violet-5: extract(@oc-violet-list, 6); 95 | @oc-violet-6: extract(@oc-violet-list, 7); 96 | @oc-violet-7: extract(@oc-violet-list, 8); 97 | @oc-violet-8: extract(@oc-violet-list, 9); 98 | @oc-violet-9: extract(@oc-violet-list, 10); 99 | 100 | 101 | // Indigo 102 | // ─────────────────────────────────── 103 | 104 | @oc-indigo-list: #edf2ff, #dbe4ff, #bac8ff, #91a7ff, #748ffc, #5c7cfa, #4c6ef5, #4263eb, #3b5bdb, #364fc7; 105 | 106 | @oc-indigo-0: extract(@oc-indigo-list, 1); 107 | @oc-indigo-1: extract(@oc-indigo-list, 2); 108 | @oc-indigo-2: extract(@oc-indigo-list, 3); 109 | @oc-indigo-3: extract(@oc-indigo-list, 4); 110 | @oc-indigo-4: extract(@oc-indigo-list, 5); 111 | @oc-indigo-5: extract(@oc-indigo-list, 6); 112 | @oc-indigo-6: extract(@oc-indigo-list, 7); 113 | @oc-indigo-7: extract(@oc-indigo-list, 8); 114 | @oc-indigo-8: extract(@oc-indigo-list, 9); 115 | @oc-indigo-9: extract(@oc-indigo-list, 10); 116 | 117 | 118 | // Blue 119 | // ─────────────────────────────────── 120 | 121 | @oc-blue-list: #e7f5ff, #d0ebff, #a5d8ff, #74c0fc, #4dabf7, #339af0, #228be6, #1c7ed6, #1971c2, #1864ab; 122 | 123 | @oc-blue-0: extract(@oc-blue-list, 1); 124 | @oc-blue-1: extract(@oc-blue-list, 2); 125 | @oc-blue-2: extract(@oc-blue-list, 3); 126 | @oc-blue-3: extract(@oc-blue-list, 4); 127 | @oc-blue-4: extract(@oc-blue-list, 5); 128 | @oc-blue-5: extract(@oc-blue-list, 6); 129 | @oc-blue-6: extract(@oc-blue-list, 7); 130 | @oc-blue-7: extract(@oc-blue-list, 8); 131 | @oc-blue-8: extract(@oc-blue-list, 9); 132 | @oc-blue-9: extract(@oc-blue-list, 10); 133 | 134 | 135 | // Cyan 136 | // ─────────────────────────────────── 137 | 138 | @oc-cyan-list: #e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db, #22b8cf, #15aabf, #1098ad, #0c8599, #0b7285; 139 | 140 | @oc-cyan-0: extract(@oc-cyan-list, 1); 141 | @oc-cyan-1: extract(@oc-cyan-list, 2); 142 | @oc-cyan-2: extract(@oc-cyan-list, 3); 143 | @oc-cyan-3: extract(@oc-cyan-list, 4); 144 | @oc-cyan-4: extract(@oc-cyan-list, 5); 145 | @oc-cyan-5: extract(@oc-cyan-list, 6); 146 | @oc-cyan-6: extract(@oc-cyan-list, 7); 147 | @oc-cyan-7: extract(@oc-cyan-list, 8); 148 | @oc-cyan-8: extract(@oc-cyan-list, 9); 149 | @oc-cyan-9: extract(@oc-cyan-list, 10); 150 | 151 | 152 | // Teal 153 | // ─────────────────────────────────── 154 | 155 | @oc-teal-list: #e6fcf5, #c3fae8, #96f2d7, #63e6be, #38d9a9, #20c997, #12b886, #0ca678, #099268, #087f5b; 156 | 157 | @oc-teal-0: extract(@oc-teal-list, 1); 158 | @oc-teal-1: extract(@oc-teal-list, 2); 159 | @oc-teal-2: extract(@oc-teal-list, 3); 160 | @oc-teal-3: extract(@oc-teal-list, 4); 161 | @oc-teal-4: extract(@oc-teal-list, 5); 162 | @oc-teal-5: extract(@oc-teal-list, 6); 163 | @oc-teal-6: extract(@oc-teal-list, 7); 164 | @oc-teal-7: extract(@oc-teal-list, 8); 165 | @oc-teal-8: extract(@oc-teal-list, 9); 166 | @oc-teal-9: extract(@oc-teal-list, 10); 167 | 168 | 169 | // Green 170 | // ─────────────────────────────────── 171 | 172 | @oc-green-list: #ebfbee, #d3f9d8, #b2f2bb, #8ce99a, #69db7c, #51cf66, #40c057, #37b24d, #2f9e44, #2b8a3e; 173 | 174 | @oc-green-0: extract(@oc-green-list, 1); 175 | @oc-green-1: extract(@oc-green-list, 2); 176 | @oc-green-2: extract(@oc-green-list, 3); 177 | @oc-green-3: extract(@oc-green-list, 4); 178 | @oc-green-4: extract(@oc-green-list, 5); 179 | @oc-green-5: extract(@oc-green-list, 6); 180 | @oc-green-6: extract(@oc-green-list, 7); 181 | @oc-green-7: extract(@oc-green-list, 8); 182 | @oc-green-8: extract(@oc-green-list, 9); 183 | @oc-green-9: extract(@oc-green-list, 10); 184 | 185 | 186 | // Lime 187 | // ─────────────────────────────────── 188 | 189 | @oc-lime-list: #f4fce3, #e9fac8, #d8f5a2, #c0eb75, #a9e34b, #94d82d, #82c91e, #74b816, #66a80f, #5c940d; 190 | 191 | @oc-lime-0: extract(@oc-lime-list, 1); 192 | @oc-lime-1: extract(@oc-lime-list, 2); 193 | @oc-lime-2: extract(@oc-lime-list, 3); 194 | @oc-lime-3: extract(@oc-lime-list, 4); 195 | @oc-lime-4: extract(@oc-lime-list, 5); 196 | @oc-lime-5: extract(@oc-lime-list, 6); 197 | @oc-lime-6: extract(@oc-lime-list, 7); 198 | @oc-lime-7: extract(@oc-lime-list, 8); 199 | @oc-lime-8: extract(@oc-lime-list, 9); 200 | @oc-lime-9: extract(@oc-lime-list, 10); 201 | 202 | 203 | // Yellow 204 | // ─────────────────────────────────── 205 | 206 | @oc-yellow-list: #fff9db, #fff3bf, #ffec99, #ffe066, #ffd43b, #fcc419, #fab005, #f59f00, #f08c00, #e67700; 207 | 208 | @oc-yellow-0: extract(@oc-yellow-list, 1); 209 | @oc-yellow-1: extract(@oc-yellow-list, 2); 210 | @oc-yellow-2: extract(@oc-yellow-list, 3); 211 | @oc-yellow-3: extract(@oc-yellow-list, 4); 212 | @oc-yellow-4: extract(@oc-yellow-list, 5); 213 | @oc-yellow-5: extract(@oc-yellow-list, 6); 214 | @oc-yellow-6: extract(@oc-yellow-list, 7); 215 | @oc-yellow-7: extract(@oc-yellow-list, 8); 216 | @oc-yellow-8: extract(@oc-yellow-list, 9); 217 | @oc-yellow-9: extract(@oc-yellow-list, 10); 218 | 219 | 220 | // Orange 221 | // ─────────────────────────────────── 222 | 223 | @oc-orange-list: #fff4e6, #ffe8cc, #ffd8a8, #ffc078, #ffa94d, #ff922b, #fd7e14, #f76707, #e8590c, #d9480f; 224 | 225 | @oc-orange-0: extract(@oc-orange-list, 1); 226 | @oc-orange-1: extract(@oc-orange-list, 2); 227 | @oc-orange-2: extract(@oc-orange-list, 3); 228 | @oc-orange-3: extract(@oc-orange-list, 4); 229 | @oc-orange-4: extract(@oc-orange-list, 5); 230 | @oc-orange-5: extract(@oc-orange-list, 6); 231 | @oc-orange-6: extract(@oc-orange-list, 7); 232 | @oc-orange-7: extract(@oc-orange-list, 8); 233 | @oc-orange-8: extract(@oc-orange-list, 9); 234 | @oc-orange-9: extract(@oc-orange-list, 10); 235 | -------------------------------------------------------------------------------- /open-color.oco: -------------------------------------------------------------------------------- 1 | /name: 𝗖 𝗢 𝗟 𝗢 𝗥 2 | /version: 1.9.1 3 | /source: https://github.com/yeun/open-color/ 4 | 5 | White: #ffffff 6 | Black: #000000 7 | Grays: 8 | 0: #f8f9fa 9 | 1: #f1f3f5 10 | 2: #e9ecef 11 | 3: #dee2e6 12 | 4: #ced4da 13 | 5: #adb5bd 14 | 6: #868e96 15 | 7: #495057 16 | 8: #343a40 17 | 9: #212529 18 | Reds: 19 | 0: #fff5f5 20 | 1: #ffe3e3 21 | 2: #ffc9c9 22 | 3: #ffa8a8 23 | 4: #ff8787 24 | 5: #ff6b6b 25 | 6: #fa5252 26 | 7: #f03e3e 27 | 8: #e03131 28 | 9: #c92a2a 29 | Pinks: 30 | 0: #fff0f6 31 | 1: #ffdeeb 32 | 2: #fcc2d7 33 | 3: #faa2c1 34 | 4: #f783ac 35 | 5: #f06595 36 | 6: #e64980 37 | 7: #d6336c 38 | 8: #c2255c 39 | 9: #a61e4d 40 | Grapes: 41 | 0: #f8f0fc 42 | 1: #f3d9fa 43 | 2: #eebefa 44 | 3: #e599f7 45 | 4: #da77f2 46 | 5: #cc5de8 47 | 6: #be4bdb 48 | 7: #ae3ec9 49 | 8: #9c36b5 50 | 9: #862e9c 51 | Violets: 52 | 0: #f3f0ff 53 | 1: #e5dbff 54 | 2: #d0bfff 55 | 3: #b197fc 56 | 4: #9775fa 57 | 5: #845ef7 58 | 6: #7950f2 59 | 7: #7048e8 60 | 8: #6741d9 61 | 9: #5f3dc4 62 | Indigos: 63 | 0: #edf2ff 64 | 1: #dbe4ff 65 | 2: #bac8ff 66 | 3: #91a7ff 67 | 4: #748ffc 68 | 5: #5c7cfa 69 | 6: #4c6ef5 70 | 7: #4263eb 71 | 8: #3b5bdb 72 | 9: #364fc7 73 | Blues: 74 | 0: #e7f5ff 75 | 1: #d0ebff 76 | 2: #a5d8ff 77 | 3: #74c0fc 78 | 4: #4dabf7 79 | 5: #339af0 80 | 6: #228be6 81 | 7: #1c7ed6 82 | 8: #1971c2 83 | 9: #1864ab 84 | Cyans: 85 | 0: #e3fafc 86 | 1: #c5f6fa 87 | 2: #99e9f2 88 | 3: #66d9e8 89 | 4: #3bc9db 90 | 5: #22b8cf 91 | 6: #15aabf 92 | 7: #1098ad 93 | 8: #0c8599 94 | 9: #0b7285 95 | Teals: 96 | 0: #e6fcf5 97 | 1: #c3fae8 98 | 2: #96f2d7 99 | 3: #63e6be 100 | 4: #38d9a9 101 | 5: #20c997 102 | 6: #12b886 103 | 7: #0ca678 104 | 8: #099268 105 | 9: #087f5b 106 | Greens: 107 | 0: #ebfbee 108 | 1: #d3f9d8 109 | 2: #b2f2bb 110 | 3: #8ce99a 111 | 4: #69db7c 112 | 5: #51cf66 113 | 6: #40c057 114 | 7: #37b24d 115 | 8: #2f9e44 116 | 9: #2b8a3e 117 | Limes: 118 | 0: #f4fce3 119 | 1: #e9fac8 120 | 2: #d8f5a2 121 | 3: #c0eb75 122 | 4: #a9e34b 123 | 5: #94d82d 124 | 6: #82c91e 125 | 7: #74b816 126 | 8: #66a80f 127 | 9: #5c940d 128 | Yellows: 129 | 0: #fff9db 130 | 1: #fff3bf 131 | 2: #ffec99 132 | 3: #ffe066 133 | 4: #ffd43b 134 | 5: #fcc419 135 | 6: #fab005 136 | 7: #f59f00 137 | 8: #f08c00 138 | 9: #e67700 139 | Oranges: 140 | 0: #fff4e6 141 | 1: #ffe8cc 142 | 2: #ffd8a8 143 | 3: #ffc078 144 | 4: #ffa94d 145 | 5: #ff922b 146 | 6: #fd7e14 147 | 7: #f76707 148 | 8: #e8590c 149 | 9: #d9480f 150 | 151 | Fully Saturated: 152 | gray: =Grays.9 153 | red: =Reds.9 154 | pink: =Pinks.9 155 | grape: =Grapes.9 156 | violet: =Violets.9 157 | indigo: =Indigos.9 158 | blue: =Blues.9 159 | cyan: =Cyans.9 160 | teal: =Teals.9 161 | green: =Greens.9 162 | lime: =Limes.9 163 | yellow: =Yellows.9 164 | orange: =Oranges.9 165 | -------------------------------------------------------------------------------- /open-color.rcpx: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | -------------------------------------------------------------------------------- /open-color.styl: -------------------------------------------------------------------------------- 1 | // 2 | // 3 | // 𝗖 𝗢 𝗟 𝗢 𝗥 4 | // v 1.9.1 5 | // 6 | // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 7 | 8 | 9 | // General 10 | // ─────────────────────────────────── 11 | 12 | oc-white = #ffffff 13 | oc-black = #000000 14 | 15 | 16 | // Gray 17 | // ─────────────────────────────────── 18 | 19 | oc-gray-list = { 20 | '0': #f8f9fa, 21 | '1': #f1f3f5, 22 | '2': #e9ecef, 23 | '3': #dee2e6, 24 | '4': #ced4da, 25 | '5': #adb5bd, 26 | '6': #868e96, 27 | '7': #495057, 28 | '8': #343a40, 29 | '9': #212529 30 | } 31 | 32 | oc-gray-0 = oc-gray-list['0'] 33 | oc-gray-1 = oc-gray-list['1'] 34 | oc-gray-2 = oc-gray-list['2'] 35 | oc-gray-3 = oc-gray-list['3'] 36 | oc-gray-4 = oc-gray-list['4'] 37 | oc-gray-5 = oc-gray-list['5'] 38 | oc-gray-6 = oc-gray-list['6'] 39 | oc-gray-7 = oc-gray-list['7'] 40 | oc-gray-8 = oc-gray-list['8'] 41 | oc-gray-9 = oc-gray-list['9'] 42 | 43 | 44 | // Red 45 | // ─────────────────────────────────── 46 | 47 | oc-red-list = { 48 | '0': #fff5f5, 49 | '1': #ffe3e3, 50 | '2': #ffc9c9, 51 | '3': #ffa8a8, 52 | '4': #ff8787, 53 | '5': #ff6b6b, 54 | '6': #fa5252, 55 | '7': #f03e3e, 56 | '8': #e03131, 57 | '9': #c92a2a 58 | } 59 | 60 | oc-red-0 = oc-red-list['0'] 61 | oc-red-1 = oc-red-list['1'] 62 | oc-red-2 = oc-red-list['2'] 63 | oc-red-3 = oc-red-list['3'] 64 | oc-red-4 = oc-red-list['4'] 65 | oc-red-5 = oc-red-list['5'] 66 | oc-red-6 = oc-red-list['6'] 67 | oc-red-7 = oc-red-list['7'] 68 | oc-red-8 = oc-red-list['8'] 69 | oc-red-9 = oc-red-list['9'] 70 | 71 | 72 | // Pink 73 | // ─────────────────────────────────── 74 | 75 | oc-pink-list = { 76 | '0': #fff0f6, 77 | '1': #ffdeeb, 78 | '2': #fcc2d7, 79 | '3': #faa2c1, 80 | '4': #f783ac, 81 | '5': #f06595, 82 | '6': #e64980, 83 | '7': #d6336c, 84 | '8': #c2255c, 85 | '9': #a61e4d 86 | } 87 | 88 | oc-pink-0 = oc-pink-list['0'] 89 | oc-pink-1 = oc-pink-list['1'] 90 | oc-pink-2 = oc-pink-list['2'] 91 | oc-pink-3 = oc-pink-list['3'] 92 | oc-pink-4 = oc-pink-list['4'] 93 | oc-pink-5 = oc-pink-list['5'] 94 | oc-pink-6 = oc-pink-list['6'] 95 | oc-pink-7 = oc-pink-list['7'] 96 | oc-pink-8 = oc-pink-list['8'] 97 | oc-pink-9 = oc-pink-list['9'] 98 | 99 | 100 | // Grape 101 | // ─────────────────────────────────── 102 | 103 | oc-grape-list = { 104 | '0': #f8f0fc, 105 | '1': #f3d9fa, 106 | '2': #eebefa, 107 | '3': #e599f7, 108 | '4': #da77f2, 109 | '5': #cc5de8, 110 | '6': #be4bdb, 111 | '7': #ae3ec9, 112 | '8': #9c36b5, 113 | '9': #862e9c 114 | } 115 | 116 | oc-grape-0 = oc-grape-list['0'] 117 | oc-grape-1 = oc-grape-list['1'] 118 | oc-grape-2 = oc-grape-list['2'] 119 | oc-grape-3 = oc-grape-list['3'] 120 | oc-grape-4 = oc-grape-list['4'] 121 | oc-grape-5 = oc-grape-list['5'] 122 | oc-grape-6 = oc-grape-list['6'] 123 | oc-grape-7 = oc-grape-list['7'] 124 | oc-grape-8 = oc-grape-list['8'] 125 | oc-grape-9 = oc-grape-list['9'] 126 | 127 | 128 | // Violet 129 | // ─────────────────────────────────── 130 | 131 | oc-violet-list = { 132 | '0': #f3f0ff, 133 | '1': #e5dbff, 134 | '2': #d0bfff, 135 | '3': #b197fc, 136 | '4': #9775fa, 137 | '5': #845ef7, 138 | '6': #7950f2, 139 | '7': #7048e8, 140 | '8': #6741d9, 141 | '9': #5f3dc4 142 | } 143 | 144 | oc-violet-0 = oc-violet-list['0'] 145 | oc-violet-1 = oc-violet-list['1'] 146 | oc-violet-2 = oc-violet-list['2'] 147 | oc-violet-3 = oc-violet-list['3'] 148 | oc-violet-4 = oc-violet-list['4'] 149 | oc-violet-5 = oc-violet-list['5'] 150 | oc-violet-6 = oc-violet-list['6'] 151 | oc-violet-7 = oc-violet-list['7'] 152 | oc-violet-8 = oc-violet-list['8'] 153 | oc-violet-9 = oc-violet-list['9'] 154 | 155 | 156 | // Indigo 157 | // ─────────────────────────────────── 158 | 159 | oc-indigo-list = { 160 | '0': #edf2ff, 161 | '1': #dbe4ff, 162 | '2': #bac8ff, 163 | '3': #91a7ff, 164 | '4': #748ffc, 165 | '5': #5c7cfa, 166 | '6': #4c6ef5, 167 | '7': #4263eb, 168 | '8': #3b5bdb, 169 | '9': #364fc7 170 | } 171 | 172 | oc-indigo-0 = oc-indigo-list['0'] 173 | oc-indigo-1 = oc-indigo-list['1'] 174 | oc-indigo-2 = oc-indigo-list['2'] 175 | oc-indigo-3 = oc-indigo-list['3'] 176 | oc-indigo-4 = oc-indigo-list['4'] 177 | oc-indigo-5 = oc-indigo-list['5'] 178 | oc-indigo-6 = oc-indigo-list['6'] 179 | oc-indigo-7 = oc-indigo-list['7'] 180 | oc-indigo-8 = oc-indigo-list['8'] 181 | oc-indigo-9 = oc-indigo-list['9'] 182 | 183 | 184 | // Blue 185 | // ─────────────────────────────────── 186 | 187 | oc-blue-list = { 188 | '0': #e7f5ff, 189 | '1': #d0ebff, 190 | '2': #a5d8ff, 191 | '3': #74c0fc, 192 | '4': #4dabf7, 193 | '5': #339af0, 194 | '6': #228be6, 195 | '7': #1c7ed6, 196 | '8': #1971c2, 197 | '9': #1864ab 198 | } 199 | 200 | oc-blue-0 = oc-blue-list['0'] 201 | oc-blue-1 = oc-blue-list['1'] 202 | oc-blue-2 = oc-blue-list['2'] 203 | oc-blue-3 = oc-blue-list['3'] 204 | oc-blue-4 = oc-blue-list['4'] 205 | oc-blue-5 = oc-blue-list['5'] 206 | oc-blue-6 = oc-blue-list['6'] 207 | oc-blue-7 = oc-blue-list['7'] 208 | oc-blue-8 = oc-blue-list['8'] 209 | oc-blue-9 = oc-blue-list['9'] 210 | 211 | 212 | // Cyan 213 | // ─────────────────────────────────── 214 | 215 | oc-cyan-list = { 216 | '0': #e3fafc, 217 | '1': #c5f6fa, 218 | '2': #99e9f2, 219 | '3': #66d9e8, 220 | '4': #3bc9db, 221 | '5': #22b8cf, 222 | '6': #15aabf, 223 | '7': #1098ad, 224 | '8': #0c8599, 225 | '9': #0b7285 226 | } 227 | 228 | oc-cyan-0 = oc-cyan-list['0'] 229 | oc-cyan-1 = oc-cyan-list['1'] 230 | oc-cyan-2 = oc-cyan-list['2'] 231 | oc-cyan-3 = oc-cyan-list['3'] 232 | oc-cyan-4 = oc-cyan-list['4'] 233 | oc-cyan-5 = oc-cyan-list['5'] 234 | oc-cyan-6 = oc-cyan-list['6'] 235 | oc-cyan-7 = oc-cyan-list['7'] 236 | oc-cyan-8 = oc-cyan-list['8'] 237 | oc-cyan-9 = oc-cyan-list['9'] 238 | 239 | 240 | // Teal 241 | // ─────────────────────────────────── 242 | 243 | oc-teal-list = { 244 | '0': #e6fcf5, 245 | '1': #c3fae8, 246 | '2': #96f2d7, 247 | '3': #63e6be, 248 | '4': #38d9a9, 249 | '5': #20c997, 250 | '6': #12b886, 251 | '7': #0ca678, 252 | '8': #099268, 253 | '9': #087f5b 254 | } 255 | 256 | oc-teal-0 = oc-teal-list['0'] 257 | oc-teal-1 = oc-teal-list['1'] 258 | oc-teal-2 = oc-teal-list['2'] 259 | oc-teal-3 = oc-teal-list['3'] 260 | oc-teal-4 = oc-teal-list['4'] 261 | oc-teal-5 = oc-teal-list['5'] 262 | oc-teal-6 = oc-teal-list['6'] 263 | oc-teal-7 = oc-teal-list['7'] 264 | oc-teal-8 = oc-teal-list['8'] 265 | oc-teal-9 = oc-teal-list['9'] 266 | 267 | 268 | // Green 269 | // ─────────────────────────────────── 270 | 271 | oc-green-list = { 272 | '0': #ebfbee, 273 | '1': #d3f9d8, 274 | '2': #b2f2bb, 275 | '3': #8ce99a, 276 | '4': #69db7c, 277 | '5': #51cf66, 278 | '6': #40c057, 279 | '7': #37b24d, 280 | '8': #2f9e44, 281 | '9': #2b8a3e 282 | } 283 | 284 | oc-green-0 = oc-green-list['0'] 285 | oc-green-1 = oc-green-list['1'] 286 | oc-green-2 = oc-green-list['2'] 287 | oc-green-3 = oc-green-list['3'] 288 | oc-green-4 = oc-green-list['4'] 289 | oc-green-5 = oc-green-list['5'] 290 | oc-green-6 = oc-green-list['6'] 291 | oc-green-7 = oc-green-list['7'] 292 | oc-green-8 = oc-green-list['8'] 293 | oc-green-9 = oc-green-list['9'] 294 | 295 | 296 | // Lime 297 | // ─────────────────────────────────── 298 | 299 | oc-lime-list = { 300 | '0': #f4fce3, 301 | '1': #e9fac8, 302 | '2': #d8f5a2, 303 | '3': #c0eb75, 304 | '4': #a9e34b, 305 | '5': #94d82d, 306 | '6': #82c91e, 307 | '7': #74b816, 308 | '8': #66a80f, 309 | '9': #5c940d 310 | } 311 | 312 | oc-lime-0 = oc-lime-list['0'] 313 | oc-lime-1 = oc-lime-list['1'] 314 | oc-lime-2 = oc-lime-list['2'] 315 | oc-lime-3 = oc-lime-list['3'] 316 | oc-lime-4 = oc-lime-list['4'] 317 | oc-lime-5 = oc-lime-list['5'] 318 | oc-lime-6 = oc-lime-list['6'] 319 | oc-lime-7 = oc-lime-list['7'] 320 | oc-lime-8 = oc-lime-list['8'] 321 | oc-lime-9 = oc-lime-list['9'] 322 | 323 | 324 | // Yellow 325 | // ─────────────────────────────────── 326 | 327 | oc-yellow-list = { 328 | '0': #fff9db, 329 | '1': #fff3bf, 330 | '2': #ffec99, 331 | '3': #ffe066, 332 | '4': #ffd43b, 333 | '5': #fcc419, 334 | '6': #fab005, 335 | '7': #f59f00, 336 | '8': #f08c00, 337 | '9': #e67700 338 | } 339 | 340 | oc-yellow-0 = oc-yellow-list['0'] 341 | oc-yellow-1 = oc-yellow-list['1'] 342 | oc-yellow-2 = oc-yellow-list['2'] 343 | oc-yellow-3 = oc-yellow-list['3'] 344 | oc-yellow-4 = oc-yellow-list['4'] 345 | oc-yellow-5 = oc-yellow-list['5'] 346 | oc-yellow-6 = oc-yellow-list['6'] 347 | oc-yellow-7 = oc-yellow-list['7'] 348 | oc-yellow-8 = oc-yellow-list['8'] 349 | oc-yellow-9 = oc-yellow-list['9'] 350 | 351 | 352 | // Orange 353 | // ─────────────────────────────────── 354 | 355 | oc-orange-list = { 356 | '0': #fff4e6, 357 | '1': #ffe8cc, 358 | '2': #ffd8a8, 359 | '3': #ffc078, 360 | '4': #ffa94d, 361 | '5': #ff922b, 362 | '6': #fd7e14, 363 | '7': #f76707, 364 | '8': #e8590c, 365 | '9': #d9480f 366 | } 367 | 368 | oc-orange-0 = oc-orange-list['0'] 369 | oc-orange-1 = oc-orange-list['1'] 370 | oc-orange-2 = oc-orange-list['2'] 371 | oc-orange-3 = oc-orange-list['3'] 372 | oc-orange-4 = oc-orange-list['4'] 373 | oc-orange-5 = oc-orange-list['5'] 374 | oc-orange-6 = oc-orange-list['6'] 375 | oc-orange-7 = oc-orange-list['7'] 376 | oc-orange-8 = oc-orange-list['8'] 377 | oc-orange-9 = oc-orange-list['9'] 378 | -------------------------------------------------------------------------------- /open-color.tex: -------------------------------------------------------------------------------- 1 | % 2 | % 3 | % 𝗖 𝗢 𝗟 𝗢 𝗥 4 | % v 1.9.1 5 | % 6 | % ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ % 7 | 8 | % General 9 | % ─────────────────────────────────── % 10 | 11 | \definecolor{white}{RGB}{255, 255, 255} 12 | \definecolor{black}{RGB}{0, 0, 0} 13 | 14 | 15 | % Gray 16 | % ─────────────────────────────────── % 17 | 18 | \definecolor{gray-0}{RGB}{248, 249, 250} 19 | \definecolor{gray-1}{RGB}{241, 243, 245} 20 | \definecolor{gray-2}{RGB}{233, 236, 239} 21 | \definecolor{gray-3}{RGB}{222, 226, 230} 22 | \definecolor{gray-4}{RGB}{206, 212, 218} 23 | \definecolor{gray-5}{RGB}{173, 181, 189} 24 | \definecolor{gray-6}{RGB}{134, 142, 150} 25 | \definecolor{gray-7}{RGB}{73, 80, 87} 26 | \definecolor{gray-8}{RGB}{52, 58, 64} 27 | \definecolor{gray-9}{RGB}{33, 37, 41} 28 | 29 | 30 | % Red 31 | % ─────────────────────────────────── % 32 | 33 | \definecolor{red-0}{RGB}{255, 245, 245} 34 | \definecolor{red-1}{RGB}{255, 227, 227} 35 | \definecolor{red-2}{RGB}{255, 201, 201} 36 | \definecolor{red-3}{RGB}{255, 168, 168} 37 | \definecolor{red-4}{RGB}{255, 135, 135} 38 | \definecolor{red-5}{RGB}{255, 107, 107} 39 | \definecolor{red-6}{RGB}{250, 82, 82} 40 | \definecolor{red-7}{RGB}{240, 62, 62} 41 | \definecolor{red-8}{RGB}{224, 49, 49} 42 | \definecolor{red-9}{RGB}{201, 42, 42} 43 | 44 | 45 | % Pink 46 | % ─────────────────────────────────── % 47 | 48 | \definecolor{pink-0}{RGB}{255, 240, 246} 49 | \definecolor{pink-1}{RGB}{255, 222, 235} 50 | \definecolor{pink-2}{RGB}{252, 194, 215} 51 | \definecolor{pink-3}{RGB}{250, 162, 193} 52 | \definecolor{pink-4}{RGB}{247, 131, 172} 53 | \definecolor{pink-5}{RGB}{240, 101, 149} 54 | \definecolor{pink-6}{RGB}{230, 73, 128} 55 | \definecolor{pink-7}{RGB}{214, 51, 108} 56 | \definecolor{pink-8}{RGB}{194, 37, 92} 57 | \definecolor{pink-9}{RGB}{166, 30, 77} 58 | 59 | 60 | % Grape 61 | % ─────────────────────────────────── % 62 | 63 | \definecolor{grape-0}{RGB}{248, 240, 252} 64 | \definecolor{grape-1}{RGB}{243, 217, 250} 65 | \definecolor{grape-2}{RGB}{238, 190, 250} 66 | \definecolor{grape-3}{RGB}{229, 153, 247} 67 | \definecolor{grape-4}{RGB}{218, 119, 242} 68 | \definecolor{grape-5}{RGB}{204, 93, 232} 69 | \definecolor{grape-6}{RGB}{190, 75, 219} 70 | \definecolor{grape-7}{RGB}{174, 62, 201} 71 | \definecolor{grape-8}{RGB}{156, 54, 181} 72 | \definecolor{grape-9}{RGB}{134, 46, 156} 73 | 74 | 75 | % Violet 76 | % ─────────────────────────────────── % 77 | 78 | \definecolor{violet-0}{RGB}{243, 240, 255} 79 | \definecolor{violet-1}{RGB}{229, 219, 255} 80 | \definecolor{violet-2}{RGB}{208, 191, 255} 81 | \definecolor{violet-3}{RGB}{177, 151, 252} 82 | \definecolor{violet-4}{RGB}{151, 117, 250} 83 | \definecolor{violet-5}{RGB}{132, 94, 247} 84 | \definecolor{violet-6}{RGB}{121, 80, 242} 85 | \definecolor{violet-7}{RGB}{112, 72, 232} 86 | \definecolor{violet-8}{RGB}{103, 65, 217} 87 | \definecolor{violet-9}{RGB}{95, 61, 196} 88 | 89 | 90 | % Indigo 91 | % ─────────────────────────────────── % 92 | 93 | \definecolor{indigo-0}{RGB}{237, 242, 255} 94 | \definecolor{indigo-1}{RGB}{219, 228, 255} 95 | \definecolor{indigo-2}{RGB}{186, 200, 255} 96 | \definecolor{indigo-3}{RGB}{145, 167, 255} 97 | \definecolor{indigo-4}{RGB}{116, 143, 252} 98 | \definecolor{indigo-5}{RGB}{92, 124, 250} 99 | \definecolor{indigo-6}{RGB}{76, 110, 245} 100 | \definecolor{indigo-7}{RGB}{66, 99, 235} 101 | \definecolor{indigo-8}{RGB}{59, 91, 219} 102 | \definecolor{indigo-9}{RGB}{54, 79, 199} 103 | 104 | 105 | % Blue 106 | % ─────────────────────────────────── % 107 | 108 | \definecolor{blue-0}{RGB}{231, 245, 255} 109 | \definecolor{blue-1}{RGB}{208, 235, 255} 110 | \definecolor{blue-2}{RGB}{165, 216, 255} 111 | \definecolor{blue-3}{RGB}{116, 192, 252} 112 | \definecolor{blue-4}{RGB}{77, 171, 247} 113 | \definecolor{blue-5}{RGB}{51, 154, 240} 114 | \definecolor{blue-6}{RGB}{34, 139, 230} 115 | \definecolor{blue-7}{RGB}{28, 126, 214} 116 | \definecolor{blue-8}{RGB}{25, 113, 194} 117 | \definecolor{blue-9}{RGB}{24, 100, 171} 118 | 119 | 120 | % Cyan 121 | % ─────────────────────────────────── % 122 | 123 | \definecolor{cyan-0}{RGB}{227, 250, 252} 124 | \definecolor{cyan-1}{RGB}{197, 246, 250} 125 | \definecolor{cyan-2}{RGB}{153, 233, 242} 126 | \definecolor{cyan-3}{RGB}{102, 217, 232} 127 | \definecolor{cyan-4}{RGB}{59, 201, 219} 128 | \definecolor{cyan-5}{RGB}{34, 184, 207} 129 | \definecolor{cyan-6}{RGB}{21, 170, 191} 130 | \definecolor{cyan-7}{RGB}{16, 152, 173} 131 | \definecolor{cyan-8}{RGB}{12, 133, 153} 132 | \definecolor{cyan-9}{RGB}{11, 114, 133} 133 | 134 | 135 | % Teal 136 | % ─────────────────────────────────── % 137 | 138 | \definecolor{teal-0}{RGB}{230, 252, 245} 139 | \definecolor{teal-1}{RGB}{195, 250, 232} 140 | \definecolor{teal-2}{RGB}{150, 242, 215} 141 | \definecolor{teal-3}{RGB}{99, 230, 190} 142 | \definecolor{teal-4}{RGB}{56, 217, 169} 143 | \definecolor{teal-5}{RGB}{32, 201, 151} 144 | \definecolor{teal-6}{RGB}{18, 184, 134} 145 | \definecolor{teal-7}{RGB}{12, 166, 120} 146 | \definecolor{teal-8}{RGB}{9, 146, 104} 147 | \definecolor{teal-9}{RGB}{8, 127, 91} 148 | 149 | 150 | % Green 151 | % ─────────────────────────────────── % 152 | 153 | \definecolor{green-0}{RGB}{235, 251, 238} 154 | \definecolor{green-1}{RGB}{211, 249, 216} 155 | \definecolor{green-2}{RGB}{178, 242, 187} 156 | \definecolor{green-3}{RGB}{140, 233, 154} 157 | \definecolor{green-4}{RGB}{105, 219, 124} 158 | \definecolor{green-5}{RGB}{81, 207, 102} 159 | \definecolor{green-6}{RGB}{64, 192, 87} 160 | \definecolor{green-7}{RGB}{55, 178, 77} 161 | \definecolor{green-8}{RGB}{47, 158, 68} 162 | \definecolor{green-9}{RGB}{43, 138, 62} 163 | 164 | 165 | % Lime 166 | % ─────────────────────────────────── % 167 | 168 | \definecolor{lime-0}{RGB}{244, 252, 227} 169 | \definecolor{lime-1}{RGB}{233, 250, 200} 170 | \definecolor{lime-2}{RGB}{216, 245, 162} 171 | \definecolor{lime-3}{RGB}{192, 235, 117} 172 | \definecolor{lime-4}{RGB}{169, 227, 75} 173 | \definecolor{lime-5}{RGB}{148, 216, 45} 174 | \definecolor{lime-6}{RGB}{130, 201, 30} 175 | \definecolor{lime-7}{RGB}{116, 184, 22} 176 | \definecolor{lime-8}{RGB}{102, 168, 15} 177 | \definecolor{lime-9}{RGB}{92, 148, 13} 178 | 179 | 180 | % Yellow 181 | % ─────────────────────────────────── % 182 | 183 | \definecolor{yellow-0}{RGB}{255, 249, 219} 184 | \definecolor{yellow-1}{RGB}{255, 243, 191} 185 | \definecolor{yellow-2}{RGB}{255, 236, 153} 186 | \definecolor{yellow-3}{RGB}{255, 224, 102} 187 | \definecolor{yellow-4}{RGB}{255, 212, 59} 188 | \definecolor{yellow-5}{RGB}{252, 196, 25} 189 | \definecolor{yellow-6}{RGB}{250, 176, 5} 190 | \definecolor{yellow-7}{RGB}{245, 159, 0} 191 | \definecolor{yellow-8}{RGB}{240, 140, 0} 192 | \definecolor{yellow-9}{RGB}{230, 119, 0} 193 | 194 | 195 | % Orange 196 | % ─────────────────────────────────── % 197 | 198 | \definecolor{orange-0}{RGB}{255, 244, 230} 199 | \definecolor{orange-1}{RGB}{255, 232, 204} 200 | \definecolor{orange-2}{RGB}{255, 216, 168} 201 | \definecolor{orange-3}{RGB}{255, 192, 120} 202 | \definecolor{orange-4}{RGB}{255, 169, 77} 203 | \definecolor{orange-5}{RGB}{255, 146, 43} 204 | \definecolor{orange-6}{RGB}{253, 126, 20} 205 | \definecolor{orange-7}{RGB}{247, 103, 7} 206 | \definecolor{orange-8}{RGB}{232, 89, 12} 207 | \definecolor{orange-9}{RGB}{217, 72, 15} 208 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "open-color", 3 | "version": "1.9.1", 4 | "description": "Open color scheme for web UI", 5 | "main": "open-color.json", 6 | "style": "open-color.css", 7 | "files": [ 8 | "open-color.js", 9 | "open-color.json", 10 | "open-color.css", 11 | "open-color.scss", 12 | "open-color.less", 13 | "open-color.styl", 14 | "open-color.d.ts" 15 | ], 16 | "scripts": { 17 | "test": "npm run test-typescript", 18 | "test-typescript": "tsc open-color.d.ts tests/typescript.ts --noEmit", 19 | "compile-templates": "node compile-templates.js", 20 | "prepare": "npm run compile-templates", 21 | "prepublishOnly": "npm run compile-templates" 22 | }, 23 | "repository": { 24 | "type": "git", 25 | "url": "git+https://github.com/yeun/open-color.git" 26 | }, 27 | "keywords": [ 28 | "color", 29 | "colorscheme", 30 | "color swatches", 31 | "SCSS", 32 | "Less", 33 | "Stylus", 34 | "CSS" 35 | ], 36 | "author": "Jeong Heeyeun ", 37 | "license": "MIT", 38 | "bugs": { 39 | "url": "https://github.com/yeun/open-color/issues" 40 | }, 41 | "homepage": "https://github.com/yeun/open-color", 42 | "devDependencies": { 43 | "archiver": "^1.3.0", 44 | "ase-utils": "^0.1.1", 45 | "handlebars": "^4.1.2", 46 | "typescript": "^2.9.2", 47 | "uuid": "^3.3.2" 48 | }, 49 | "types": "./open-color.d.ts" 50 | } 51 | -------------------------------------------------------------------------------- /templates/_config.yml.hbs: -------------------------------------------------------------------------------- 1 | baseurl: /open-color 2 | host: 0.0.0.0 3 | markdown: kramdown 4 | highlighter: rouge 5 | 6 | oc-version: {{version}} 7 | colors: [ 8 | {{#each colors as |color|}} 9 | "{{color.name}}"{{#unless @last}},{{/unless}} 10 | {{/each}}] 11 | 12 | {{#each colors as |color|}} 13 | {{color.name}}-hexs: [ 14 | {{#each color.hex as |hex|}} 15 | "{{hex}}"{{#unless @last}},{{/unless}} 16 | {{/each}}] 17 | 18 | {{/each}} 19 | -------------------------------------------------------------------------------- /templates/open-color.code-snippets.hbs: -------------------------------------------------------------------------------- 1 | // 2 | // 3 | // 𝗖 𝗢 𝗟 𝗢 𝗥 4 | // v {{version}} 5 | // 6 | // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 7 | 8 | { 9 | // General 10 | 11 | {{#each general as |color|}} 12 | "{{capitalize color.name}}": { 13 | "prefix": ["oc-{{color.name}}"], 14 | "body": ["{{color.hex}}"] 15 | }, 16 | {{/each}} 17 | {{#each colors as |color|}} 18 | 19 | // {{capitalize color.name}} 20 | 21 | {{#each color.hex as |hex index|}} 22 | "{{capitalize color.name}} {{index}}": { 23 | "prefix": ["oc-{{color.name}}-{{index}}"], 24 | "body": ["{{hex}}"] 25 | }, 26 | {{/each}} 27 | {{/each}} 28 | } 29 | -------------------------------------------------------------------------------- /templates/open-color.css.hbs: -------------------------------------------------------------------------------- 1 | /* 2 | * 3 | * 𝗖 𝗢 𝗟 𝗢 𝗥 4 | * v {{version}} 5 | * 6 | * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ 7 | 8 | :root { 9 | 10 | /* General 11 | * ─────────────────────────────────── */ 12 | 13 | {{#each general as |color|}} 14 | --oc-{{color.name}}: {{color.hex}}; 15 | {{#with (hex2rgb color.hex) as |rgb|}} 16 | --oc-{{color.name}}-rgb: {{rgb.r}}, {{rgb.g}}, {{rgb.b}}; 17 | {{/with}} 18 | {{/each}} 19 | {{#each colors as |color|}} 20 | 21 | 22 | /* {{capitalize color.name}} 23 | * ─────────────────────────────────── */ 24 | 25 | {{#each color.hex as |hex index|}} 26 | --oc-{{color.name}}-{{index}}: {{hex}}; 27 | {{#with (hex2rgb hex) as |rgb|}} 28 | --oc-{{color.name}}-{{index}}-rgb: {{rgb.r}}, {{rgb.g}}, {{rgb.b}}; 29 | {{/with}} 30 | {{/each}} 31 | {{/each}} 32 | 33 | } 34 | -------------------------------------------------------------------------------- /templates/open-color.d.ts.hbs: -------------------------------------------------------------------------------- 1 | // 2 | // 3 | // 𝗖 𝗢 𝗟 𝗢 𝗥 4 | // v {{version}} 5 | // 6 | // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 7 | declare module 'open-color' { 8 | type Color = string; 9 | 10 | interface OpenColor { 11 | {{#each general as |color|}} 12 | {{color.name}}: Color 13 | {{/each}} 14 | 15 | {{#each colors as |color|}} 16 | {{color.name}}: Color[] 17 | {{/each}} 18 | } 19 | 20 | const OpenColor: OpenColor; 21 | export default OpenColor; 22 | } 23 | -------------------------------------------------------------------------------- /templates/open-color.inkscape.hbs: -------------------------------------------------------------------------------- 1 | GIMP Palette 2 | Name: Open Color Palette {{version}} 3 | Columns: 0 4 | # 5 | {{#each colors as |color|}} 6 | {{#each color.hex as |hex|~}} 7 | {{#with (hex2rgb hex) as |rgb|~}} 8 | {{rgb.r}} {{rgb.g}} {{rgb.b}} 9 | {{~/with}} 10 | {{color.name}}{{@index}} 11 | {{/each}} 12 | {{/each}} 13 | -------------------------------------------------------------------------------- /templates/open-color.js.hbs: -------------------------------------------------------------------------------- 1 | /* 2 | * 3 | * 𝗖 𝗢 𝗟 𝗢 𝗥 4 | * v {{version}} 5 | * 6 | * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ 7 | 8 | module.exports = { 9 | theme: { 10 | colors: { 11 | white: "#ffffff", 12 | black: "#000000", 13 | gray: { 14 | 50: "#f8f9fa", 15 | 100: "#f1f3f5", 16 | 200: "#e9ecef", 17 | 300: "#dee2e6", 18 | 400: "#ced4da", 19 | 500: "#adb5bd", 20 | 600: "#868e96", 21 | 700: "#495057", 22 | 800: "#343a40", 23 | 900: "#212529", 24 | }, 25 | red: { 26 | 50: "#fff5f5", 27 | 100: "#ffe3e3", 28 | 200: "#ffc9c9", 29 | 300: "#ffa8a8", 30 | 400: "#ff8787", 31 | 500: "#ff6b6b", 32 | 600: "#fa5252", 33 | 700: "#f03e3e", 34 | 800: "#e03131", 35 | 900: "#c92a2a", 36 | }, 37 | pink: { 38 | 50: "#fff0f6", 39 | 100: "#ffdeeb", 40 | 200: "#fcc2d7", 41 | 300: "#faa2c1", 42 | 400: "#f783ac", 43 | 500: "#f06595", 44 | 600: "#e64980", 45 | 700: "#d6336c", 46 | 800: "#c2255c", 47 | 900: "#a61e4d", 48 | }, 49 | grape: { 50 | 50: "#f8f0fc", 51 | 100: "#f3d9fa", 52 | 200: "#eebefa", 53 | 300: "#e599f7", 54 | 400: "#da77f2", 55 | 500: "#cc5de8", 56 | 600: "#be4bdb", 57 | 700: "#ae3ec9", 58 | 800: "#9c36b5", 59 | 900: "#862e9c", 60 | }, 61 | violet: { 62 | 50: "#f3f0ff", 63 | 100: "#e5dbff", 64 | 200: "#d0bfff", 65 | 300: "#b197fc", 66 | 400: "#9775fa", 67 | 500: "#845ef7", 68 | 600: "#7950f2", 69 | 700: "#7048e8", 70 | 800: "#6741d9", 71 | 900: "#5f3dc4", 72 | }, 73 | indigo: { 74 | 50: "#edf2ff", 75 | 100: "#dbe4ff", 76 | 200: "#bac8ff", 77 | 300: "#91a7ff", 78 | 400: "#748ffc", 79 | 500: "#5c7cfa", 80 | 600: "#4c6ef5", 81 | 700: "#4263eb", 82 | 800: "#3b5bdb", 83 | 900: "#364fc7", 84 | }, 85 | blue: { 86 | 50: "#e7f5ff", 87 | 100: "#d0ebff", 88 | 200: "#a5d8ff", 89 | 300: "#74c0fc", 90 | 400: "#4dabf7", 91 | 500: "#339af0", 92 | 600: "#228be6", 93 | 700: "#1c7ed6", 94 | 800: "#1971c2", 95 | 900: "#1864ab", 96 | }, 97 | cyan: { 98 | 50: "#e3fafc", 99 | 100: "#c5f6fa", 100 | 200: "#99e9f2", 101 | 300: "#66d9e8", 102 | 400: "#3bc9db", 103 | 500: "#22b8cf", 104 | 600: "#15aabf", 105 | 700: "#1098ad", 106 | 800: "#0c8599", 107 | 900: "#0b7285", 108 | }, 109 | teal: { 110 | 50: "#e6fcf5", 111 | 100: "#c3fae8", 112 | 200: "#96f2d7", 113 | 300: "#63e6be", 114 | 400: "#38d9a9", 115 | 500: "#20c997", 116 | 600: "#12b886", 117 | 700: "#0ca678", 118 | 800: "#099268", 119 | 900: "#087f5b", 120 | }, 121 | green: { 122 | 50: "#ebfbee", 123 | 100: "#d3f9d8", 124 | 200: "#b2f2bb", 125 | 300: "#8ce99a", 126 | 400: "#69db7c", 127 | 500: "#51cf66", 128 | 600: "#40c057", 129 | 700: "#37b24d", 130 | 800: "#2f9e44", 131 | 900: "#2b8a3e", 132 | }, 133 | lime: { 134 | 50: "#f4fce3", 135 | 100: "#e9fac8", 136 | 200: "#d8f5a2", 137 | 300: "#c0eb75", 138 | 400: "#a9e34b", 139 | 500: "#94d82d", 140 | 600: "#82c91e", 141 | 700: "#74b816", 142 | 800: "#66a80f", 143 | 900: "#5c940d", 144 | }, 145 | yellow: { 146 | 50: "#fff9db", 147 | 100: "#fff3bf", 148 | 200: "#ffec99", 149 | 300: "#ffe066", 150 | 400: "#ffd43b", 151 | 500: "#fcc419", 152 | 600: "#fab005", 153 | 700: "#f59f00", 154 | 800: "#f08c00", 155 | 900: "#e67700", 156 | }, 157 | orange: { 158 | 50: "#fff4e6", 159 | 100: "#ffe8cc", 160 | 200: "#ffd8a8", 161 | 300: "#ffc078", 162 | 400: "#ffa94d", 163 | 500: "#ff922b", 164 | 600: "#fd7e14", 165 | 700: "#f76707", 166 | 800: "#e8590c", 167 | 900: "#d9480f", 168 | }, 169 | }, 170 | }, 171 | plugins: [], 172 | }; 173 | -------------------------------------------------------------------------------- /templates/open-color.less.hbs: -------------------------------------------------------------------------------- 1 | // 2 | // 3 | // 𝗖 𝗢 𝗟 𝗢 𝗥 4 | // v {{version}} 5 | // 6 | // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 7 | 8 | 9 | // General 10 | // ─────────────────────────────────── 11 | 12 | {{#each general as |color|}} 13 | @oc-{{color.name}}: {{color.hex}}; 14 | {{/each}} 15 | {{#each colors as |color|}} 16 | 17 | 18 | // {{capitalize color.name}} 19 | // ─────────────────────────────────── 20 | 21 | @oc-{{color.name}}-list: {{join color.hex ', '}}; 22 | 23 | @oc-{{color.name}}-0: extract(@oc-{{color.name}}-list, 1); 24 | @oc-{{color.name}}-1: extract(@oc-{{color.name}}-list, 2); 25 | @oc-{{color.name}}-2: extract(@oc-{{color.name}}-list, 3); 26 | @oc-{{color.name}}-3: extract(@oc-{{color.name}}-list, 4); 27 | @oc-{{color.name}}-4: extract(@oc-{{color.name}}-list, 5); 28 | @oc-{{color.name}}-5: extract(@oc-{{color.name}}-list, 6); 29 | @oc-{{color.name}}-6: extract(@oc-{{color.name}}-list, 7); 30 | @oc-{{color.name}}-7: extract(@oc-{{color.name}}-list, 8); 31 | @oc-{{color.name}}-8: extract(@oc-{{color.name}}-list, 9); 32 | @oc-{{color.name}}-9: extract(@oc-{{color.name}}-list, 10); 33 | {{/each}} 34 | -------------------------------------------------------------------------------- /templates/open-color.oco.hbs: -------------------------------------------------------------------------------- 1 | /name: 𝗖 𝗢 𝗟 𝗢 𝗥 2 | /version: {{version}} 3 | /source: https://github.com/yeun/open-color/ 4 | 5 | {{#each general as |color|}} 6 | {{capitalize color.name}}: {{color.hex}} 7 | {{/each}} 8 | {{#each colors as |color|}} 9 | {{capitalize color.name}}s: 10 | {{#each color.hex as |hex index|}} 11 | {{index}}: {{hex}} 12 | {{/each}} 13 | {{/each}} 14 | 15 | Fully Saturated: 16 | {{#each colors as |color|}} 17 | {{color.name}}: ={{capitalize color.name}}s.9 18 | {{/each}} 19 | -------------------------------------------------------------------------------- /templates/open-color.rcpx.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | {{#each colors as |color|}} 11 | {{#each color.hex as |hex index|}} 12 | {{#with (hex2rgb hex) as |rgb|}} 13 | 14 | {{/with}} 15 | {{/each}} 16 | {{/each}} 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /templates/open-color.scss.hbs: -------------------------------------------------------------------------------- 1 | // 2 | // 3 | // 𝗖 𝗢 𝗟 𝗢 𝗥 4 | // v {{version}} 5 | // 6 | // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 7 | 8 | 9 | // General 10 | // ─────────────────────────────────── 11 | 12 | {{#each general as |color|}} 13 | $oc-{{color.name}}: {{color.hex}}; 14 | {{/each}} 15 | 16 | 17 | {{#each colors as |color|}} 18 | // {{capitalize color.name}} 19 | // ─────────────────────────────────── 20 | 21 | $oc-{{color.name}}-list: ( 22 | {{#each color.hex as |hex index|}} 23 | "{{index}}": {{hex}}{{#unless @last}},{{/unless}} 24 | {{/each}} 25 | ); 26 | 27 | $oc-{{color.name}}-0: map-get($oc-{{color.name}}-list, "0"); 28 | $oc-{{color.name}}-1: map-get($oc-{{color.name}}-list, "1"); 29 | $oc-{{color.name}}-2: map-get($oc-{{color.name}}-list, "2"); 30 | $oc-{{color.name}}-3: map-get($oc-{{color.name}}-list, "3"); 31 | $oc-{{color.name}}-4: map-get($oc-{{color.name}}-list, "4"); 32 | $oc-{{color.name}}-5: map-get($oc-{{color.name}}-list, "5"); 33 | $oc-{{color.name}}-6: map-get($oc-{{color.name}}-list, "6"); 34 | $oc-{{color.name}}-7: map-get($oc-{{color.name}}-list, "7"); 35 | $oc-{{color.name}}-8: map-get($oc-{{color.name}}-list, "8"); 36 | $oc-{{color.name}}-9: map-get($oc-{{color.name}}-list, "9"); 37 | 38 | 39 | {{/each}} 40 | // Color list 41 | // ─────────────────────────────────── 42 | 43 | $oc-color-spectrum: {{spectrum}}; 44 | 45 | $oc-color-list: ( 46 | {{#each colors as |color|}} 47 | $oc-{{color.name}}-list: "{{color.name}}"{{#unless @last}},{{/unless}} 48 | {{/each}} 49 | ); 50 | -------------------------------------------------------------------------------- /templates/open-color.sketchpalette.hbs: -------------------------------------------------------------------------------- 1 | {"compatibleVersion":"1.4","pluginVersion":"1.5","colors":[{{#each colors as |color colorIndex|~}} 2 | {{#each color.hex as |hex|~}} 3 | {{#with (hex2rgb hex) as |rgb|~}} 4 | {"red":{{div rgb.r 255}},"green":{{div rgb.g 255}},"blue":{{div rgb.b 255}},"alpha":1}{{#unless (and @last @../last)}},{{/unless}} 5 | {{~/with}} 6 | {{~/each}} 7 | {{~/each}}]} 8 | -------------------------------------------------------------------------------- /templates/open-color.styl.hbs: -------------------------------------------------------------------------------- 1 | // 2 | // 3 | // 𝗖 𝗢 𝗟 𝗢 𝗥 4 | // v {{version}} 5 | // 6 | // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 7 | 8 | 9 | // General 10 | // ─────────────────────────────────── 11 | 12 | {{#each general as |color|}} 13 | oc-{{color.name}} = {{color.hex}} 14 | {{/each}} 15 | {{#each colors as |color|}} 16 | 17 | 18 | // {{capitalize color.name}} 19 | // ─────────────────────────────────── 20 | 21 | oc-{{color.name}}-list = { 22 | {{#each color.hex as |hex index|}} 23 | '{{index}}': {{hex}}{{#unless @last}},{{/unless}} 24 | {{/each}} 25 | } 26 | 27 | oc-{{color.name}}-0 = oc-{{color.name}}-list['0'] 28 | oc-{{color.name}}-1 = oc-{{color.name}}-list['1'] 29 | oc-{{color.name}}-2 = oc-{{color.name}}-list['2'] 30 | oc-{{color.name}}-3 = oc-{{color.name}}-list['3'] 31 | oc-{{color.name}}-4 = oc-{{color.name}}-list['4'] 32 | oc-{{color.name}}-5 = oc-{{color.name}}-list['5'] 33 | oc-{{color.name}}-6 = oc-{{color.name}}-list['6'] 34 | oc-{{color.name}}-7 = oc-{{color.name}}-list['7'] 35 | oc-{{color.name}}-8 = oc-{{color.name}}-list['8'] 36 | oc-{{color.name}}-9 = oc-{{color.name}}-list['9'] 37 | {{/each}} 38 | -------------------------------------------------------------------------------- /templates/open-color.svg.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | {{#block-params 85 30 2 2 70 12 as |width height padding borderRadius rowHeight fontSize|}} 10 | 11 | {{#each colors as |color colorIndex|}} 12 | 13 | 14 | 15 | {{#each color.hex as |hex index|}} 16 | 23 | 29 | {{upper color.name}} {{index}} 30 | 31 | 36 | {{#with (hex2rgb (apply @root.filter hex)) as |rgb|}}{{rgb.r}},{{rgb.g}},{{rgb.b}}{{/with}} 37 | 38 | {{/each}} 39 | 40 | {{/each}} 41 | 42 | {{/block-params}} 43 | 44 | 45 | -------------------------------------------------------------------------------- /templates/open-color.tex.hbs: -------------------------------------------------------------------------------- 1 | % 2 | % 3 | % 𝗖 𝗢 𝗟 𝗢 𝗥 4 | % v {{version}} 5 | % 6 | % ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ % 7 | 8 | % General 9 | % ─────────────────────────────────── % 10 | 11 | {{#each general as |color|}} 12 | {{#with (hex2rgb color.hex) as |rgb|}} 13 | \definecolor{ {{~color.name~}} }{RGB}{ {{~rgb.r}}, {{rgb.g}}, {{rgb.b~}} } 14 | {{/with}} 15 | {{/each}} 16 | {{#each colors as |color|}} 17 | 18 | 19 | % {{capitalize color.name}} 20 | % ─────────────────────────────────── % 21 | 22 | {{#each color.hex as |hex index|}} 23 | {{#with (hex2rgb hex) as |rgb|}} 24 | \definecolor{ {{~color.name}}-{{index~}} }{RGB}{ {{~rgb.r}}, {{rgb.g}}, {{rgb.b~}} } 25 | {{/with}} 26 | {{/each}} 27 | {{/each}} 28 | -------------------------------------------------------------------------------- /tests/typescript.ts: -------------------------------------------------------------------------------- 1 | import OpenColor = require("open-color"); 2 | 3 | // black is regular string field 4 | OpenColor.black.substring(1); 5 | 6 | // red is array string field 7 | OpenColor.red.forEach(hex => { 8 | console.log(hex.substring(1)); 9 | }); --------------------------------------------------------------------------------