CSS లోని అథారిటివ్ రంగు విలువలు

సిఎస్ఎస్ కలర్స్

CSS లో రంగులను ఈ విధంగా నిర్వచించవచ్చు:

  • హెక్సడెసిమల్ రంగు
  • పారదర్శకతతో కూడిన HEX రంగు
  • RGB రంగు
  • RGBA రంగులు
  • HSL రంగులు
  • #p4 {background-color: hsl(120, 60%, 70%);} /* హరిత రంగు */
  • ప్రిడిఫైన్డ్/బ్రాండ్వేర్ రంగు పేర్లు
  • ఉపయోగించండి: currentcolor కీలక పదం

హెక్సడెసిమల్ రంగు

క్రింది విధంగా #RRGGBB ను వాడి, RR (ఎరుపు), GG (ఆకుపచ్చ రంగు), మరియు BB (నీలి) హెక్సడెసిమల్ ఇంటిజర్స్ రంగు కంపానెంట్స్ ను నిర్వచించుట. అన్ని విలువలు 00 నుండి FF మధ్య ఉండాలి。

ఉదాహరణకు, #0000ff విలువ నీలి రంగును ప్రదర్శిస్తుంది, ఎందుకంటే బ్లూ కంపానెంట్ అత్యున్నత విలువను కలిగి ఉంటుంది (ff), ఇతర కంపానెంట్స్ ను 00 గా సెట్ చేయబడ్డాయి。

ఉదాహరణ

వేరే HEX రంగులను నిర్వచించుట

#p1 {background-color: #ff0000;}   /* ఎరుపు రంగు */
#p2 {background-color: #00ff00;}   /* ఆకుపచ్చ రంగు */
#p3 {background-color: #0000ff;}   /* నీలి */

亲自试一试

పారదర్శకతతో కూడిన HEX రంగు

క్రింది విధంగా #RRGGBB ను వాడి, పారదర్శకతను పెంచడానికి 00 మరియు FF మధ్య రెండు అదనపు నంబర్స్ జోడించండి。

ఉదాహరణ

పారదర్శకతతో కూడిన HEX రంగును నిర్వచించుట

#p1a {background-color: #ff000080;}   /* పారదర్శకతతో కూడిన ఎరుపు రంగు */
#p2a {background-color: #00ff0080;}   /* పారదర్శకతతో కూడిన ఆకుపచ్చ రంగు */
#p3a {background-color: #0000ff80;}   /* పారదర్శకతతో కూడిన నీలి */

亲自试一试

RGB రంగు

RGB రంగు విలువలు ఈ విధంగా ఉన్నాయి రగ్బి() ఫంక్షన్నిర్వచించండి, సంకేతం ఈ కింద ఉంది:

రగ్బి(red, గ్రెన్, blue)

