Images can be a great source of inspiration from design. Sometimes we see an image and want to use similar colors to create our designs. What is the point of a good design if it doesnt inspire someone else be it from color of other factors?
So today We will look into how you might use an image to get some color palettes for your design project. We will use Clariss, the free simple color palette generator for that. It will be able to give us the palettes in the four main color schemes and the codes wil be in both Hex and Pantone.
Scanning the image
There are two ways to select images to upload on Clariss for scanning:
- Drag and drop - you can drag an image into the image drop zone.
- File selection - you can also click on the drop zone, and a file selection menu will open to allow you to select the image from your local storage.
Scan Level
After selecting the image, you can click on the drop-down menu below the drop zone and pick the scan Level you want on your image. There are four choices:
- Quick scan - extracts the top 10 most dominant colors from your image.
- Basic scan - extracts the top 16 most dominant colors from your image.
- Extended scan - extracts the top 24 most dominant colors from your image.
- Extreme scan - extracts the top 32 most dominant colors from your image.
If you don't select a scan level, Quick-scan will applied by default. To upload the image use the upload button and wait for the results.
Image Scan results page
The image Scan page looks like the below example:
The results are the colors extracted from the image uploaded, their color codes, and the estimated percentage of that color shade in the scanned image.
Getting a specific color from the scanned images
If you want to know a specific color code that is on the scanned image, you can click on that part of the image, and the color code will appear below the scanned image as shown below:
Color palettes
To get color palettes from the colors scanned from the image, click on the color boxes. When you click a color box, its color palettes will appear in a pop-up. In the pop-up, you can select the color palette mode you want between the four options shown below.
Downloading the colors from the scanned image
- Download colors - in this option, you can download the color boxes and their corresponding color codes. Example:
- Download colors + image - in this option, you can download the color boxes, their hex codes, and the scanned image. Example:
- Download a '.act' file - in this option, you can download a .act file that can help you import the colors into Photoshop or any other image editing tools that allow color importation using a .act file. Example:
You can download the color pallets using the download button. You can also copy color codes from specific color swashes by clicking on the code.
Color code conversion
Clariss offers two color code formats. By default, the color codes are in Hex code(HEX) format. But they can be converted into Pantone(PMS) color codes and back to hexacodes. There are several ways to do that:
1. In image color results
After scanning an image for its color compositions for palate generation, the results page lists the colors in hex code. You can convert the color codes to Pantone colors and back to hexacodes using the Pantone switch between the scanned image and the colors. Below are the colors listed in Pantone color code format:
3. Color palettes pop-up
Upon clicking any color box in clariss, you will get the pop-up showing you the color palettes of that specific color in the four color schemes. The color palette swashes are in Hex codes by default. To convert them to Pantone and vice versa, use the Pantone switch at the top of the page. Here is an example of a monochromatic color palette with the color swashes labeled in Pantone color codes:
Downloading color palettes
In the palettes pop-up, it is possible to download color palettes. The downloaded color palettes get labeled in either hexacodes or Pantone depending on the state of the Pantone toggler switch. Here is an example of a pop-up with the download button highlighted:
You can copy any color code on clariss by simply clicking on it.
Conclusion
That is how you generate color palettes from images using Clariss. There are also other methods of generating color palettes on Clariss including: Hex code inputs, and using more than 700+ listed color names. Clariss also has a dedicated HEX ⇄ Pantone converter.