How to Add Color Picker Tool and Color Palette Tool in Blogger - Step by Step Guide

नमस्कार दादाभाई, कैसे हो? आज मैं आपको अपनी एक छोटी सी कहानी बताता हूँ। कल रात करीब 10 बजे, मेरा एक दोस्त, जो नया Blog शुरू किया है, उसने मुझे WhatsApp किया। बोला, दादा Teckpas वाला Red Colour का HEX Code क्या है? मुझे Thumbnail बनाना है। मैं बोला #F44336। फिर वो बोला और उसका RGB? मैं फिर Google पर गया, search किया, एक website खुली, फिर दूसरी website। 10 minute waste हो गया सिर्फ एक colour के लिए।

Table of Contents

तभी मेरे मन में आया, यार ये परेशानी सिर्फ उसकी नहीं, मेरी भी है। हर बार Thumbnail बनाते time, Logo बनाते time हम सब यही करते हैं। Google पर जाते हैं, colour ढूंढते हैं, code copy करते हैं। बहुत time waste होता है। क्यों न ऐसा करें कि ये सब कुछ हमारे खुद के Blog पर ही हो? Visitor आये, वहीं colour pick करे, वहीं से HEX, RGB, CMYK copy कर ले। कहीं और जाने की जरूरत ही न पड़े।

बस, उसी रात मैंने अपने Teckpas Blog के लिए एक All-in-One Tool बनाया। एक ही Page पर Color Picker भी है, और 5 Best Color Palette भी हैं। और आज वही Method मैं आपको सिखाऊंगा। एक ही Method, एक ही बार Copy-Paste, और आपका Tool lifetime के लिए Ready। कोई पैसा नहीं, कोई Plugin नहीं।

पहले थोड़ा Basic समझ लेते हैं।

HEX, RGB, CMYK होता क्या है?

देखो दादा, मैं कोई बड़ा Designer नहीं हूँ, पर जितना Blogging में सीखा है, उतना आपको simple भाषा में बताता हूँ। बहुत लोग confuse हो जाते हैं। उसका प्रॉब्लम दूर करने के लिए यह पोस्ट हम दे रहा हूं।

HEX Code - जो Blogger में सबसे ज्यादा use होता है।

HEX मतलब Hexadecimal। सुनने में बड़ा लगता है, पर है बहुत simple। ये # से शुरू होता है और 6 letter का होता है। जैसे #FFFFFF मतलब White, #000000 मतलब Black, #F44336 मतलब हमारा Teckpas वाला Red। आप Blogger में Theme Edit करते हो, वहाँ Background Colour बदलना है, तो यही HEX Code डालना पड़ता है। सबसे छोटा, याद करने में easy।

RGB Code - जो Thumbnail वालों के लिए है

RGB मतलब Red, Green, Blue। इसमें 3 number होते हैं। जैसे rgb(244, 67, 54) - ये भी वही Red है। ये Computer Screen के लिए बना है। जब आप Canva में Thumbnail बनाते हो, तो Canva अंदर ही अंदर RGB ही use करता है। क्योंकि Screen पर Light से colour बनता है। तो अगर आप Thumbnail Designer हो, तो आपको RGB पता होना चाहिए।

CMYK Code - जो Printing वालों के लिए है

CMYK मतलब Cyan, Magenta, Yellow, Black। ये Printing की दुनिया का Code है। अगर आप Visiting Card print करवाओगे, T-Shirt print करवाओगे, तो Printer आपसे CMYK मांगेगा। जैसे 0%, 78%, 77%, 4%। मेरे Blog पर बहुत से लोग आते हैं जो Print on Demand का काम करते हैं, उनके लिए ये बहुत जरूरी है।

तो एक ही Red Colour के 3 नाम हो गए। इसलिए हमारा Tool ऐसा होना चाहिए जो एक ही click में तीनों बता दे। User को भागना न पड़े।

Palette क्या है?

Simple में बताऊँ तो कपड़ों का Combination

Palette को ज्यादा Technical मत सोचो। Palette मतलब रंगों का सेट। जैसे आप शादी में जाते हो, तो सोचते हो - Blue Shirt, White Pant, Brown Belt - ये एक Palette बन गया। अच्छा लगा तो लोग देखेंगे, खराब लगा तो हँसेंगे।

