COLORSCOPE

Project Report
On

“COLORSCOPE”

Submitted to:
DR. BABASAHEB TECHNOLOGICAL UNIVERSITY
(DIPLOMA WING)

Submitted by:
Disha Rakesh Takawale (2211974)
Sarthak Abhijit Joshi (2211929)
Samruddhi Mangesh Suryawanshi (2211973)

Under guidance of
Prof. Suchita Yadav

DEPARTMENT OF INFORMATION TECHNOLOGY

DR. BABASAHEB AMBEDKAR TECHNOLOGICAL UNIVERSITY
(DIPLOMA WING)
ACADEMIC YEAR 2023-2024
 COLORSCOPE

Academic Year 2023-24

DR. BABASAHEB TECHNOLOGICAL UNIVERSITY
(Diploma Wing)
Lonere- 402103, Tal. Mangaon, Dist. Raigad
DEPARTMENT OF INFORMATION TECHNOLOGY

CERTIFICATE
This is to certify that the Project entitled

“ColorScope”

Submitted by:
Disha Rakesh Takawale (2211974)
Sarthak Abhijit Joshi (2211929)
Samruddhi Mangesh Suryawanshi (2211973)

A Bonafide work carried out under the supervision of Prof. Suchita Yadav It is submitted
towards partial fulfillment of the requirement of University of Dr. Babasaheb Ambedkar
Technological University, Lonere for the award of the degree of Diploma in Information
Technology.

Prof. Suchita Yadav Prof. Pranali Bhosale Prof. S. M. Gaikwad

(Project Guide) (Project Coordinator) (Head of Department)

External Examiner:

Place: Dr. Babasaheb Ambedkar Technological University (Diploma Wing), Lonere

Date:
 COLORSCOPE

ACKNOWLEDGEMENT

The project presentation opportunity provided by college was indeed a great chance to explore
our full potential and a great opportunity to learn new things and evolve our knowledge and
skills.
We would like to express our deep and sincere gratitude to our guide for their unflagging
support and continuous encouragement throughout the project work. Without their guidance
and persistent help this project would not have been possible.
We are extremely grateful to Mrs. Pranali Bhosale, the Project Coordinator for their support
and advices to get and complete project preparation.
Thanks to our classmates who helped us directly or indirectly to accomplish our work. Finally,
I am also thankful to all staff of Department of Information Technology for their valuable
guidance.
Thank You!
 COLORSCOPE

ABSTRACT

This report presents the development and implementation of our color detection project namely
“COLORSCOPE” utilizing JavaScript. The primary objective of this project is to accurately
identify and analyze colors within the uploaded image using computer vision techniques.
The project leverages the capabilities of JavaScript along with HTML5 Canvas API,
FileReader API, and EyeDropper API, to perform color detection tasks. By utilizing the power
of web-based technologies, the project aims to provide a lightweight and accessible solution
for color detection, which can be seamlessly integrated into web applications and platforms.
The report details the methodology employed in the development process, including image
processing techniques, color space conversions, and algorithmic approaches for color
detection.
In conclusion, the color detection project demonstrates the feasibility and effectiveness of
utilizing JavaScript for computer vision tasks, particularly in the context of color analysis. The
findings of this project contribute to the advancement of web-based applications for image
processing and computer vision, opening avenues for further research and development in this
domain.
 COLORSCOPE

INDEX

Sr no Contents Page no

1. 01-04
Introduction

2. 05-07
Literature Overview

3. 08-09
SDLC

4. 10-11
Technical Requirements

5. 12-14
Architecture Diagram

6. 15-17
Functionalities and Work Flow

7. 18-20
Libraries
8. 21-30
Implementation
9. 31-35
Snapshots

10. 36-37
Conclusion

11. 38
References
 COLORSCOPE

CHAPTER 1: INTRODUCTION

