CSS Colors in Hindi | Color Name, RGB, HEX & HSL with Examples

नीचे CSS Colors चैप्टर के लिए Student Notes दिए गए हैं। इसमें Colors, RGB, HEX और HSL चारों टॉपिक शामिल हैं।

Chapter: CSS Colors

CSS Colors क्या हैं?

CSS Colors का उपयोग Web Page के विभिन्न Elements जैसे Text, Background, Border, Button, Shadow आदि का रंग (Color) निर्धारित करने के लिए किया जाता है।

Definition:

CSS Colors का उपयोग HTML Elements के रंग को नियंत्रित करने के लिए किया जाता है, जिससे Web Page आकर्षक (Attractive) और उपयोगकर्ता के लिए बेहतर (User-Friendly) दिखाई देता है।

CSS में Color लगाने का Syntax

selector{
    color: value;
}

Example

h1{
    color: red;
}

Output: Heading का रंग Red हो जाएगा।

CSS में Color लगाने के तरीके

CSS में Color को मुख्य रूप से 4 तरीकों से लिखा जाता है—

1. Color Name
2. RGB Color
3. HEX Color
4. HSL Color

1. Color Name

इसमें रंग का नाम लिखा जाता है।

Example

h1{
    color: blue;
}

p{
    color: green;
}

कुछ सामान्य Color Names

Color	Name
🔴	Red
🟢	Green
🔵	Blue
⚫	Black
⚪	White
🟡	Yellow
🟠	Orange
🩷	Pink
🟣	Purple
🟤	Brown

2. RGB Color

RGB का पूरा नाम Red, Green, Blue है।

प्रत्येक रंग की Value 0 से 255 तक होती है।

Syntax

rgb(red, green, blue)

Example

h1{
    color: rgb(255,0,0);
}

Output: Red Color

Example

p{
    color: rgb(0,255,0);
}

Output: Green Color

RGB Table

Color	RGB
Red	rgb(255,0,0)
Green	rgb(0,255,0)
Blue	rgb(0,0,255)
White	rgb(255,255,255)
Black	rgb(0,0,0)

3. HEX Color

HEX का पूरा नाम Hexadecimal Color Code है।

यह हमेशा # से शुरू होता है।

Syntax

#RRGGBB

Example

h1{
    color:#FF0000;
}

Example

body{
    background-color:#FFFF00;
}

Common HEX Colors

Color	HEX
Red	#FF0000
Green	#00FF00
Blue	#0000FF
Black	#000000
White	#FFFFFF
Yellow	#FFFF00

4. HSL Color

HSL का पूरा नाम है—

Hue, Saturation, Lightness

Syntax

hsl(Hue, Saturation%, Lightness%)

Example

h1{
color:hsl(0,100%,50%);
}

Example

body{
background-color:hsl(120,100%,50%);
}

HSL का अर्थ

भाग	अर्थ
Hue	Color
Saturation	Color की गहराई
Lightness	Color की चमक

Background Color

body{
background-color:lightblue;
}

Text Color

p{
color:red;
}

Border Color

div{
border:2px solid blue;
}

Complete Practical

<!DOCTYPE html>
<html>
<head>

<style>

body{
background-color:#F5F5F5;
}

h1{
color:red;
}

h2{
color:rgb(0,0,255);
}

h3{
color:#00AA00;
}

h4{
color:hsl(300,100%,40%);
}

p{
color:black;
font-size:20px;
}

</style>

</head>

<body>

<h1>Red Color</h1>

<h2>RGB Color</h2>

<h3>HEX Color</h3>

<h4>HSL Color</h4>

<p>Welcome to CSS Colors Chapter.</p>

</body>

</html>

Viva Questions

Q1. CSS Colors क्या हैं?

Ans: CSS Colors का उपयोग HTML Elements का रंग बदलने के लिए किया जाता है।

Q2. CSS में कितने प्रकार से Color लिखा जा सकता है?

Ans: 4 प्रकार से—

• Color Name
• RGB
• HEX
• HSL

Q3. RGB का पूरा नाम क्या है?

Ans: Red Green Blue

Q4. HEX Color किस चिन्ह से शुरू होता है?

Ans: #

Q5. HSL का पूरा नाम क्या है?

Ans: Hue Saturation Lightness

Final Assignment

Assignment 1

एक Web Page बनाइए जिसमें—

• Heading (Red)
• Paragraph (Green)
• Background (Yellow)

हो।

Assignment 2

RGB का उपयोग करके 5 अलग-अलग रंग बनाइए।

Assignment 3

HEX Color का उपयोग करके 5 अलग-अलग Text Colors बनाइए।

Assignment 4

HSL का उपयोग करके 5 अलग-अलग Background Colors बनाइए।

Mini Project

“Color Gallery” नाम से एक Web Page बनाइए जिसमें—

• 10 अलग-अलग Color Boxes हों।
• प्रत्येक Box में Color Name लिखा हो।
• कुछ Colors Color Name से, कुछ RGB, कुछ HEX, और कुछ HSL से बनाए जाएँ।
• प्रत्येक Box पर Border और Padding भी लगाएँ।

Home Assignment

1. CSS Colors क्या हैं?
2. CSS में Color लगाने के कितने तरीके हैं?
3. RGB का पूरा नाम लिखिए।
4. HEX Color क्या है?
5. HSL का पूरा नाम लिखिए।
6. Color Name और HEX Color में क्या अंतर है?
7. RGB और HSL में क्या अंतर है?
8. पाँच Color Names लिखिए।
9. पाँच HEX Codes लिखिए।
10. RGB, HEX और HSL का उपयोग करके एक Web Page तैयार कीजिए।

Complate Mini Project Assignment