Color Palette Generator

किसी भी आधार रंग से पूरक, समान, त्रिभुज और चतुर्भुज रंग योजनाएँ बनाएँ

उदाहरण देखें

आधार रंग

रंग योजना

उत्पन्न पैलेट

रंग पैलेट क्या है?

रंग पैलेट रंगों का एक निश्चित समूह होता है, जिसे किसी डिज़ाइन में एक साथ उपयोग के लिए चुना जाता है। जब आप किसी ब्रांड, वेबसाइट या चित्र के लिए एक आधार रंग चुनते हैं, तो आपको ऐसे सहयोगी रंगों की आवश्यकता होती है जो उसके साथ सामंजस्य बनाएँ। रंग पैलेट निर्माण, रंग सिद्धांत के नियमों — विशेष रूप से मानक HSL रंग चक्र पर ज्यामितीय संबंधों — को लागू करके यह चुनाव स्वचालित रूप से करता है।

HSL (Hue, Saturation, Lightness) रंग चक्र रंगों को 360 अंश के वृत्त में व्यवस्थित करता है। लाल 0 अंश पर, हरा 120 अंश पर और नीला 240 अंश पर स्थित होता है। प्रत्येक रंग सामंजस्य योजना आधार रंग से निश्चित कोणीय दूरी पर रंग चुनकर कार्य करती है। उदाहरण के लिए, पूरक जोड़ी में 180 अंश की दूरी पर स्थित दो रंग होते हैं। समान समूह दोनों ओर 30 अंश के भीतर के रंग चुनता है। ये ज्यामितीय नियम संतुलित संयोजन बनाते हैं, क्योंकि चुने गए रंग चक्र पर एक ही क्षेत्र में केंद्रित होने के बजाय फैले होते हैं।

यह टूल किसी भी hex रंग को इनपुट के रूप में लेता है, उसे HSL में बदलता है, चुनी गई योजना के अनुसार निर्धारित कोणों पर रंग घुमाता है, और परिणामों को वापस hex में बदलता है। यह छह योजनाओं का समर्थन करता है: पूरक, समान, त्रिभुज, विभाजित-पूरक, चतुर्भुज और एकवर्णीय। प्रत्येक योजना 2 से 5 तक भिन्न संख्या में आउटपुट रंग उत्पन्न करती है।

यह Color Palette Generator क्यों उपयोग करें?

परीक्षण और त्रुटि के आधार पर सामंजस्यपूर्ण रंग चुनना धीमा और असंगत होता है। पैलेट जनरेटर रंग सिद्धांत के नियमों को तुरंत लागू करता है और किसी भी प्रारंभिक बिंदु से गणितीय रूप से संतुलित परिणाम देता है।

तत्काल पैलेट निर्माण
आधार रंग और योजना प्रकार चुनें, और पैलेट तुरंत प्रकट हो जाता है। कोई फ़ॉर्म सबमिशन नहीं, कोई लोडिंग स्क्रीन नहीं। आधार रंग बदलें और आउटपुट वास्तविक समय में अपडेट होता है।
🎨
छह सामंजस्य योजनाएँ
पूरक, समान, त्रिभुज, विभाजित-पूरक, चतुर्भुज या एकवर्णीय में से चुनें। प्रत्येक योजना एक भिन्न दृश्य प्रभाव उत्पन्न करती है — उच्च-कंट्रास्ट युगलों से लेकर सूक्ष्म मोनोक्रोम शेड्स तक।
🔒
गोपनीयता-प्रथम
सभी रंग गणना आपके ब्राउज़र में होती है। कोई भी रंग डेटा किसी सर्वर को नहीं भेजा जाता। पेज लोड होने के बाद टूल ऑफ़लाइन भी कार्य करता है।
📋
एक-क्लिक निर्यात
व्यक्तिगत hex कोड या संपूर्ण पैलेट एक क्लिक में कॉपी करें। सीधे CSS, Figma, Tailwind कॉन्फ़िगरेशन या किसी भी डिज़ाइन टूल में चिपकाएँ जो hex मान स्वीकार करता है।

Color Palette Generator के उपयोग के मामले

