इसे छोड़कर कंटेंट पर जाएं
Theme

रंग

हमारे रंग पैलेट की पूरी श्रृंखला ग्राफिक्स और चित्रणों में उपयोग की जाती है, जो अनूठे और आधुनिक संयोजनों के साथ-साथ मोनोक्रोमेटिक कंट्रास्ट को भी explore करती है। इसका उपयोग किसी विशिष्ट विषय या जोर देने योग्य बिंदु को उजागर करने के लिए किया जा सकता है।

F5 पैलेट में सात प्राथमिक ब्रांड रंगों के साथ काले और सफेद रंग भी शामिल हैं, जिनमें से प्रत्येक के चार टिंट/शेड वेरिएंट हैं, जो कुल 45 रंग बनाते हैं। यह पृष्ठ थीम विकास के दौरान ब्रांड रंगों को Starlight CSS कस्टम प्रॉपर्टीज़ में मैप करने का एकमात्र आधिकारिक स्रोत है।

प्राथमिक रंग

Section titled “प्राथमिक रंग”
#e4002b
F5 Red—f5-red
#f29a36
Tangerine—f5-tangerine
#0e41aa
River—f5-river
#ab2782
Raspberry—f5-raspberry
#009639
Jade—f5-jade
#62228b
Eggplant—f5-eggplant
#0072b0
Bay—f5-bay
#ffffff
White—f5-white
#000000
Black—f5-black
नामHEXRGBCMYKLESSPMSCSS वेरिएबल
F5 Red#e4002b228, 0, 430, 100, 81, 11monza185--f5-red
Tangerine#f29a36242, 154, 540, 36, 78, 5carrot-orange1375--f5-tangerine
River#0e41aa14, 65, 17092, 62, 0, 33tory-blue293--f5-river
Raspberry#ab2782171, 39, 1300, 77, 24, 33—241--f5-raspberry
Jade#0096390, 150, 57100, 0, 62, 41fun-green355--f5-jade
Eggplant#62228b98, 34, 13929, 76, 0, 45honey-flower2617--f5-eggplant
Bay#0072b00, 114, 176100, 35, 0, 31—7461--f5-bay
White#ffffff255, 255, 2550, 0, 0, 0alabaster—--f5-white
Black#0000000, 0, 060, 50, 40, 100blackBlack--f5-black

LESS नामों पर नोट: Brand Center में Raspberry को tory-blue और Bay को honey-flower के रूप में दर्शाया गया है — ये क्रमशः River और Eggplant प्रविष्टियों से copy-paste त्रुटियाँ हैं। गलत मानों को प्रसारित होने से बचाने के लिए इन्हें ऊपर — के रूप में चिह्नित किया गया है।

द्वितीयक रंग (टिंट और शेड)

Section titled “द्वितीयक रंग (टिंट और शेड)”

प्रत्येक प्राथमिक रंग के चार वेरिएंट हैं जो सबसे हल्के (Level 1) से सबसे गहरे (Level 4) के क्रम में हैं।

Brand Center द्वितीयक रंगों को LESS वेरिएबल नाम प्रदान करता है। Cloud Red और Tangerine वेरिएंट के अद्वितीय, सार्थक नाम हैं। अन्य सभी रंग समूह समान placeholder नाम (wewak, froly, carmine, venetian-red) प्रदर्शित करते हैं — ये ब्रांड प्लेटफ़ॉर्म के टेम्प्लेट डिफ़ॉल्ट हैं और पूर्णता के लिए नीचे शामिल किए गए हैं, लेकिन इन्हें विहित पहचानकर्ता के रूप में नहीं माना जाना चाहिए।

F5 Red

Section titled “F5 Red”
#e4002b
F5 Red (base)—f5-red
#f7b2bf
Level 1—f5-red-1
#f06680
Level 2—f5-red-2
#a70020
Level 3—f5-red-3
#720016
Level 4—f5-red-4
स्तरHEXRGBCMYKLESS
1 (सबसे हल्का)#f7b2bf247, 178, 1910, 28, 23, 3wewak
2#f06680240, 102, 1280, 57, 47, 6froly
3#a70020167, 0, 320, 100, 81, 35carmine
4 (सबसे गहरा)#720016114, 0, 220, 100, 81, 55venetian-red

