HTML Colors

Standard Color Names

ब्राउज़र 140 official color names को natively पहचानते हैं। इससे आप complex coordinate codes खोजे बिना सीधे अपनी style declarations में blue, red, या darkslategray जैसे simple color styles apply कर सकते हैं।

उदाहरण: Standard Color Names

<p style="color: darkslategray;">Named color text</p>

Hexadecimal Colors (HEX)

Hexadecimal values web design का industry standard हैं। वे hash symbol (#RRGGBB) से पहले एक six-digit code का उपयोग करके color coordinates को represent करते हैं।

ये letters और numbers 00 से FF तक के values को represent करते हैं, जो क्रमशः red, green, और blue की intensity दर्शाते हैं।

उदाहरण: Hexadecimal Colors (HEX)

<p style="color: #FF0000;">Full hex code</p>
<p style="color: #F00;">Shorthand hex code</p>

RGB और RGBA Colors

RGB values 0 से 255 के scale पर Red, Green, और Blue की intensity का उपयोग करके color blends define करती हैं। RGBA में upgrade करके, आपको एक Alpha channel access मिलता है जो transparency को 0.0 (पूरी तरह invisible) से 1.0 (पूरी तरह opaque) तक control करता है।

उदाहरण: RGB and RGBA Colors

<p style="color: rgb(255,0,0);">RGB red</p>
<p style="color: rgba(255,0,0,0.5);">Semi-transparent RGBA red</p>

HSL और HSLA Colors

HSL का मतलब है Hue, Saturation, और Lightness। Hue 360-degree color wheel पर base color को represent करता है, Saturation 0% से 100% तक gray की intensity है, और Lightness black या white saturation को represent करता है।

Alpha channel (HSLA) जोड़ने से adjustable opacity मिलती है।

उदाहरण: HSL and HSLA Colors

<p style="color: hsl(0, 100%, 50%);">HSL red</p>
<p style="color: hsla(0, 100%, 50%, 0.5);">Semi-transparent HSLA red</p>

Color Contrast और Web Accessibility

websites design करना सिर्फ अपनी पसंदीदा aesthetics चुनने के बारे में नहीं है। Web Content Accessibility Guidelines (WCAG) की मांग है कि आपके text colors में background fill के मुकाबले पर्याप्त contrast हो।

यह सुनिश्चित करता है कि visual impairment वाले users या तेज़ धूप में screens पढ़ने वाले लोग आपका content पढ़ सकें।

उदाहरण: Color Contrast and Web Accessibility

<p style="color: #000000; background-color: #FFFFFF;">
  High contrast text for accessibility
</p>

Colors के लिए CSS Custom Properties

CSS custom properties, जिन्हें CSS variables भी कहा जाता है, आपको --primary-color जैसे नाम के साथ एक color को एक बार define करने और उसे अपने पूरे stylesheet में कहीं भी reuse करने देते हैं।

अगर brand color कभी बदलता है, तो आप हर rule में ढूंढने के बजाय सिर्फ एक जगह उसे update करते हैं।

उदाहरण: CSS Custom Properties for Colors

<style>
  :root {
    --primary-color: #0000ff;
  }
  p {
    color: var(--primary-color);
  }
</style>
<p>Styled with a custom property</p>