{"id":15502877,"url":"https://github.com/johno/gray","last_synced_at":"2025-12-12T03:56:36.782Z","repository":{"id":20795645,"uuid":"24080901","full_name":"johno/gray","owner":"johno","description":"A grayscale color palette for prototyping the web.","archived":false,"fork":false,"pushed_at":"2015-11-11T22:08:52.000Z","size":4733,"stargazers_count":11,"open_issues_count":6,"forks_count":22,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T03:52:09.173Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"www.g-r-a-y-s-c-a-l-e.com","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/johno.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-09-16T01:35:37.000Z","updated_at":"2018-07-24T13:24:27.000Z","dependencies_parsed_at":"2022-08-30T12:10:26.461Z","dependency_job_id":null,"html_url":"https://github.com/johno/gray","commit_stats":null,"previous_names":["johnotander/gray"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johno%2Fgray","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johno%2Fgray/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johno%2Fgray/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johno%2Fgray/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johno","download_url":"https://codeload.github.com/johno/gray/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250338341,"owners_count":21414162,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-02T09:11:26.739Z","updated_at":"2025-12-12T03:56:36.715Z","avatar_url":"https://github.com/johno.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Gray\n\n\u003chttp://www.g-r-a-y-s-c-a-l-e.com\u003e\n\nTry out different grays while prototyping with the switch of a variable.\n\n## Installation\n\nYou can install via [bower](http://bower.io):\n\n```\n$ bower install --save grayscale\n```\n\nOr, you can install via [npm](http://npmjs.org):\n\n```\n$ npm install --save gray\n```\nOr, you can clone the source:\n\n```\n$ git clone https://github.com/johnotander/gray.git\n```\n\n### Using with rework\n\nGray integrates with rework, requiring only the rework-npm and rework-vars plugins:\n\nIt provides an index.css file, so you can do the following (assuming the gray npm module is installed).\n\n```css\n@import \"gray\";\n\n/* ... */\n```\n\n```js\nvar gulp       = require('gulp'),\n    rework     = require('gulp-rework'),\n    reworkVars = require('gulp-rework-vars'),\n    reworkNPM  = require('rework-npm');\n\ngulp.task('css', function() {\n  return gulp.src('your-css-file.css')\n    .pipe(rework(reworkNPM(), reworkVars()))\n    .pipe(gulp.dest('dist'));\n});\n```\n\n### Using the SCSS\n\nIn your Scss file, you can import furtive:\n\n```scss\n@import \"/path/to/gray/scss/all\";     // For rgba variables.\n@import \"/path/to/gray/scss/all-hex\"; // For hex variables.\n```\n\nOr, if you like, you can just import the variables, they're located in the\n`scss` directory, like so:\n\n```scss\n@import \"/path/to/gray/scss/variables\";\n```\n\n### Using the CSS\n\nFurtive provides four CSS files: `gray.css`, `gray-hex.css`, and their minified versions. In\norder to use one, you can add a `\u003clink\u003e` in your `\u003chead\u003e`.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003c!-- ... --\u003e\n  \u003clink rel=\"stylesheet\" href=\"/path/to/gray/css/gray.min.css\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003c!-- ... --\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Usage\n\nDetailed color examples available at \u003chttp://www.g-r-a-y-s-c-a-l-e.com\u003e.\n\n### Variables\n\nIf using SCSS, you know have access to the following variables:\n\n```scss\n$gray-light-0: #a0a0a0 !default;\n$gray-light-1: #a8a8a8 !default;\n$gray-light-2: #b0b0b0 !default;\n$gray-light-3: #b8b8b8 !default;\n$gray-light-4: #c0c0c0 !default;\n$gray-light-5: #d8d8d8 !default;\n$gray-light-6: #e0e0e0 !default;\n$gray-light-7: #e8e8e8 !default;\n$gray-light-8: #fafafa !default;\n$gray-light-9: #fff !default;\n\n$gray-mid-0: #606060 !default;\n$gray-mid-1: #666 !default;\n$gray-mid-2: #707070 !default;\n$gray-mid-3: #777 !default;\n$gray-mid-4: #808080 !default;\n$gray-mid-5: #888 !default;\n$gray-mid-6: #909090 !default;\n$gray-mid-7: #999 !default;\n$gray-mid-8: #a0a0a0 !default;\n$gray-mid-9: #a8a8a8 !default;\n\n$gray-dark-0: #080808 !default;\n$gray-dark-1: #101010 !default;\n$gray-dark-2: #1a1a1a !default;\n$gray-dark-3: #202020 !default;\n$gray-dark-4: #222 !default;\n$gray-dark-5: #282828 !default;\n$gray-dark-6: #333 !default;\n$gray-dark-7: #383838 !default;\n$gray-dark-8: #444 !default;\n$gray-dark-9: #484848 !default;\n```\n\n### Background color\n\nThe utility classes for backround color:\n\n```scss\n.bg-gray-light-0 { background-color: $gray-light-0; }\n.bg-gray-light-1 { background-color: $gray-light-1; }\n.bg-gray-light-2 { background-color: $gray-light-2; }\n.bg-gray-light-3 { background-color: $gray-light-3; }\n.bg-gray-light-4 { background-color: $gray-light-4; }\n.bg-gray-light-5 { background-color: $gray-light-5; }\n.bg-gray-light-6 { background-color: $gray-light-6; }\n.bg-gray-light-7 { background-color: $gray-light-7; }\n.bg-gray-light-8 { background-color: $gray-light-8; }\n.bg-gray-light-9 { background-color: $gray-light-9; }\n\n.bg-gray-mid-0 { background-color: $gray-mid-0; }\n.bg-gray-mid-1 { background-color: $gray-mid-1; }\n.bg-gray-mid-2 { background-color: $gray-mid-2; }\n.bg-gray-mid-3 { background-color: $gray-mid-3; }\n.bg-gray-mid-4 { background-color: $gray-mid-4; }\n.bg-gray-mid-5 { background-color: $gray-mid-5; }\n.bg-gray-mid-6 { background-color: $gray-mid-6; }\n.bg-gray-mid-7 { background-color: $gray-mid-7; }\n.bg-gray-mid-8 { background-color: $gray-mid-8; }\n.bg-gray-mid-9 { background-color: $gray-mid-9; }\n\n.bg-gray-dark-0 { background-color: $gray-dark-0; }\n.bg-gray-dark-1 { background-color: $gray-dark-1; }\n.bg-gray-dark-2 { background-color: $gray-dark-2; }\n.bg-gray-dark-3 { background-color: $gray-dark-3; }\n.bg-gray-dark-4 { background-color: $gray-dark-4; }\n.bg-gray-dark-5 { background-color: $gray-dark-5; }\n.bg-gray-dark-6 { background-color: $gray-dark-6; }\n.bg-gray-dark-7 { background-color: $gray-dark-7; }\n.bg-gray-dark-8 { background-color: $gray-dark-8; }\n.bg-gray-dark-9 { background-color: $gray-dark-9; }\n```\n\n### Text color\n\nThe utility classes for text color:\n\n```scss\n.gray-light-0 { color: $gray-light-0; }\n.gray-light-1 { color: $gray-light-1; }\n.gray-light-2 { color: $gray-light-2; }\n.gray-light-3 { color: $gray-light-3; }\n.gray-light-4 { color: $gray-light-4; }\n.gray-light-5 { color: $gray-light-5; }\n.gray-light-6 { color: $gray-light-6; }\n.gray-light-7 { color: $gray-light-7; }\n.gray-light-8 { color: $gray-light-8; }\n.gray-light-9 { color: $gray-light-9; }\n\n.gray-mid-0 { color: $gray-mid-0; }\n.gray-mid-1 { color: $gray-mid-1; }\n.gray-mid-2 { color: $gray-mid-2; }\n.gray-mid-3 { color: $gray-mid-3; }\n.gray-mid-4 { color: $gray-mid-4; }\n.gray-mid-5 { color: $gray-mid-5; }\n.gray-mid-6 { color: $gray-mid-6; }\n.gray-mid-7 { color: $gray-mid-7; }\n.gray-mid-8 { color: $gray-mid-8; }\n.gray-mid-9 { color: $gray-mid-9; }\n\n.gray-dark-0 { color: $gray-dark-0; }\n.gray-dark-1 { color: $gray-dark-1; }\n.gray-dark-2 { color: $gray-dark-2; }\n.gray-dark-3 { color: $gray-dark-3; }\n.gray-dark-4 { color: $gray-dark-4; }\n.gray-dark-5 { color: $gray-dark-5; }\n.gray-dark-6 { color: $gray-dark-6; }\n.gray-dark-7 { color: $gray-dark-7; }\n.gray-dark-8 { color: $gray-dark-8; }\n.gray-dark-9 { color: $gray-dark-9; }\n```\n\n\n\n## License\n\nMIT\n\n## Contributing\n\n1. Fork it\n2. Create your feature branch (`git checkout -b my-new-feature`)\n3. Commit your changes (`git commit -am 'Add some feature'`)\n4. Push to the branch (`git push origin my-new-feature`)\n5. Create new Pull Request\n\nInspired by \u003chttp://clrs.cc\u003e\n\nCrafted with \u003c3 by [John Otander](http://johnotander.com)([@4lpine](https://twitter.com/4lpine)).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohno%2Fgray","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohno%2Fgray","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohno%2Fgray/lists"}