रंग शेड्स जनरेटर

टिंट और शेड्स

टिंट किसी रंग को सफ़ेद के साथ मिलाकर बनाए जाते हैं, जो उसे धीरे-धीरे हल्का करते हैं। शेड्स रंग को काले के साथ मिलाकर बनाए जाते हैं, जो उसे गहरा करते हैं।

अक्सर पूछे जाने वाले प्रश्न

मैं इन शेड्स का उपयोग कैसे करूँ?

पृष्ठभूमि, होवर स्थितियों और बॉर्डर के लिए हल्के टिंट्स का उपयोग करें। टेक्स्ट, सक्रिय स्थितियों और एक्सेंट के लिए गहरे शेड्स का उपयोग करें। «सभी को CSS वैरिएबल के रूप में कॉपी करें» पर क्लिक करें ताकि उपयोग के लिए तैयार CSS स्निपेट मिल जाए।

क्या मैं रंगों को व्यक्तिगत रूप से कॉपी कर सकता हूँ?

हाँ! क्लिपबोर्ड पर उसका HEX मान कॉपी करने के लिए एक स्वच पर क्लिक करें।

Tint, Shade, और Tone: औपचारिक Definitions

तीन terms loosely use होते हैं; classical colour theory उन्हें precisely distinguish करती है:

• Tint = base colour + white। Lighter और paler। Pink, red का tint है; sky blue, blue का tint है।
• Shade = base colour + black। Darker और deeper। Maroon, red का shade है; navy, blue का shade है।
• Tone = base colour + grey। Less saturated, more muted। Brightness में अधिक बदलाव किए बिना nuance add करता है।

यह generator tints (base से lighter) और shades (darker) produce करता है। Tones (white या black की बजाय grey add करना) muted, sophisticated palettes के लिए useful हैं (1970s interior design colour systems सोचें) लेकिन typical UI work के लिए rarely needed।

Modern Design Systems Numeric Scales क्यों Use करते हैं

Tailwind CSS ने per colour 50-100-200-…-900-950 numeric scale popularise किया, जिसमें «500» stop conventionally base के रूप में treated होता है। Material Design एक parallel 50-100-…-900 system use करता है; Bootstrap 5, 100-…-900 use करता है; IBM Carbon, 10 stops per swatch use करता है। Shared idea: single brand colour rarely enough होती है, UIs को hover states, backgrounds, borders, focus rings, disabled states, badges, और dark-mode equivalents के लिए consistent variants चाहिए। Predictable numeric scale आपको वे variants इस तरह देता है जो components में portable हो, brand evolve होने पर refactorable हो, और codebase पढ़ने वाले किसी भी person को discoverable हो।

Different Algorithms Scale कैसे Compute करते हैं

Tint/shade scale compute करने के तीन common ways हैं, different visual results के साथ:

• RGB mixing with white / black। Art-theory definition। Faithful tints और shades produce करता है लेकिन perceptual uniformity account नहीं करता, yellows quickly desaturate होते हैं, blues rich रहते हैं।
• HSL lightness adjustment। Fast और easy: tints के लिए L channel ऊपर nudge करें, shades के लिए नीचे। Older tools में सबसे common approach। Downside है HSL की lightness perceptually uniform नहीं है, 50% L पर yellow, 50% L पर blue से बहुत brighter दिखता है, इसलिए HSL stepping से बना palette hues में uneven दिखता है।
• OKLCH या CIELAB lightness scaling। Modern, perceptually-uniform approach। OKLCH में L इस तरह calibrated है कि «200 → 300 → 400» hue की परवाह किए बिना same step जैसा feel होता है। Tailwind v4 (January 2025 में released) ने exactly इसी कारण अपने सभी default palettes OKLCH के around rebuild किए।

यदि आपका scale कभी «flat» दिखे (yellow steps जो wash out हो जाएं, blue steps जो सभी same dark blue की तरह read हों) तो यह लगभग हमेशा इसलिए होता है क्योंकि underlying maths OKLCH-based की बजाय HSL-based है। Modern CSS (CSS Color Module Level 4) oklch(), lab(), और color-mix(in oklch, …) directly expose करता है, जो किसी भी external tool के बिना perceptually-uniform scales को one-liner बनाता है।

उपयोग के मामले

• Single brand colour से design system bootstrap करना। Brand HEX choose करें, scale generate करें, CSS variables copy करें, ship करें।
• Tailwind colors map customise करना। Default brand colour को अपने 11 stops के scale से replace करें।
• UI hover और focus states। Common pattern: button background 500 use करता है, hover 600 use करता है, active 700 use करता है, focus ring low opacity पर 400 use करता है।
• Backgrounds और elevation। Card backgrounds 50 use करते हैं; subtle borders 200 use करते हैं; disabled text 400 use करता है।
• Dark-mode equivalents। कई systems light one को mathematically invert करने की बजाय parallel dark-mode scale generate करते हैं, white पर balanced दिखने वाले colours हमेशा near-black पर balanced नहीं दिखते।
• Mockup variations। तीन brand candidates को quickly compare करें, हर एक के लिए scale generate करके उन्हें same UI mockup में drop करके।
• Print swatch books। Print palette को pre-flight करें यह देखने के लिए कि adjacent होने पर steps actually कितने subtle appear होते हैं।

Accessibility और Contrast

Generated scale उतना ही useful है जितने text-on-background pairs वह produce करता है। WCAG 2.1 minimums ध्यान में रखें:

