Tailwind કલર જનરેશન

1 રંગના Hex કોડમાંથી Tailwind CSS ના 50થી950 ના 11 શેડ વાળા પેલેટ અને સેટિંગ કોડ બનાવો

અપડેટ માહિતીTailwind કલર જનરેટર ઉમેર્યું, એક રંગમાંથી 11 શેડ અને કોન્ફિગ કોડ બનાવોઅપડેટ માહિતી જુઓ

વિશેષતાઓ

1 રંગમાંથી 11 શેડ આપમેળે બનાવો

દાખલ કરેલા રંગને 500 તરીકે ગોઠવી, 50થી950 સુધીની ઘનતા ગણે છે

v3 અને v4 બંને ફોર્મેટ માટે સપોર્ટ

config અને @theme લખવાની રીત ટેબમાં બદલી શકાય છે

દરેક શેડનો Hex કોપી કરો

દરેક રંગ નમૂના માટેના બટનથી કલર કોડ એક પછી એક કોપી કરો

ઇનપુટ સાથે તરત પેલેટ અપડેટ

એક્ઝિક્યુટ બટનની જરૂર વગર રંગો અજમાવીને સરખામણી કરો

ઉપયોગ કરવાની રીત

આધાર રંગનો Hex દાખલ કરો

Hex કોડ દાખલ કરો અથવા ડાબી બાજુના રંગ નમૂના પર ક્લિક કરી કલર પિકરથી પસંદ કરો

જરૂર પડે તો રંગનું નામ દાખલ કરો

કોડમાં વાપરવાના રંગનું નામ અંગ્રેજી નાના અક્ષરોમાં દાખલ કરો. ખાલી રાખે તો primary વપરાશે

11 શેડના રંગ નમૂના તપાસો

50થી950 ના રંગ નમૂના અને Hex કોડ તપાસો, અને નમૂનાના કોપી બટનથી એક પછી એક કોપી કરો

આઉટપુટ ફોર્મેટ પસંદ કરી કોપી કરો

v3 અથવા v4 પસંદ કરી "કોડ કોપી કરો" દબાવીને tailwind.config.js અથવા CSS ફાઇલમાં પેસ્ટ કરો

ઉપયોગના કિસ્સાઓ

બ્રાન્ડ કલરની ઘનતા બનાવવી

બટનના હોવર કે બેકગ્રાઉન્ડ માટે વપરાતી ઘનતાઓ બ્રાન્ડ કલરના એક રંગમાંથી એકસરખી બનાવો

સ્ટાન્ડર્ડ પેલેટમાં ન હોય તેવા રંગ ઉમેરવા

Tailwind ના સ્ટાન્ડર્ડ રંગોમાં ન હોય તેવા પ્રોજેક્ટના પોતાના રંગને 11 શેડમાં સેટિંગ ફાઇલમાં ઉમેરો

v4 ના @theme સેટિંગ બનાવવા

સાઇટના મુખ્ય રંગમાંથી Tailwind v4 ના CSS વેરિયેબલ એકસાથે તૈયાર કરો

ડિઝાઇન ડ્રાફ્ટના અમલ માટેની તૈયારી

ડ્રાફ્ટમાં નિર્દિષ્ટ રંગમાંથી અમલ માટેના 11 શેડના કોડ તૈયાર કરો અને ડિઝાઇન ટૂલમાં પણ નોંધો

પાયાની જાણકારી

Tailwind ના 50થી950 શું દર્શાવે છે

Tailwind CSS ના રંગોમાં, 50 સૌથી હળવો અને 950 સૌથી ઘેરો હોય એવા 11 તબક્કાના આંકડાથી ઉજાસ દર્શાવાય છે, અને 500 તે રંગનો આધાર હોય છે. આંકડાને "bg-primary-500" કે "text-primary-700" જેવા ક્લાસ નામના છેડે લગાવીને વાપરવામાં આવે છે.

50થી300 નો તબક્કો：50થી300 નો તબક્કો બેકગ્રાઉન્ડ કલર કે હળવા ભરણ માટે વપરાતો હળવો રંગ છે, જેની ઉપર ઘેરા અક્ષરો મૂકવા પર પણ વાંચવામાં સરળ રહે છે.
600થી950 નો તબક્કો：600થી950 નો તબક્કો બટનના હોવર સમયે કે હેડિંગના અક્ષરોના રંગ માટે વપરાતો ઘેરો રંગ છે, જે સફેદ બેકગ્રાઉન્ડ પર પણ સ્પષ્ટ દેખાય છે.

v3 અને v4 માં રંગ નિર્ધારિત કરવાની રીતમાં તફાવત

Tailwind CSS ના v3 માં રંગ tailwind.config.js ની JavaScript માં નિર્ધારિત કરવામાં આવે છે, જ્યારે v4 માં CSS ફાઇલના @theme અંદર CSS વેરિયેબલ તરીકે નિર્ધારિત કરવામાં આવે છે. બંને રીતમાં, નિર્ધારિત કરેલો રંગ "bg-primary-500" જેવા જ ક્લાસ નામથી વાપરી શકાય છે.

v3 ની લખવાની રીત：v3 ની લખવાની રીત એ theme.extend.colors માં "primary: { 500: '#3B82F6' }" જેવા રંગનું નામ અને તબક્કાને અંદર ગોઠવીને લખવાનું ફોર્મેટ છે.
v4 ની લખવાની રીત：v4 ની લખવાની રીત એ @theme માં "--color-primary-500: #3B82F6;" જેવા રંગનું નામ અને તબક્કાને હાઇફનથી જોડેલા વેરિયેબલ નામથી લખવાનું ફોર્મેટ છે.