मुफ़्त कलर व्हील
सामंजस्य योजनाओं के साथ इंटरैक्टिव HSL रंग पिकर।
कैसे उपयोग करें
- रंग चुनने के लिए कलर व्हील पर कहीं भी क्लिक करें, या ह्यू, सैचुरेशन और लाइटनेस स्लाइडर्स को समायोजित करें।
- व्हील के नीचे चयनित रंग HEX, RGB और HSL फ़ॉर्मेट में देखें।
- पूरक, सदृश, त्रिकोणीय और विभाजित-पूरक रंग योजनाएँ देखने के लिए किसी हार्मनी स्वैच पर क्लिक करें।
अक्सर पूछे जाने वाले प्रश्न
रंग सामंजस्य क्या है?
रंग सामंजस्य रंग पहिये पर उनकी स्थिति के आधार पर रंगों की मनभावन व्यवस्था को संदर्भित करता है। सामान्य सामंजस्यों में पूरक (विपरीत), अनुरूप (आसन्न) और त्रिकोणीय (समान दूरी) शामिल हैं।
HEX, RGB और HSL में क्या अंतर है?
HEX एक 6-अंकीय हेक्साडेसिमल कोड (#RRGGBB) है। RGB लाल, हरा और नीला मान (0-255) का उपयोग करता है। HSL hue (0-360°), संतृप्ति (0-100%) और चमक (0-100%) का उपयोग करता है।
क्या मैं इन रंगों का उपयोग अपने डिज़ाइनों में कर सकता हूँ?
हाँ! किसी भी मान को कॉपी करें और इसे सीधे अपने CSS, डिज़ाइन सॉफ़्टवेयर या वेब एप्लिकेशन में पेस्ट करें। सभी मान मानक-अनुरूप और व्यापक रूप से समर्थित हैं।
Color Wheel का एक Short History
Isaac Newton ने पहला बनाया। Opticks (1704) में उन्होंने वे prism experiments report किए जो उन्होंने 1672 में Royal Society को पहली बार दिखाए थे, यह demonstrate करते हुए कि white light spectral colors का mixture है, और spectrum को एक closed circle में arrange किया ताकि red end violet end से मिल सके। उन्होंने सात colors name किए (red, orange, yellow, green, blue, indigo, violet) diatonic musical scale के सात notes के analogy से picked, क्योंकि उनका मानना था कि colour और harmony mathematical structure share करते हैं। Blue से अलग band के रूप में indigo उस aesthetic choice का most famous casualty है।
Goethe की Theory of Colours (1810) ने wheel को physics की बजाय perception के around reframe किया। उन्होंने colors को symmetrically «plus» warm और «minus» cool halves में arrange किया और note किया कि opposite colors «reciprocally evoke each other in the eye,» opponent-process theory का एक early articulation जो Michel Eugène Chevreul की simultaneous-contrast law को anticipate करता था, जिसे वह 1839 में Gobelins tapestry works से publish करेंगे।
Albert Munsell की A Color Notation (1905) convention की बजाय measured human perception में grounded पहला wheel था, hue, value (lightness) और chroma (saturation) को independent dimensions में separating, हर modern perceptual color space का direct ancestor, जिसमें CIELAB और OKLCH शामिल हैं। वह wheel जो अधिकांश designers ने school में सीखी वह younger है: Johannes Itten ने 1919 और 1922 के बीच Bauhaus में 12-color RYB wheel codify किया, तीन primaries (red, yellow, blue), तीन secondaries, छह tertiaries और seven kinds of color contrast identify करते हुए। Screen पर actually use होने वाले wheels different हैं: HSL और HSV RGB के cylindrical reparameterisations हैं जो 1970s में PARC और other graphics labs में invent किए गए, ताकि designer तीन intuitive sliders में think कर सके («this hue, more vivid, lighter») तीन opaque RGB channels की बजाय। Most recent step OKLCH (Björn Ottosson, December 2020) है, अब CSS Color Module Level 4 में, एक wheel जहां equal angular steps equal perceptual hue steps की तरह लगते हैं।
Wheels की तीन Families
«Color wheel» इस fact को hide करती है कि तीन different kinds हैं, हर एक different physical situation के लिए correct:
- RYB (red, yellow, blue), वह artistic teaching wheel जो Itten ने popularise किया। यह pigments के साथ experience पर based एक convention है, physics का model नहीं। Red, yellow और blue paints के कोई combination से हर visible color mix नहीं हो सकता।
- RGB (red, green, blue), additive। जहां color emitted होता है वहां use होता है: monitors, phones, projectors, stage lighting। Physiology में anchored, human retinas में तीन cone types होती हैं जो long, medium और short wavelengths के प्रति sensitive हैं। Browsers और CSS RGB में काम करते हैं, इसलिए इस tool का HSL wheel sRGB का एक polar reparameterisation है।
- CMY / CMYK (cyan, magenta, yellow + key/black), subtractive। जहां color reflected होता है वहां use होता है: print, ink, dye। Mixing से brightness कम होती है; commercial printers true blacks के लिए और ink बचाने के लिए black add करते हैं।
Practical consequence: इस wheel द्वारा export किए गए HEX, RGB और HSL values screen-accurate हैं। ये paint-accurate नहीं हैं, और CMYK print run के लिए अपना conversion चाहिए होगा, एक step जो printers usually आपके लिए handle करते हैं।
HSL एक Circle पर कैसे Map होता है
HSL का मतलब है hue, saturation, lightness। Hue central axis के around एक angle है जिसमें red 0° पर, green 120° पर, blue 240° पर, और 360° पर वापस red पर wrap होता है। Saturation 0% (gray) से 100% (fully vivid) तक run होती है। Lightness 0% (black) से 50% पर natural hue के माध्यम से white पर 100% तक run होती है। Geometrically model एक bicone (दो cones tip-to-tip) है जिसमें most saturated colors equator पर हैं। HSV similar है लेकिन Lightness की जगह Value use करता है, full saturated colors V=100 पर और पूरा model एक single cone की shape में।
CSS का hsl() function same तीन numbers लेता है। Modern syntax एक slash के बाद optional alpha के साथ space-separated है:
hsl(210 80% 50%)
hsl(210 80% 50% / 0.5)
hsl(0.5turn 80% 50%) /* turns also accepted */Legacy comma-separated hsl(210, 80%, 50%) और hsla() alias अभी भी backward compatibility के लिए supported हैं। CSS Color Module Level 4 basic HSL के लिए around 2015 से broadly available है browsers में, modern syntax बाद में shipping हुई।
Honest caveat: HSL perceptually uniform नहीं है। L=50% पर yellow L=50% पर blue से बहुत ज़्यादा bright लगती है भले ही दोनों same lightness number रखती हों, और constant S और L पर hue से sliced wheel में visually heavy yellows और weak blues होंगे। Data visualisation और carefully calibrated brand palettes के लिए, new oklch() color space एक better choice है, equal angular steps equal perceptual hue steps की तरह लगते हैं। एक colour pick करने और HEX grab करने के लिए, HSL fine है।
Classic Harmonies, Math के साथ
हर harmony scheme एक base hue से angular offsets के set द्वारा defined है। B को वह hue मानें जो आपने select की है:
| Scheme | Hues | Mood |
|---|---|---|
| Monochromatic | B (केवल S और L vary करें) | Subtle, low-contrast, शांतिपूर्ण |
| Analogous | B − 30°, B, B + 30° | समृद्ध, सामंजस्यपूर्ण, sunsets, foliage |
| Complementary | B, B + 180° | गतिशील, ध्यान खींचने वाला |
| विभाजित-पूरक | B, B + 150°, B + 210° | Pure complementary से softer, strong contrast |
| Triadic | B, B + 120°, B + 240° | Balance और richness के साथ sharp contrast |
| Tetradic (आयताकार) | B, B + 60°, B + 180°, B + 240° | दो complementary pairs, एक को dominate करने दें |
| Square | B, B + 90°, B + 180°, B + 270° | Even four-way split, balance harder है |
ये angles Goethe और Itten से inherited teaching conventions हैं, psychophysical laws नहीं। ये reliably contrast और balance produce करते हैं, इसीलिए designers इन्हें reach करते हैं, लेकिन ये rules की बजाय heuristics हैं। ऊपर के harmony swatches को iterate करने के starting points के रूप में treat करें।
Wheel कब Reach करें
- Web और UI design। एक brand primary pick करें, danger / call-to-action accent के लिए complement derive करें, charts के लिए triadic third derive करें। फिर background और text के against contrast check करें।
- Brand identity। Marketing collateral के लिए harmonies का documented palette के साथ एक logo color।
- Data visualisation। Categorical palettes (equal perceptual distance पर 10+ distinct hues) और sequential या diverging scales, तीन या चार series से आगे जाने पर HSL की बजाय OKLCH में better done।
- Interior design। एक base wall color, analogous trim, cushions या art में complementary accent।
- Photography color grading। Teal-and-orange (एक complementary pair) modern cinema cliché है क्योंकि cool shadows के against warm skin tones cinematic read होते हैं।
- Game art और illustration। Environments के against hue-keying characters, focal points के लिए complementary accents के साथ।
Color Blindness और Wheel
Northern European descent के roughly 8% पुरुषों और 0.5% महिलाओं में किसी न किसी form का color vision deficiency होता है (rate population के हिसाब से vary होती है)। L- और M-cones के genes X chromosome पर होते हैं, इसीलिए condition पुरुषों में बहुत ज़्यादा common है। कुछ harmonies (particularly red/green complementary pairs) most common forms के लिए near-monochrome में collapse हो जाती हैं:
- Deuteranopia / deuteranomaly: non-functional या weak medium-wavelength cones। Most common form (पुरुषों का लगभग 6%)। Red और green confused हो जाते हैं।
- Protanopia / protanomaly: non-functional या weak long-wavelength cones (पुरुषों का लगभग 2%)। Reds dimmed appear होती हैं, कभी-कभी black से confused।
- Tritanopia / tritanomaly: non-functional या weak short-wavelength cones। बहुत rare। Blues और yellows confused हो जाते हैं।
WCAG 2.1 का «do not rely on colour alone» principle directly relevant है: information के only carrier के रूप में कभी color use न करें। Hue contrast के ऊपर brightness contrast add करें, charts में color के साथ-साथ patterns या shapes use करें, और commit करने से पहले जो भी harmony generate करें उसे color-blindness simulator के माध्यम से run करें। WCAG contrast भी check करें, normal text के लिए AA पर minimum 4.5:1, AAA पर 7:1।
अधिक Questions
Red, yellow और blue को «primary» colors क्यों कहते हैं?
Artistic / RYB tradition में (Itten ने Bauhaus में जो wheel सिखाई) ये तीन pigments हैं जिनसे सभी अन्य mixable assumed थे। वह assumption physics की बजाय convention है: real red, yellow और blue pigments का कोई combination हर visible color mix नहीं कर सकता। Additive light में true primaries red, green और blue (RGB) हैं; subtractive print में ये cyan, magenta और yellow (CMY) हैं। RYB art education में persist करता है क्योंकि यह pedagogically simple है और real-world paints mix करते समय reasonable results देता है।
क्या 16:9 color के लिए golden ratio जैसा है?
नहीं, ये दो unrelated concepts हैं। «Golden ratio» proportion (rectangles, layout) में आता है और roughly 1.618 के equal है। Color theory की harmonies hue circle पर angular geometry से आती हैं: complementary के लिए 180°, triadic के लिए 120°, square के लिए 90°। Standard color-wheel teaching में कोई golden-ratio harmony built in नहीं है।
क्या यहां दिखने वाले colors print में match होंगे?
Almost certainly exactly नहीं। यह wheel sRGB के ऊपर HSL है, additive colour, screens के लिए designed। Print subtractive CMYK है। Vivid blues और bright greens जो monitor पर fine दिखते हैं अक्सर paper पर dramatically desaturate हो जाते हैं, और out-of-gamut conversions hues shift कर सकती हैं। Print designers usually सामने calibrated proof रखते हैं या design tool में directly CMYK में काम करते हैं। इस wheel को screen mock-up के लिए use करें, फिर convert करें।
क्या «color psychology» (red = passion, blue = calm) real evidence पर based है?
इसका folk strength है लेकिन weak और culturally variable empirical support है। अलग-अलग cultures same colors को बहुत अलग ideas से associate करती हैं (white Western Europe में wedding color है और East Asia के कुछ हिस्सों में funeral color)। Color psychology को design starting point और clients से बात करने की vocabulary के रूप में use करें, law के रूप में नहीं।
क्या कुछ server पर भेजा जाता है?
नहीं। Wheel HTML5 canvas में render होती है; harmony angles locally JavaScript में compute होते हैं; HEX, RGB और HSL strings browser API के माध्यम से आपके clipboard पर write होती हैं। Page एक बार load होने पर offline काम करता है।