ప్రతి పారామీటర్ (red, గ్రెన్, blueరంగు బలాన్ని నిర్వచించుట, అది 0 నుండి 255 మధ్య పరిమాణంగా లేదా శతకాంశంగా ఉండవచ్చు (0% నుండి 100%)。

ఉదాహరణకు, విలువ రగ్బి(0,0,255) నేరుగా నీలి రంగును ప్రదర్శిస్తుంది, ఎందుకంటే బ్లూ పారామీటర్ అత్యున్నత విలువను కలిగి ఉంటుంది (255), ఇతర పారామీటర్స్ ను 0 గా సెట్ చేయబడ్డాయి。

ఇక ఈ విలువలు ఒకే రంగును నిర్వచిస్తాయి: rgb(0,0,255) మరియు rgb(0%,0%,100%).

ఉదాహరణ

వేరే RGB రంగులను నిర్వచించండి:

#p1 {background-color: rgb(255, 0, 0);}   /* రెడ్ */
#p2 {background-color: rgb(0, 255, 0);}   /* గ్రెన్ */
#p3 {background-color: rgb(0, 0, 255);}   /* బ్లూ */

亲自试一试

RGBA రంగులు

RGBA రంగు విలువలు RGB రంగు విలువలను విస్తరించినది, ఇది అల్ఫా చానల్ తో కలిగి ఉంటుంది - అనుసంధానం అనిహారతని నిర్వచిస్తుంది.

RGBA రంగులు rgba() ఫంక్షన్నిర్వచించండి, సంకేతం ఈ కింద ఉంది:

rgba(red, గ్రెన్, blue, alpha)

alpha పారామీటర్స్ 0.0 (పూర్తి పారదర్శకత్వం) మరియు 1.0 (పూర్తి అస్తిత్వం) మధ్య ఉన్న సంఖ్యలు ఉన్నాయి.

ఉదాహరణ

అనిహారమైన RGB రంగులను నిర్వచించండి:

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* అనిహారమైన రెడ్ */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* అనిహారమైన గ్రెన్ */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* అనిహారమైన బ్లూ */

亲自试一试

HSL రంగులు

HSL అనేది హ్యూ (హ్యూ), సార్వత్రికత (సార్వత్రికత), కాంతి క్రమంగా శాతములు - రంగుల కలిమన కోవిని ప్రాతిపదికన ప్రాతిపదికలు.

ఉపయోగించండి: hsl() ఫంక్షన్HSL రంగు విలువలను సూచించండి, ఈ ఫంక్షన్ యొక్క సంకేతం ఈ కింద ఉంది:

hsl(హ్యూ, ప్రకృతి, ప్రకాశత్వం)

హ్యూ క్రమంగా డిగ్రీస్ (0 నుండి 360) - 0 (లేదా 360) రెడ్, 120 హెల్లెన్, 240 బ్లూ.

సార్వత్రికత క్రమంగా శాతములు; 0% గ్రే శేషం, 100% పూర్తి రంగు.

కాంతి క్రమంగా శాతములు; 0% బ్లాక్, 100% వెండిరంగు.

ఉదాహరణ

రంగు నిర్వచించండి:

#p1 {background-color: hsl(120, 100%, 50%);}   /* 绿色 */
#p2 {background-color: hsl(120, 100%, 75%);}   /* 浅绿色 */
#p3 {background-color: hsl(120, 100%, 25%);}   /* 深绿色 */
#p4 {background-color: hsl(120, 60%, 70%);}    /* 柔和的绿色 */

亲自试一试

#p4 {background-color: hsl(120, 60%, 70%);} /* హరిత రంగు */

HSLA రంగు

HSLA రంగు విలువలు HSL రంగు విలువలను విస్తరించినవి, ఇది Alpha చానల్ ను కలిగి ఉంటుంది - దాని యొక్క అస్తిత్వాన్ని నిర్దేశించడానికి ఉపయోగించబడుతుంది. hsla() ఫంక్షన్నిర్దేశించండి, ఈ ఫంక్షన్ యొక్క సంకేతాలు ఈ కింది విధంగా ఉన్నాయి:

hsla(హ్యూ, ప్రకృతి, ప్రకాశత్వం, alpha)

alpha పారామీటర్స్ 0.0 (పూర్తి పారదర్శకత్వం) మరియు 1.0 (పూర్తి అస్తిత్వం) మధ్య ఉన్న సంఖ్యలు ఉన్నాయి.

ఉదాహరణ

అస్తిత్వానికి సంబంధించిన వివిధ HSL రంగులను నిర్వచించండి:

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* అస్తిత్వానికి సంబంధించిన హరిత రంగు */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* అస్తిత్వానికి సంబంధించిన పసుపు హరిత రంగు */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* అస్తిత్వానికి సంబంధించిన కంకర రంగు */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* అస్తిత్వానికి సంబంధించిన హరిత రంగు */

亲自试一试

ప్రిడిఫైన్డ్/బ్రాండ్వేర్ రంగు పేర్లు

HTML మరియు CSS రంగు ప్రమాణాలలో 140 రంగు పేర్లు ప్రిడిఫైన్డ్ ఉన్నాయి.

ఉదాహరణకు:blueమీదట:redమీదట:coralమీదట:brown వంటివి:

ఉదాహరణ

వివిధ రంగు పేర్లను నిర్వచించండి:

#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}

亲自试一试

అన్ని ప్రిడిఫైన్డ్ పేర్ల జాబితాను మా రంగు పేర్ల పరిశీలన హాండ్బుక్ లో దొరికించవచ్చు.

currentcolor కీలక పదం

currentcolor కీలక పదాలు యొక్క color అనునాటకం ఉపయోగించండి.

ఉదాహరణ

ఈ <div> ఎలిమెంట్ యొక్క కిందివర్ణ రంగు నీలిగా ఉంటుంది ఎందుకంటే <div> ఎలిమెంట్ యొక్క టెక్స్ట్ రంగు నీలిగా ఉంటుంది:

#myDIV {
  color: blue; /* నీలి టెక్స్ట్ రంగు */
  border: 10px solid currentcolor; /* నీలి కిందివర్ణ స్కాల్ */
}

亲自试一试