react-tinted
Tinted is a color harmony wheel. It helps you choose color combinations that create pleasing contrasts and feel harmonious.
Install
# Install with yarn yarn add react-tinted # Or install with NPM npm i react-tinted
Usage
import TintedWheel TintedPalette colorModes from 'react-tinted'
<div ='my-color-wheel'> <TintedWheel = => <TintedPalette /> </TintedWheel></div>
@use 'tinted/wheel';@use 'tinted/palette'; .my-color-wheel
A few things to note:
- The wheel can be used without the palette, but it is recommended to use them together.
- To make these abbreviated
@use
statements work, you will need to addnode_modules
to SASS'--load-path
or sass-loader'sincludePaths
. Alternatively, you could just path intonode_modules
explicitly. - If you're not using SASS in your project, we do provide compiled CSS files in the
tinted/dist
folder.
Custom Colors
You can initialize Tinted with a custom color set:
<TintedWheel = => <TintedPalette /></TintedWheel>
Components
TintedWheel
The color harmony wheel for the user to make a selection of colors.
Props
Name | Type | Description |
---|---|---|
children |
React.Children |
Color wheel "plugins" like the TintedPalette |
className |
string |
A class name to add to the root element |
colorCount |
number |
The number of colors to use in the color harmony |
initRoot |
color-like value | The color that should initially be used to select other harmony colors |
customColors |
color-like array | Rather than specify a root color and a color count, you can pass an array of color-like objects and strings |
mode |
string |
The color harmony mode. Determines how initRoot is used to find other colors |
colorWheelImage |
string |
A URI to a color HSV color wheel image to use |
onColorsChanged |
(hexColorStrings, currentMode, wheel) => void |
Callback invoked when the user manipulates the color markers |
radius |
number |
The radius of the wheel in SVG coordinate units |
markerWidth |
number |
The diameter of the markers used to select colors on the wheel in SVG coordinate units |
markerOutlineWidth |
number |
The width of the outline of the color marker in SVG coordinate units |
margin |
number |
The distance between the border of the <svg> and the circle of the wheel in SVG coordinate units. It is not recommended to pass this prop |
baseClassName |
string |
The prefix for the class names for all generated elements. Overriding this will cause all provided CSS to no longer work. It is not recommended to pass this prop |
Also spreads any other props passed on the root element.
TintedPalette
A palette of colors to display the user's chosen values from the TintedWheel
. For each color it:
- Allows the user to change the value (or brightness -- "V" in the HSV color model) of the color
- Displays the hex string value of the color
Props
Name | Description |
---|---|
children |
An element to be duplicated beneath each color in the palette |
className |
A class name to add to the root element |
Also spreads any other props passed on the root element.
Styling
Feel free to override any of the default styling as you please.
Out of the box, tinted supports a color scheme for a light and dark background, defaulting to the light background. To change it to expect a dark background, add a tinted--dark
class to a parent element of the wheel and/or palette.