ਕਲਰ ਪਿਕਰ
ਰੰਗ ਚੁਣੋ ਅਤੇ HEX, RGB, HSL ਮੁੱਲ ਪਾਓ।
ਕਲਰ ਪਿਕਰ ਬਾਰੇ
GuruAlpha ਕਲਰ ਪਿਕਰ ਤੁਹਾਨੂੰ ਕਿਸੇ ਵੀ ਰੰਗ ਨੂੰ ਇੱਕ ਇੰਟਰਐਕਟਿਵ ਸਪੈਕਟ੍ਰਮ ਤੋਂ ਚੁਣਨ ਅਤੇ ਤੁਰੰਤ ਉਸ ਦੀਆਂ HEX, RGB ਅਤੇ HSL ਕੀਮਤਾਂ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਸਹੂਲਤ ਦਿੰਦਾ ਹੈ। ਰੰਗ ਚੁਣਨ ਲਈ ਕਲਰ ਗ੍ਰੇਡੀਐਂਟ 'ਤੇ ਕਿਤੇ ਵੀ ਕਲਿੱਕ ਕਰੋ, ਸਲਾਈਡਰਾਂ ਨਾਲ ਸੈਚੂਰੇਸ਼ਨ ਅਤੇ ਲਾਈਟਨੈੱਸ ਵਿਵਸਥਿਤ ਕਰੋ, ਜਾਂ ਕਿਸੇ ਜਾਣੇ-ਪਛਾਣੇ ਕਲਰ ਕੋਡ ਨੂੰ ਦਾਖਲ ਕਰ ਕੇ ਉਸ ਦੀ ਝਲਕ ਵੇਖੋ। ਇਹ ਵੈੱਬ ਡਿਜ਼ਾਈਨਰਾਂ, ਗ੍ਰਾਫਿਕ ਕਲਾਕਾਰਾਂ ਅਤੇ ਡਿਵੈਲਪਰਾਂ ਲਈ ਇੱਕ ਜ਼ਰੂਰੀ ਟੂਲ ਹੈ ਜੋ ਰੋਜ਼ ਰੰਗਾਂ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ।
ਰੰਗ ਚੁਣਨਾ ਡਿਜ਼ਾਈਨ ਵਰਕਫਲੋ ਵਿੱਚ ਇੱਕ ਬੁਨਿਆਦੀ ਕੰਮ ਹੈ। ਭਾਵੇਂ ਤੁਸੀਂ ਕੋਈ ਵੈੱਬਸਾਈਟ ਬਣਾ ਰਹੇ ਹੋਵੋ, ਲੋਗੋ ਡਿਜ਼ਾਈਨ ਕਰ ਰਹੇ ਹੋਵੋ, ਮਾਰਕੀਟਿੰਗ ਸਮੱਗਰੀ ਤਿਆਰ ਕਰ ਰਹੇ ਹੋਵੋ ਜਾਂ ਫੋਟੋਆਂ ਸੰਪਾਦਿਤ ਕਰ ਰਹੇ ਹੋਵੋ, ਤੁਹਾਨੂੰ ਸਟੀਕ ਰੰਗ ਚੁਣਨ ਅਤੇ CSS, ਡਿਜ਼ਾਈਨ ਸਾਫਟਵੇਅਰ ਜਾਂ ਪ੍ਰਿੰਟ ਸਪੈਸੀਫਿਕੇਸ਼ਨਾਂ ਵਿੱਚ ਵਰਤੋਂ ਲਈ ਉਹਨਾਂ ਦੀਆਂ ਤਕਨੀਕੀ ਕੀਮਤਾਂ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਕਲਰ ਪਿਕਰ ਤਿੰਨੇ ਵੱਡੇ ਕਲਰ ਫਾਰਮੈਟ ਇੱਕੋ ਸਮੇਂ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਵੱਖਰੇ ਕਨਵਰਜ਼ਨ ਟੂਲਾਂ ਦੀ ਲੋੜ ਖਤਮ ਹੋ ਜਾਂਦੀ ਹੈ।
ਇੰਟਰਐਕਟਿਵ ਕਲਰ ਸਪੈਕਟ੍ਰਮ ਪੂਰੀ ਦਿੱਖ ਵਾਲੀ ਰੰਗ ਰੇਂਜ ਨੂੰ ਦੋ-ਪਾਸਾਰੀ ਗ੍ਰੇਡੀਐਂਟ ਵਿੱਚ ਵਿਖਾਉਂਦਾ ਹੈ। ਹਰੀਜ਼ਟਲ ਧੁਰਾ ਹਿਊ (ਕਲਰ ਵੀਲ 'ਤੇ 0-360 ਡਿਗਰੀ) ਅਤੇ ਵਰਟੀਕਲ ਧੁਰਾ ਸੈਚੂਰੇਸ਼ਨ ਦੀ ਨੁਮਾਇੰਦਗੀ ਕਰਦਾ ਹੈ। ਇੱਕ ਵੱਖਰਾ ਲਾਈਟਨੈੱਸ ਸਲਾਈਡਰ ਇਹ ਕੰਟਰੋਲ ਕਰਦਾ ਹੈ ਕਿ ਚੁਣਿਆ ਹੋਇਆ ਰੰਗ ਕਿੰਨਾ ਚਮਕਦਾਰ ਜਾਂ ਗੂੜ੍ਹਾ ਹੈ। ਇਹ ਸਹਿਜ ਇੰਟਰਫੇਸ ਤੁਹਾਨੂੰ ਬਿਲਕੁਲ ਉਹੀ ਰੰਗ ਦ੍ਰਿਸ਼ਟੀਗਤ ਢੰਗ ਨਾਲ ਲੱਭਣ ਦਿੰਦਾ ਹੈ ਜੋ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ, ਫਿਰ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਵਰਤੋਂ ਲਈ ਉਸ ਦੀਆਂ ਕੀਮਤਾਂ ਕਾਪੀ ਕਰਨ ਦਿੰਦਾ ਹੈ।
ਟੂਲ ਵਿੱਚ ਆਮ ਵਰਤੇ ਜਾਣ ਵਾਲੇ ਰੰਗਾਂ ਦਾ ਇੱਕ ਪੈਲਿਟ ਵੀ ਸ਼ਾਮਲ ਹੈ ਜੋ ਸ਼੍ਰੇਣੀ ਅਨੁਸਾਰ ਵਿਵਸਥਿਤ ਹੈ: ਵੈੱਬ-ਸੇਫ ਰੰਗ, Material Design ਰੰਗ, Tailwind CSS ਰੰਗ ਅਤੇ Pantone ਹਵਾਲਾ ਰੰਗ। ਕਿਸੇ ਵੀ ਪ੍ਰੀਸੈੱਟ 'ਤੇ ਕਲਿੱਕ ਕਰੋ ਤਾਂ ਜੋ ਉਹ ਤੁਰੰਤ ਪਿਕਰ ਵਿੱਚ ਲੋਡ ਹੋ ਜਾਵੇ। ਇਹ ਪ੍ਰੀਸੈੱਟ ਲਾਇਬ੍ਰੇਰੀ ਆਮ ਵਰਤੋਂ ਦੇ ਮਾਮਲਿਆਂ ਲਈ ਰੰਗ ਚੋਣ ਦੀ ਗਤੀ ਵਧਾਉਂਦੀ ਹੈ ਅਤੇ ਸਥਾਪਿਤ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮਾਂ ਨਾਲ ਇਕਸਾਰਤਾ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ।
ਕੰਟ੍ਰਾਸਟ ਚੈਕਰ ਇੰਟਿਗ੍ਰੇਸ਼ਨ ਚੁਣੇ ਹੋਏ ਰੰਗ ਦਾ ਚਿੱਟੇ ਅਤੇ ਕਾਲੇ ਪਿਛੋਕੜ ਦੇ ਮੁਕਾਬਲੇ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਵਿਖਾਉਂਦਾ ਹੈ, ਜੋ ਤੁਹਾਨੂੰ WCAG ਪਹੁੰਚਯੋਗਤਾ ਮਿਆਰਾਂ ਨੂੰ ਪੂਰਾ ਕਰਨ ਵਾਲੇ ਰੰਗ ਚੁਣਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ। ਆਮ ਟੈਕਸਟ (WCAG AA) ਲਈ ਘੱਟੋ-ਘੱਟ 4.5:1 ਅਤੇ ਵਧੀਆ ਪਹੁੰਚਯੋਗਤਾ (WCAG AAA) ਲਈ 7:1 ਦਾ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਲੋੜੀਂਦਾ ਹੈ। ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਪ੍ਰੋਡਕਸ਼ਨ ਤੱਕ ਪਹੁੰਚਣ ਤੋਂ ਪਹਿਲਾਂ ਪਹੁੰਚਯੋਗਤਾ ਸਮੱਸਿਆਵਾਂ ਤੋਂ ਬਚਾਉਂਦੀ ਹੈ।
ਕਲਰ ਪਿਕਰ ਦੀਆਂ ਮੁੱਖ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ
- ਹਿਊ, ਸੈਚੂਰੇਸ਼ਨ ਅਤੇ ਲਾਈਟਨੈੱਸ ਕੰਟਰੋਲ ਨਾਲ ਇੰਟਰਐਕਟਿਵ ਕਲਰ ਸਪੈਕਟ੍ਰਮ
- HEX, RGB ਅਤੇ HSL ਕੀਮਤਾਂ ਇੱਕੋ ਸਮੇਂ ਪ੍ਰਦਰਸ਼ਿਤ
- ਪ੍ਰੀਸੈੱਟ ਕਲਰ ਪੈਲਿਟ: ਵੈੱਬ-ਸੇਫ, Material Design, Tailwind, Pantone
- WCAG ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਚੈਕਰ
- ਕਿਸੇ ਵੀ ਫਾਰਮੈਟ ਵਿੱਚ ਇੱਕ ਕਲਿੱਕ ਨਾਲ ਕੀਮਤਾਂ ਕਾਪੀ ਕਰੋ
- ਹਾਲੀਆ ਰੰਗਾਂ ਦਾ ਇਤਿਹਾਸ
- ਸਾਰੇ ਡਿਵਾਈਸਾਂ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ
- ਸਾਈਨ-ਅੱਪ ਦੀ ਲੋੜ ਨਹੀਂ
ਕਲਰ ਪਿਕਰ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ
- GuruAlpha 'ਤੇ ਕਲਰ ਪਿਕਰ ਖੋਲ੍ਹੋ।
- ਹਿਊ ਅਤੇ ਸੈਚੂਰੇਸ਼ਨ ਚੁਣਨ ਲਈ ਕਲਰ ਸਪੈਕਟ੍ਰਮ 'ਤੇ ਕਲਿੱਕ ਕਰੋ।
- ਚਮਕ ਨੂੰ ਬਾਰੀਕੀ ਨਾਲ ਵਿਵਸਥਿਤ ਕਰਨ ਲਈ ਲਾਈਟਨੈੱਸ ਸਲਾਈਡਰ ਵਰਤੋ।
- HEX, RGB ਅਤੇ HSL ਕੀਮਤਾਂ ਨੂੰ ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ ਵੇਖੋ।
- ਜਾਂ ਕਿਸੇ ਵੀ ਫਾਰਮੈਟ ਵਿੱਚ ਜਾਣਿਆ-ਪਛਾਣਿਆ ਕਲਰ ਕੋਡ ਦਾਖਲ ਕਰ ਕੇ ਉਸ ਦੀ ਝਲਕ ਵੇਖੋ।
- ਪਹੁੰਚਯੋਗਤਾ ਪਾਲਣਾ ਲਈ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਜਾਂਚੋ।
- ਆਪਣੇ ਪਸੰਦੀਦਾ ਫਾਰਮੈਟ ਵਿੱਚ ਕਲਰ ਕੀਮਤ ਕਾਪੀ ਕਰੋ।
ਕਲਰ ਪਿਕਰ ਵਰਤਣ ਦੇ ਸੁਝਾਅ
- ਆਪਣੇ ਚੁਣੇ ਹੋਏ ਪਿਛੋਕੜ 'ਤੇ ਟੈਕਸਟ ਦੀ ਪੜ੍ਹਨਯੋਗਤਾ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕੰਟ੍ਰਾਸਟ ਚੈਕਰ ਵਰਤੋ।
- ਪ੍ਰੀਸੈੱਟ ਸਮਾਂ ਬਚਾਉਂਦੇ ਹਨ — Material Design ਜਾਂ Tailwind ਰੰਗ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ ਅਤੇ ਵਿਵਸਥਿਤ ਕਰੋ।
- ਰੰਗ ਵਿਵਸਥਿਤ ਕਰਨ ਲਈ HSL ਸਭ ਤੋਂ ਸਹਿਜ ਫਾਰਮੈਟ ਹੈ — ਹਿਊ, ਸੈਚੂਰੇਸ਼ਨ ਜਾਂ ਲਾਈਟਨੈੱਸ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਬਦਲੋ।
- ਹਾਲੀਆ ਰੰਗਾਂ ਦਾ ਇਤਿਹਾਸ ਤੁਹਾਨੂੰ ਪਹਿਲਾਂ ਚੁਣੇ ਰੰਗਾਂ 'ਤੇ ਵਾਪਸ ਜਾਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ।
- CSS ਲਈ HEX, ਡਿਜ਼ਾਈਨ ਟੂਲਾਂ ਲਈ RGB ਅਤੇ ਰੰਗ ਵਿਵਸਥਾ ਲਈ HSL ਵਰਤੋ।
ਕਲਰ ਪਿਕਰ ਬਾਰੇ ਅਕਸਰ ਪੁੱਛੇ ਜਾਂਦੇ ਸਵਾਲ
HEX, RGB ਅਤੇ HSL ਵਿੱਚ ਕੀ ਫਰਕ ਹੈ?
HEX 6-ਅੰਕਾਂ ਵਾਲਾ ਹੈਕਸ ਕੋਡ ਵਰਤਦਾ ਹੈ (#FF5733)। RGB ਰੰਗਾਂ ਨੂੰ ਲਾਲ, ਹਰੇ, ਨੀਲੇ ਕੀਮਤਾਂ (ਹਰੇਕ 0-255) ਨਾਲ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ। HSL ਹਿਊ (0-360), ਸੈਚੂਰੇਸ਼ਨ (0-100%) ਅਤੇ ਲਾਈਟਨੈੱਸ (0-100%) ਵਰਤਦਾ ਹੈ।
WCAG ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਕੀ ਹੈ?
WCAG ਪੜ੍ਹਨਯੋਗਤਾ ਲਈ ਘੱਟੋ-ਘੱਟ ਕੰਟ੍ਰਾਸਟ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ। AA ਨੂੰ ਆਮ ਟੈਕਸਟ ਲਈ 4.5:1 ਲੋੜੀਂਦਾ ਹੈ। AAA ਨੂੰ 7:1 ਲੋੜੀਂਦਾ ਹੈ। ਟੂਲ ਤੁਹਾਡੇ ਚੁਣੇ ਰੰਗ ਦਾ ਚਿੱਟੇ ਅਤੇ ਕਾਲੇ ਦੇ ਮੁਕਾਬਲੇ ਅਨੁਪਾਤ ਵਿਖਾਉਂਦਾ ਹੈ।
ਕੀ ਮੈਂ ਸਿੱਧਾ ਕਲਰ ਕੋਡ ਦਾਖਲ ਕਰ ਸਕਦਾ ਹਾਂ?
ਹਾਂ। HEX (#FF5733), RGB (rgb(255,87,51)) ਜਾਂ HSL (hsl(9,100%,60%)) ਕੀਮਤਾਂ ਦਾਖਲ ਕਰੋ ਅਤੇ ਪਿਕਰ ਉਹ ਰੰਗ ਵਿਖਾਏਗਾ।
ਕੀ ਪ੍ਰੀਸੈੱਟ ਅਸਲੀ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮਾਂ ਤੋਂ ਹਨ?
ਹਾਂ। ਪ੍ਰੀਸੈੱਟਾਂ ਵਿੱਚ ਵੈੱਬ-ਸੇਫ ਰੰਗ, Google Material Design, Tailwind CSS ਅਤੇ Pantone ਹਵਾਲਾ ਰੰਗ ਸ਼ਾਮਲ ਹਨ।