1.1 Overview
In today's digital age, the ability to extract meaningful information from images has become
increasingly important across various domains, from graphic design and digital marketing to
industrial automation and computer vision. One fundamental aspect of image processing is
color detection, which involves identifying and analyzing the colors present within an image.
The Color Detection Project using JavaScript aims to develop a web-based application capable
of automatically detecting colors within uploaded images and generating corresponding color
palettes. Leveraging the power of JavaScript, HTML5 Canvas, and modern web technologies,
this project offers a versatile and accessible solution for color analysis and visualization.
With our website you can easily get color from any part of the image which includes its hex
code and RGB values. A color palette will also be generated after uploading the image which
will contain the dominant colors from the image.
EyeDropper API is also used to get the pixel color and generate its hex code. And also tints are
generated accordingly.

1.2 Problem Statement

In this project, we were tasked with creating a color detection tool using JavaScript. The goal
is to develop a web application that can identify the color’s rgb values and hex code, also a
color palette of an image uploaded by the user. And also a gradient and tint generator is added
to the website. The application should be able to process the image, analyze its colors, and
provide the code and palette of the dominant colors. Detecting specific color using eyedropper.

1.3 Objectives
The objectives of a color detection project in JavaScript typically include:
1. Developing an Understanding of Color Models: Gain a thorough understanding of color
models such as RGB (Red, Green, Blue), HSL (Hue, Saturation, Lightness), or HSV (Hue,
Saturation, Value). Understand how colors are represented digitally and how they can be
manipulated programmatically.
2. User Interface Design: Design an intuitive user interface that allows users to upload
images, view the analyzed colors, and interact with the results. Consider usability principles to
ensure a smooth user experience.

1
 COLORSCOPE

3. Error Handling and Validation: Implement robust error handling mechanisms to handle
scenarios such as invalid image formats, failed color detection, or unexpected errors. Provide
informative error messages to guide users in troubleshooting issues.

4. Performance Optimization: Optimize the performance of the color detection algorithm to

ensure efficient processing of images, especially for large or high-resolution images. Consider
techniques such as parallel processing or optimizing data structures to improve speed and
scalability.

5. Integration with External Libraries or APIs: Explore the use of external libraries or APIs
that provide advanced color analysis capabilities or additional features. This could include the
API of EyeDropper.

6. Testing and Validation: Conduct thorough testing of the color detection functionality to
ensure accuracy and reliability. Test the application with a variety of images to validate its
performance under different conditions and scenarios.

7. Documentation and Deployment: Provide comprehensive documentation explaining the

project structure, code architecture, usage instructions, and any dependencies required. Deploy
the application to a hosting platform to make it accessible to users.

8. More Color generative features: Provide the user with a color palette of dominant color
and also some additional features for adjusting the color code’s RGB values and providing a
new tint as per the user.

1.4 Applications
The applications of color detection are as follows:
1. Image Processing and Editing: Color detection can be used to develop image editing tools
that can automatically adjust brightness, contrast, and saturation levels. It can also be used to
create filters that can change the color tone of an image.

2. Object Detection and Tracking: Color detection can be used in object detection and
tracking applications, such as surveillance systems, to identify and track objects based on their
color.

2
 COLORSCOPE

3. Fashion and Beauty: Color detection can be used in fashion and beauty applications, such
as virtual try-on, to detect the color of clothes, skin tone, and hair color.

4. Healthcare: Color detection can be used in healthcare applications, such as skin cancer
detection, to identify abnormal skin lesions based on their color.

5. Quality Control: Color detection can be used in quality control applications, such as food
processing, to detect defects or contaminants based on their color.

6. Art and Design: Color detection can be used in art and design applications, such as color
palette generation, to create harmonious color schemes.

7. Accessibility: Color detection can be used in accessibility applications, such as color

blindness correction, to assist individuals with color vision deficiencies.

1.5 Motivation
Overall, the motivation behind color detection projects is to leverage technology to solve real-
world problems, enhance user experiences, and open up new possibilities in various fields.
Improving interfaces that rely on color recognition can make technology more accessible. For
example, applications for individuals with color blindness can identify and label colors,
enhancing usability. Detecting colors in natural environments can aid in monitoring changes,
such as water quality assessment or vegetation health analysis. Artists and designers can use
color detection to analyze and replicate color schemes from nature or other works of art,
fostering creativity and innovation.