Tangerine

Section titled “Tangerine”
#f29a36
Tangerine (base)—f5-tangerine
#ffe4c4
Level 1—f5-tangerine-1
#ffbd61
Level 2—f5-tangerine-2
#a35700
Level 3—f5-tangerine-3
#7a4100
Level 4—f5-tangerine-4
स्तरHEXRGBCMYKLESS
1 (सबसे हल्का)#ffe4c4255, 228, 1960, 11, 23, 0tequila
2#ffbd61255, 189, 970, 26, 62, 0koromiko
3#a35700163, 87, 00, 47, 100, 36chelsea-gem
4 (सबसे गहरा)#7a4100122, 65, 00, 47, 100, 52cinnamon

River

Section titled “River”
#0e41aa
River (base)—f5-river
#b7c6e5
Level 1—f5-river-1
#6e8dcc
Level 2—f5-river-2
#0b3180
Level 3—f5-river-3
#072155
Level 4—f5-river-4
स्तरHEXRGBCMYKLESS
1 (सबसे हल्का)#b7c6e5183, 198, 2290, 28, 23, 3wewak
2#6e8dcc110, 141, 2040, 58, 47, 6froly
3#0b318011, 49, 1280, 100, 81, 35carmine
4 (सबसे गहरा)#0721557, 33, 850, 100, 81, 55venetian-red

Raspberry

Section titled “Raspberry”
#ab2782
Raspberry (base)—f5-raspberry
#e6bed9
Level 1—f5-raspberry-1
#cd7db4
Level 2—f5-raspberry-2
#801d62
Level 3—f5-raspberry-3
#561441
Level 4—f5-raspberry-4
स्तरHEXRGBCMYKLESS
1 (सबसे हल्का)#e6bed9230, 190, 2170, 28, 23, 3wewak
2#cd7db4205, 125, 1800, 58, 47, 6froly
3#801d62128, 29, 980, 100, 81, 35carmine
4 (सबसे गहरा)#56144186, 20, 650, 100, 81, 55venetian-red

Jade

Section titled “Jade”
#009639
Jade (base)—f5-jade
#b2dfc4
Level 1—f5-jade-1
#66c088
Level 2—f5-jade-2
#00712b
Level 3—f5-jade-3
#004b1d
Level 4—f5-jade-4
स्तरHEXRGBCMYKLESS
1 (सबसे हल्का)#b2dfc4178, 223, 1960, 28, 23, 3wewak
2#66c088102, 192, 1360, 58, 47, 6froly
3#00712b0, 113, 430, 100, 81, 35carmine
4 (सबसे गहरा)#004b1d0, 75, 290, 100, 81, 55venetian-red

Eggplant

Section titled “Eggplant”
#62228b
Eggplant (base)—f5-eggplant
#cdabe3
Level 1—f5-eggplant-1
#9c59c9
Level 2—f5-eggplant-2
#822cb8
Level 3—f5-eggplant-3
#41175d
Level 4—f5-eggplant-4
स्तरHEXRGBCMYKLESS
1 (सबसे हल्का)#cdabe3205, 171, 2270, 28, 23, 3wewak
2#9c59c9156, 89, 2010, 58, 47, 6froly
3#822cb8130, 44, 1840, 100, 81, 35carmine
4 (सबसे गहरा)#41175d65, 23, 930, 100, 81, 55venetian-red

Bay

