HTML Colors - HTML Color Types & Usage - GeeksforGeeks

4/1/24, 5:06 AM HTML Colors - HTML Color Types & Usage - GeeksforGeeks
HTML Tutorial HTML Exercises HTML Tags HTML Attributes Global Attributes Event Attributes HTML Inter
HTML Colors
HTML Colors can be applied to text, backgrounds, borders, links, forms, tables,
etc., They can be defined using various formats, such as hexadecimal, RGB,
RGBA, HSL, and named colors, allowing for precise control of color
presentation on web pages.
HTML Color Names
Red Green Blue Pink
Purple Sky Blue Gray Orange
Checkout Color Wheel Tool on GFG: Color Wheel
HTML Color Usage
Usage Descriptions Syntax
HTML Background Color is the shade

<div
that appears behind the content on a
style=”background-
webpage. The background covers the
Background color: magenta;”>
total size of the element with padding
Color Div with magenta
and border but excludes the margin. It
background
makes the text so easy to read for the
</div>
user.
Text color in HTML specifies the color <p style=”color: pink;”>

Text Color of the text content, similar to font Pink color is used
color. </p>
Border Color HTML Border Color refers to the color <div style=”border: 1px
of borders around elements like <div>, solid black; border-
https://www.geeksforgeeks.org/html-colors/?ref=lbp 1/18
Usage Descriptions Syntax
<img>, etc. It defines the color of the color: green;”>

border lines. This div has a green
border
</div>
HTML Link Color specifies the color of

