કલર કન્વર્ટર — ઓનલાઇન HEX, RGB, HSL કન્વર્ટર _

કલર કન્વર્શન શું છે?

તમારું બ્રાઉઝર જે પણ રંગ પ્રદર્શિત કરે છે તે આખરે sRGB ત્રિઅંક (triple) છે — લાલ, લીલો, ભૂરો ચૅનલ માટે 0 અને 255 ની વચ્ચે ત્રણ સંખ્યાઓ, વત્તા વૈકલ્પિક alpha. CSS Color Level 4 specification ઘણા ટેક્સ્ટ-પ્રારૂપ વ્યાખ્યાયિત કરે છે — જે એ જ ત્રિઅંક ને round-trip કરે — વત્તા દૃષ્ટિ-સમાન OKLCH space. આ ટૂલ તે કોઈ પણ ફૉર્મૅટ વાંચે છે, બધામાં ફેરવે છે, અને WCAG 2.1 contrast ratio બીજા રંગ સામે અહેવાલ આપે છે — જેથી તમે વિશ્વાસ સાથે સુલભ ઇન્ટરફૅસ ship કરી શકો.

કલર કન્વર્શન કેવી રીતે કામ કરે છે?

રૂપાંતર (conversion) સુ-નિર્ધારિત રેખીય અને અ-રેખીય ફેરફારો ની હારમાળા છે. દરેક પગલું તમારા બ્રાઉઝરમાં ચાલે છે — કોઈ ઇનપુટ ક્યારેય અમારા સર્વર સુધી પહોંચ્યો નથી:

1. તમારું ઇનપુટ પાર્સ થાય છે. આ સાધન આપમેળે 3, 4, 6, કે 8-અંકના HEX, કાર્યાત્મક સ્વરૂપો rgb()/rgba()/hsl()/hsla()/hsv()/hwb() ને — પછી ભલે જૂની અલ્પવિરામ વાક્યરચનામાં હોય કે આધુનિક સ્લૅશ-આલ્ફા વાક્યરચનામાં — અથવા 150 નામવાળા CSS રંગોમાંથી કોઈ પણ (rebeccapurple સહિત) ઓળખી લે છે.
2. ઓળખ-પ્રાપ્ત (parsed) રંગ canonical sRGB માં સ્વ-સ્વરૂપ (normalise) થઈ જાય છે — ચાર float {r, g, b, a} 0–1 ની સીમામાં. આ જ એકમાત્ર સત્ય-સ્ત્રોત છે — જેમાંથી દરેક આઉટપુટ-ફૉર્મૅટ નિર્ભૂત (derive) થઈ જાય.
3. HEX દરેક ચૅનલને તેના 0–255 બાઇટ મૂલ્ય પર પૂર્ણાંકિત કરીને અને hex અંકોને જોડીને મળે છે. RGB / RGBA એ જ બાઇટ્સ છાપે છે. HSL અને HSV પ્રમાણભૂત W3C નળાકાર-યામ એલ્ગોરિધમ લાગુ કરે છે; HWB રંગછટા HSV માંથી, શ્વેતતા min(r, g, b) માંથી, અને કૃષ્ણતા 1 - max(r, g, b) માંથી મેળવે છે.
4. CMYK એક સાદો અંદાજ છે — k = 1 - max(r, g, b), પછી શેષ ચૅનલોમાંથી c, m, y. તે સ્ક્રીન પૂર્વાવલોકન માટે યોગ્ય છે પણ છાપકામ માટે નહીં: સાચા CMYK આઉટપુટ માટે એક ICC પ્રોફાઇલ જોઈએ જેને આ સાધન જાણીજોઈને એમ્બેડ કરતું નથી.
5. OKLCH css-color-4 ના આગળના માર્ગને અનુસરે છે: sRGB ને રેખીય બનાવાય છે, LMS મેટ્રિક્સ વડે ગુણાય છે, ઘનમૂળ લેવાય છે, LMS-થી-OKLab મેટ્રિક્સ વડે ગુણાય છે, અને છેવટે લંબચોરસ OKLab માંથી ધ્રુવીય OKLCH માં રૂપાંતરિત થાય છે. OKLCH સંવેદનાત્મક રીતે એકસમાન છે, જે તેને એવા પૅલેટ ડિઝાઇન કરવા માટે યોગ્ય જગ્યા બનાવે છે જે માનવ આંખને સંતુલિત દેખાય.

આ કલર કન્વર્ટરનો ઉપયોગ શા માટે કરવો?