Section titled “Bay”
#0072b0
Bay (base)—f5-bay
#b2d7eb
Level 1—f5-bay-1
#66afd7
Level 2—f5-bay-2
#005c8d
Level 3—f5-bay-3
#003d5f
Level 4—f5-bay-4
स्तरHEXRGBCMYKLESS
1 (सबसे हल्का)#b2d7eb178, 215, 2350, 28, 23, 3wewak
2#66afd7102, 175, 2150, 58, 47, 6froly
3#005c8d0, 92, 1410, 100, 81, 35carmine
4 (सबसे गहरा)#003d5f0, 61, 950, 100, 81, 55venetian-red

White (न्यूट्रल)

Section titled “White (न्यूट्रल)”
#ffffff
White (base)—f5-white
#faf9f7
Level 1—f5-white-1
#f5f5f5
Level 2—f5-white-2
#e6e6e6
Level 3—f5-white-3
#cccccc
Level 4—f5-white-4
स्तरHEXRGBCMYKLESS
1 (सबसे हल्का)#faf9f7250, 249, 2470, 28, 23, 3wewak
2#f5f5f5245, 245, 2450, 58, 47, 6froly
3#e6e6e6230, 230, 2300, 100, 81, 35carmine
4 (सबसे गहरा)#cccccc204, 204, 2040, 100, 81, 55venetian-red

Black (ग्रे)

Section titled “Black (ग्रे)”
#000000
Black (base)—f5-black
#999999
Level 1—f5-black-1
#666666
Level 2—f5-black-2
#343434
Level 3—f5-black-3
#222222
Level 4—f5-black-4
स्तरHEXRGBCMYKLESS
1 (सबसे हल्का)#999999153, 153, 1530, 28, 23, 3wewak
2#666666102, 102, 1020, 58, 47, 6froly
3#34343452, 52, 520, 100, 81, 35carmine
4 (सबसे गहरा)#22222234, 34, 340, 100, 81, 55venetian-red

Starlight CSS कस्टम प्रॉपर्टीज़ में मैपिंग

Section titled “Starlight CSS कस्टम प्रॉपर्टीज़ में मैपिंग”

Starlight थीमिंग के लिए --sl-color-* वेरिएबल्स उजागर करता है। नीचे F5 पैलेट से Starlight के semantic color slots में मैपिंग दी गई है, जो styles/custom.css में कार्यान्वित की गई है।

Starlight थीमिंग कैसे काम करती है: Starlight में, डार्क मोड bare :root डिफ़ॉल्ट है — कोई data-theme="dark" सिलेक्टर नहीं है। लाइट मोड :root[data-theme='light'] का उपयोग करता है। gray scale वेरिएबल्स semantic हैं, brightness-ordered नहीं: gray-1 हमेशा “primary text” होता है और gray-6/gray-7 हमेशा “subtle backgrounds” होते हैं, चाहे मोड कोई भी हो। उनके वास्तविक brightness मान मोड के बीच swap हो जाते हैं। इसी प्रकार, accent-high हमेशा high-visibility accent text color होता है और accent-low हमेशा subtle accent background होता है — उनकी brightness मोड के बीच उलट जाती है।

/* Dark mode — Starlight default (:root) */
:root {
  --sl-color-white: #ffffff;      /* Heading text (brightest) */
  --sl-color-gray-1: #f5f5f5;    /* Primary text — White Level 2 */
  --sl-color-gray-2: #cccccc;    /* Body text — White Level 4 */
  --sl-color-gray-3: #999999;    /* Dim/muted text — Black Level 1 */
  --sl-color-gray-4: #666666;    /* Borders — Black Level 2 */
  --sl-color-gray-5: #343434;    /* Inline code bg — Black Level 3 */
  --sl-color-gray-6: #222222;    /* Sidebar bg — Black Level 4 */
  --sl-color-black: #000000;     /* Page background */
  --sl-color-accent-low: #720016;   /* Subtle accent bg — F5 Red Level 4 */
  --sl-color-accent: #f06680;       /* Links, active — F5 Red Level 2 */
  --sl-color-accent-high: #f7b2bf;  /* Accent text — F5 Red Level 1 */
}