<a href=”#”
the anchor tag within a webpage,
style=”color: blue;”>
Link Color allowing us to define the color of
Link has a blue color
clickable text, and making user
</a>
navigation more visual.
HTML Colors Example:
The example illstrates the various HTML Colors to the element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Text Color</title>
<style>
center {
width: 50%;
margin: 0 auto;
}
h2, div, p, span {
padding: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<center>
<h2 style="background-color: gray;">
Heading with Gray Background color
</h2>
<div style="border: 2px solid skyblue;">

Div with Skyblue Border color
</div>
<span >
<a href="#" style="color: #ff6347;">
Link has a tomato color

</a>
</span>
<p style="color: darkgreen;">

Paragraph with Dark Green Text color
</p>
</center>
</body>
</html>
Output:
HTML Color
HTML Colors Example Explanation:
In this example we create HTML to structure content with elements like

headings, divs, links, and paragraphs.
Heading displays a gray background for emphasis.
Div is bordered with skyblue color for visual distinction.
Link text appears in tomato color for better visibility.
Paragraph text is styled with a dark green color for readability.
Color Values
Color values in HTML define the color of elements. They can be specified using
various formats such as hexadecimal, RGB, RGBA, HSL, HSLA, color names,
and system color keywords.
RGB Color Value

RGB, which stands for Red, Green, and Blue, is a method used in CSS to
describe colors. It works by mixing different amounts of three primary colors,
each with values ranging from 0 to 255. By adjusting these values, we can
produce an extensive range of colors, allowing for the creation of diverse and
better color palettes across websites.
RGB Color Value Properties

Some properties are:
It’s representation is as rgb(red, green, blue).

By adjusting these values from 0 to 255, we can produce 16,777,216
unique colors.
For instance, specifying rgb(0, 255, 0) results in green because the green
value is at its maximum (255), while red and blue are at 0. Conversely,
using rgb(0, 0, 255) produces blue, with the blue channel set to its peak
(255), and red and green at 0.
To render black, all color parameters are set to 0 (rgb(0, 0, 0)), and for
white, all parameters are set to their maximum (rgb(255, 255, 255)).
RGB Color Value Syntax
// Blue background
<p style="background-color: rgb(0, 0, 255);">
Is the sky background Blue by using RGB
</p>
RGB Color Value Example
The example we are using the RGB color values to style our html elements.
HTML
<!DOCTYPE html>
<html>
<head>
<title>RGB Color Value</title>
<style>
center {
width: 50%;
margin: 0 auto;
}
h2,
div,
p,
span {
padding: 10px;
}
</style>
</head>
<body>
<center>
<h2 style="background-color: rgb(109, 102, 197);">
Heading with blue Background color
</h2>
<div style="border: 2px solid rgb(135, 206, 235);">

<li>
<a href="#html-color-usage">
HTML Color Usage
</a>
</li>
Div with Skyblue Border color
</div>
<span>
<a href="#" style="color: rgb(241, 76, 89);">
Link has a tomato color
</a>
</span>
<p style="color: rgb(0, 100, 0);">

Paragraph with Dark Green Text color
</p>
</center>
</body>
</html>
Output:
RGB Color Value Example Explanation
Here is the implementation of above example.
In the above example the Heading exhibits a blue background using RGB
color value (109, 102, 197).
Div border is styled with skyblue using RGB color value (135, 206, 235).
Link text appears in tomato color using RGB value (241, 76, 89) for visual
distinction.
Paragraph text is styled with dark green using RGB value (0, 100, 0) for
readability.
RGBA Color Value

RGBA (Red, Green, Blue, Alpha) is a color model similar to RGB, but with an
added alpha parameter representing transparency. The alpha value, which
ranges from 0 to 1, adjusts transparency, allowing the display of colors with
varying levels of opacity. It’s representation is as rgba(red, green, blue, alpha).
RGBA Color values Properties

RGBA Format Represents colors using Red, Green, Blue, and Alpha
(transparency) values, allowing control over opacity.
Alpha value ranges from 0 (fully transparent) to 1 (fully opaque).
RGBA values are expressed as rgba(red, green, blue, alpha).
Ideal for creating semi-transparent elements, providing subtle visual effects
or layering content.
RGBA Color Value Syntax
// Semi-transparent text with a purple hue

<span style="color: rgba(128, 0, 128, 0.5);">
This text is semi-transparent with a purple hue using RGBA
</span>
RGBA Color Value Example
In this example we are using the RGBA color values to style our html
elements.
HTML
<!DOCTYPE html>
<html>
<head>
<title>RGBA Color Value</title>
<style>
center {
width: 50%;
margin: 0 auto;
}
h2, div, p, span {
padding: 10px;
}
</style>
</head>
<body>
<center>
<h2 style="background-color: rgba(255, 99, 71, 0.5);">
Heading with semi-transparent Tomato Background color
</h2>
<div style="border: 2px solid rgba(255, 165, 0, 0.7);">

Div with semi-transparent Orange Border color
</div>
<span>
<a href="#"
style="color: rgba(0, 191, 255, 0.8);">
Link has a semi-transparent Deep Sky Blue color
</a>
</span>
<p style="color: rgba(128, 0, 128, 0.6);">

Paragraph with semi-transparent Purple Text color
</p>
</center>
</body>
</html>
Output:
RGBA color value
RGBA Color Value Example Explanation:
Here we styled Heading with semi-transparent tomato background color

using RGBA (255, 99, 71, 0.5).
Div Exhibits a semi-transparent orange border with RGBA (255, 165, 0,
0.7).
Link Displays a semi-transparent deep sky blue color using RGBA (0, 191,
255, 0.8).
In Paragraph Text appears semi-transparent purple with RGBA (128, 0,
128, 0.6).
HEX Color Value

Hexadecimal color values, often referred to as hex values, use a six-digit code
made up of pairs of characters.
Hexadecimal values in CSS are represented as #rrggbb, where rr, gg, and
bb denote the intensity of red, green, and blue, respectively, ranging from
00 to ff.
This encoding allows for 16,777,216 unique color combinations, providing a
vast spectrum for web design.
For example, #ff0000 corresponds to red (max red, no green, no blue),
while #00ff00 represents green (max green, no red, no blue).
Black is denoted by #000000 (no red, no green, no blue), while white is
represented as #ffffff (max red, max green, max blue).
HEX Color Value Syntax
// Pinkish Background
<div style="background-color: #FF69B4;">
div has a pinkish background by using Hex
</div>
HEX Color Value Example:
In this example we are using the HEX color values to style our html elements.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Hex Color Value</title>
<style>
center {
width: 50%;
margin: 0 auto;
}
h2, div, p, span {
padding: 10px;
}
</style>
</head>
<body>
<center>
<h2 style="background-color: #FF6347;">

Heading with semi-transparent
Tomato Background color (Hex: #FF6347)
</h2>
<div style="border: 2px solid #FFA500;">

Div with semi-transparent
Orange Border color (Hex: #FFA500)
</div>
<span>
<a href="#" style="color: #00BFFF;">
Link has a semi-transparent
Deep Sky Blue color (Hex: #00BFFF)
</a>
</span>
<p style="color: #800080;">

Paragraph with semi-transparent
Purple Text color (Hex: #800080)
</p>
</center>
</body>
</html>
Output:
hex color value
HEX Color Value Explanation:
In this example Heading Styled with a tomato background using hex color
value #FF6347.
Div Features an orange border using hex color value #FFA500.
Link Rendered with a deep sky blue color using hex value #00BFFF.
Paragraph Text is colored purple using hex value #800080.
HSL (Hue, Saturation, Lightness) Value

HSL color values in HTML represent colors by defining their hue, saturation,
and lightness. The hue signifies the type of color (red, blue, green, etc.),
saturation refers to the intensity or purity of the color, and lightness
determines the brightness or darkness.
HSL Color value Properties:

HSL representation defines colors based on Hue, Saturation, and Lightness
components, offering a more intuitive way to specify colors.
Hue represents the color type, ranging from 0 to 360 degrees.
Saturation determines the intensity or purity of the color, from 0%
(grayscale) to 100% (full color).
Lightness controls the brightness of the color, ranging from 0% (black) to
100% (white), with 50% representing normal.
HSL Color value Syntax
// Golden Background
<div style="background-color: hsl(45, 100%, 50%);">
This div has a golden background using HSL
</div>
HSL color value Example:
The example shows the HSL color values.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HSL Color Value</title>
<style>
center {
width: 50%;
margin: 0 auto;
}
h2, div, p, span {
padding: 10px;
}
</style>
</head>
<body>
<center>
<h2 style="background-color: hsla(120, 100%, 50%, 0.5);">
Heading with semi-transparent
Green Background color
(HSL: hsla(120, 100%, 50%, 0.5))
</h2>
<div style="border: 2px solid hsla(240, 100%, 50%, 0.7);">

Div with semi-transparent
Blue Border color
(HSL: hsla(240, 100%, 50%, 0.7))
</div>
<span>
<a href="#" style="color: hsla(30, 100%, 50%, 0.8);">
Link has a semi-transparent
Orange color
(HSL: hsla(30, 100%, 50%, 0.8))
</a>
</span>
<p style="color: hsla(0, 100%, 25%, 0.6);">

Paragraph with semi-transparent
Red Text color
(HSL: hsla(0, 100%, 25%, 0.6))
</p>
</center>
</body>
</html>
Output:
hsl color value
HSL Color value Explanation:

In this example HSLA(120, 100%, 50%, 0.5) creates a semi-transparent

green background for the heading with 50% opacity.
HSLA(240, 100%, 50%, 0.7) sets a semi-transparent blue border for the div
with 70% opacity.
HSLA(30, 100%, 50%, 0.8) defines a semi-transparent orange color for the
link with 80% opacity.
HSLA(270, 100%, 25%, 0.6) specifies semi-transparent purple text for the
paragraph with 60% opacity.
HTML Colors Use Cases:
1.How to Use Colors in Web Design?
Colors in web design are used to convey emotion, establish hierarchy, improve
readability, and create visual interest, enhancing user experience.
2.How to create a Color Generator using HTML CSS and JavaScript ?
To create a Color Generator, use HTML for layout, CSS for styling, and
JavaScript to handle user interactions, generating random colors dynamically.
3.How to change Background Color in HTML ?
To change the background color in HTML, use the CSS property “background-
color” and specify a color value for the desired background.
4.How to create Hex color generator using HTML CSS and JavaScript ?
To create a Hex color generator, use HTML for structure, CSS for styling, and
JavaScript to generate random Hexadecimal values.
5.How to create multicolored text in a web page using HTML and CSS ?
To create multicolored text, use HTML to structure content and CSS to apply
different colors to individual text elements or spans.
6.How to add color picker in a form using HTML ?
To add a color picker in a form, use the HTML input element with type “color”
to allow users to select colors.
“This course was packed with amazing and well-organized content! The
project-based approach of this course made it even better to understand
concepts faster. Also the instructor in the live classes is really good and
knowledgeable.”- Tejas | Deutsche Bank
With our revamped Full Stack Development Program: master Node.js and
React that enables you to create dynamic web applications.
So get ready for salary hike only with our Full Stack Development Course.
Last Updated : 01 Mar, 2024 1
Previous Next
HTML Quotations HTML Links Hyperlinks
Share your thoughts in the comments Add Your Comment
Similar Reads
React.js Blueprint Colors Core colors How to Change the Label Colors or the
Legend Colors in a Chart ?
How to set Bullet colors in HTML Lists Different ways to apply colors in an
using only CSS? HTML document
What are different colors associated with

link to display their importance in HTML HTML Link Colors
?
Bulma Notification Colors Blaze UI Badges Colors
How to put Gradient Colors in a website CSS Colors

?
P pankaj_g…
Article Tags : HTML-Questions , HTML5 , HTML , Web Technologies
A-143, 9th Floor, Sovereign Corporate

Tower, Sector-136, Noida, Uttar Pradesh -
201305
Company Explore
About Us Hack-A-Thons
Legal GfG Weekly Contest
Careers DSA in JAVA/C++
In Media Master System Design
Contact Us Master CP
Advertise with us GeeksforGeeks Videos
GFG Corporate Solution Geeks Community
Placement Training Program
Languages DSA
Python Data Structures
Java Algorithms
C++ DSA for Beginners
PHP Basic DSA Problems
GoLang DSA Roadmap
SQL Top 100 DSA Interview Problems
R Language DSA Roadmap by Sandeep Jain
Android Tutorial All Cheat Sheets
Tutorials Archive
Data Science & ML HTML & CSS

Data Science With Python HTML
Data Science For Beginner CSS
Machine Learning Tutorial Web Templates
ML Maths CSS Frameworks
Data Visualisation Tutorial Bootstrap
Pandas Tutorial Tailwind CSS
NumPy Tutorial SASS
NLP Tutorial LESS
Deep Learning Tutorial Web Design
Django Tutorial
Python Tutorial Computer Science

Python Programming Examples Operating Systems
Python Projects Computer Network
Python Tkinter Database Management System
Web Scraping Software Engineering
OpenCV Tutorial Digital Logic Design
Python Interview Question Engineering Maths
DevOps Competitive Programming

Git Top DS or Algo for CP
AWS Top 50 Tree
Docker Top 50 Graph
Kubernetes Top 50 Array
Azure Top 50 String
GCP Top 50 DP
DevOps Roadmap Top 15 Websites for CP
System Design JavaScript

High Level Design JavaScript Examples
Low Level Design TypeScript
UML Diagrams ReactJS
Interview Guide NextJS
Design Patterns AngularJS
OOAD NodeJS
System Design Bootcamp Lodash
Interview Questions Web Browser
Preparation Corner School Subjects

Company-Wise Recruitment Process Mathematics
Resume Templates Physics
Aptitude Preparation Chemistry
Puzzles Biology
Company-Wise Preparation Social Science
English Grammar
World GK
Management & Finance Free Online Tools

Management Typing Test
HR Management Image Editor
Finance Code Formatters
Income Tax Code Converters
Organisational Behaviour Currency Converter
Marketing Random Number Generator
Random Password Generator
More Tutorials GeeksforGeeks Videos

Software Development DSA
Software Testing Python
Product Management Java
SAP C++
SEO - Search Engine Optimization Data Science
Linux CS Subjects
Excel
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

HTML Colors - HTML Color Types &amp; Usage - GeeksforGeeks

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Colors - HTML Color Types &amp; Usage - GeeksforGeeks

Uploaded by

Copyright:

Available Formats

4/1/24, 5:06 AM HTML Colors - HTML Color Types & Usage - GeeksforGeeks

HTML Color Names

Red Green Blue Pink

Purple Sky Blue Gray Orange

Checkout Color Wheel Tool on GFG: Color Wheel

HTML Color Usage

Usage Descriptions Syntax

HTML Background Color is the shade

Text color in HTML specifies the color <p style=”color: pink;”>

Usage Descriptions Syntax

<img>, etc. It defines the color of the color: green;”>

HTML Link Color specifies the color of

HTML Colors Example:

The example illstrates the various HTML Colors to the element.

<div style="border: 2px solid skyblue;">

Link has a tomato color

<p style="color: darkgreen;">

HTML Colors Example Explanation:

In this example we create HTML to structure content with elements like

RGB Color Value

RGB Color Value Properties

It’s representation is as rgb(red, green, blue).

RGB Color Value Syntax

RGB Color Value Example

<div style="border: 2px solid rgb(135, 206, 235);">

<p style="color: rgb(0, 100, 0);">

RGB Color Value Example Explanation

Here is the implementation of above example.

RGBA Color Value

RGBA Color values Properties

RGBA Color Value Syntax

// Semi-transparent text with a purple hue

RGBA Color Value Example

<div style="border: 2px solid rgba(255, 165, 0, 0.7);">

<p style="color: rgba(128, 0, 128, 0.6);">

RGBA color value

RGBA Color Value Example Explanation:

Here we styled Heading with semi-transparent tomato background color

HEX Color Value

HEX Color Value Syntax

HEX Color Value Example:

<h2 style="background-color: #FF6347;">

<div style="border: 2px solid #FFA500;">

<p style="color: #800080;">

hex color value

HEX Color Value Explanation:

HSL (Hue, Saturation, Lightness) Value

HSL Color value Properties:

HSL Color value Syntax

HSL color value Example:

The example shows the HSL color values.

<div style="border: 2px solid hsla(240, 100%, 50%, 0.7);">

<p style="color: hsla(0, 100%, 25%, 0.6);">

hsl color value

HSL Color value Explanation:

In this example HSLA(120, 100%, 50%, 0.5) creates a semi-transparent

HTML Colors Use Cases:

1.How to Use Colors in Web Design?

2.How to create a Color Generator using HTML CSS and JavaScript ?

3.How to change Background Color in HTML ?

6.How to add color picker in a form using HTML ?

Last Updated : 01 Mar, 2024 1

HTML Quotations HTML Links Hyperlinks

Share your thoughts in the comments Add Your Comment

HTML Colors - HTML Color Types & Usage - GeeksforGeeks

HTML Colors - HTML Color Types & Usage - GeeksforGeeks