इंटरनेट प्रेमियों के लिए Uchū कलर पैलेट

 (uchu.style)
2 पॉइंट द्वारा GN⁺ 2025-02-17 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • Uchū, NetOperator Wibby द्वारा बनाया गया इंटरनेट प्रेमियों के लिए कलर पैलेट है, जो रंगों के नामों से ज़्यादा oklch() वैल्यूज़ की सूची पर केंद्रित है
  • पैलेट 8 कलर ग्रुप में बँटा है, और हर ग्रुप 9 स्तरों के oklch(L C H) वैल्यूज़ से बना है
  • पहला ग्रुप saturation 0.002~0.004 स्तर की low-saturation रेंज है, और बाकी hue angle के आधार पर लाल·गुलाबी·बैंगनी·नीले·हरे·पीले·नारंगी रंगों की रेंज जैसे दिखते हैं
  • हर रंग के नाम, लागू करने के उदाहरण, code samples, डाउनलोड तरीका, और license जानकारी उपलब्ध नहीं है
  • design system या theme में इस्तेमाल करने के लिए दी गई OKLCH वैल्यूज़ को सीधे कॉपी करके लागू करना होगा

Uchū पैलेट का मूल रूप

  • Uchū एक कलर पैलेट है, जिसे “the color palette for internet lovers” विवरण के साथ उपलब्ध कराया गया है
  • लेखक के रूप में NetOperator Wibby दिखाया गया है
  • पैलेट विवरण की तुलना में oklch() वैल्यूज़ की सूची पर अधिक केंद्रित है, और हर वैल्यू brightness·saturation·hue angle से जुड़े तीन नंबरों से रंग को परिभाषित करती है

पैलेट की संरचना

  • पूरा पैलेट 8 कलर ग्रुप से बना है
  • हर ग्रुप में 9 oklch() वैल्यूज़ हैं
  • स्तरों की मार्किंग हर ग्रुप में ### 2 से ### 9 तक दिखती है, और पहली वैल्यू अलग नंबर शीर्षक के बिना पहले रखी गई है

कलर ग्रुप के हिसाब से OKLCH रेंज

  • low-saturation रेंज

    • saturation वैल्यू 0.002~0.004 स्तर की है
    • शुरुआती वैल्यू: oklch(0.9557 0.003 286.35)
    • आखिरी वैल्यू: oklch(0.5682 0.004 247.89)

  • लाल·गुलाबी रेंज जैसे दिखने वाले hue angles

    • दूसरा ग्रुप लगभग 3~19 की hue angle रेंज में है
      • शुरुआती वैल्यू: oklch(0.8898 0.052 3.28)
      • आखिरी वैल्यू: oklch(0.4117 0.157 16.58)
    • तीसरा ग्रुप लगभग 352~355 की hue angle रेंज में है
      • शुरुआती वैल्यू: oklch(0.958 0.023 354.27)
      • आखिरी वैल्यू: oklch(0.5768 0.074 353.14)

  • बैंगनी·नीली रेंज जैसे दिखने वाले hue angles

    • चौथा ग्रुप लगभग 298~305 की hue angle रेंज में है
      • शुरुआती वैल्यू: oklch(0.891 0.046 305.24)
      • आखिरी वैल्यू: oklch(0.3601 0.145 298.35)
    • पाँचवाँ ग्रुप लगभग 258~260 की hue angle रेंज में है
      • शुरुआती वैल्यू: oklch(0.8966 0.046 260.67)
      • आखिरी वैल्यू: oklch(0.3953 0.15 259.87)

  • हरी·पीली·नारंगी रेंज जैसे दिखने वाले hue angles

    • छठा ग्रुप लगभग 144~149 की hue angle रेंज में है
      • शुरुआती वैल्यू: oklch(0.9396 0.05 148.74)
      • आखिरी वैल्यू: oklch(0.5277 0.138 145.41)
    • सातवाँ ग्रुप लगभग 91~92 की hue angle रेंज में है
      • शुरुआती वैल्यू: oklch(0.9705 0.039 91.2)
      • आखिरी वैल्यू: oklch(0.6229 0.097 91.9)
    • आठवाँ ग्रुप लगभग 51~57 की hue angle रेंज में है
      • शुरुआती वैल्यू: oklch(0.9383 0.037 56.93)
      • आखिरी वैल्यू: oklch(0.5249 0.113 51.98)

