Tailwind ਰੰਗ ਜਨਰੇਟਰ

ਇੱਕ Hex ਕੋਡ ਤੋਂ Tailwind CSS ਦੇ 50–950 ਵਾਲੇ 11 ਸ਼ੇਡਾਂ ਦਾ ਪੈਲੇਟ ਅਤੇ ਸੈਟਿੰਗ ਕੋਡ ਬਣਾਓ

ਅਪਡੇਟ ਜਾਣਕਾਰੀTailwind ਰੰਗ ਜਨਰੇਟਰ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ — ਇੱਕ ਰੰਗ ਤੋਂ 11 ਸ਼ੇਡ ਅਤੇ ਸੈਟਿੰਗ ਕੋਡ ਬਣਾਓਅਪਡੇਟ ਜਾਣਕਾਰੀ ਦੇਖੋ

ਖ਼ਾਸੀਅਤਾਂ

ਇੱਕ ਰੰਗ ਤੋਂ 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;" ਵਾਂਗ ਰੰਗ ਨਾਂ ਤੇ ਪੜਾਅ ਨੂੰ ਹਾਈਫ਼ਨ ਨਾਲ ਜੋੜ ਕੇ ਵੇਰੀਏਬਲ ਨਾਂ ਵਜੋਂ ਲਿਖਿਆ ਜਾਂਦਾ ਹੈ।