/* Light mode — inverted gray scale and accent brightness */
:root[data-theme='light'] {
  --sl-color-white: #222222;      /* Heading text (darkest) — Black Level 4 */
  --sl-color-gray-1: #222222;    /* Primary text — Black Level 4 */
  --sl-color-gray-2: #343434;    /* Body text — Black Level 3 */
  --sl-color-gray-3: #666666;    /* Dim text — Black Level 2 */
  --sl-color-gray-4: #999999;    /* Borders — Black Level 1 */
  --sl-color-gray-5: #cccccc;    /* Light borders — White Level 4 */
  --sl-color-gray-6: #f5f5f5;    /* Sidebar bg — White Level 2 */
  --sl-color-gray-7: #faf9f7;    /* Nav bg — White Level 1 */
  --sl-color-black: #ffffff;     /* Page background */
  --sl-color-accent-low: #f7b2bf;   /* Subtle accent bg — F5 Red Level 1 (inverted) */
  --sl-color-accent: #e4002b;       /* Links, active — F5 Red */
  --sl-color-accent-high: #720016;  /* Accent text — F5 Red Level 4 (inverted) */
}

विज़ुअल टोकन पूर्वावलोकन

Section titled “विज़ुअल टोकन पूर्वावलोकन”

इन semantic tokens को डार्क और लाइट मोड के बीच बदलते देखने के लिए थीम स्विचर टॉगल करें।

Gray Scale टोकन

Section titled “Gray Scale टोकन”
white
Heading text—sl-color-white
gray-1
Primary text—sl-color-gray-1
gray-2
Body text—sl-color-gray-2
gray-3
Dim text—sl-color-gray-3
gray-4
Borders—sl-color-gray-4
gray-5
Inline code bg—sl-color-gray-5
gray-6
Sidebar bg—sl-color-gray-6
black
Page background—sl-color-black

Accent टोकन

Section titled “Accent टोकन”
accent-low
Subtle accent bg—sl-color-accent-low
accent
Links, active—sl-color-accent
accent-high
Accent text—sl-color-accent-high

Badge टोकन

Section titled “Badge टोकन”
default
Default badge—sl-color-bg-badge-default
note
Note badge—sl-color-bg-badge-note
danger
Danger badge—sl-color-bg-badge-danger
success
Success badge—sl-color-bg-badge-success
caution
Caution badge—sl-color-bg-badge-caution
tip
Tip badge—sl-color-bg-badge-tip

कंट्रास्ट सत्यापन (WCAG AA)

Section titled “कंट्रास्ट सत्यापन (WCAG AA)”