• Normal body text: अपने background के against 4.5:1 (Level AA)।
• Large या bold text (18 pt / 14 pt bold और ऊपर): 3:1 (Level AA)।
• UI components और graphical objects: 3:1 (Level AA, SC 1.4.11)।

अधिकांश well-built scales में reliable rules: 50 + 900 pair body text के लिए हमेशा pass करता है, 100 + 800 pair लगभग हमेशा। 400 + 500 pair लगभग कभी नहीं। जो specific pairs आप use करने का इरादा रखते हैं उन्हें test करें, रंग विपरीतता चेकर tool किसी भी दो HEX values के लिए WCAG ratios compute करता है।

Output को Codebase में Wiring करना

Generated scale consume करने के तीन common ways:

/* 1. Plain CSS variables */
:root {
  --brand-50: #f0f9fc;
  --brand-100: #d9eef6;
  --brand-500: #2b7190;
  --brand-900: #0d2935;
}

.btn { background: var(--brand-500); }
.btn:hover { background: var(--brand-600); }

// 2. Tailwind config (tailwind.config.js)
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#f0f9fc',
          100: '#d9eef6',
          500: '#2b7190',
          900: '#0d2935',
        },
      },
    },
  },
};

// then in markup
<button class="bg-brand-500 hover:bg-brand-600">Click</button>

// 3. Sass / SCSS map
$brand: (
  50:  #f0f9fc,
  500: #2b7190,
  900: #0d2935,
);

.btn { background: map-get($brand, 500); }

सामान्य गलतियाँ

1. बहुत अधिक stops generate करना। Tailwind का 11 sweet spot है। 20 stops overkill है, अधिकांश visually indistinguishable हैं, और आप उन्हें कभी use नहीं करेंगे।
2. Yellow / orange / fluorescent colours के लिए HSL-based scales use करना। Light stops पर ये wash out हो जाते हैं और cleanly darken नहीं होते। यदि आपकी brand colour «tricky» hue range में हो तो OKLCH-based generation का उपयोग करें।
3. Text contrast check किए बिना scale को final मानना। Beautiful colour relationships कभी-कभी white text को 400 stop के साथ pair करते हैं और WCAG 4.5:1 fail करते हैं। हर pairing test करें जिसे आप actually use करेंगे।
4. Dark-mode palette बनाने के लिए light palette invert करना। Mathematically tempting, visually wrong, white पर balanced feel करने वाले colours near-black पर garish feel करते हैं। Parallel dark-mode scale generate या hand-tune करें।
5. Base colour को «500» के रूप में use करना जब वह perceptually किसी अन्य stop से बेहतर match करती हो। यदि आपकी brand colour genuinely dark है, तो यह उसके scale का 700 हो सकती है; convention नहीं, perceptual relationship dictate करे कि वह कौन सा slot occupy करती है।
6. 50 stop भूलना। Lightest tint backgrounds और subtle highlights के लिए सबसे useful है। अपना scale 100 पर truncate न करें।

अधिक Frequently Asked Questions

मेरा Scale Flat क्यों दिखता है, सभी Stops Similar क्यों Feel होते हैं?

दो common causes: (1) बहुत narrow range में बहुत अधिक steps, fewer steps try करें, especially यदि colour already mid-luminance हो; (2) ऐसे hue पर HSL-based scaling जहाँ HSL poorly calibrated हो (yellows, oranges, neon colours)। OKLCH-based palette generator का उपयोग करना usually दोनों fix करता है।

Light-mode Scale से Dark-mode Palette कैसे Generate करूं?

Simply invert न करें। Naive invert (light और dark stops flip करना) ऐसे dark-mode palettes produce करता है जो garish feel होते हैं या wash out हो जाते हैं। Material 3, Radix Colors, और Tailwind के dark variants में convention है dark background के लिए tuned parallel scale generate करना, usually slightly reduced saturation और shifted hue के साथ, यह compensate करने के लिए कि colours dark surfaces के against कैसे perceive होते हैं। अधिकांश large design systems दोनों palettes side by side publish करते हैं।

क्या मैं Generated Colours को Commercially Use कर सकता हूं?

हां। Colour values copyrightable नहीं हैं; HEX codes pixels के बारे में facts हैं। Generated palette को कहीं भी use करें, open-source projects, commercial sites, brand systems, print, packaging।

Steps की अच्छी संख्या क्या है?

UI design के लिए, per colour 9 से 11 stops established convention है (Tailwind, Bootstrap, Carbon सभी उस range में हैं)। Material Design 13 use करता है। 7 stops से नीचे scale under-resolved feel होता है; 13 से ऊपर stops एक-दूसरे से distinguish करना मुश्किल हो जाता है।

क्या कुछ Server को Send होता है?

नहीं। Colour-mathematics आपके browser में run होता है; input HEX, generated stops, और copied CSS कभी server touch नहीं करते। Useful है जब brand colour unreleased हो या embargo के अंतर्गत हो।

यह Colour-palette Generator से कैसे अलग है?

Palette generator कई distinct colours चुनता है जो एक साथ काम करते हैं (complementary, analogous, triadic, आदि), entirely different hues। Shades generator (यह) single hue रखता है और उसके lighter और darker variants produce करता है। Different jobs: palette generators आपको brand-primary plus accents देते हैं; shade generators आपको उन colours में से एक की variations देते हैं।

संबंधित टूल