1.6 Significance of the Project:

The significance of the project lies in its potential to advance the understanding of the color
detection tools and also the gradient color generator so that developers can easily detect the
color and also can generate a scheme with gradients or the palette of the image. Basically it
will detect the color from the image by its pixel and generate two color codes- RGB and Hex
code .

3
 COLORSCOPE

CHAPTER 2: LITERATURE OVERVIEW

Color detection is a significant area of interest within computer vision and web development,
often utilized in applications such as image processing, user interface design, and accessibility
tools. This overview highlights key concepts, methodologies, and tools used in JavaScript-
based color detection projects.
2.1 Fundamentals of Color Detection:
❖ Color Spaces:
Understanding different color spaces (RGB, HEX) is crucial. RGB is common in web
development, while HSL/HSV can be more intuitive for human perception.
i. RGB (Red Green Blue):
RGB Stands for "Red Green Blue." RGB refers to three hues of light that can be mixed
together to create different colors. Combining red, green, and blue light is the standard
method of producing color images on screens, such as TVs, computer monitors,
and smartphone screens.

The RGB color model is an "additive" model. When 100% of each color is mixed
together, it creates white light. When 0% of each color is combined, no light is generated,
creating black.
ii. Hex Code:
A hex code is made up of six digits---usually preceded by the pound (#) symbol. For
example, here is the hex code for pure black: #000000. The numbers in this code
correspond to the amount of red, green, and blue in the color.

4
 COLORSCOPE

The first two digits tell us how much red is in the color, the next two digits are for green,
and the last two are for blue. Black is the absence of color, which is why it's "000000."
There's no red, green, or blue present.

❖ Pixel Manipulation:
Accessing and manipulating image pixels is fundamental, typically done using the HTML5
<canvas> element.
The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript. The
<canvas> element is only a container for graphics. You must use JavaScript to actually
draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
Importing images into a canvas is basically a two step process: Get a reference to an
HTMLImageElement object or to another canvas element as a source. It is also possible to
use images by providing a URL. Draw the image on the canvas using the drawImage ()
function. Let's take a look at how to do this.
Canvas is supported by all major browsers.

2.2 JavaScript Libraries and Tools:

❖ Canvas API:
The <canvas> element and its 2D context allow pixel-level operations on images.
This API allows web applications to use a color picker interface to select a color from the
user's screen. In this code, the EyeDropper API is used to allow users to pick a color from
an uploaded image.
❖ Eyedropper API:

5
 COLORSCOPE

This API allows web applications to use a color picker interface to select a color from the
user's screen. In this code, the EyeDropper API is used to allow users to pick a color from
an uploaded image.

❖ Clipboard API:
This API allows web applications to read and write data to the system clipboard. In this
code, the Clipboard API is used to allow users to copy the color code to their clipboard.

6
 COLORSCOPE

CHAPTER 3: SDLC

2.1 Introduction to SDLC

Software development life cycle (SDLC) is a structured process that is used to design, develop,
and test good-quality software. SDLC, or software development life cycle, is a methodology
that defines the entire procedure of software development step-by-step. A software lifecycle
model is a pictorial and diagrammatic representation of the software life cycle. It represents all
the methods required to make a software product transit through its life cycle stages.

2.2 Diagram

2.3 Phases of SDLC

Phase 1: Requirements Gathering
- Understand the project's scope and objectives.
- Determine the requirements for color detection, such as supported color formats, input
sources (e.g., images), and desired functionalities.

Phase 2: Design
- Design the architecture of the color detection system.
- Decide on the technologies and libraries to be used (e.g., HTML Canvas for image
processing, JavaScript for logic).
- Plan the user interface for input and output.
- Create a flowchart or diagram outlining the process of color detection.

7
 COLORSCOPE

Phase 3: Implementation
- Write JavaScript code to capture input (e.g., from images).
- Develop the user interface using HTML and CSS.

Phase 4: Testing
- Conduct unit tests to ensure individual components work correctly.
- Perform integration testing to verify that different parts of the system work together
seamlessly.
- Gather feedback from users or stakeholders and incorporate necessary changes.

Phase 5: Deployment
- Prepare the application for deployment by optimizing code and resources.
- Ensure proper documentation is provided for users.

Phase 6: Maintenance and Support

- Monitor the application for any issues or bugs.
- Provide ongoing support to users.
- Update the application as needed to add new features or address issues.

8
 COLORSCOPE

CHAPTER 4: TECHNICAL REQUIREMENTS

3.1 Coding Languages

❖ HTML
HTML stands for Hyper Text Markup Language. It is the standard markup language used
to create web pages. HTML is a combination of Hypertext and Markup language. Hypertext
defines the link between web pages. A markup language is used to define the text document
within the tag to define the structure of web pages.
❖ CSS
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of
a document written in HTML or XML (including XML dialects such as SVG, MathML or
XHTML). CSS describes how elements should be rendered on screen, on paper, in speech,
or on other media.
❖ JavaScript
JavaScript, often abbreviated as JS, is a programming language and core technology of the
Web, alongside HTML and CSS. 99% of websites use JavaScript on the client side for
webpage behavior.
Web browsers have a dedicated JavaScript engine that executes the client code. These
engines are also utilized in some servers and a variety of apps. The most popular runtime
system for non-browser usage is Node.js.
❖ PHP
The term PHP is an acronym for – Hypertext Preprocessor. PHP is a server-side scripting
language designed specifically for web development. It is open-source which means it is
free to download and use. It is very simple to learn and use. The file extension of PHP is
“.php”.

3.2 Software Requirements

❖ Visual Studie IDE

9
 COLORSCOPE

Visual Studio is an Integrated Development Environment (IDE) developed by Microsoft to

develop Desktop applications, GUI (Graphical User Interface), console, web applications,
mobile applications, cloud, and web services, etc. With the help of this IDE, you can create
managed code as well as native code. It uses the various platforms of Microsoft software
development software like Windows store, Microsoft Silverlight, and Windows API, etc. It
is not a language-specific IDE as you can use this to write code in C#, C++, VB (Visual
Basic), Python, JavaScript, and many more languages. It provides support for 36 different
programming languages. It is available for Windows as well as for macOS.