इस्तेमाल करते समय ध्यान देने वाली बातें

  • हर कलर ग्रुप के रंगों के नाम उपलब्ध नहीं हैं
  • theme लागू करने के उदाहरण, code samples, डाउनलोड तरीका, और license जानकारी शामिल नहीं है
  • असल इस्तेमाल करने वालों को सूची की oklch() वैल्यूज़ सीधे कॉपी करके पैलेट या theme configuration में इस्तेमाल करनी होगी

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-02-17
Hacker News की टिप्पणियां

  • आज oklch() के बारे में पता चला
    https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...

    • इस लेख से सीखा: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg...
      खुद इस्तेमाल करके देखा तो रंगों में अचानक जान आ गई, यह देखकर हैरान रह गया, और तभी तय किया कि एक theme बनानी चाहिए
    • बेहतर समझने के लिए v0 से एक visualization tool बनाया :)
      https://v0-oklch-visualiser-e69nx1.vercel.app/
    • यह भी जानना अच्छा है कि ज्यादातर browsers में इसका support है
      https://caniuse.com/?search=oklch
    • रंगों का भविष्य जैसा लगता है
    • मुझे भी हाल ही में पता चला, लेकिन ऐसे बदलावों के साथ मेरा एक colleague मुझसे कहीं ज्यादा तेजी से कदम मिला लेता है

  • सोच रहा हूं कि uchu शब्द क्यों इस्तेमाल किया गया
    आजकल color schemes, AI models, startups, tools, apps वगैरह लगभग हर चीज का नाम किसी random चुने हुए जापानी शब्द पर रखा जा रहा है, समझ नहीं आता क्यों

    • नकारात्मक नहीं लगना चाहता, लेकिन अब यह थोड़ा ज्यादा इस्तेमाल होता हुआ लगता है
      मजेदार बात यह है कि जापान में भी random से लगने वाले English शब्दों के साथ यही चीज होती है, इसलिए यह पूरी तरह अभूतपूर्व तो नहीं लगता
    • क्या Galaxy या Forester जैसे product names भी खटकते हैं, यह जानना चाहूंगा
      एक शब्द वाले product name पर शिकायत करना काफी अजीब लगता है। समस्या शब्द की source language है, या Navigator जैसे लंबे शब्द की बजाय दो-syllable वाला शब्द इस्तेमाल करना जलन पैदा कर रहा है, या Chrome की तरह एक-syllable नहीं है इसलिए पसंद नहीं आ रहा, समझ नहीं आता
      क्या Ubuntu जापानी नहीं है इसलिए ठीक है, या मतलब यह है कि Twitter और Yahoo जैसे नाम भी हटाकर सबको X की तरह एक अक्षर पर आ जाना चाहिए?
    • “uchū” जापानी में ब्रह्मांड का मतलब है
      मैं इस theme को अपने सभी projects में इस्तेमाल करता हूं, तो कह सकते हैं कि इसका मतलब universal है
      बाकी मामलों के बारे में नहीं जानता, लेकिन निजी तौर पर मुझे जापानी style या aesthetics जैसी चीजें पसंद हैं, इसलिए अगर कोई शब्द फिट बैठता है तो उसे इस्तेमाल करना चाहूंगा
    • छोटे और pronounceable शब्द दुर्लभ हैं
      अगर आप 4~6 अक्षरों वाला project name चाहते हैं, तो जापानी शब्द अक्सर criteria में अच्छी तरह फिट बैठते हैं, और जापानी culture भी विदेशों में बहुत फैला हुआ है
    • नई पीढ़ी anime जैसी जापानी culture, videogames और non-retro cultural references से ज्यादा परिचित होकर बड़ी हो रही है, इसलिए शायद वे उन शब्दों से नाम रखते हैं जो सुनने में अच्छे लगते हैं

  • जानना चाहूंगा कि क्या इससे readability analysis किया गया है
    background और foreground का contrast बहुत कम है, इसलिए लंबे समय तक पढ़ने के लिए आरामदायक नहीं लगता

    • आजकल लगता है readability पर कुछ ज्यादा ही focus हो रहा है
      ऑफिस में एक नई team बनी है जो reading difficulties वाले लोगों के लिए हर contrast को measure करवाती है। Contrast 80% से ऊपर होना चाहिए वगैरह, font size भी बहुत बड़ा होना चाहिए, theme बदलने नहीं देते, और “security reasons” से Dark Reader जैसे plugins install करना भी ban है
      समस्या यह है कि नतीजा बाकी लोगों के लिए बहुत बदसूरत और आंखों को थका देने वाला बन जाता है। अब Dark Reader भी इस्तेमाल नहीं कर सकते, तो और बुरा है। सब कुछ bold और चिल्लाता हुआ लगता है, जिससे यह पहचानना भी कठिन हो जाता है कि क्या important है। मैंने 47 लाख रंगों वाला display इसलिए नहीं खरीदा कि सिर्फ 10 रंग देखूं। बहुत high contrast से मुझे headache हो जाता है, इसलिए Solarized जैसी soft themes मुझे ज्यादा अच्छी लगती हैं
      visual issues वाले 0.5% employees को अपने-अपने problem के हिसाब से adjust करने वाले browser plugins से भी पर्याप्त मदद मिल सकती है। Visual difficulties भी सब एक जैसी नहीं होतीं। कोई खास color combinations नहीं देख पाता, इसलिए उनसे बचना या उन्हें modify करना चाहिए; किसी को धुंधला दिखता है, इसलिए बड़े text की जरूरत होती है, जो शायद अभी से भी बहुत बड़ा होना चाहिए। जो बिल्कुल नहीं देख पाते, उनके लिए यह भी मददगार नहीं है; उन्हें braille display और अच्छे image alt text की जरूरत होती है। लेकिन company में लगता है कि ऐसी चीजों पर ध्यान नहीं है, बस जो तुरंत नजर आता है उसी पर focus है
      पहले एक soft email signature था, अब kindergarten जैसे colors और giant text से बहुत जोर देकर दिखता है। वैसे भी यह ऐसी information है जिसे कोई पढ़ता नहीं। उसे जानबूझकर कम emphasize किया गया था, उसकी वजह थी: जरूरत हो तो पता रहे कि वह वहां है, लेकिन यह भी साफ रहे कि वह important information नहीं है। सच में पढ़ना हो तो select करके देखा जा सकता है, और plain text mode में भी बदला जा सकता है
      मैं disability support के बिल्कुल खिलाफ नहीं हूं, लेकिन ज्यादा customized approach देखना चाहूंगा। एक चीज ठीक करने के चक्कर में बाकी सबके लिए चीजें खराब करने वाला तरीका पसंद नहीं। मैं अपना phone भी giant text mode में नहीं चलाता, लेकिन जिन्हें जरूरत है उनके लिए वह feature मौजूद होना अच्छी बात है
    • Contrast से आपका मतलब color swatch area है या नहीं, यह जानना चाहूंगा
      अगर हां, तो छोटे color values information देने से ज्यादा visual purpose के लिए हैं, और repository में values पढ़ने में आसान format में मौजूद हैं। उदाहरण के लिए, कोई भी bright orange text को orange background पर एक paragraph से ज्यादा पढ़ना नहीं चाहेगा

  • रंग संयोजन वाली अभिव्यक्ति उलझाने वाली है
    मेरे लिए रंग संयोजन का मतलब Monokai की तरह कुछ ऐसे रंग हैं जो आपस में अच्छे लगते हैं। code editor syntax highlighting जैसे उपयोग भी साफ़ और आसान हैं
    यह तो एक ही रंग-परिवार के बहुत सारे रंगों की सूची जैसा दिखता है, और समझ नहीं आता कि इसे कैसे इस्तेमाल किया जाए। मैं इसे नीचा दिखाना नहीं चाहता, सच में उलझन है

    • यह कुछ वैसा ही है जैसे Tailwind UI development में इस्तेमाल के लिए पूरा color palette देता है
      एक ही रंग के कई brightness levels हों तो वे एक ही family जैसे महसूस होते हैं और उनसे आपस में मेल खाते UI elements बनाए जा सकते हैं, इसलिए flexibility मिलती है। उदाहरण के लिए, अगर आप नीले card पर blue-family border लगाना चाहते हैं, तो background के लिए हल्का blue और border के लिए गहरा blue इस्तेमाल कर सकते हैं
      काले border पर transparency लगाने के बजाय, इस palette का हर brightness level उसी color family के भीतर मेल खाने के लिए अलग से चुना गया है। एक और फायदा यह है कि हर “brightness level” colors के बीच consistent होने की guarantee दी जा सकती है। 50% gray, 50% red के करीब की स्थिति में है
      और आम तौर पर, यहां का हर color बाकी सभी colors के साथ अच्छा लगे, इस तरह design किया गया है। कोई भी random color नहीं चलेगा; उन्हें आपस में harmonious होना चाहिए
    • इसे color palette कहना ज़्यादा सही होगा
    • निजी तौर पर मुझे भी लगता है कि “color palette” ही कहना चाहिए था। मिलते-जुलते उदाहरण ये हैं
      OpenProps का Open Color https://yeun.github.io/open-color/
      Tailwind का color palette https://tailwindcss.com/docs/colors
      design के नज़रिए से, अच्छा color contrast score और दूसरे accessibility criteria बनाए रखते हुए color palette चुनना बहुत मुश्किल हो सकता है। standardized palette उपयोगी होते हैं क्योंकि वे यह काम आपके लिए कर देते हैं। मैं OC या Tailwind palettes अक्सर इस्तेमाल करता हूं, लेकिन कई बार मनचाही color family कम पड़ जाती है, इसलिए ऐसे 3 विकल्प होना काफ़ी अच्छा है
    • सच कहूं तो रंगों के डिब्बों की सूची को 476 points मिलना मुझे उतना ही समझ से बाहर लगता है

  • यह palette perceptually uniform नहीं दिखता
    मतलब हर tint और white/black के बीच contrast ratio सभी colors में समान नहीं है। सोच रहा हूं कि क्या इसे https://huetone.ardov.me/ पर analyze किया गया है

    • मैंने अपने tool a11y-contrast[1] से analyze किया, और सच में luminance uniform नहीं है। color palette में यह property क्यों desirable हो सकती है, इसके बारे में मैंने [2] में लिखा है
      [1] https://github.com/darekkay/a11y-contrast
      [2] https://darekkay.com/blog/accessible-color-palette/
    • नहीं, मैंने बस जैसा देखने में अच्छा लगा वैसा किया
      मुझे नहीं पता huetone tool OKLCH support करता है या नहीं। conversion option नहीं दिखा

  • सोच रहा हूं कि यह internet enthusiasts के लिए color scheme क्यों है

    • मुझे internet पसंद है, और अच्छे colors भी पसंद हैं। उम्मीद है सिर्फ़ मैं ही ऐसा नहीं हूं ;)

  • numbers की आपस में तुलना करें तो blue बाकी colors की तुलना में कहीं ज़्यादा vivid और opaque दिखता है
    सभी 5 levels को साथ-साथ compare करें तो blue बिजली जैसा उभरता है, जबकि बाकी colors tinted लगते हैं
    बेशक यह monitor gamma और color profile पर निर्भर करेगा, लेकिन सोच रहा हूं कि क्या इरादा यह था कि हर number pure color के मुकाबले similar tint जैसा दिखे। अभी यह color intensity scaling के हिसाब से perceptual equivalence बनाने वाले Munsell Color System implementation की बजाय, अलग notation वाले RGB/CMYK जैसे system की तरह दिखता है

    • ज़रूरी नहीं
      इन colors तक पहुंचने के लिए कोई formula नहीं लगाया; बस आंख से देखकर तब तक adjust किया जब तक मुझे ठीक नहीं लगा

  • Android के Firefox में देख रहा हूं और सिर्फ़ सफेद background पर काला text दिख रहा है
    लगता है असल में और भी दिखना चाहिए; क्या यह सही है?

    • CSS nesting[1] इस्तेमाल की गई है। इसे SCSS जैसा समझें। पूरी support के लिए Firefox 117 और Chrome 120 चाहिए[2]
      [1] https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_sel...
      [2] https://caniuse.com/css-nesting
    • Linux desktop के Firefox में भी यही है, JavaScript on करने पर भी
      edit: लगता है Oklab/oklch() [1] इस्तेमाल कर रहा है, जो Firefox 113 से काम करना चाहिए लिखा है, लेकिन 115 में काम नहीं करता लगता। या शायद कोई और चीज़ इसे break कर रही हो
      [1] https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...
    • अगर नीचे scroll करने पर brightness के हिसाब से grouped कई color swatch sets नहीं दिख रहे, तो आप सही तरह से नहीं देख रहे
      मेरे Firefox में ठीक काम करता है, लेकिन मैं Android इस्तेमाल नहीं करता
    • Linux के Firefox 50 में भी यही है
      backward compatibility को ignore करने वालों को क्या कहा जाए, पता नहीं। मेरी site जरूरत पड़े तो IE6 में भी काम करती है
    • Chromium PC पर भी यही है

  • Tailwind इस्तेमाल तो नहीं करता, लेकिन ऐसे काम के लिए Tailwind palette इस्तेमाल करता आया हूं
    https://tailwindcss.com/docs/colors

    • सावधान रहना चाहिए। Tailwind ने version 3 और 4 के बीच फिर से colors बदल दिए, और यह पहले से तीसरी बार है
      साफ़ कहूं तो CSS library को latest version पर upgrade करने से पूरी site का color theme चुपके से बदलना नहीं चाहिए, लेकिन असलियत में ऐसा होता है
      इसलिए मैंने Radix Colors की तरफ़ जाना शुरू कर दिया है

  • रंगों के बीच saturation पूरी तरह consistent होना चाहिए, ऐसी कोई सख्त ज़रूरत तो नहीं होगी, लेकिन मेरी पसंद के हिसाब से यह थोड़ा असमान दिखता है
    गहरा पीला और orange थोड़ा ज़्यादा फीके लगते हैं
    कुल मिलाकर palette अच्छी है। खासकर “लाल” red से बचने वाली बात मुझे पसंद आई। मुझे लगता है यह ऐसा रंग है जिसे कई designers पसंद नहीं करते। आंखों के रंग और रंगों की पसंद के संबंध पर कोई study हो तो देखना चाहूंगा
    मिलती-जुलती दिशा है, लेकिन color families ज़्यादा हैं: https://www.s-ings.com/scratchpad/oklch-smooth/

    • पीला और orange वाकई मुश्किल हैं
      link के लिए शुक्रिया, और वे color families सच में बहुत अच्छी दिखती हैं