Color Palette Generator
किसी भी आधार रंग से पूरक, समान, त्रिभुज और चतुर्भुज रंग योजनाएँ बनाएँ
आधार रंग
रंग योजना
उत्पन्न पैलेट
रंग पैलेट क्या है?
रंग पैलेट रंगों का एक निश्चित समूह होता है, जिसे किसी डिज़ाइन में एक साथ उपयोग के लिए चुना जाता है। जब आप किसी ब्रांड, वेबसाइट या चित्र के लिए एक आधार रंग चुनते हैं, तो आपको ऐसे सहयोगी रंगों की आवश्यकता होती है जो उसके साथ सामंजस्य बनाएँ। रंग पैलेट निर्माण, रंग सिद्धांत के नियमों — विशेष रूप से मानक HSL रंग चक्र पर ज्यामितीय संबंधों — को लागू करके यह चुनाव स्वचालित रूप से करता है।
HSL (Hue, Saturation, Lightness) रंग चक्र रंगों को 360 अंश के वृत्त में व्यवस्थित करता है। लाल 0 अंश पर, हरा 120 अंश पर और नीला 240 अंश पर स्थित होता है। प्रत्येक रंग सामंजस्य योजना आधार रंग से निश्चित कोणीय दूरी पर रंग चुनकर कार्य करती है। उदाहरण के लिए, पूरक जोड़ी में 180 अंश की दूरी पर स्थित दो रंग होते हैं। समान समूह दोनों ओर 30 अंश के भीतर के रंग चुनता है। ये ज्यामितीय नियम संतुलित संयोजन बनाते हैं, क्योंकि चुने गए रंग चक्र पर एक ही क्षेत्र में केंद्रित होने के बजाय फैले होते हैं।
यह टूल किसी भी hex रंग को इनपुट के रूप में लेता है, उसे HSL में बदलता है, चुनी गई योजना के अनुसार निर्धारित कोणों पर रंग घुमाता है, और परिणामों को वापस hex में बदलता है। यह छह योजनाओं का समर्थन करता है: पूरक, समान, त्रिभुज, विभाजित-पूरक, चतुर्भुज और एकवर्णीय। प्रत्येक योजना 2 से 5 तक भिन्न संख्या में आउटपुट रंग उत्पन्न करती है।
यह Color Palette Generator क्यों उपयोग करें?
परीक्षण और त्रुटि के आधार पर सामंजस्यपूर्ण रंग चुनना धीमा और असंगत होता है। पैलेट जनरेटर रंग सिद्धांत के नियमों को तुरंत लागू करता है और किसी भी प्रारंभिक बिंदु से गणितीय रूप से संतुलित परिणाम देता है।
Color Palette Generator के उपयोग के मामले
रंग सामंजस्य योजनाओं की तुलना
प्रत्येक सामंजस्य योजना HSL चक्र पर आधार रंग से रंग घुमाव कोणों के आधार पर रंग चुनती है। नीचे दी गई तालिका प्रत्येक योजना, उत्पन्न रंगों की संख्या, घुमाव कोण और उस डिज़ाइन संदर्भ की सूची देती है जहाँ यह सर्वोत्तम कार्य करती है।
| योजना | रंग | रंग कोण | सर्वोत्तम उपयोग |
|---|---|---|---|
| Complementary | 2 | 180 | High contrast, call-to-action buttons |
| Analogous | 3 | -30, 0, +30 | Harmonious, low-tension backgrounds |
| Triadic | 3 | 0, 120, 240 | Balanced variety, dashboards |
| Split-Complementary | 3 | 0, 150, 210 | Softer contrast than complementary |
| Tetradic (Rectangle) | 4 | 0, 90, 180, 270 | Rich palettes, complex UIs |
| Monochromatic | 5 | Same hue, varied lightness | Subtle, single-brand pages |
HSL रंग चक्र घुमाव कैसे कार्य करता है
इस टूल में सभी पैलेट निर्माण HSL रंग मॉडल पर निर्भर करता है। इसके तीन अक्षों को समझने से आप अनुमान लगा सकते हैं कि प्रत्येक योजना में आधार रंग कैसे बदलेगा।
कोड उदाहरण
HSL रूपांतरण और रंग घुमाव का उपयोग करके प्रोग्रामेटिक रूप से रंग पैलेट बनाएँ।
// 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"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']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
}