Tailwind CSS 11-स्टेप कलर पैलेट जेनरेटर और API

 (tints.dev)
5 पॉइंट द्वारा GN⁺ 2024-02-03 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • Tailwind CSS पैलेट पर काम एक single Hex value से शुरू करके 50~950 तक 11-step colors में जल्दी expand किया जा सकता है
  • बेस stop default रूप से 500 है, और जरूरत हो तो 50~950 range में किसी दूसरी position को base color के रूप में सेट किया जा सकता है
  • saturation और Hue को adjust करके सिर्फ brightness बदलने की तुलना में ज्यादा natural palette बनाया जा सकता है
  • Lightness/Luminance के minimum·maximum values और mode switching के आधार पर white·black की ओर colors का distribution बदलता है
  • API फिलहाल basic Hex value-based palette लौटाने पर केंद्रित है, और HSL adjustment options अभी उपलब्ध नहीं हैं

Tailwind CSS पैलेट बनाना

  • Palette Creator valid hexadecimal color value को initial value के रूप में लेकर Tailwind CSS के लिए 11-step palette generate करता है
  • default base stop 500 है, लेकिन 50~950 में से किसी दूसरे stop पर बदलकर desired color को palette के center में रखा जा सकता है

  • रंग adjust करने का तरीका

    • 100% Saturation colors पर Hue Shift को ऊपर-नीचे apply करके palette में variation दिया जा सकता है
    • low-saturation base colors में दोनों सिरों पर Saturation बढ़ाने से palette ज्यादा interesting बनता है
    • Minimum/Maximum Lightness या Luminance को adjust करके बाकी colors को white·black extremes तक फैलाया जा सकता है
    • Lightness और Luminance को switch करने पर extreme ends पर color distribution अलग तरह से generate होता है
    • color design principles Adam Wathan और Steve Schoger की Refactoring UI से inspired हैं, और यह book automation tools के use की सलाह नहीं देती
    • यह tool final correct answer बनाने के बजाय नया palette बनाने की शुरुआत जल्दी करने पर focus करता है

API और output का उपयोग

  • Palette API से कई palette sets लाए जा सकते हैं
  • इसे उन design tools में उपयोग किया जा सकता है जिन्हें सिर्फ एक Hex value से 50~950 palette बनाना होता है
  • वर्तमान API केवल basic Hex value-based palette लौटाता है, और HSL tweak options प्रदान नहीं करता
  • generated palette Tailwind configuration के लिए CSS में paste किए जा सकने वाले format में दिया जाता है
    • example output में @theme block के अंदर --color-yellow-50 से --color-yellow-950 तक OKLCH color variables शामिल होते हैं

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