❖ XAMPP
XAMPP is a free and open-source cross-platform web server solution stack package
developed by Apache Friends, consisting mainly of the Apache HTTP Server, MariaDB
database, and interpreters for scripts written in the PHP and Perl programming languages.
Since most actual web server deployments use the same components as XAMPP, it makes
transitioning from a local test server to a live server possible.

❖ Browser Support
You need a browser which supports the EyeDropper API which is used in the website. You
can use browsers like chrome, internet explorer.

3.3 Hardware Requirements

❖ 4 GB RAM or Higher
❖ Intel i3 or Higher

10
 COLORSCOPE

CHAPTER 5: ARCHITECTURE DIAGRAM

4.1 DATA FLOW DIAGRAM (DFD):

A Data Flow Diagram (DFD) for color detection using JavaScript can illustrate how data
flows through the system and the processes involved.

User Input System

Upload Image Preprocess Image

Select Region of Detect Colors

Interest

Detected Colors Display Results

- User Input: The starting point of the process where the user interacts with the system, by
uploading an image file.
- Upload Image: The process of uploading an image by uploading a file.
- Preprocess Image: Once the image is uploaded, it goes through preprocessing steps such as
resizing to prepare it for color detection.
- Select Region of Interest: The user selects a specific area or region within the preprocessed
image where they want to detect colors.
- Detect Colors: The system analyzes the selected region to detect the presence of colors.
Colors are detected using the JavaScript functionality.
- Display Result: Finally, the detected colors are displayed to the user, which can include color
names, hex codes, or x and y coordinates.