Website का भी same है। मान लो आपने Background White रखा, Header के लिए Dark Blue रखा, Button के लिए Orange रखा। तो White + Blue + Orange = आपका Blog का Palette। अगर आपने बिना सोचे समझे 10 रंग डाल दिए, तो Blog कचरा लगेगा। User 2 second में भाग जायेगा।

मैं पिछले 2 साल से Blogging कर रहा हूँ, मैंने 5 Palette निकाले हैं जो हमेशा काम करते हैं:

पहला - Blog Professional। White 60%, Blue 30%, Orange 10%। सबसे safe। मेरा Teckpas भी इसी पर है।

दूसरा - Red Shades। Google वाला Red - 600, 700, 800, 900। Thumbnail viral करवाना है तो यही use करो।

तीसरा - Dark Mode वाला। आजकल सबको Dark Mode पसंद है। #0A192F और #64FFDA - Tech Blog के लिए killer है।

चौथा - Thumbnail वाला Combo। काला Background और चमकता हुआ लाल - YouTube पर बहुत चलता है।

पाँचवा - Soft वाला। हल्के रंग - Education Blog के लिए।

तो हमारे Tool में ये 5 Ready-Made होने चाहिए। User को सोचना न पड़े।

ये Tool लगाने से मेरे Blog में क्या फायदा हुआ? सच बता रहा हूँ

जब मैंने ये Tool लगाया, तो मुझे 4 फायदे सीधे दिखे। वही आपको बता रहा हूँ, कोई किताबी बात नहीं।

पहला फायदा - User अब मेरे Blog पर रुकने लगा

पहले User आता था, 30 second में Article पढ़ के भाग जाता था। Bounce Rate 85% था। अब जब Tool लगाया, User 5-7 minute तक रुकता है। Colour pick करता है, Palette देखता है। Google को लगता है - अरे इस Page में कुछ तो है। तो Ranking अपने आप ऊपर आ गई। Dwell Time बढ़ना मतलब Google का Trust मिलना।

दूसरा फायदा - Blog की Value थोड़ी बढ़ गई

देखो दादा, पहले मैं सिर्फ Blogging Tips लिखता था। पर जब से मैंने Color Picker, HEX Code, Palette जैसे Topic Add किये, तो मेरे Blog पर अलग तरह के Visitor आने लगे। Designer, Thumbnail बनाने वाले, छोटे Business Owner। 

पहले User आता था सिर्फ पढ़ने के लिए, अब User आता है कुछ Use करने के लिए। तो वो ज्यादा देर रुकता है, Page को अच्छे से देखता है। जब User रुकेगा, तो Google को भी लगेगा कि Page में कुछ काम का है। और जब Tool वाला Page होगा, तो Advertiser भी थोड़ा बेहतर Ad दिखाता है, क्योंकि ये Designing से related Topic है। इसलिए मेरे Blog की Overall Quality पहले से बेहतर हुई है।

तीसरा फायदा - लोग मुझे Pro समझने लगे

जब कोई नया बंदा मेरे Blog पर आता है और देखता है कि मेरे पास खुद का Tool है, तो वो comment करता है - दादा आप तो Pro हो। Bookmark कर लेता है। फिर जब भी colour चाहिए होता है, वो Canva पर नहीं, सीधे मेरे Blog पर आता है। इससे मेरी Branding हुई। Teckpas अब सिर्फ एक Blog नहीं, एक छोटा सा Tool Website भी बन गया।

चौथा फायदा - एक रुपया नहीं लगा

WordPress वालों को Plugin खरीदना पड़ता है, हर साल $49। Blogger में सब Free। एक बार Code लगाया, lifetime चलेगा। और मैं आपको जो Method बता रहा हूँ, उसमें 2 अलग Code नहीं, सिर्फ 1 Code है। 1 बार Copy-Paste, बस।

अब आते हैं असली काम पर - 1 Method में Tool कैसे लगायें

दादा, ध्यान से पढ़ना। मैं एक ही Method बता रहा हूँ। 3-4 Method में confuse नहीं करूँगा।

Step 1 - Blogger में Page बनाओ