• ગોપનીયતા: દરેક રૂપાંતર તમારા બ્રાઉઝરમાં સાદા JavaScript વાપરીને ચાલે છે. તમે પેસ્ટ કરેલો રંગ ક્યારેય તમારા ઉપકરણથી બહાર જતો નથી, જે અપ્રકાશિત બ્રાન્ડ કામ, આંતરિક ડિઝાઇન સિસ્ટમ, અને NDA હેઠળના ક્લાયન્ટ મૉકઅપ માટે મહત્ત્વનું છે.
• ડિઝાઇનર-થી-ડેવલપર સોંપણી: Figma માંથી HEX પેસ્ટ કરો અને Tailwind કૉન્ફિગ માટે rgb() સ્ટ્રિંગ, CSS કસ્ટમ પ્રોપર્ટી માટે hsl() સ્ટ્રિંગ, કે આધુનિક પૅલેટ માટે oklch() સ્ટ્રિંગ પાછી વાંચો — દરેક ફોર્મેટ એક જ જગ્યાએ, ટૅબ વચ્ચે કૉપી-પેસ્ટ કર્યા વગર.
• WCAG ચોકસાઈ: કૉન્ટ્રાસ્ટ ચેકર ચોક્કસ WCAG 2.1 સાપેક્ષ-પ્રકાશિતા સૂત્ર અને સામાન્ય તથા મોટા લખાણ માટે પ્રકાશિત AA (4.5 / 3.0) અને AAA (7.0 / 4.5) મર્યાદાઓ વાપરે છે. અહેવાલ થયેલ ગુણોત્તર મેન્યુઅલ કૅલ્ક્યુલેટરો સાથે 0.01 ની અંદર મેળ ખાય છે.
• ડાર્ક-મોડ અને પૅલેટ વ્યુત્પત્તિ: HSL અને OKLCH તેજસ્વિતાને એક જ ચૅનલ તરીકે ખુલ્લી પાડે છે, એટલે મેળ ખાતા ડાર્ક-મોડ ટોકન મેળવવા કે એક જ બીજમાંથી 10-પગથિયાંનો પૅલેટ ઢાળ બનાવવા માટે બ્રાન્ડ રંગને તેજસ્વિતા-અક્ષ પર ઉપર કે નીચે ખસેડવાનું સહેલું બની જાય છે.

Color conversion ના સામાન્ય ઉપયોગ?

રંગ રૂપાંતર વેબ વિકાસ, ડિઝાઇન, અને સુલભતા કામમાં બધે દેખાય છે:

• ડિઝાઇન સિસ્ટમ: એક બ્રાન્ડ HEX ને CSS કસ્ટમ-પ્રોપર્ટી માપક્રમ માટે મેળ ખાતા HSL અને OKLCH ટોકનમાં રૂપાંતરિત કરવું, પછી ચકાસવું કે દરેક ટોકન સંયોજન પૃષ્ઠ પાર્શ્વભૂમિ સામે WCAG AA પાસ કરે છે.
• સુલભતા ઑડિટ: કોઈ સાચી પ્રોડક્ટ સ્ક્રીનમાંથી અગ્રભૂમિ અને પાર્શ્વભૂમિની જોડ પેસ્ટ કરવી અને એક જ નજરમાં સામાન્ય-વજન અને મોટા-વજન બંને લખાણ માટે કૉન્ટ્રાસ્ટ ગુણોત્તર તથા AA/AAA નિર્ણયો વાંચવા.
• ક્રૉસ-ટૂલ રાઉન્ડ-ટ્રિપ: સ્ક્રીનશૉટ પિકરમાંથી રંગ ખેંચવો (HEX), અહીં પેસ્ટ કરવો, અને hsl() કે oklch() સ્ટ્રિંગને સીધી Tailwind, Figma ટોકન, કે CSS-in-JS થીમમાં કૉપી કરવી.

કલર કન્વર્શનનું ઉદાહરણ કેવું દેખાય છે?

પ્રખ્યાત rebeccapurple લો. નામવાળા-રંગની શોધ તેને #663399 પર ઉકેલે છે. RGB રૂપાંતર rgb(102, 51, 153) આપે છે. HSL રૂપાંતર hsl(270, 50%, 40%) આપે છે — એક જાંબલી રંગછટા, અડધી સંતૃપ્ત, ચાર-દશાંશ તેજસ્વી. એ રંગને શુદ્ધ સફેદ સામે કૉન્ટ્રાસ્ટ સાધનથી ચકાસતાં લગભગ 7.39 નો ગુણોત્તર મળે છે, જે સામાન્ય લખાણ માટે AAA (7.0) અને મોટા લખાણ માટે AAA (4.5) પાસ કરી દે છે — એક મજબૂત, સુલભ અગ્રભૂમિ પસંદગી. #663399 ને RGB → HSL → RGB → HEX દ્વારા રાઉન્ડ-ટ્રિપ કરતાં મૂળ સ્ટ્રિંગ બરાબર એ જ રીતે, બાઇટ-દર-બાઇટ પાછી મળે છે.

આ converter ને કોડમાં, ડિઝાઇન ફાઇલોમાં, અથવા screenshot માં મળતા કોઈ પણ રંગ માટે ઝડપી સંદર્ભ (રેફરન્સ) તરીકે વાપરો — અને contrast checker ને ship કરતાં પહેલાં સવાલ જાંચ (સેનિટી check) તરીકે. બધું સ્થાનીક (લોકલ્લી) ચાલે છે, કાંઈ લોગ થતું નથી, અને રૂપાન્તર-ગણિત પ્રકાશિત W3C અને WCAG વિનિર્દેશો (પ્રકાશન specifications) ને અનુસરે છે — જેથી સંખ્યાઓ એ જ છે જે તમારું ઓડિટ ટૂલ અથવા બ્રાઉઝર devtools અહેવાલ આપશે.