4.2 USE CASE DIAGRAM:

11
 COLORSCOPE

This use case diagram provides a high-level overview of the system's functionality and the
interactions between the user and the system. It can be used as a starting point for further
development and refinement of the system.

System

Generate Hex and RGB

Hover X and Y co

12
 COLORSCOPE

Use Case Diagram Components:

Actors:
User: The primary actor who interacts with the system.

Use Cases:
Generate HEX and RGB Code: The user can generate HEX and RGB color codes.
Hover X and Y Coordinates: The system tracks and displays the X and Y coordinates of the
cursor when hovering.
Generate Palette: The user can generate a color palette.
Generate Gradient: The user can generate color gradients.
Generate Tints: The user can generate tints of a color.

System Boundaries:
The system boundary encompasses all the use cases and actors interacting with the system.

13
 COLORSCOPE

CHAPTER 6: FUNCTIONALITIES AND WORKFLOW

ColorScope website will have three functionalities in different sections:

5.1 Section 1:
This section will contain the following features with the given steps

Hex and RGB Code Generator:

Step 1: User opens the color detection website.
Step 2: User uploads the image
Step 3: Clicks on the “Pick Color” Button
Step 4: Eyedropper opens and user selects the part of image.
Step 4: System generates and displays the HEX and RGB codes for the selected color
Step 5: User can copy the HEX and RGB codes.

14
 COLORSCOPE

Hovering X and Y Coordinates:

Step 1: User opens the color detection website.

Step 2: User uploads image
Step 2: User moves the mouse cursor over the website.
Step 3: System captures and displays the current X and Y coordinates of the cursor in real-time.

5.2 Section 2:

Gradient Generator:

Step 1: User opens the color detection website.

Step 2: User selects two or more colors.
Step 3: System generates a gradient between the selected colors.
Step 4: User can view the gradient and copy the CSS code for the gradient.

15
 COLORSCOPE

5.3 Section 3:

Tints Generator:

Step 1: User scrolls down for tint generator.

Step 2: Enter the copied hex code.
Step 3: System generates tints of the selected color.
Step 4: User can view and copy the generated tints.

16
 COLORSCOPE

CHAPTER 7: LIBRARIES

Libraries included for our project are:

6.1 jQuery
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document
traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-
to-use API that works across a multitude of browsers. With a combination of versatility and
extensibility, jQuery has changed the way that millions of people write JavaScript.

The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag
(notice that the <script> tag should be inside the <head> section):
<head>
<script src="jquery-3.7.1.min.js"></script>
</head>

Significance of jQuery Library:

1. Simplified DOM Manipulation
jQuery made it easier to select, traverse, and manipulate the Document Object Model (DOM)
with its straightforward and consistent syntax. Instead of writing verbose JavaScript code,
developers could perform complex DOM operations with concise jQuery methods.
2. Cross-Browser Compatibility
One of jQuery’s most significant contributions was abstracting away the inconsistencies
between different browsers. This allowed developers to write code that worked uniformly
across all major browsers without needing to handle browser-specific quirks manually.
3. Event Handling
jQuery provided a unified and simplified way to handle events. Its methods, such as .on() and
.off(), allowed developers to attach event handlers to elements easily and manage events in a
consistent manner.

17
 COLORSCOPE

4. Code Readability and Maintainability

jQuery’s concise and expressive syntax contributed to code that was easier to read and
maintain. This was particularly beneficial for teams working on large projects, as it improved
collaboration and reduced the likelihood of bugs.

5. Integration with Other Technologies

jQuery integrated seamlessly with other technologies and frameworks. It could be used
alongside other JavaScript libraries, as well as with server-side technologies like PHP,
ASP.NET, and Ruby on Rails, making it versatile for various types of web projects.

6.2 Clipboard
Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure
or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated
framework.
That's why clipboard.js exists.
The good news is that clipboard.js gracefully degrades if you need to support older browsers.
All you have to do is show a tooltip saying Copied! when success event is called and Press
Ctrl+C to copy when error event is called because the text is already selected.