UI थीम निर्माण
नया ऐप बना रहे फ्रंटएंड डेवलपर ब्रांड रंग से शुरुआत कर सकते हैं और प्राथमिक, द्वितीयक और एक्सेंट टोकन के लिए पूर्ण पैलेट बना सकते हैं। त्रिभुज या चतुर्भुज योजनाएँ बटन, लिंक, अलर्ट और पृष्ठभूमि के लिए पर्याप्त विविधता प्रदान करती हैं।
डिज़ाइन सिस्टम रंग टोकन
डिज़ाइन सिस्टम इंजीनियर एकवर्णीय पैलेट का उपयोग करके एकल ब्रांड रंग के लिए चमक का क्रम बनाते हैं, फिर प्रत्येक स्तर को एक नामित टोकन से मैप करते हैं (जैसे blue-100 से blue-900 तक)।
डेटा विज़ुअलाइज़ेशन
डेटा इंजीनियर और विश्लेषकों को चार्ट श्रृंखलाओं के लिए ऐसे अलग-अलग रंग चाहिए जो परस्पर न टकराएँ। समान या त्रिभुज पैलेट 3-6 श्रृंखलाओं के लिए पर्याप्त अंतर देता है और चार्ट को दृष्टिगत रूप से सुसंगत बनाए रखता है।
मार्केटिंग लैंडिंग पेज
अभियान पेज बना रहे डिज़ाइनर ब्रांड के प्राथमिक रंग से शुरू करते हैं और CTA बटन तथा हाइलाइट किए गए अनुभागों के लिए लोगो से टकराव के बिना एक्सेंट रंग खोजने हेतु विभाजित-पूरक योजना का उपयोग करते हैं।
एक्सेसिबिलिटी युग्मन
WCAG अनुपालन का परीक्षण करने वाले QA इंजीनियर उत्पन्न पैलेट रंगों को युग्मित करते हैं और उन्हें कंट्रास्ट जांचकर्ता से गुज़ारते हैं। पूरक या विभाजित-पूरक योजना से प्रारंभ करने पर अक्सर उच्च luminance कंट्रास्ट वाले युगल प्राप्त होते हैं।
रंग सिद्धांत का अध्ययन
डिज़ाइन का अध्ययन कर रहे विद्यार्थी एक ही आधार रंग पर सभी छह योजनाओं के बीच स्विच कर सकते हैं और देख सकते हैं कि प्रत्येक ज्यामिति चक्र के चारों ओर रंगों को कैसे वितरित करती है। दृश्य आउटपुट अमूर्त कोणों को मूर्त बनाता है।

रंग सामंजस्य योजनाओं की तुलना

प्रत्येक सामंजस्य योजना HSL चक्र पर आधार रंग से रंग घुमाव कोणों के आधार पर रंग चुनती है। नीचे दी गई तालिका प्रत्येक योजना, उत्पन्न रंगों की संख्या, घुमाव कोण और उस डिज़ाइन संदर्भ की सूची देती है जहाँ यह सर्वोत्तम कार्य करती है।

योजनारंगरंग कोणसर्वोत्तम उपयोग
Complementary2180High contrast, call-to-action buttons
Analogous3-30, 0, +30Harmonious, low-tension backgrounds
Triadic30, 120, 240Balanced variety, dashboards
Split-Complementary30, 150, 210Softer contrast than complementary
Tetradic (Rectangle)40, 90, 180, 270Rich palettes, complex UIs
Monochromatic5Same hue, varied lightnessSubtle, single-brand pages

HSL रंग चक्र घुमाव कैसे कार्य करता है

इस टूल में सभी पैलेट निर्माण HSL रंग मॉडल पर निर्भर करता है। इसके तीन अक्षों को समझने से आप अनुमान लगा सकते हैं कि प्रत्येक योजना में आधार रंग कैसे बदलेगा।

Hue (0-360)
रंग चक्र पर अंश में स्थिति। 0 लाल है, 60 पीला है, 120 हरा है, 180 सियान है, 240 नीला है, 300 मैजेंटा है। पैलेट योजनाएँ इस मान को घुमाती हैं जबकि संतृप्ति और चमक स्थिर रखती हैं।
Saturation (0-100%)
रंग कितना जीवंत है। 100% पूरी तरह संतृप्त है; 0% ग्रे होता है। पैलेट योजनाएँ आधार संतृप्ति को सुरक्षित रखती हैं ताकि सभी उत्पन्न रंग समान तीव्रता साझा करें।
Lightness (0-100%)
रंग कितना चमकीला है। 0% काला है, 50% शुद्ध रंग है, 100% सफेद है। एकवर्णीय योजनाएँ स्वर क्रम बनाने के लिए चमक को बदलती हैं; अन्य सभी योजनाएँ चमक स्थिर रखती हैं।

