A tool for natural media painters to help them build virtual palettes and experiment with "color recipes" using an accurate paint mixing engine. Combine paint colors to create new ones, and build the palette you need with the colors you already have. Created with React, TypeScript, Mixbox, tinycolor2, color-name-list, and Jest.
- Paint Mixer
You can try out Paint Mixer without installing anything by visiting paint-mixer.netlify.app.
Before you can install Paint Mixer, ensure you have Node.js installed on your machine. Then follow these steps:
-
Clone the repository to your local machine using:
git clone https://github.com/your-username/paint-mixer.git
-
Navigate to the project directory:
cd paint-mixer
-
Install the necessary dependencies:
npm install
-
Start the development server:
npm start
Now, you should be able to access the Paint Mixer application at http://localhost:3000
in your web browser.
-
Adding Colors to the Palette:
- Click on the
+
icon in the palette section to open the color picker. - Select the color you want to add to your palette and click
Confirm
. - The selected color will appear as a swatch in the palette section.
- You can lookup RGB and hex values for commercial paints at Art Paints. This will help you find the closest match to the paint you're using.
- You can rename the automatically named color by clicking on the swatch's name and editing it.
- Click on the
-
Mixing Colors:
- Click on the swatches in the palette to increment the parts of each color you want to mix.
- The mixed color will be displayed at the top of the screen.
- You can adjust the parts of each color in the mix by clicking on the
+
or-
icons on each swatch.
-
Saving Mixed Colors:
- Once you've created a mix you like, click the
Save
button to add the mixed color to your palette. - The recipe of colors used to create the mixed color will be saved along with it. You can view the recipe by clicking on the swatch's info button.
- Once you've created a mix you like, click the
-
Setting a Target Color:
- Click the
Target
button to set a target color. - Select your target color using the color picker that appears.
- The match percentage between the mixed color and the target color will be displayed.
- Click the
-
Resetting the Mix:
- Click the
Reset
button to reset the parts of each color in the mix to zero.
- Click the
-
Removing Colors from the Palette:
- Click the
x
icon on a swatch to remove that color from your palette.
- Click the
Paint Mixer utilizes a combination of hooks, libraries, and custom utility functions to simulate paint mixing. Here's a brief overview of how it works:
-
Color Selection and Conversion:
- Colors are selected using a color picker, which returns colors in HSVa format.
- These colors are then converted to RGBa format using the
hsvaToRgba
andhsvaToRgbaString
functions from the@uiw/color-convert
library.
-
Color Mixing:
- The mixing engine uses the
mixbox
library to simulate the way paint mixes in the real world. Unlike a simple subtractive color model, the mixbox library uses the Kubelka–Munk model, predicting the behavior of paints based on pigments. - The
useColorMixing
hook abstracts the process where each color in the mix is converted to a latent color space, mixed according to the specified parts, and then converted back to RGBa format.
- The mixing engine uses the
-
Color Matching:
- The
useColorMatching
hook utilizes thedeltaE94
function from thecolorConversion
utility to determine the color difference between the mixed color and the target color. - This difference is then converted to a match percentage, which is displayed to the user.
- The
-
Palette Management:
- The
usePalette
hook manages the palette using the React state. Each color in the palette is represented as an object containing its RGBa string, label, parts in the mix, and optionally a recipe of colors used to create it.
- The
-
Color Naming:
- The
useColorName
hook fetches a name for a color based on its hex value, leveraging thecolor-name-list
library.
- The
-
Local Storage:
- The
useLocalStorage
hook ensures the palette is saved to and loaded from local storage, allowing it to persist across browser sessions.
- The
The core component where users can mix multiple colors. It provides an interface to add, adjust, or remove colors.
Allows users to add a color to the mixer. It provides an interface for color input and addition.
Displays a color box with the chosen color. It also provides options to remove or adjust the color.
A component that lets users pick a color. It provides a color wheel interface for color selection.
Displays a collection of color swatches. Users can select a color from these swatches to add to the mixer.
Displays the mixed color result. It shows the outcome of the mixed colors and provides options to save or reset the mix.
Displays the target color that users aim to match with their mix. It provides options to set or reset the target color.
A custom hook that provides functionality to match the mixed color with the target color. It returns a boolean indicating if the colors match.
Fetches the name of a color based on its RGB value. It uses an external API to get the color name.
Manages the storage of color palettes in the browser's local storage. It provides functions to save, retrieve, and delete palettes.
Manages the color palettes in the application. It provides functions to add, remove, and update palettes.
A custom hook that provides functionality to add a color swatch to the mixer. It returns functions to add and remove swatches.
Provides utility functions for color conversions, such as RGB to HEX and vice versa.
Determines if a color is dark based on its RGB value.
Provides a default color palette for the application. I will be adding other palettes to choose as a new base.
Feel free to fork the repository and submit pull requests. For major changes, please open an issue first to discuss what you would like to change.