{"id":31445121,"url":"https://github.com/fivenp/colorsandbox","last_synced_at":"2025-09-30T22:53:46.695Z","repository":{"id":34223070,"uuid":"171175213","full_name":"fivenp/colorsandbox","owner":"fivenp","description":"A toolkit to clevery abstract, manage, document, export and preview your color palettes 🎨","archived":false,"fork":false,"pushed_at":"2025-08-22T19:25:18.000Z","size":664,"stargazers_count":1,"open_issues_count":50,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-22T21:51:09.101Z","etag":null,"topics":["abstraction","color","colorpalette","colorpicker","colors","colorscheme","colorspace","colortheme","darken","generator","lighten","react","sandbox"],"latest_commit_sha":null,"homepage":"https://colorsandbox.netlify.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fivenp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-02-17T21:35:53.000Z","updated_at":"2021-07-21T01:52:59.000Z","dependencies_parsed_at":"2023-10-04T20:40:08.696Z","dependency_job_id":"11040381-dc25-4989-93ea-bcd34399f3c7","html_url":"https://github.com/fivenp/colorsandbox","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fivenp/colorsandbox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fivenp%2Fcolorsandbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fivenp%2Fcolorsandbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fivenp%2Fcolorsandbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fivenp%2Fcolorsandbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fivenp","download_url":"https://codeload.github.com/fivenp/colorsandbox/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fivenp%2Fcolorsandbox/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277767648,"owners_count":25873630,"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","status":"online","status_checked_at":"2025-09-30T02:00:09.208Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["abstraction","color","colorpalette","colorpicker","colors","colorscheme","colorspace","colortheme","darken","generator","lighten","react","sandbox"],"created_at":"2025-09-30T22:53:45.415Z","updated_at":"2025-09-30T22:53:46.687Z","avatar_url":"https://github.com/fivenp.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003ca href=\"https://colorsandbox.netlify.com\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/132332/53668987-de4ded80-3c75-11e9-8c80-a3707de6bcf0.png\" style=\"border:0;max-width:100%\" alt=\"ColorSandbox logo\" title=\"ColorSandbox logo\"\u003e\u003c/a\u003e\n  \u003cbr\u003e\n\u003c/h1\u003e\n\u003cp align=\"center\" style=\"font-size: 1.2rem;\"\u003eA toolkit to clevery abstract, manage, document, export and preview your color palettes\u003c/p\u003e\n\n## Table of Contents\n\n- [Features](#features)\n- [Try it](#try-it)\n- [How to use it](#how-to-use-it)\n  * [(WIP) Color preview / documentation](#wip-color-preview--documentation)\n  * [(WIP) Helper functions API](#wip-helper-functions-api)\n    + [lighten(color)](#lightencolor)\n    + [darken(color)](#darkencolor)\n- [Local development](#local-development)\n- [Useful resources](#useful-resources)\n\n## Features\n\n\u003e To manage your expectations upfront: **ColorSandbox is NOT a Color Palette / Color Theme generator**\n\nYou should rather see it as a visual presentation / documentation / abstraction / export / whatever helper to your already existing Color Palette\n\n\u003chr /\u003e\n\nThe main features are\n\n* Preview your programatically abstracted colors and rules\n* See how colors would harmonize together inside your palette behaves\n* Check which typography will work in which combination\n* (WIP) Access the color abstraction methods via an easy API\n* (WIP) Export all posible abstractions to CSS, Sketch, Photoshop, etc\n* (WIP) Customize the abstraction rules\n* (WIP) Enable multiple palettes\n* (WIP) Embed your colors/abstraction combination into your website/document/etc\n\n## Try it\n\n[![ColorSandbox](https://user-images.githubusercontent.com/132332/53442167-ef45f700-3a08-11e9-99a3-9c866bc722d3.png)](https://colorsandbox.netlify.com)\n\n\u003cp align=\"center\" style=\"font-size: 1.2rem;\"\u003ehttps://colorsandbox.netlify.com\u003c/p\u003e\n\n\n## How to use it\n\nColorSandbox consists of two parts - one for previewing/documenting your colors - and one providing you with the matching rules for the abstractions.\n\nIn both cases you should start with a simple\n\n```shell\nyarn add colorsandbox\n```\n\n### (WIP) Color preview / documentation\n\nSimply import the component to your existing React App and pass a color palette object down.\n\n```tsx\nimport { ColorSandbox } from 'colorsandbox'\n\nclass App extends React.Component {\n  const myPalette = {\n      'red' : '#ff0000',\n      'green' : '#00ff00',\n      'blue' : '#0000ff',\n      'yellow' : '#ffff00',\n  }\n\n  public render(): JSX.Element {\n    return (\n      \u003cColorSandbox colors={myPalette} /\u003e\n    )\n  }\n}\n\nexport default App\n```\n\n#### Props\n\n| prop             | type       | default    | required   | description\n| ---------------- | ---------- | ---------- | ---------- | ----------\n| colors           | `object`   | `N/A`      | **yes**    | The palette object defining your color palette\n\n### (WIP) Helper functions API\n\n#### lighten(color)\n\nLightens the provided HEX color. It programatically converts it to **HSL**, **removes** 10% of Saturation and **adds** 10% of Lightnes to it. Returns a valid hex color\n\n```tsx\nimport { lighten } from 'colorsandbox'\n\nconst red = '#ff0000'\nconst myLightRed = lighten(red)\n\n```\n\n| argument         | type       | description\n| ---------------- | ---------- | ----------\n| color            | `string`   | Must be a valid **hex** color - e.g. `#ff0000`\n\n\n#### darken(color)\n\nDarkens the provided HEX color. It programatically converts it to **HSL**, **adds** 10% of Saturation and **removes** 10% of Lightnes from it. Returns a valid hex color\n\n\n```tsx\nimport { darken } from 'colorsandbox'\n\nconst red = '#ff0000'\nconst myDarkRed = darken(red)\n\n```\n\n| argument         | type       | description\n| ---------------- | ---------- | ----------\n| color            | `string`   | Must be a valid **hex** color - e.g. `#ff0000`\n\n## Local development\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\nYou can find information about how to set up a local devenv over [here](https://github.com/fivenp/colorsandbox/blob/master/CONTRIBUTING.md#setting-up-the-project-locally)\n\n## Useful resources\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffivenp%2Fcolorsandbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffivenp%2Fcolorsandbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffivenp%2Fcolorsandbox/lists"}