कोड उदाहरण

HSL रूपांतरण और रंग घुमाव का उपयोग करके प्रोग्रामेटिक रूप से रंग पैलेट बनाएँ।

JavaScript
// Generate a complementary color by rotating hue 180 degrees
function hexToHsl(hex) {
  let r = parseInt(hex.slice(1,3), 16) / 255;
  let g = parseInt(hex.slice(3,5), 16) / 255;
  let b = parseInt(hex.slice(5,7), 16) / 255;
  const max = Math.max(r,g,b), min = Math.min(r,g,b);
  let h = 0, s = 0, l = (max + min) / 2;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
    else if (max === g) h = ((b - r) / d + 2) / 6;
    else h = ((r - g) / d + 4) / 6;
  }
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}

function hslToHex(h, s, l) {
  s /= 100; l /= 100;
  const a = s * Math.min(l, 1 - l);
  const f = n => {
    const k = (n + h / 30) % 12;
    return Math.round(255 * (l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1))));
  };
  return '#' + [f(0), f(8), f(4)].map(v => v.toString(16).padStart(2, '0')).join('');
}

const base = '#6366f1';
const [h, s, l] = hexToHsl(base);
const comp = hslToHex((h + 180) % 360, s, l);
console.log(comp); // → "#f1ee63"
Python
import colorsys

def hex_to_hsl(hex_color: str):
    r, g, b = (int(hex_color[i:i+2], 16) / 255 for i in (1, 3, 5))
    h, l, s = colorsys.rgb_to_hls(r, g, b)
    return round(h * 360), round(s * 100), round(l * 100)

def hsl_to_hex(h: int, s: int, l: int) -> str:
    r, g, b = colorsys.hls_to_rgb(h / 360, l / 100, s / 100)
    return '#{:02x}{:02x}{:02x}'.format(round(r * 255), round(g * 255), round(b * 255))

def complementary(hex_color: str) -> str:
    h, s, l = hex_to_hsl(hex_color)
    return hsl_to_hex((h + 180) % 360, s, l)

def triadic(hex_color: str) -> list[str]:
    h, s, l = hex_to_hsl(hex_color)
    return [hex_color, hsl_to_hex((h + 120) % 360, s, l), hsl_to_hex((h + 240) % 360, s, l)]

print(complementary('#6366f1'))  # → #f1ee63
print(triadic('#6366f1'))        # → ['#6366f1', '#66f163', '#f16366']
Go
package main

import (
	"fmt"
	"math"
)

func hexToHSL(hex string) (float64, float64, float64) {
	var r, g, b uint8
	fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
	max := math.Max(rf, math.Max(gf, bf))
	min := math.Min(rf, math.Min(gf, bf))
	l := (max + min) / 2
	if max == min {
		return 0, 0, l * 100
	}
	d := max - min
	s := d / (2 - max - min)
	if l <= 0.5 {
		s = d / (max + min)
	}
	var h float64
	switch max {
	case rf:
		h = (gf - bf) / d
		if gf < bf { h += 6 }
	case gf:
		h = (bf-rf)/d + 2
	case bf:
		h = (rf-gf)/d + 4
	}
	return h * 60, s * 100, l * 100
}

func hslToHex(h, s, l float64) string {
	s /= 100; l /= 100
	a := s * math.Min(l, 1-l)
	f := func(n float64) uint8 {
		k := math.Mod(n+h/30, 12)
		return uint8(255 * (l - a*math.Max(-1, math.Min(math.Min(k-3, 9-k), 1))))
	}
	return fmt.Sprintf("#%02x%02x%02x", f(0), f(8), f(4))
}

func main() {
	h, s, l := hexToHSL("#6366f1")
	comp := hslToHex(math.Mod(h+180, 360), s, l)
	fmt.Println(comp) // → #f1ee63
}

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

