आमतौर पर साइट या ऐप में इस्तेमाल होने वाले रंग पहले से परिभाषित करके उपयोग किए जाते हैं.
brightness और saturation एक जैसे रखते हुए सिर्फ रंग (Hue) बदलकर color palette बनाना बहुत कठिन नहीं है.
लेकिन कई बार ऐसे मामले होते हैं जहाँ saturation और रंग एक जैसे हों, पर brightness के कई स्तर चाहिए — जैसे धीरे-धीरे फीका (उजला) होता टेक्स्ट, या धीरे-धीरे गहरा (अँधेरा) होता बैकग्राउंड.
ऐसे में टेक्स्ट, बैकग्राउंड और बॉर्डर — तीनों को अलग-अलग brightness स्तरों में घोषित करना पड़ता है. अगर 100% को सबसे उजला brightness मानें, तो सफेद पृष्ठभूमि पर 96% brightness वाला बैकग्राउंड बॉक्स दिख जाता है, लेकिन वही 96% brightness टेक्स्ट रंग पर लगाने पर वह दिखाई नहीं देता.
साथ ही, टेक्स्ट, बैकग्राउंड और बॉर्डर अलग-अलग अकेले उपयोग नहीं होते. ये तीनों संयोजन में इस्तेमाल होते हैं. हर रंग को अलग-अलग घोषित करने के बाद जब उन्हें मिलाकर देखते हैं, तो कभी बैकग्राउंड पर टेक्स्ट दिखाई नहीं देता, या बैकग्राउंड और बॉर्डर में फर्क नहीं समझ आता. इसे संतुलित करना आसान नहीं है.
अगर टेक्स्ट, बैकग्राउंड और बॉर्डर के लिए 4-4 brightness स्तर अपनाएँ, तो उनके संयोजन पूरे 64 बनते हैं. और अगर dark mode भी ध्यान में रखें, तो ऐसे 64 संयोजनों के दो सेट बनाने पड़ते हैं.
इसीलिए मैंने एक CLI टूल बनाया है जिसमें टेक्स्ट, बैकग्राउंड और बॉर्डर के रंग और brightness स्तर सेट किए जा सकते हैं, और उनके सभी संयोजन एक नज़र में देखे जा सकते हैं.
यह YAML फ़ॉर्मैट की configuration file के आधार पर CSS color code बनाता है.
यह light/dark mode में टेक्स्ट, बैकग्राउंड और बॉर्डर के सभी स्तरों को एक साथ दिखाने और उनके संयोजन आज़माने के लिए preview सुविधा देता है.
अतिरिक्त रूप से, इस प्रोग्राम को local LLM का उपयोग करके AI के साथ pair programming में विकसित किया गया है. कोड को कैसे implement करना है, यह मैंने निर्देशित किया और असली coding का मेहनती काम AI से करवाया.
local LLM environment इस प्रकार है.
- CPU: Apple M3 Max 64GB
- मुख्य coding model: Qwen3.6-35B-A3B
- वास्तव में इस्तेमाल किया गया quantized model: Qwen3.6-35B-A3B-oQ4e-fp16-mtp
- मुख्य LLM runner: oMLX
- coding agent: Pi Coding Agent
अभी कोई टिप्पणी नहीं है.