{"id":16513713,"url":"https://github.com/nitin42/react-color-tools","last_synced_at":"2026-04-02T02:38:23.240Z","repository":{"id":87330539,"uuid":"146930520","full_name":"nitin42/react-color-tools","owner":"nitin42","description":"A set of tools as React components for working with colors 🎨","archived":false,"fork":false,"pushed_at":"2018-10-03T10:48:29.000Z","size":36161,"stargazers_count":85,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-17T23:03:45.662Z","etag":null,"topics":["colors","design","design-systems","design-tools","graphics","react","tools","web"],"latest_commit_sha":null,"homepage":"https://react-color-tools.surge.sh","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nitin42.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"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}},"created_at":"2018-08-31T18:43:46.000Z","updated_at":"2024-03-21T17:07:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"b96f6ffe-b67b-4394-8df4-d5091227e2bf","html_url":"https://github.com/nitin42/react-color-tools","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-color-tools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-color-tools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-color-tools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-color-tools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nitin42","download_url":"https://codeload.github.com/nitin42/react-color-tools/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244765132,"owners_count":20506764,"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":["colors","design","design-systems","design-tools","graphics","react","tools","web"],"created_at":"2024-10-11T16:10:00.717Z","updated_at":"2026-04-02T02:38:23.229Z","avatar_url":"https://github.com/nitin42.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-color-tools\n\n[![Build Status](https://travis-ci.org/nitin42/react-color-tools.svg?branch=master)](https://travis-ci.org/nitin42/react-color-tools)\n\n\u003e A set of tools as React components for working with colors\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./media/demo.gif\" /\u003e\n\u003c/p\u003e\n\n## Table of contents\n\n- [Introduction](#introduction)\n\n- [Motivation](#motivation)\n\n- [Features](#features)\n\n- [Use cases](#use-cases)\n\n- [Theory](#theory)\n\n- [Install](#install)\n\n- [Usage](#usage)\n\n- [Examples](#examples)\n\n- [Documentation](#documentation)\n\n- [Contributing](#contributing)\n\n- [License](#license)\n\n## Introduction\n\n`react-color-tools` provides a set of tools as React components for working with colors. These tools can be used to manipulate a color for example controlling the intensity or purity of color, extracting swatches from an image, creating a gradienty defining color stop positions, choosing from variety of shades and tints or choosing a color scheme.\n\n## Motivation\n\n`react-color-tools` is inspired from [`react-color`](https://github.com/casesandberg/react-color). I was using `react-color` for my projects and felt the need for more features like [image color extraction](https://react-color-extractor.surge.sh), generating shades and tints, creating gradients, and advance color tools for controlling the intensity and value of the color. So I decided to build `react-color-tools` with these features while keeping the API surface minimal and easy to use.\n\n## Features\n\n- Image color extraction\n\n- Generate shades and tints\n\n- Built-in color manipulation tools\n\n- Create gradient by controlling the color stop positions\n\n- API for color conversions\n\n- Color scheme picker\n\n## Use cases\n\n- Managing color schemes\n\n- Design systems \u0026 creating design tools\n\n## Theory\n\nA little bit about different color terms and color harmonies that you will be using while working with `react-color-tools`.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://www.canva.com/learn/wp-content/uploads/2015/07/color-theory-1-tb-752x0.png\" /\u003e\n\u003c/p\u003e\n\n\u003e Image taken from Canva\n\n### Color terms\n\n- **Hue** - A hue is name of particular color, or it is also one of the 12 colors on the color wheel.\n\n- **Shade** - A shade is a hue darkened with black.\n\n- **Tint** - A tint is a hue lightened with gray.\n\n- **Saturation** - Describes the intensity or purity of color.\n\n- **Desaturation** - Desaturation makes a color look more muted (hue approaches closer to gray).\n\n### Color schemes\n\n- **Monochromatic** - This color scheme contains tints, shades and tones of a color.\n\n- **Analogous** - This color scheme contains the hues that are located side by side on the color wheel.\n\n- **Split Complementary** - This scheme represent any color on the color wheel plus two colors that are it's complement.\n\n- **Triadic** - This color scheme has three colors that are evenly spaced on the color wheel.\n\n- **Tetradic** - Two pairs of colors which are opposite on the color wheel\n\n## Install\n\n```\nnpm install react-color-tools\n```\n\nor if you use yarn,\n\n```\nyarn add react-color-tools\n```\n\n**This package also depends on React so make sure you've it installed.**\n\n## Usage\n\n```js\nimport React from 'react'\nimport { render } from 'react-dom'\nimport { BasicPicker } from 'react-color-tools'\n\nclass App extends React.Component {\n  state = {\n    color: 'hotpink'\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cBasicPicker\n          color={this.state.color}\n          onChange={color =\u003e this.setState({ color })}\n        /\u003e\n        \u003ch1 style={{ color: this.state.color }}\u003eReact Color Tools\u003c/h1\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\nThis will render -\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./media/basic_picker.gif\" /\u003e\n\u003c/p\u003e\n\n## Examples\n\n#### Basic Picker\n\n[![Edit jj7jpl5xvv](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/jj7jpl5xvv)\n\n#### Gradient Picker\n\n[![Edit wqln38j8wk](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/wqln38j8wk)\n\n#### Scheme Picker\n\n[![Edit 935ppx461o](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/935ppx461o)\n\nor checkout the [`examples`](./examples) folder\n\n## Documentation\n\n[Check out the detailed documentation](./docs)\n\n## TODO\n\n- [ ] Use a monorepo format to store different pickers and color tools\n\n- [ ] Tweak rollup config to reduce bundle size\n\n- [ ] Remove [tooltip styles](./src/styles) and use `react-emotion` to create tooltip component\n\n- [ ] Add bezier easing to gradient picker component\n\n## Contributing\n\nIf you'd like to contribute to this project, then follow the below instructions to setup the project locally on your machine.\n\n```\ngit clone https://github.com/\u003cyour_username_here\u003e/react-color-tools\n\ncd react-color-tools\n\nyarn\n```\n\n### Linting\n\nRun eslint using `yarn lint`\n\n### Building the source code\n\nRun `yarn build` to build the source code. To use the watch mode, run the cmd `yarn build:watch`\n\n### Formatting with Prettier\n\nRun `yarn formatall` to format the source code.\n\n### Storybook\n\nRun `yarn storybook` to start the storybook development environment.\n\n### Test\n\nRun `yarn test` to test the pickers.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin42%2Freact-color-tools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnitin42%2Freact-color-tools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin42%2Freact-color-tools/lists"}