{"id":13394151,"url":"https://github.com/lyft/coloralgorithm","last_synced_at":"2025-04-09T22:10:53.235Z","repository":{"id":66215726,"uuid":"149773103","full_name":"lyft/coloralgorithm","owner":"lyft","description":"Javacript function to produce color sets","archived":false,"fork":false,"pushed_at":"2023-10-02T09:10:34.000Z","size":10,"stargazers_count":233,"open_issues_count":7,"forks_count":43,"subscribers_count":185,"default_branch":"master","last_synced_at":"2025-04-09T22:10:49.756Z","etag":null,"topics":["lyft"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lyft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-09-21T14:15:43.000Z","updated_at":"2025-02-13T09:15:20.000Z","dependencies_parsed_at":"2024-01-13T17:11:16.366Z","dependency_job_id":"66359cf5-561a-4293-a6e6-3ff74577d007","html_url":"https://github.com/lyft/coloralgorithm","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyft%2Fcoloralgorithm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyft%2Fcoloralgorithm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyft%2Fcoloralgorithm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyft%2Fcoloralgorithm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lyft","download_url":"https://codeload.github.com/lyft/coloralgorithm/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248119294,"owners_count":21050755,"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":["lyft"],"created_at":"2024-07-30T17:01:10.657Z","updated_at":"2025-04-09T22:10:53.217Z","avatar_url":"https://github.com/lyft.png","language":"JavaScript","readme":"# coloralgorithm\n\nA JavaScript function for producing color sets. Used to build Lyft's color system (Spectrum) and power [ColorBox](https://www.colorbox.io/).\n\n## Background\n\n- [Re-Approaching Color by Lyft Design](https://design.lyft.com/re-approaching-color-9e604ba22c88)\n- [Designing a Comprehensive Color System by Linda Dong](https://www.rethinkhq.com/videos/designing-a-comprehensive-color-system-for-lyft)\n\n## Usage\n\nThe function takes in a JavaScript object with a `specs` key that describes the properties of the desired color palette:\n\n```javascript\nimport generate from \"./src/generate\";\n\nconst input = {\n  specs: {\n    // Number of colors\n    steps: 11,\n    // Hue Start Value (0 - 359)\n    hue_start: 315,\n    // Hue End Value (0 - 359)\n    hue_end: 293,\n    // Hue Curve (See Curves Section)\n    hue_curve: \"easeInQuad\",\n    // Saturation Start Value (0 - 100)\n    sat_start: 4,\n    // Saturation End Value (0 - 100)\n    sat_end: 90,\n    // Saturation Curve (See Curves Section)\n    sat_curve: \"easeOutQuad\",\n    // Saturation Rate (0 - 200)\n    sat_rate: 130,\n    // Luminosity Start Value (0 - 100)\n    lum_start: 100,\n    // Luminosity End Value (0 - 100)\n    lum_end: 53,\n    // Luminosity Curve (See Curves Section)\n    lum_curve: \"easeOutQuad\",\n    // Modifier Scale\n    // Every generated color gets a modifier (label) that\n    // indicates its lightness. A value of 10 results in\n    // two-digit modifiers. The lightest color will be 0 (e.g. Red 0)\n    // and the darkest color will be 100 (e.g. Red 100), given\n    // that you generate 11 colors\n    modifier: 10\n  }\n};\n\nconst palette = generate(input);\n```\n\nContrary to ColorBox, this version of the algorithm _does not_ support a lock color.\n\n## Example Output\n\nThe function returns the generated palette as an array of color objects:\n\n```javascript\n[\n  {\n    contrastBlack: \"19.32\",\n    contrastWhite: \"1.09\",\n    displayColor: \"black\",\n    hex: \"#fff2fc\",\n    hsl: [315, 1, 0.974],\n    hsv: [314.99999999999994, 0.052000000000000074, 1],\n    hue: 314.99999999999994,\n    hueRange: [315, 293],\n    label: 0,\n    lum: 1,\n    rgb: [255, 242, 252],\n    sat: 0.052000000000000074,\n    steps: 11\n  },\n  ...\n];\n```\n\n## Curves\n\nHue, Saturation, and Luminosity all allow you to specify a curve. The following curves are supported:\n\n- _easeInQuad_ (Quad - EaseIn)\n- _easeOutQuad_ (Quad - EaseOut)\n- _easeInOutQuad_ (Quad - EaseInOut)\n- _easeInQuart_ (Quart - EaseIn)\n- _easeOutQuart_ (Quart - EaseOut)\n- _easeInOutQuart_ (Quart - EaseInOut)\n- _easeInSine_ (Sine - EaseIn)\n- _easeOutSine_ (Sine - EaseOut)\n- _easeInOutSine_ (Sine - EaseInOut)\n- _easeInCubic_ (Cubic - EaseIn)\n- _easeOutCubic_ (Cubic - EaseOut)\n- _easeInOutCubic_ (Cubic - EaseInOut)\n- _easeInExpo_ (Expo - EaseIn)\n- _easeOutExpo_ (Expo - EaseOut)\n- _easeInOutExpo_ (Expo - EaseInOut)\n- _easeInQuint_ (Quint - EaseIn)\n- _easeOutQuint_ (Quint - EaseOut)\n- _easeInOutQuint_ (Quint - EaseInOut)\n- _easeInCirc_ (Circ - EaseIn)\n- _easeOutCirc_ (Circ - EaseOut)\n- _easeInOutCirc_ (Circ - EaseInOut)\n- _easeInBack_ (Back - EaseIn)\n- _easeOutBack_ (Back - EaseOut)\n- _easeInOutBack_ (Back - EaseInOut)\n- _linear_ (linear)\n","funding_links":[],"categories":["JavaScript","Libraries and components"],"sub_categories":["Colors"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flyft%2Fcoloralgorithm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flyft%2Fcoloralgorithm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flyft%2Fcoloralgorithm/lists"}