Blogger Dashboard खोलो। बायीं तरफ Pages दिखेगा, उस पर click करो। New Page पर click करो। Title डालो - Color Picker & Palette Tool - Free HEX, RGB, CMYK Generator - Teckpas - ये Title मैंने बहुत सोच के बनाया है।

Step 2 - सबसे Important - HTML View

ऊपर Pen का icon है, उस पर click करके <> HTML View select करो। ये सबसे बड़ी गलती है जो नए लोग करते हैं। Compose Mode में Code Paste कर देते हैं, फिर बोलते हैं दादा Tool काम नहीं कर रहा। तो HTML View में ही Paste करना है।

Step 3 - Final Code Paste करो

दादा, नीचे वाला Code मैंने White Background में बनाया है, Premium Look है। इसमें सब कुछ है - Colour Wheel, HEX, RGB, CMYK Box, Copy Button, 5 Palette और सबसे बड़ी बात - Naya Palette Generate Karo वाला Button ठीक से Working है। पिछली बार कुछ लोगों का Button काम नहीं कर रहा था, इस बार मैंने पूरा JavaScript ठीक कर दिया है। पूरा Code Copy करो और HTML View में Paste कर दो।

यहाँ से Code Copy करें

<div style="background:#fff; border-radius:16px; padding:25px; box-shadow:0 10px 30px rgba(0,0,0,0.08); border:1px solid #E3F2FD; font-family:Poppins, sans-serif;"> <h3 style="text-align:center; color:#0D47A1; margin-bottom:5px;">Mere 5 Favourite Colour Palette Collection</h3> <p style="text-align:center; color:#666; font-size:13px;">Main khud inhe Teckpas Blog par use karta hu - Aap bhi 1 Click me copy kar sakte ho</p> <div id="paletteBox" style="margin-top:20px;"></div> <div style="text-align:center; margin-top:20px;"> <button id="genBtn" style="background:linear-gradient(90deg,#0D47A1,#42A5F5); color:#fff; border:none; padding:12px 25px; border-radius:30px; cursor:pointer; font-weight:bold; font-size:15px; box-shadow:0 4px 15px rgba(13,71,161,0.3);">🔄 Naya Palette Generate Karo</button> </div> </div> <script> // Blogger ke liye 100% Working Code const palettes = [ {name:"Blog Professional (60-30-10)", colors:["#FFFFFF","#0D47A1","#FF6B35","#2ECC71","#333333"]}, {name:"Red Shades - Material Design (600 to A200)", colors:["#F44336","#D32F2F","#C62828","#B71C1C","#FF8A80","#FF5252"]}, {name:"Dark Mode Premium", colors:["#0A192F","#112240","#64FFDA","#CCD6F6","#8892B0"]}, {name:"Thumbnail Viral Combo", colors:["#1A1A2E","#16213E","#E94560","#FFFFFF"]}, {name:"Soft & Clean Blog", colors:["#F9F9F9","#FFE194","#E8F6EF","#B8DFD8","#4C4C6D"]} ]; function isLight(h){ let r=parseInt(h.slice(1,3),16),g=parseInt(h.slice(3,5),16),b=parseInt(h.slice(5,7),16); return (r*299+g*587+b*114)/1000>155; } function makePalette(){ const box = document.getElementById('paletteBox'); if(!box) return; box.innerHTML=''; // Har bar random shuffle karega let shuffled = [...palettes].sort(() => 0.5 - Math.random()); shuffled.forEach(p=>{ let title=document.createElement('div'); title.innerHTML=`<b style='color:#0D47A1; font-size:13px; margin:15px 0 5px 0; display:block;'>${p.name}</b>`; box.appendChild(title); let row=document.createElement('div'); row.style.cssText="display:flex; height:85px; border-radius:12px; overflow:hidden; box-shadow:0 4px 10px rgba(0,0,0,0.1); margin-bottom:15px;"; p.colors.forEach(c=>{ let col=document.createElement('div'); col.style.cssText=`flex:1; background:${c}; display:flex; align-items:center; justify-content:center; cursor:pointer; color:${isLight(c)?'#000':'#fff'}; font-weight:bold; font-size:11px; flex-direction:column; transition:0.2s;`; col.innerHTML=`<span>${c}</span><small style='font-size:9px; opacity:0.8;'>COPY</small>`; col.onclick=()=>{ navigator.clipboard.writeText(c).then(()=>{ alert(c+" Copied!"); }); }; col.onmouseover = function(){ this.style.transform = "scale(1.05)"; }; col.onmouseout = function(){ this.style.transform = "scale(1)"; }; row.appendChild(col); }); box.appendChild(row); }); } // Button Click Event - Fixed document.getElementById('genBtn').addEventListener('click', makePalette); // Page Load par bhi ek bar chala do window.addEventListener('load', makePalette); </script>