डार्क मोड (#000000 पृष्ठ पृष्ठभूमि पर टेक्स्ट):

  • Body text #cccccc → 16.3:1 (AAA)
  • Dim text #999999 → 10:1 (AAA)
  • Accent link #f06680 → 5.6:1 (AA)

लाइट मोड (#ffffff पृष्ठ पृष्ठभूमि पर टेक्स्ट):

  • Body text #343434 → 11.6:1 (AAA)
  • Dim text #666666 → 5.7:1 (AA)
  • Accent link #e4002b → 4.6:1 (AA)

Semantic रंग सुझाव

Section titled “Semantic रंग सुझाव”
Starlight वेरिएबलF5 रंगउपयोग का मामला
--sl-color-accentF5 Red #e4002bलिंक, बटन, सक्रिय अवस्थाएं
--sl-color-text-accentF5 Red Level 2 #f06680डार्क मोड में hover अवस्थाएं
--sl-color-bg-accentF5 Red Level 4 #720016Accent पृष्ठभूमि
Custom: --sl-color-infoBay #0072b0सूचनात्मक callouts
Custom: --sl-color-successJade #009639सफलता संदेश
Custom: --sl-color-warningTangerine #f29a36चेतावनी callouts
Custom: --sl-color-dangerF5 Red #e4002bत्रुटि/खतरा callouts

रंग कंट्रास्ट

Section titled “रंग कंट्रास्ट”

यह सुनिश्चित करने के लिए कि हर कोई हमारे संचार को एक्सेस कर सके और समझ सके, पृष्ठभूमि और टेक्स्ट रंग संयोजनों का उपयोग करें जो एक्सेसिबिलिटी मानकों को पूरा करते हों। बड़े टेक्स्ट के लिए न्यूनतम 3:1 और सामान्य टेक्स्ट के लिए 4.5:1 कंट्रास्ट अनुपात वाले रंग युग्मों का चयन करें।

सभी रंग युग्मों को WCAG AA कंट्रास्ट आवश्यकताओं को पूरा करना चाहिए:

  • सामान्य टेक्स्ट (< 18pt / 14pt bold): न्यूनतम 4.5:1 कंट्रास्ट अनुपात
  • बड़ा टेक्स्ट (≥ 18pt / 14pt bold): न्यूनतम 3:1 कंट्रास्ट अनुपात
  • UI घटक और ग्राफिकल ऑब्जेक्ट: न्यूनतम 3:1 कंट्रास्ट अनुपात

अनुशंसित सुरक्षित युग्म

Section titled “अनुशंसित सुरक्षित युग्म”
अग्रभूमिपृष्ठभूमिकंट्रास्ट अनुपातउत्तीर्ण
White #ffffffF5 Red #e4002b4.6:1AA
White #ffffffRiver #0e41aa6.4:1AA / AAA
White #ffffffBay #0072b04.6:1AA
White #ffffffJade #0096394.2:1AA (बड़ा टेक्स्ट)
White #ffffffEggplant #62228b6.5:1AA / AAA
White #ffffffRaspberry #ab27824.7:1AA
Black #000000Tangerine #f29a367.8:1AA / AAA
Black #000000F5 Red Level 1 #f7b2bf10.1:1AA / AAA
Black #222222White Level 1 #faf9f715.8:1AA / AAA

टिप: नए रंग संयोजन बनाते समय हमेशा WebAIM Contrast Checker जैसे टूल से कंट्रास्ट अनुपात सत्यापित करें।

उपयोग दिशानिर्देश

Section titled “उपयोग दिशानिर्देश”
रंग परिवारभूमिकाकब उपयोग करें
F5 Redब्रांड पहचान, प्राथमिक CTAHero सेक्शन, प्राथमिक बटन, ब्रांड मार्क, त्रुटि अवस्थाएं
Riverसूचनात्मक, विश्वासनेविगेशन लिंक, सूचनात्मक बैनर, डेटा विज़ुअलाइज़ेशन
Bayसूचनात्मक, द्वितीयकद्वितीयक लिंक, info callouts, कोड ब्लॉक accent
Jadeसफलता, सकारात्मकसफलता संदेश, पुष्टि अवस्थाएं, प्रगति संकेतक
Tangerineचेतावनी, ध्यानचेतावनी callouts, ध्यान-आवश्यक अवस्थाएं, highlight मार्कर
RaspberryAccent, सजावटीTags, badges, द्वितीयक accent, श्रेणी मार्कर
EggplantAccent, प्रीमियमफीचर हाइलाइट, प्रीमियम संकेतक, सजावटी accent
White / न्यूट्रलपृष्ठभूमि, सतहपृष्ठ पृष्ठभूमि, कार्ड सतह, विभाजक, सूक्ष्म बॉर्डर
Black / ग्रेटेक्स्ट, संरचनाBody text, शीर्षक, बॉर्डर, शैडो परतें

थीम जाँच

Section titled “थीम जाँच”
  • .swatch बॉर्डर --sl-color-gray-5 का उपयोग करता है
  • .swatch-label पृष्ठभूमि --sl-color-gray-6 का उपयोग करती है
  • सभी --f5-* swatches अपना वास्तविक रंग प्रदर्शित करते हैं (CSS कस्टम प्रॉपर्टीज़ custom.css से resolve होती हैं)
  • रंग swatches लाइट और डार्क दोनों मोड में दृश्यमान हैं
  • थीम टॉगल करने पर Badge टोकन swatches अपडेट होते हैं