CSS Colors
CSS இல் நிறங்களை பின்வரும் முறைகளால் குறிப்பிடலாம்:
- ஹெக்ஸாடெசிமல் (Hexadecimal) நிறங்கள்
- பார்ப்புதன்மையுடன் ஹெக்ஸாடெசிமல் நிறங்கள்
- RGB நிறங்கள்
- RGBA நிறங்கள்
- HSL நிறங்கள்
- HSLA நிறங்கள்
- முன்னரே வரையறுக்கப்பட்ட/குறுக்கு-உலாவி நிற பெயர்கள்
- currentcolor முக்கிய சொல்லுடன்
Hexadecimal Colors
ஒரு ஹெக்ஸாடெசிமல் நிறம் இவ்வாறு குறிப்பிடப்படுகிறது: #RRGGBB, RR (சிவப்பு), GG (பச்சை) மற்றும் BB (நீலம்) ஹெக்ஸாடெசிமல் முழு எண்கள் நிறத்தின் கூறுகளைக் குறிப்பிடுகின்றன. அனைத்து மதிப்புகளும் 00 மற்றும் FF க்கு இடையில் இருக்க வேண்டும்.
எடுத்துக்காட்டாக, #0000ff மதிப்பு நீலமாக வழங்கப்படுகிறது, ஏனெனில் நீல கூறு அதன் உயர் மதிப்புக்கு (ff) அமைக்கப்பட்டுள்ளது மற்றும் மற்றவை 00 க்கு அமைக்கப்பட்டுள்ளன.
Example
வெவ்வேறு HEX நிறங்களை வரையறுக்கவும்:
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */Hexadecimal Colors With Transparency
ஒரு ஹெக்ஸாடெசிமல் நிறம் இவ்வாறு குறிப்பிடப்படுகிறது: #RRGGBB. பார்ப்புதன்மையைச் சேர்க்க, 00 மற்றும் FF க்கு இடையில் இரண்டு கூடுதல் இலக்கங்களைச் சேர்க்கவும்.
Example
பார்ப்புதன்மையுடன் வெவ்வேறு HEX நிறங்களை வரையறுக்கவும்:
#p1a {background-color: #ff000080;} /* red transparency */
#p2a {background-color: #00ff0080;} /* green transparency */
#p3a {background-color: #0000ff80;} /* blue transparency */RGB Colors
ஒரு RGB நிற மதிப்பு rgb() செயல்பாட்டுடன் குறிப்பிடப்படுகிறது, இது பின்வரும் தொடரியலைக் கொண்டுள்ளது:
rgb(red, green, blue)ஒவ்வொரு அளவுருவும் (சிவப்பு, பச்சை மற்றும் நீலம்) நிறத்தின் செறிவை வரையறுக்கிறது மற்றும் 0 முதல் 255 வரையிலான முழு எண்ணாக அல்லது சதவீத மதிப்பாக (0% முதல் 100% வரை) இருக்கலாம்.
எடுத்துக்காட்டாக, rgb(0,0,255) மதிப்பு நீலமாக வழங்கப்படுகிறது, ஏனெனில் நீல அளவுரு அதன் உயர் மதிப்புக்கு (255) அமைக்கப்பட்டுள்ளது மற்றும் மற்றவை 0 க்கு அமைக்கப்பட்டுள்ளன.
மேலும், பின்வரும் மதிப்புகள் சமமான நிறத்தை வரையறுக்கின்றன: rgb(0,0,255) மற்றும் rgb(0%,0%,100%).
Example
வெவ்வேறு RGB நிறங்களை வரையறுக்கவும்:
#p1 {background-color: rgb(255, 0, 0);} /* red */
#p2 {background-color: rgb(0, 255, 0);} /* green */
#p3 {background-color: rgb(0, 0, 255);} /* blue */RGBA Colors
RGBA நிற மதிப்புகள் ஆல்ஃபா சேனலுடன் கூடிய RGB நிற மதிப்புகளின் நீட்டிப்பாகும் - இது பொருளின் ஒளிபுகு தன்மையைக் குறிப்பிடுகிறது.
ஒரு RGBA நிறம் rgba() செயல்பாட்டுடன் குறிப்பிடப்படுகிறது, இது பின்வரும் தொடரியலைக் கொண்டுள்ளது:
rgba(red, green, blue, alpha)ஆல்ஃபா அளவுரு 0.0 (முழுமையாக ஒளிபுகும்) மற்றும் 1.0 (முழுமையாக ஒளிபுகா) க்கு இடையே உள்ள எண்ணாகும்.
Example
ஒளிபுகு தன்மையுடன் வெவ்வேறு RGB நிறங்களை வரையறுக்கவும்:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */HSL Colors
HSL என்பது Hue (வண்ணச்சாயல்), Saturation (தூய்மை) மற்றும் Lightness (வெளிச்சம்) ஆகியவற்றைக் குறிக்கிறது - மேலும் இது நிறங்களின் உருளை-ஆய குறிப்பீட்டைக் குறிக்கிறது.
ஒரு HSL நிற மதிப்பு hsl() செயல்பாட்டுடன் குறிப்பிடப்படுகிறது, இது பின்வரும் தொடரியலைக் கொண்டுள்ளது:
hsl(hue, saturation, lightness)Hue என்பது வண்ண வட்டத்தில் ஒரு டிகிரி (0 முதல் 360 வரை) - 0 (அல்லது 360) சிவப்பு, 120 பச்சை, 240 நீலம். Saturation என்பது ஒரு சதவீத மதிப்பு; 0% என்பது சாம்பல் நிறத்தின் நிழலைக் குறிக்கிறது மற்றும் 100% முழு நிறமாகும். Lightness என்பதும் ஒரு சதவீதமாகும்; 0% கருப்பு, 100% வெள்ளை.
HSL Color Model Explanation:
Hue (0-360°): வண்ணச்சாயல் - வட்டத்தில் உள்ள நிறம்
Saturation (0-100%): தூய்மை - நிறத்தின் தீவிரம்
Lightness (0-100%): வெளிச்சம் - நிறத்தின் பிரகாசம்
- 0° - சிவப்பு
- 120° - பச்சை
- 240° - நீலம்
- 360° - மீண்டும் சிவப்பு
Example
வெவ்வேறு HSL நிறங்களை வரையறுக்கவும்:
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */HSLA Colors
HSLA நிற மதிப்புகள் ஆல்ஃபா சேனலுடன் கூடிய HSL நிற மதிப்புகளின் நீட்டிப்பாகும் - இது பொருளின் ஒளிபுகு தன்மையைக் குறிப்பிடுகிறது.
ஒரு HSLA நிற மதிப்பு hsla() செயல்பாட்டுடன் குறிப்பிடப்படுகிறது, இது பின்வரும் தொடரியலைக் கொண்டுள்ளது:
hsla(hue, saturation, lightness, alpha)ஆல்ஃபா அளவுரு 0.0 (முழுமையாக ஒளிபுகும்) மற்றும் 1.0 (முழுமையாக ஒளிபுகா) க்கு இடையே உள்ள எண்ணாகும்.
Example
ஒளிபுகு தன்மையுடன் வெவ்வேறு HSL நிறங்களை வரையறுக்கவும்:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */Predefined/Cross-browser Color Names
140 நிற பெயர்கள் HTML மற்றும் CSS வண்ண விவரக்குறிப்பில் முன்னரே வரையறுக்கப்பட்டுள்ளன.
எடுத்துக்காட்டாக: blue, red, coral, brown, முதலியன:
Example
வெவ்வேறு நிற பெயர்களை வரையறுக்கவும்:
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}குறிப்பு:
அனைத்து முன்னரே வரையறுக்கப்பட்ட பெயர்களின் பட்டியலை எங்கள் நிற பெயர்கள் குறிப்பில் காணலாம்.
The currentcolor Keyword
currentcolor முக்கிய சொல் ஒரு உறுப்பின் color பண்பின் மதிப்பைக் குறிக்கிறது.
Example
பின்வரும் <div> உறுப்பின் எல்லை நிறம் நீலமாக இருக்கும், ஏனெனில் <div> உறுப்பின் உரை நிறம் நீலமாக உள்ளது:
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor; /* Blue border color */
}Live Demo:
Try changing the text color to see the border color update automatically.
Color Methods Comparison
Hexadecimal
Format: #RRGGBB or #RRGGBBAA
Range: 00-FF per channel
Example: #ff5733
Use when: Web design, simple colors
RGB/RGBA
Format: rgb(r,g,b) or rgba(r,g,b,a)
Range: 0-255 or 0%-100%
Example: rgb(255, 87, 51)
Use when: Programmatic color generation
HSL/HSLA
Format: hsl(h,s,l) or hsla(h,s,l,a)
Range: h:0-360°, s,l:0-100%
Example: hsl(14, 100%, 60%)
Use when: Color adjustments, themes
Color Names
Format: Predefined names
Range: 140 named colors
Example: coral, teal, rebeccapurple
Use when: Quick prototyping, readability