{"id":13528005,"url":"https://github.com/c0bra/color-scheme-js","last_synced_at":"2025-05-16T05:04:49.503Z","repository":{"id":7438062,"uuid":"8777699","full_name":"c0bra/color-scheme-js","owner":"c0bra","description":"Generate pleasant color schemes in JavaScript","archived":false,"fork":false,"pushed_at":"2019-07-18T03:29:15.000Z","size":97,"stargazers_count":431,"open_issues_count":2,"forks_count":53,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-08T15:06:25.722Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://c0bra.github.com/color-scheme-js/","language":"CoffeeScript","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/c0bra.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":"2013-03-14T14:55:53.000Z","updated_at":"2025-03-09T22:37:45.000Z","dependencies_parsed_at":"2022-08-26T20:44:34.818Z","dependency_job_id":null,"html_url":"https://github.com/c0bra/color-scheme-js","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c0bra%2Fcolor-scheme-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c0bra%2Fcolor-scheme-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c0bra%2Fcolor-scheme-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c0bra%2Fcolor-scheme-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/c0bra","download_url":"https://codeload.github.com/c0bra/color-scheme-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254471060,"owners_count":22076585,"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-08-01T06:02:09.829Z","updated_at":"2025-05-16T05:04:49.486Z","avatar_url":"https://github.com/c0bra.png","language":"CoffeeScript","funding_links":[],"categories":["CoffeeScript"],"sub_categories":[],"readme":"# color-scheme.js\n\nGenerate pleasant color schemes (sets of colors).\n\nThis library is based on the perl module [Color::Scheme](http://search.cpan.org/~rjbs/Color-Scheme-1.04/lib/Color/Scheme.pm), which is in turn based on the [Color Scheme Designer website](http://colorschemedesigner.com/).\n\nCheck out [how it works](http://c0bra.github.com/color-scheme-js/).\n\nGet the [minified file](https://raw.github.com/c0bra/color-scheme-js/master/lib/color-scheme.min.js) (8kb).\n\nOr for some reason, you could use the [full file](https://raw.github.com/c0bra/color-scheme-js/master/lib/color-scheme.js) (18kb).\n\n## Table of Contents\n\n- [Description](#description)\n- [Usage](#usage)\n- [Schemes](#schemes)\n  - [mono](#mono-monochromatic)\n  - [contrast](#contrast)\n  - [triade](#triade)\n  - [tetrade](#tetrade)\n  - [analogic](#analogic)\n- [Variations](#variations)\n  - [pastel](#pastel)\n  - [soft](#soft)\n  - [light](#light)\n  - [hard](#hard)\n  - [pale](#pale)\n- [Methods](#methods)\n\n## Description\n\nThis module is a JavaScript implementation of the Perl implementation of Color Schemes\n2 ([http://wellstyled.com/tools/colorscheme2](http://wellstyled.com/tools/colorscheme2)), a color scheme generator.\nStart by visitng the Color Schemes 2 web site and playing with the colors.\nWhen you want to generate those schemes on the fly, begin using this modoule.\nThe descriptions herein don't make too much sense without actually seeing the\ncolorful results.\n\nHenceforth, paragraphs in quotes denote documentation copied from Color Schemes 2.\n\n*\"Important note: **This tool doesn't use the standard HSV or HSB model** (the\nsame HSV/HSB values ie. in Photoshop describe different colors!). The color\nwheel used here differs from the RGB spectre used on computer screens, it's\nmore in accordance with the classical color theory. This is also why some\ncolors (especially shades of blue) make less bright shades than the basic\ncolors of the RGB-model. In plus, the RGB-model uses red-green-blue as primary\ncolors, but the red-yellow-blue combination is used here. This deformation also\ncauses incompatibility in color conversions from RGB-values. Therefore, the RGB\ninput (eg. the HTML hex values like #F854A9) is not exact, the conversion is\nrough and sometimes may produce slightly different color.\"*\n\n## Usage\n\n### In node.js\n\nGotta install it first:\n\n```\nnpm install color-scheme\n```\n\n```javascript\nvar ColorScheme = require('color-scheme');\n\nvar scheme = new ColorScheme;\nscheme.from_hue(21)         // Start the scheme \n      .scheme('triade')     // Use the 'triade' scheme, that is, colors\n                            // selected from 3 points equidistant around\n                            // the color wheel.\n      .variation('soft');   // Use the 'soft' color variation\n\nvar colors = scheme.colors();\n\n/*\n  colors = [ \"e69373\", \"805240\", \"e6d5cf\", \"bf5830\" ,\n             \"77d36a\", \"488040\", \"d2e6cf\", \"43bf30\" ,\n             \"557aaa\", \"405c80\", \"cfd9e6\", \"306ebf\" ]\n*/\n```\n\n### In the browser\n\n```html\n\u003cscript src=\"wherever/your/installed/color-scheme.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n  // Pretty much the same exact syntax!\n  var scheme = new ColorScheme;\n  scheme.from_hue(21)         \n        .scheme('triade')   \n        .variation('soft');\n\n\n  var colors = scheme.colors();\n\n  /*\n    colors = [ \"e69373\", \"805240\", \"e6d5cf\", \"bf5830\" ,\n               \"77d36a\", \"488040\", \"d2e6cf\", \"43bf30\" ,\n               \"557aaa\", \"405c80\", \"cfd9e6\", \"306ebf\" ]\n  */\n\u003cscript\u003e\n```\n\n## Schemes\n\nThere are five color schemes.\n\n### mono (monochromatic)\n\nThe monochromatic scheme is based on selecting a single hue on the color wheel, then adding more colors by varying the source color's saturation and brightness.\n\nFour colors will be produced.\n\n### contrast\n\nContrast supplements the selected hue with its complement (the color opposite it on the color wheel) as another source color.\n\n8 colors will be produced.\n\n### triade\n\nTriade takes the selected hue and adds two more source colors that are both a certain distance from the initial hue.\n\nThe [distance()](#distancefloat) method can be used to specify how far additional source colors will be from the initial hue.\n\n12 colors will be produced.\n\n### tetrade\n\nTetrade adds another yet source color, meaning four total sources.\n\n16 colors will be produced.\n\n### analogic\n\nAnalogic produces colors that are \"analogous\", or next to each other on the color wheel.\n\nIncreasing the distance [distance()](#distancefloat) will push the colors away from each other. *\"Values between 0.25 and 0.5 (15-30 degrees on the wheel) are optimal.\"*\n\n12 colors will be produced.\n\nAdditionally, the [add_complement()](#add_complementbool) method can be used to add complementary colors (i.e. those that are opposite the source colors on the color wheel). This will result in 16 colors. *\"It must be treated only as a complement - it adds tension to the palette, and it's too aggressive when overused. However, used in details and as accent of main colors, it can be very effective and elegant.\"*\n\n## Variations\n\nThese variations will alter the produced colors. They basically work exactly like filters would in any image editing program.\n\n### default\n\nThe default variation. No change to the colors.\n\n```javascript\ns.variation('default');\n```\n\n### pastel\n\nProduces pastel colors, which have in HSV high value and low-intermediate saturation.\n\n```javascript\ns.variation('pastel');\n```\n\n### soft\n\nProduces darker pastel colors.\n\n```javascript\ns.variation('soft');\n```\n\n### light\n\nVery light, almost washed-out colors.\n\n```javascript\ns.variation('light');\n```\n\n### hard\n\nDeeper, very saturated colors.\n\n```javascript\ns.variation('hard');\n```\n\n### pale\n\nColors with more gray; less saturated.\n\n```javascript\ns.variation('pale');\n```\n\n## Methods\n\nColorScheme instances use method chaining to alter settings.\n\n### scheme([scheme_name])\n\nSet the scheme to [scheme_name]. The possible values are 'mono', 'contrast', 'triade', 'tetrade', and 'analogic'.\n\n```javascript\nvar s = new ColorScheme\n\n// Set the scheme to analogic\ns.scheme('analogic');\n```\n\n### distance([float])\n\n**Note:** Only works with the schemes 'triade', 'tetrade', and 'analogic'. (Because 'mono' only has one source color, and with 'contrast' the two source colors are always 180 degrees away from each other.)\n\nThis method sets the distance of the additional source colors from the initial hue. The value must be a float from 0 to 1.\n\n```javascript\nvar s = new ColorScheme;\nvar colors = s.scheme('triade')\n .distance(0.75)\n .colors();\n\n/*\n  colors = [ \"ff9900\", \"b36b00\", \"ffe6bf\", \"ffcc80\",\n             \"00b366\", \"007d48\", \"bfffe4\", \"80ffc9\",\n             \"400099\", \"2d006b\", \"dabfff\", \"b580ff\" ]\n*/\n```\n\n### add_complement([bool])\n\nAdd complementary colors to the ```analogic``` scheme. Does not work with any other scheme.\n\n### colors()\n\nReturns the array of generated colors as hex values.\n\n**Note:** Because this method returns the colors, it obviously *cannot* be chained afterwards.\n\n```javascript\nvar colors = s.colors()\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc0bra%2Fcolor-scheme-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fc0bra%2Fcolor-scheme-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc0bra%2Fcolor-scheme-js/lists"}