Colours: names, hex and rgb रंग: नाम, hex और rgb

1. Hex codes

Colour names like green are easy, but there are only about 140. For an exact colour, use a hex code: # followed by six digits for red, green and blue (00 = none, FF = full).

• #FF9933 — India saffron
• #FFFFFF — white
• #138808 — India green
• #000080 — navy blue (the Ashoka Chakra)

Shops and brands always use exact colours, so their logo looks the same everywhere.

                .badge {
  background-color: #000080;
  color: #FFFFFF;
}
              

Challenge: Tiranga with exact colours

Give each stripe its exact hex colour with background-color:

• .saffron → #FF9933
• .white → #FFFFFF
• .green → #138808

2. rgb() colours and a hover effect

You can also write colours as rgb(red, green, blue) with numbers from 0 to 255. rgb(37, 211, 102) is a bright green, like a chat app’s button.

• Keep contrast high: white text on a dark or strong background is easy to read
• :hover styles an element while the mouse is over it: .btn:hover { … }
• padding adds space inside the button (more in the box model lesson)

                .btn {
  background-color: rgb(30, 64, 175);
  color: white;
  padding: 10px 16px;
}
.btn:hover {
  background-color: rgb(23, 37, 84);
}
              

Challenge: Order button for Meera’s Mithai

Style the .btn link:

• a background colour written with rgb(...)
• white text
• some padding
• a .btn:hover rule that changes something (for example a darker background)