You can also check if clipboard.js is supported or not by running ClipboardJS.isSupported(),

that way you can hide copy/cut buttons from the UI.
Significance of Clipboard Library:
1. Simplified Clipboard Interactions
Clipboard libraries provide an easy-to-use interface for performing clipboard operations, such
as copying and pasting text. This significantly reduces the amount of code required and
abstracts away the complexities of dealing with native clipboard APIs.

18
 COLORSCOPE

2. Improved User Experience

With clipboard libraries, developers can enhance user interactions by allowing seamless
copying of text or data with a single click. This is particularly useful for sharing links, copying
promo codes, copying addresses, or any scenario where users need to transfer text from a web
page to another application.

19
 COLORSCOPE

CHAPTER 8: IMPLEMENTATION

This chapter provides a detailed overview of the implementation process for the Color
Detection Website project. The project utilizes HTML, CSS, and JavaScript to create an
interactive and user-friendly application with features including a hex and RGB code generator,
hovering X and Y coordinates tracker, palette generator, gradient generator, and tints generator.

7.1 Development Environment:

The development of the Color Detection Website required the following tools and technologies:
Text Editor/IDE: Visual Studio Code was used for writing and editing the code.
Web Browser: Google Chrome for testing and debugging the application.
Xampp Server: Xampp for storing the contact us information of user.

7.2 Setting Up the Database:

1) Installing XAMPP
➢ Download and Install XAMPP: Visit the official XAMPP website to download and
install XAMPP on your machine.
➢ Start XAMPP: Open the XAMPP Control Panel and start the Apache and MySQL
services.
2) Creating the Database and Table:
➢ Access phpMyAdmin: Open your web browser and navigate to
http://localhost/phpmyadmin.
➢ Create a Database:
➢ Click on the "New" button on the left sidebar.
➢ Enter a name for your database ‘colordetection’ and click "Create".
➢ Create a Table:
➢ Select the newly created database.
➢ Click on the "Create table" section.
➢ Name your table contact and define the columns as follows:
id: INT, AUTO_INCREMENT, PRIMARY KEY
username: VARCHAR(100)
email: VARCHAR(100)
message: TEXT
phone: VARCHAR(15)
➢ Click "Save" to create the table.
3) Create Contact us form:

20
 COLORSCOPE

So basically we created the contact us form and added the following php code to it to process
the queries and save it into database.
There is one file required for the establishing the connection :

21
 COLORSCOPE

7.3 Palette, Hex and rgb code generation:

22
 COLORSCOPE

Step 1: Get Image Colors:

The code starts by calling a function getImageColors(img) which is not defined in the provided
code. This function is assumed to extract an array of RGB colors from the input image. Each
color is represented as an array of three values: [red, green, blue].

23
 COLORSCOPE

Step 2: Initialize Variables:

The code initializes several variables:
➢ cubeSize: This variable determines the size of each cube in the 3D color space. A
smaller cubeSize will result in more cubes and a more detailed color palette.
➢ xMin, xMax, yMin, yMax, zMin, and zMax: These variables define the bounds of the
3D color space. They are assumed to be defined elsewhere in the code.
Step 3: Find Top Density Cubes:
The code calls the findTopDensityCubes(colors, cubeSize) function to find the top density
cubes in the 3D color space. This function takes two arguments:
➢ colors: The array of RGB colors extracted from the image.
➢ cubeSize: The size of each cube in the 3D color space.
The findTopDensityCubes function returns an array of indices representing the top density
cubes.

findTopDensityCubes Function:
Here's a breakdown of the findTopDensityCubes function:
Initialize Counts Array: The function initializes a 3D array counts to store the count of colors
in each cube. The size of the array is determined by the cubeSize and the bounds of the 3D
color space.
Count Colors in Each Cube: The function iterates over the colors array and increments the
count in the corresponding cube. The cube index is calculated using the Math.floor function to
divide the color value by the cubeSize.
Create Indices and Counts Array: The function creates an array of objects, where each object
contains the index of a cube and its count.
Sort and Slice: The function sorts the array in descending order of count and returns the top n
indices, where n is a parameter (default value is 12).