पूरक और विभाजित-पूरक में क्या अंतर है?
पूरक योजना रंग चक्र पर ठीक 180 अंश की दूरी पर स्थित दो रंगों का उपयोग करती है, जो अधिकतम रंग कंट्रास्ट उत्पन्न करती है। विभाजित-पूरक योजना प्रत्यक्ष विपरीत रंग को आधार से 150 और 210 अंश पर स्थित दो रंगों से बदल देती है, जिससे कम दृश्य तनाव के साथ मज़बूत कंट्रास्ट मिलता है। UI डिज़ाइन में विभाजित-पूरक योजना से कार्य करना सरल होता है क्योंकि कोई भी एक्सेंट रंग सीधे आधार रंग का विरोध नहीं करता।
UI पैलेट में कितने रंग होने चाहिए?
अधिकांश डिज़ाइन सिस्टम 3-5 मुख्य रंगों का उपयोग करते हैं: एक प्राथमिक, एक द्वितीयक, एक तटस्थ और एक या दो एक्सेंट। प्रत्येक मुख्य रंग में फिर एक चमक क्रम होता है (100 से 900 तक)। मुख्य रंगों के लिए त्रिभुज या चतुर्भुज योजना से शुरू करें, फिर प्रत्येक के लिए एकवर्णीय क्रम बनाएँ।
क्या मैं इन पैलेट को Tailwind CSS के साथ उपयोग कर सकता हूँ?
हाँ। hex मान कॉपी करें और उन्हें अपनी tailwind.config.js या tailwind.config.ts फ़ाइल में colors ऑब्जेक्ट में जोड़ें। एकवर्णीय क्रम के लिए, Tailwind की नामकरण परंपरा से मेल खाने के लिए प्रत्येक छाया को एक क्रमांकित कुंजी (50, 100, 200, आदि) से मैप करें।
कुछ उत्पन्न रंग फीके या मटमैले क्यों दिखते हैं?
यदि आपके आधार रंग की संतृप्ति कम है या चमक अत्यधिक (0% या 100% के बहुत करीब) है, तो घुमाए गए रंग भी फीके दिखाई देंगे। जनरेटर आधार रंग की संतृप्ति और चमक के मान सुरक्षित रखता है। जीवंत पैलेट के लिए, 50% से अधिक संतृप्ति और 30% से 70% के बीच चमक वाला आधार रंग चुनें।
HSL और HSV/HSB में क्या अंतर है?
HSL और HSV दोनों hue को एक वृत्ताकार अक्ष के रूप में उपयोग करते हैं, लेकिन वे चमक को भिन्न रूप से परिभाषित करते हैं। HSL में, lightness 50% शुद्ध रंग है और 100% सफेद है। HSV (जिसे HSB भी कहते हैं) में, value 100% शुद्ध रंग है और संतृप्ति कम किए बिना सफेद तक पहुँचने का कोई तरीका नहीं है। अधिकांश पैलेट जनरेटर HSL का उपयोग करते हैं क्योंकि इसका lightness अक्ष हमारे रंग चमक के बोध से अधिक सहजता से मेल खाता है।
रंग सामंजस्य योजनाएँ एक्सेसिबिलिटी से कैसे संबंधित हैं?
रंग सामंजस्य और WCAG कंट्रास्ट दो अलग विषय हैं। पूरक युगल में अधिकतम रंग कंट्रास्ट होता है, लेकिन इससे टेक्स्ट पठनीयता के लिए पर्याप्त luminance कंट्रास्ट की गारंटी नहीं होती। पैलेट बनाने के बाद, प्रत्येक अग्रभूमि/पृष्ठभूमि युगल को WCAG AA (सामान्य टेक्स्ट के लिए 4.5:1 अनुपात) के विरुद्ध जाँचें। समान चमक वाले रंग उनके रंग संबंध से स्वतंत्र रूप से विफल होंगे।
क्या HSL, CSS hsl() फ़ंक्शन के समान है?
हाँ। CSS hsl() फ़ंक्शन तीन तर्क लेता है: अंश में hue (0-360), प्रतिशत के रूप में संतृप्ति, और प्रतिशत के रूप में चमक। CSS Color Level 4 एक स्लैश-पृथक alpha मान भी स्वीकार करता है: hsl(240 60% 50% / 0.8)। इस जनरेटर द्वारा उपयोग किया गया HSL मॉडल CSS विनिर्देश से बिल्कुल मेल खाता है, इसलिए आप hue, संतृप्ति और चमक के मान सीधे अपनी स्टाइलशीट में चिपका सकते हैं।