1 टिप्पणियां

 
GN⁺ 2024-02-03
Hacker News की राय

  • अच्छा होगा अगर ऐसे टूल्स में accessibility developer experience शुरुआत से ही शामिल हो
    यानी color palette define करते समय सिर्फ color names देखकर ही समझ आ जाए कि कौन-सा combination accessible है
    उदाहरण के लिए, USWDS design system में यह समझा जा सकता है कि blue-30 on gray-80 accessible (WCAG AA) है, क्योंकि दोनों values का अंतर 50 या उससे ज़्यादा है
    मैंने इस अपेक्षाकृत सीमित अवधारणा पर पहले एक लेख लिखा था: https://darekkay.com/blog/accessible-color-palette/

    • मैंने इसे सीमित अवधारणा कहा, लेकिन मेरा मानना है कि web design में यह सबसे उच्च प्राथमिकता वाला तत्व होना चाहिए
      हर किसी को कभी न कभी स्थायी या अस्थायी disability का सामना करना पड़ता है, और Streamlit जैसे शानदार tools भी accessibility की वजह से कई बार इस्तेमाल नहीं किए जा सकते
    • Radix Colors में accessibility से जुड़े कई features built-in हैं
      https://www.radix-ui.com/colors
      मैं WorkOS में काम करता हूँ, और Radix हमारा चलाया हुआ open source project है
    • Stripe ने भी अपने accessible color system पर लिखा है: https://stripe.com/blog/accessible-color-systems
      हालांकि उस concept का इस्तेमाल करके नई palettes generate करने वाला tool मुझे अभी तक खास पता नहीं है
    • Google का काफ़ी बड़ा spec Material 3 भी इसी तरह काम करने वाला color system रखता है

  • मुझे colors के साथ खेलना पसंद है, और यह भी एक अच्छा tool है
    दूसरे अच्छे alternatives में https://adevade.github.io/color-scheme-generator/, https://colorcolor.in शामिल हैं; ये Tailwind सीधे generate नहीं करते, लेकिन काफ़ी polished हैं, और http://colormind.io, https://uicolors.app/create भी हैं

    • मैं बहुत समय से एक परफेक्ट color tool ढूँढ रहा हूँ, लेकिन अभी तक नहीं मिला
      मुझे ऐसा tool चाहिए जो इस library जितने advanced level तक काम करने दे: https://colorjs.io/
    • मैं https://github.com/ardov/huetone (https://huetone.ardov.me/) recommend करना चाहूँगा
      इसमें एक अनोखा UI है जो मैंने दूसरे similar tools में नहीं देखा, और graph के ज़रिए पूरे palette के colors का relative L/C/H देखा जा सकता है
      इससे ज़्यादा consistent palette बनाना आसान हो जाता है
    • मुझे https://huemint.com/ पसंद है
    • आजकल site loading थोड़ी slow लगती है, लेकिन मुझे लंबे समय से https://www.colourlovers.com पसंद रही है
    • अच्छी list है
      अगर मैं कुछ general color theory links और जोड़ूँ जो मैं अक्सर इस्तेमाल करता हूँ, तो https://paletton.com/ color theory-based palettes बना सकता है और पूरा color scheme generate कर सकता है
      https://medialab.github.io/iwanthue/ k-means का इस्तेमाल करके colors को अलग करता है, इसलिए graph colors और contrast बनाए रखने के लिए अच्छा है

  • मैंने हाल ही में एक बनाया है
    यह काफ़ी simpler है और इसमें मेरी personal taste ज़्यादा झलकती है, लेकिन यह Tailwind config generate कर सकता है: https://ghola.dev यह desktop या iPad पर सबसे अच्छा काम करता है
    इसे web components के रूप में कैसे बनाया, इस पर एक लंबा लेख भी है: https://www.naildrivin5.com/blog/2024/01/24/web-components-i...

    • मुझे आपका बनाया tool पसंद आया
      एक बार में सिर्फ एक color handle करने वाली चीज़ को palette generator कहना सही नहीं लगता, या कम-से-कम मैं तो यही नहीं ढूँढ रहा
      मुझे app के लिए color sets बनाने वाला palette generator चाहिए, और यह tool उस दिशा के ज़्यादा क़रीब लगता है

  • शानदार
    मैंने एक logo से शुरू करके एक मिनट से कम समय में palette बना ली, और वह पिछली बार 30 मिनट लगाकर हाथ से बनाई palette से भी बेहतर निकली

  • पसंद आया
    मैं सोच रहा हूँ कि इन colors को Figma के साथ sync करने का सबसे आसान तरीका क्या होगा
    शायद professional designers ऐसे colors generate करके उन्हें Tailwind में export करने वाला plugin इस्तेमाल करते होंगे

    • क्या आप इस तरह का plugin ढूँढ रहे हैं? https://github.com/croma-app/huehive-figma-plugin
    • Figma Tokens एक ठीक approach है
    • Figma colors को जिस तरह handle करता है, वह इतना frustrating और अजीब है कि अब मैं उस पर ध्यान ही नहीं देता
      मैंने उसे कुछ बार ठीक से इस्तेमाल करने की कोशिश की, लेकिन वह इतना manual और cumbersome लगा कि छोड़ना पड़ा

  • अच्छा tool है
    मेरे codebase में मैं एक दूसरा approach इस्तेमाल करता हूँ: CSS variables से color palette define करता हूँ, और Tailwind config को उन variables की ओर point करवा देता हूँ
    इससे runtime पर अलग-अलग color themes inject की जा सकती हैं

  • बहुत उपयोगी tool है
    मैं एक single color से color palette generate करता हूँ, फिर result को https://palettte.app में डालकर हर color को manually adjust करता हूँ

  • demo में दिखाया गया brand example देखकर जिज्ञासा हुई कि क्या लोग आम तौर पर config में इसी तरह इस्तेमाल करते हैं
    मुझे लगा था लोग base colors को modify करेंगे या primary, secondary जैसी नई variables बनाएँगे

    • मैं tints.dev का निर्माता हूँ
      brand color set मेरे ब्लॉग simeongriggs.dev में इस्तेमाल होने वाला color है, और मैंने वास्तव में इसी tool में 500 swatch value डालकर बाकी generate किए थे

  • gradients के लिए उपयोगी लगता है
    यह अजीब है कि किसी ने Paletton का ज़िक्र नहीं किया; color चुनने के लिए वही मेरा मुख्य tool है: https://paletton.com/
    अगर आप base color से शुरू करें, तो palette के भीतर आस-पास के colors के बीच जाने वाले gradients भी मिल जाते हैं
    खासकर triadic harmony और tetradic harmony उपयोगी हैं

  • मैं color shifting लागू करने का तरीका सक्रिय रूप से ढूँढ रहा था, फिर भी इसे समझने में काफ़ी समय लग गया