Step 4: Calculate Centers of Mass:

The code maps over the top density cubes and calculates the center of mass for each cube. This
is done by:
➢ Filtering Colors in Each Cube: The code filters the colors array to get the colors
within each cube.
➢ Calculating Sum of Colors: The code calculates the sum of the RGB values for each
color in the cube.
➢ Calculating Center of Mass: The code divides the sum of colors by the number of
colors in the cube to get the center of mass.

24
 COLORSCOPE

Step 5: Fill Color Palette

The code calls the fillColorPalette(centersOfMass) function to fill a color palette with the
calculated centers of mass. This function is not defined in the provided code, but it is assumed
to take the centers of mass and create a color palette.

EyeDropper API:

25
 COLORSCOPE

This script is using the EyeDropper API to allow the user to pick a color from the screen. Here's
a breakdown of what the script does:
Add event listener to "Start" button: When the "Start" button is clicked, the script opens the
EyeDropper API, which allows the user to select a color from the screen.
Get color value from EyeDropper: Once the user selects a color, the script gets the color
value in hexadecimal format using colorValue.sRGBHex.
Convert hex to RGB: The script converts the hex value to an RGB array using a loop that
extracts the red, green, and blue components from the hex string.
Display color information: The script displays the hex and RGB values in input fields (hex-
val-ref and rgb-val-ref) and sets the background color of an element (picked-color-ref) to the
selected color.
Add event listener to image: The script adds an event listener to an image element (myImage)
that listens for mousemove events.
Get color at mouse position: When the user moves the mouse over the image, the script gets
the color at the mouse position using the getImageData method of a canvas element. It extracts
the RGB values from the pixel data and displays them in a text element (color-info).
Set background color of color-info element: The script sets the background color of the color-
info element to the color at the mouse position.
Note that the script uses the EyeDropper API, which is a relatively new API that allows web
applications to access the user's screen and select colors. This API is not supported in older
browsers, so you may need to add polyfills or fallbacks for older browsers.

7.4 Gradient Generator:

This code generates a random color and creates a linear gradient using two colors. Here's a
breakdown of what the code does:

26
 COLORSCOPE