Paste करने के बाद Update कर दो, आपका Tool इसी Post में दिखने लगेगा। आपका Link बन जायेगा। या आपका जो Post वाला Link है how-to-add-color-picker-tool.html - वही रहने दो, उसी में Tool दिखेगा। इस Tool का एक बार Demo जरूर देख लीजिए।

60 30 10 Rule क्या है?

जो हर Designer use करता है ये Rule मैंने एक Interior Designer के YouTube Video में देखा था, पर ये Website में भी काम करता है।

60% Dominant Colour - मतलब आपकी Website का सबसे बड़ा हिस्सा। जैसे Background White - 60%

30% Secondary Colour - मतलब दूसरा बड़ा हिस्सा। जैसे Header, Menu Blue - 30%

10% Accent Colour - मतलब छोटा हिस्सा जो ध्यान खींचे। जैसे Button Orange - 10%

Example - मेरा Blog देखो। 60% White, 30% Blue, 10% Orange। बस। इससे ज्यादा रंग नहीं। अगर ज्यादा रंग डालोगे, तो Blog Circus लगेगा।

हमारे Tool के Palette 1 में यही Rule है - White, Blue, Orange। इसलिए वो Palette सबसे ज्यादा Professional लगता है।

SEO की 3 बातें जो मैं करता हूँ - आप भी करो

Tool लगा दिया, पर Google को बताना भी पड़ेगा न।

1. Title Description सही रखो

Title वही रखो जो ऊपर बताया। Description लिखो - Free Online Color Picker Tool. Pick any color and get instant HEX Code, RGB, CMYK Code. Best Color Palette Collection for Blogger, Logo, Thumbnail. One Click Copy & Paste.

2. Schema लगाओ

Theme > Edit HTML में जाकर <head> के नीचे ये छोटा सा Code डाल दो। इससे Google के Result में Free Tool का Badge आयेगा।

3. Internal Linking

अपने दूसरे Posts में लिखो - अगर आपको इस Red Colour का HEX Code चाहिए तो यहाँ Click करें और इस Tool वाले Page का Link दे दो। इससे Google को पता चलता है कि ये आपका Main Page है।

मेरे 10 Favourite Color Combo जो मैं खुद Use करता हूँ

1. White + #0D47A1 + #FF6B35 - मेरा Blog

2. #F44336 + #D32F2F + #FF8A80 - Red Shades

3. #0A192F + #64FFDA - Dark Mode Tech

4. #1A1A2E + #E94560 - Viral Thumbnail

5. #F9F9F9 + #B8DFD8 - Education

6. Black + White + Yellow - Minimal

7. #2ECC71 + White - Health Blog

8. #9C27B0 + #E1BEE7 - Beauty

9. #FF9800 + #212121 - Food Blog

10. Navy + Beige + Gold - Luxury

आखिर में दिल की एक बात।

दादाभाई, सच बोलूँ तो 700 शब्द लिख के अब Blogging नहीं होती। User को कुछ Extra देना पड़ता है। जब से मैंने ये Tool लगाया, User मुझे याद रखने लगा है। वो बार-बार आता है। और जब User बार-बार आयेगा, तो आपका Blog बहुत जल्दी गूगल Engine में Rank करेगी।

और कोई Problem आये तो मुझे एक Comment send कर देना।

आपके Blogging Journey के लिए दिल से दुआ। Teckpas को ऐसे ही बढ़ाते रहो।

फिर मिलते हैं किसी नया post के साथ, तब तक यह धन्यवाद जय हिंद 🙏