This article was published as a part of the Data Science Blogathon.
Overview
In this article, we will be making a very interesting application i.e. Color picker which have many use cases but the main use case of this application is that it can be widely used by UI/UX designer who has to pick the color from images and get their color codes and for that, we will be using the concepts of computer vision and image processing. So, amongst the various applications of computer vision, in this article we will be understanding the concept of Color picker applications using computer vision.
Let’s get started!
import cv2 import pandas as pd import matplotlib.pyplot as plt
- cv2: This library is to perform all the computer vision operations-basically all the image processing operations that are required.
- pandas: Pandas has generally a lot of scopes when it comes to dealing with the machine learning problem but in this topic, they will be only used for reading the CSV file and extracting some information from it.
- matplotlib: Matplotlib again has a lot to do with visualizing the data though here it will be used to plot the image.
image_location = 'colorpic.jpg' test = cv2.imread(image_location) plt.imshow(test) plt.show()
Output:
Code-breakdown:
- Firstly we are just holding the path of the image in the variable here, we are just using the name of the image, not the exact path because it’s in the same path as our Jupyter notebook.
- Now with the help of cv2’s read() function, we will read the image in the NumPy array format and store it in the test variable. If we will just print out the test variable then it will only show the image in the array format.
- Now we will be using Matplotlib’s show() function to see the image that we have read.
cv2.imshow() VS plt.imshow()
Here arise one question because the one who is familiar with the OpenCV/is well aware that to show the image we ideally use cv2.imshow function but just to make one thing clear I’m personally a fan of Jupiter notebook and here to see the results cv2.imshow function won’t work it will just crash that kernel also when you will search about this issue you will find out that using the cv2.imshow function is meaningless to use in the client-side server (Jupiter notebook) hence we use matplotlib (plt.imshow) to plot the result in the form of an image.
Let’s declare some global variables which will be accessible along with the whole code.
flag_variable = False red_channel = g_channel = b_channel = x_coordinate = y_coordinate = 0
Code-breakdown:
- So here, firstly we took one flag variable which will be an indicator that whether we have clicked the image or not so one can see that by default value will be false i.e. picture is not clicked while the True value indicates that picture is clicked.
- Then we have red, green, and blue channels (RGB) along with that the X and Y coordinate which for now is set to 0 but as soon as we will move around the image and pick the colors from it then these values will get changed.
Now we will read the color CSV file and give the heading name to every column.
heading = ["Color", "Name of color", "Hexadecimal code", "Red channel", "Green channel", "Blue channel"]
color_csv = pd.read_csv('colors.csv', names=heading, header=None)
Code-breakdown:
- We are setting the name of headings that the color CSV file will have.
- Then we will be reading the color.csv file with the help of the read_csv function.
- Note: So, this color CSV file has the name, hexadecimal code, RGB values of the color we will be comparing the values from this CSV file only.
Now, we will create the function to get the name of the color (get_color_name).
def get_color_name(Red, Green, Blue):
minimum = 10000
for i in range(len(color_csv)):
distance = abs(Red - int(color_csv.loc[i, "Red channel"])) + abs(Green - int(color_csv.loc[i, "Green channel"])) + abs(Blue - int(color_csv.loc[i, "Blue channel"]))
if distance <= minimum:
minimum = distance
color_name = color_csv.loc[i, "Name of color"]
return color_name
Code-breakdown:
- So, here first we are setting the threshold value to 10000 i.e. minimum threshold distance between the actual color code and the one which we got while selecting the color from the image.
- Then we have calculated the distance of the color code from the image.
- Now we will just see that the distance that we have calculated should be less than or equal to the threshold distance.
- At last, we will store the name of the color from the CSV file and return it.
Now we will create the function to get the coordinates (draw_function)
def draw_function(event, x_coordinate, y_coordinate, flags, parameters):
if event == cv2.EVENT_LBUTTONDBLCLK:
global b, g, r, x_position, y_position, flag_variable
flag_variable = True
x_position = x_coordinate
y_position = y_coordinate
b, g, r = test[y_coordinate, x_coordinate]
b = int(b)
g = int(g)
r = int(r)
Code-breakdown:
So before going breaking down the code I’ll like to mention what functionality it possesses. This function will return the value of the X and Y coordinate along with that corresponding RGB position when the user will double click on any color.
- Firstly we will check whether the user has double-clicked or not for that we will use EVENT_LBUTTONDBLCLK from cv2.
- Then we will set the flag_variable to True as now the button is clicked.
- Then comes the main part of the function in which we will store the values of coordinates and their corresponding RGB values in the global variables.
- At the last, we will just convert the values to integer type using int().
cv2.namedWindow('image')
cv2.setMouseCallback('image', draw_function)
Mouse call back: This is the cv2 method that will detect the click from the user (right, left, or double click) and call the draw function.
while True:
cv2.imshow("image", test)
if flag_variable:
cv2.rectangle(test, (20, 20), (750, 60), (b, g, r), -1)
text = get_color_name(r, g, b) + ' R=' + str(r) + ' G=' + str(g) + ' B=' + str(b)
cv2.putText(test, text, (50, 50), 2, 0.8, (255, 255, 255), 2, cv2.LINE_AA)
if r + g + b >= 600:
cv2.putText(test, text, (50, 50), 2, 0.8, (0, 0, 0), 2, cv2.LINE_AA)
flag_variable = False
if cv2.waitKey(20) & 0xFF == 27:
break
cv2.destroyAllWindows()
Output:
Code-breakdown:
- In the main logic, firstly we will create the rectangle(filled: -1 is used to fill the rectangle) on which we will have our text.
- Now we will have the string of our text which will have a color code of RGB.
- Then with the help of the put text method, we will show the text just above the rectangle that we have previously drawn.
- We have our validation if the color is light, then we will display the text string in black color.
- At last, we will have the option to quit the application with the escape key i.e 27.
Summary
- First, we have imported all the libraries.
- Then we loaded and plot the selected image.
- Then we have given the headings to our color CSV file.
- We have also created the get color name function and draw function to see the results on the image when the user will double click on any color.
- Then the app loop to execute all the steps.
Thus, by implementing the above steps, we can develop a Color picker applications using computer vision.
Endnotes
Here’s the repo link to this article. Hope you liked my article on the Color picker applications using Computer Vision. If you have any opinions or questions, then comment below.
Read on AV Blog about various predictions using Machine Learning.
About Me
Greeting to everyone, I’m currently working in TCS and previously, I worked as a Data Science Analyst in Zorba Consulting India. Along with full-time work, I’ve got an immense interest in the same field, i.e. Data Science, along with its other subsets of Artificial Intelligence such as Computer Vision, Machine Learning, and Deep learning; feel free to collaborate with me on any project on the domains mentioned above (LinkedIn).
Hope you liked my article on Heart Disease Prediction? You can access my other articles, which are published on Analytics Vidhya as a part of the Blogathon link.
The media shown in this article is not owned by Analytics Vidhya and are used at the Author’s discretion.
