Named Colors, HEX, RGB and HSL

Named Colors, HEX, RGB and HSL

CSSలో text మరియు backgroundలకు రంగులు ఇవ్వడానికి వివిధ color value formats ఉపయోగిస్తాము. ఈ lessonలో Named Colors, HEX, RGB, మరియు HSL formats నేర్చుకుంటాము.

1. Named Colors

CSSలో కొన్ని రంగులకు నేరుగా పేర్లు ఉన్నాయి. ఉదాహరణకు red, blue, green, navy, orange. ఇవి గుర్తుంచుకోవడం సులభం, కానీ అందుబాటులో ఉన్న రంగుల ఎంపిక పరిమితంగా ఉంటుంది.

2. HEX Colors

HEX అంటే hexadecimal color value. ఇది #RRGGBB రూపంలో ఉంటుంది. మొదటి రెండు అంకెలు Red, తరువాతి రెండు Green, చివరి రెండు Blue రంగు తీవ్రతను సూచిస్తాయి. ప్రతి జత 00 నుండి FF వరకు ఉంటుంది. ఉదాహరణకు #ff0000 ఎరుపు రంగు, #0000ff నీలం రంగు.

కొన్ని HEX valuesను short formలో కూడా రాయవచ్చు. ఉదాహరణకు #fff అనేది #ffffffకు సమానం.

3. RGB Colors

RGB అంటే Red, Green, Blue. దీని syntax rgb(red, green, blue). ప్రతి value సాధారణంగా 0 నుండి 255 వరకు ఉంటుంది. ఉదాహరణకు rgb(255, 0, 0) ఎరుపు రంగును సూచిస్తుంది.

4. HSL Colors

HSL అంటే Hue, Saturation, Lightness. Syntax hsl(hue, saturation%, lightness%).

• Hue: రంగు రకం. ఇది 0 నుండి 360 degrees వరకు ఉంటుంది.
• Saturation: రంగు ఎంత బలంగా లేదా పల్చగా కనిపించాలో సూచిస్తుంది.
• Lightness: రంగు ఎంత light లేదా darkగా ఉండాలో సూచిస్తుంది.

ఉదాహరణకు hsl(120, 60%, 45%) ఆకుపచ్చ రంగుకు దగ్గరగా కనిపిస్తుంది.

Color valuesను ఎక్కడ ఉపయోగించాలి?

ఈ formatsను color, background-color, border-color వంటి color-related propertiesలో ఉపయోగించవచ్చు. Browser ఇచ్చిన valueను అర్థం చేసుకుని HTML elementపై ఆ రంగును చూపిస్తుంది.

Color format ఎప్పుడు ఉపయోగించాలి?

• సులభమైన రంగులకు Named Colors ఉపయోగించండి.
• ఖచ్చితమైన, సాధారణ రంగుల కోసం HEX ఉపయోగించండి.
• Red, Green, Blue channelsను నియంత్రించాలంటే RGB ఉపయోగించండి.
• రంగు tone, intensity, brightnessను సులభంగా మార్చాలంటే HSL ఉపయోగించండి.

Simple Explanation

ఒక CSS color value అనేది browserకు ఏ రంగు చూపించాలో చెప్పే value. color: navy;లో navy ఒక Named Color. color: #1e40af;లో #1e40af HEX value. color: rgb(30, 64, 175);లో రంగు మూడు RGB numbersతో తయారవుతుంది. color: hsl(220, 71%, 40%);లో Hue, Saturation, Lightness ద్వారా రంగు నిర్ణయించబడుతుంది.

ఈ formatsలో ఏదైనా formatను సరైన CSS property valueగా రాస్తే browser అదే రంగును elementకు వర్తింపజేస్తుంది.

Real-Life Example

ఒక పాఠశాల notice boardను ఊహించండి. సాధారణ warningకు red వంటి Named Color ఉపయోగించవచ్చు. సంస్థకు నిర్ణయించిన exact brand color ఉంటే HEX ఉపయోగించవచ్చు. Red, Green, Blue valuesను విడిగా నియంత్రించాలంటే RGB ఉపయోగించవచ్చు. ఒకే రంగును light, dark లేదా ఎక్కువ saturationతో చూపించాలంటే HSL ఉపయోగించడం సౌకర్యంగా ఉంటుంది.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Color Formats</title>
  <style>
    body {
      background-color: #f4f7fb;
      font-family: Arial, sans-serif;
      padding: 24px;
    }

    h1 {
      color: navy;
    }

    .hex-text {
      color: #b42318;
    }

    .rgb-box {
      background-color: rgb(220, 245, 232);
      color: rgb(20, 90, 55);
      padding: 16px;
    }

    .hsl-box {
      background-color: hsl(45, 90%, 88%);
      color: hsl(35, 80%, 25%);
      padding: 16px;
      margin-top: 12px;
    }
  </style>
</head>
<body>
  <h1>Color Formats in CSS</h1>
  <p class="hex-text">This text uses a HEX color.</p>
  <div class="rgb-box">This box uses RGB colors.</div>
  <div class="hsl-box">This box uses HSL colors.</div>
</body>
</html>

Browserలో light background ఉన్న page కనిపిస్తుంది. Heading navy రంగులో ఉంటుంది. మొదటి paragraph ఎరుపు-గోధుమ HEX రంగులో ఉంటుంది. మొదటి box లేత ఆకుపచ్చ background మరియు ముదురు ఆకుపచ్చ textతో ఉంటుంది. రెండవ box లేత పసుపు background మరియు ముదురు గోధుమ textతో ఉంటుంది.

Line-by-Line Explanation

Try It

Try this CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try CSS Colors</title>
  <style>
    body {
      background-color: #f4f7fb;
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    h1 {
      color: navy;
    }

    p {
      color: #b42318;
    }

    .notice {
      background-color: rgb(220, 245, 232);
      color: hsl(150, 64%, 22%);
      padding: 15px;
    }
  </style>
</head>
<body>
  <h1>Try Different CSS Colors</h1>
  <p>Change this paragraph color.</p>
  <div class="notice">Change the colors of this notice.</div>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• Named Colorsలో రంగు పేరును నేరుగా రాస్తారు, ఉదాహరణకు navy.
• HEX format #RRGGBB రూపంలో ఉంటుంది.
• RGB formatలో Red, Green, Blue values 0 నుండి 255 వరకు ఉంటాయి.
• HSL formatలో Hue, Saturation, Lightness ఉంటాయి.
• color మరియు background-color propertiesలో ఈ formatsను ఉపయోగించవచ్చు.
• HEX, RGB, HSL valuesలో spelling, symbols, commas మరియు percentages సరైనవిగా ఉండాలి.