➢ getRandomColor() function
Generates a random hexadecimal color code using Math.random() and toString(16).
The 0xffffff value is the maximum possible value for a hexadecimal color code (FFFFFF in
hex).
The resulting random color code is prefixed with a # symbol to create a valid hexadecimal
color string (e.g., #5665E9).
➢ generateGradient(isRandom) function
If isRandom is true, the function updates the values of two color input fields (colorInputs[0]
and colorInputs[1]) with random colors generated by the getRandomColor() function.
Creates a linear gradient string using the values of:
selectMenu.value: the direction of the gradient (e.g., "to bottom", "to right", etc.).
colorInputs[0].value and colorInputs[1].value: the two colors that make up the gradient.
The gradient string is in the format linear-gradient(direction, color1, color2).
The function applies the generated gradient to:
gradientBox: an HTML element that displays the gradient.
document.body: sets the background of the entire page to the generated gradient.
textarea: sets the value of a textarea element to the generated gradient string, which can be used
to copy and paste the CSS code.

7.5 Tints and Shades Generator:

The given hex color is first converted to RGB. Then each component of the RGB color has the
following calculation performed on it, respectively.
Tints: New value = current value + ((255 - current value) x tint factor)
Shades: New value = current value x shade factor
The new value is rounded if necessary, and then converted back to hex for display.

Example calculation
Let's say we want tints and shades of Rebecca Purple, #663399.
10% tint
#663399 is converted to the RGB equivalent of 102, 51, 153
R: 102 + ((255 - 102) x .1) = 117.3, rounded to 117
G: 51 + ((255 - 51) x .1) = 71.4, rounded to 71
B: 153 + ((255 - 153) x .1) = 163.2, rounded to 163

27
 COLORSCOPE

RGB 117, 71, 163 is converted to the hex equivalent of #7547a3

10% shade
#663399 is converted to the RGB equivalent of 102, 51, 153
R: 102 x .9 = 91.8, rounded to 92
G: 51 x .9 = 45.9, rounded to 46
B: 153 x .9 = 137.7, rounded to 138
RGB 92, 46, 138 is converted to the hex equivalent of #5c2e8a

28
 COLORSCOPE

CHAPTER 9 : SNAPSHOTS

29
COLORSCOPE

30
COLORSCOPE

31
COLORSCOPE

32
COLORSCOPE

33
 COLORSCOPE

CHAPTER 10: CONCLUSION

9.1 Summary of Project:

The Color Detection Website project aimed to create a comprehensive web-based application
for interacting with colors. The application included several key features:
Hex and RGB Code Generator: Allowed users to select a color and automatically generate
the corresponding HEX and RGB color codes.
Hovering X and Y Coordinates: Tracked and displayed the real-time X and Y coordinates of
the user's cursor on the screen.
Palette Generator: Provided users with a palette of colors based on a selected base color,
helping in creating complementary and analogous color schemes.
Gradient Generator: Enabled users to create smooth color transitions (gradients) between
two or more selected colors and provided the CSS code for the gradient.
Tints Generator: Generated lighter variations (tints) of a base color, assisting in creating a
harmonious color scheme.

The project utilized HTML, CSS, and JavaScript to implement these features. The development
process involved:
Setting Up the Project Environment: Using XAMPP to host the project locally and managing
files in a structured directory.
Creating the User Interface: Designing and developing the HTML structure and CSS styling
for a user-friendly interface.
Implementing Core Functionality: Writing JavaScript code to handle user interactions and
generate dynamic content based on user inputs.
Storing Data: For the "Contact Us" form, PHP and MySQL were used to store user-submitted
data securely in a database.
Testing and Debugging: Ensuring cross-browser compatibility, responsive design, and the
proper functioning of all features through extensive testing.

9.2 Conclusion:
The Color Detection Website successfully met its objectives, providing users with a powerful
toolset for exploring and manipulating colors. Key outcomes include:

34
 COLORSCOPE

Enhanced User Experience: The intuitive interface and real-time interactivity significantly
improved the user experience, making color selection and manipulation straightforward.
Versatile Functionality: The range of features catered to various needs, from basic color code
generation to advanced gradient and palette creation, offering versatility to designers and
developers.
Future Enhancements: While the current implementation provides robust functionality,
several areas for future enhancement were identified:
➢ Advanced Color Theory Algorithms: Implementing more sophisticated algorithms
for palette generation to include additional color harmony rules.
➢ User Customization Options: Allowing users to save, share, and export their
generated palettes, gradients, and tints.
➢ Improved UI/UX: Enhancing the user interface with animations, transitions, and a
more modern design to further improve user engagement.
➢ Additional Tools: Expanding the toolset to include features like shade generation, color
blindness simulation, and contrast checking.
The Color Detection Website project demonstrates the effective use of web technologies to
create a practical and engaging application. The successful implementation of various color-
related features underscores the potential of JavaScript, HTML, and CSS in building interactive
web applications. With further enhancements, this project can evolve into an even more
powerful tool for designers, developers, and anyone interested in exploring the world of colors.

35
 COLORSCOPE

CHAPTER 11: REFERENCES

https://www.geeksforgeeks.org/software-development-life-cycle-sdlc/
https://www.geeksforgeeks.org/html-introduction/
https://developer.mozilla.org/en-US/docs/Web/CSS
https://en.wikipedia.org/wiki/JavaScript
https://www.howtogeek.com/761277/what-is-a-hex-code-for-colors/
https://www.w3schools.com/html/html5_canvas.asp
https://jquery.com/
https://www.w3schools.com/jquery/jquery_get_started.asp
https://clipboardjs.com/

36