ਰੰਗ ਕੋਡ ਜਨਰੇਟਰ ਅਤੇ ਚੋਣਕਾਰ

ਰੰਗ ਕੋਡ, ਭਿੰਨਤਾਵਾਂ, ਇਕਸੁਰਤਾਵਾਂ ਤਿਆਰ ਕਰੋ, ਅਤੇ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਦੀ ਜਾਂਚ ਕਰੋ।

ਰੰਗ-ਰੂਪਾਂਤਰਨ

HEX

#f1f3f4

Porcelain

HEX
#f1f3f4
HSL
200, 12, 95
RGB
241, 243, 244
XYZ
85, 89, 98
CMYK
1, 0, 0, 4
LUV
96,15,6,
LAB
96, 0, -1
HWB
200, 95, 4

ਭਿੰਨਤਾਵਾਂ

ਇਸ ਭਾਗ ਦਾ ਉਦੇਸ਼ ਤੁਹਾਡੇ ਚੁਣੇ ਹੋਏ ਰੰਗ ਦੇ ਟਿੰਟ (ਸ਼ੁੱਧ ਚਿੱਟਾ ਜੋੜਿਆ ਗਿਆ) ਅਤੇ ਸ਼ੇਡ (ਸ਼ੁੱਧ ਕਾਲਾ ਜੋੜਿਆ ਗਿਆ) ਨੂੰ 10% ਵਾਧੇ ਵਿੱਚ ਸਹੀ ਢੰਗ ਨਾਲ ਤਿਆਰ ਕਰਨਾ ਹੈ।

ਪ੍ਰੋ ਸੁਝਾਅ: ਹੋਵਰ ਸਟੇਟਸ ਅਤੇ ਸ਼ੈਡੋ ਲਈ ਸ਼ੇਡਜ਼, ਹਾਈਲਾਈਟਸ ਅਤੇ ਬੈਕਗ੍ਰਾਊਂਡ ਲਈ ਟਿੰਟਸ ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਸ਼ੇਡਜ਼

ਤੁਹਾਡੇ ਮੂਲ ਰੰਗ ਵਿੱਚ ਕਾਲਾ ਜੋੜ ਕੇ ਗੂੜ੍ਹੇ ਰੂਪ ਬਣਾਏ ਗਏ ਹਨ।

ਟਿੰਟ

ਤੁਹਾਡੇ ਮੂਲ ਰੰਗ ਵਿੱਚ ਚਿੱਟਾ ਜੋੜ ਕੇ ਹਲਕੇ ਭਿੰਨਤਾਵਾਂ ਬਣਾਈਆਂ ਗਈਆਂ ਹਨ।

ਆਮ ਵਰਤੋਂ ਦੇ ਮਾਮਲੇ

  • UI ਕੰਪੋਨੈਂਟ ਸਥਿਤੀਆਂ (ਹੋਵਰ, ਐਕਟਿਵ, ਅਯੋਗ)
  • ਪਰਛਾਵੇਂ ਅਤੇ ਹਾਈਲਾਈਟਸ ਨਾਲ ਡੂੰਘਾਈ ਬਣਾਉਣਾ
  • ਇਕਸਾਰ ਰੰਗ ਪ੍ਰਣਾਲੀਆਂ ਬਣਾਉਣਾ

ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਸੁਝਾਅ

ਇਹ ਭਿੰਨਤਾਵਾਂ ਇੱਕ ਸੁਮੇਲ ਵਾਲੇ ਰੰਗ ਪੈਲੇਟ ਦੀ ਨੀਂਹ ਬਣਾਉਂਦੀਆਂ ਹਨ। ਆਪਣੇ ਪੂਰੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਇਕਸਾਰਤਾ ਬਣਾਈ ਰੱਖਣ ਲਈ ਇਹਨਾਂ ਨੂੰ ਨਿਰਯਾਤ ਕਰੋ।

ਰੰਗਾਂ ਦੇ ਸੁਮੇਲ

ਹਰੇਕ ਹਾਰਮੋਨੀ ਦਾ ਆਪਣਾ ਮੂਡ ਹੁੰਦਾ ਹੈ। ਰੰਗਾਂ ਦੇ ਕੰਬੋਜ਼ 'ਤੇ ਵਿਚਾਰ ਕਰਨ ਲਈ ਹਾਰਮੋਨੀਜ਼ ਦੀ ਵਰਤੋਂ ਕਰੋ ਜੋ ਇਕੱਠੇ ਵਧੀਆ ਕੰਮ ਕਰਦੇ ਹਨ।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

ਕਿਸੇ ਵੀ ਰੰਗ ਦੇ ਹੈਕਸਾ ਮੁੱਲ ਦੀ ਨਕਲ ਕਰਨ ਲਈ ਉਸ 'ਤੇ ਕਲਿੱਕ ਕਰੋ। ਇਹ ਸੰਜੋਗ ਗਣਿਤਿਕ ਤੌਰ 'ਤੇ ਦ੍ਰਿਸ਼ਟੀਗਤ ਇਕਸੁਰਤਾ ਬਣਾਉਣ ਲਈ ਸਾਬਤ ਹੋਏ ਹਨ।

ਇਹ ਕਿਉਂ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ

ਰੰਗਾਂ ਦੀ ਸੁਮੇਲਤਾ ਸੰਤੁਲਨ ਪੈਦਾ ਕਰਦੀ ਹੈ ਅਤੇ ਤੁਹਾਡੇ ਡਿਜ਼ਾਈਨਾਂ ਵਿੱਚ ਖਾਸ ਭਾਵਨਾਵਾਂ ਪੈਦਾ ਕਰਦੀ ਹੈ।

ਪੂਰਕ

ਇੱਕ ਰੰਗ ਅਤੇ ਰੰਗ ਚੱਕਰ 'ਤੇ ਇਸਦਾ ਉਲਟ, +180 ਡਿਗਰੀ ਰੰਗ। ਉੱਚ ਵਿਪਰੀਤਤਾ।

#f1f3f4
ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ: ਉੱਚ-ਪ੍ਰਭਾਵ ਵਾਲੇ ਡਿਜ਼ਾਈਨ, CTA, ਲੋਗੋ

ਸਪਲਿਟ-ਪੂਰਕ

ਇੱਕ ਰੰਗ ਅਤੇ ਇਸਦੇ ਪੂਰਕ ਦੇ ਨਾਲ ਲੱਗਦੇ ਦੋ, ਮੁੱਖ ਰੰਗ ਦੇ ਉਲਟ ਮੁੱਲ ਤੋਂ +/-30 ਡਿਗਰੀ ਰੰਗ। ਇੱਕ ਸਿੱਧੇ ਪੂਰਕ ਵਾਂਗ ਬੋਲਡ, ਪਰ ਵਧੇਰੇ ਬਹੁਪੱਖੀ।

ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ: ਜੀਵੰਤ ਪਰ ਸੰਤੁਲਿਤ ਲੇਆਉਟ

ਟ੍ਰਾਈਡਿਕ

ਰੰਗ ਚੱਕਰ ਦੇ ਨਾਲ-ਨਾਲ ਤਿੰਨ ਰੰਗ ਬਰਾਬਰ ਦੂਰੀ 'ਤੇ, ਹਰੇਕ ਰੰਗ 120 ਡਿਗਰੀ ਰੰਗਤ ਤੋਂ ਵੱਖਰਾ। ਇੱਕ ਰੰਗ ਨੂੰ ਹਾਵੀ ਹੋਣ ਦੇਣਾ ਅਤੇ ਦੂਜੇ ਨੂੰ ਲਹਿਜ਼ੇ ਵਜੋਂ ਵਰਤਣਾ ਸਭ ਤੋਂ ਵਧੀਆ ਹੈ।

ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ: ਖਿਲੰਦੜਾ, ਊਰਜਾਵਾਨ ਡਿਜ਼ਾਈਨ

ਸਮਾਨ

ਇੱਕੋ ਜਿਹੀ ਚਮਕ ਅਤੇ ਸੰਤ੍ਰਿਪਤਾ ਵਾਲੇ ਤਿੰਨ ਰੰਗ, ਰੰਗ ਚੱਕਰ 'ਤੇ ਨਾਲ ਲੱਗਦੇ ਰੰਗਾਂ ਨਾਲ, 30 ਡਿਗਰੀ ਦੀ ਦੂਰੀ 'ਤੇ। ਨਿਰਵਿਘਨ ਤਬਦੀਲੀਆਂ।

ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ: ਕੁਦਰਤ ਤੋਂ ਪ੍ਰੇਰਿਤ, ਸ਼ਾਂਤ ਇੰਟਰਫੇਸ

ਮੋਨੋਕ੍ਰੋਮੈਟਿਕ

ਇੱਕੋ ਰੰਗ ਦੇ ਤਿੰਨ ਰੰਗ ਜਿਨ੍ਹਾਂ ਵਿੱਚ ਚਮਕਦਾਰ ਮੁੱਲ +/-50% ਹਨ। ਸੂਖਮ ਅਤੇ ਸੁਧਰੇ ਹੋਏ।

ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ: ਘੱਟੋ-ਘੱਟ, ਸੂਝਵਾਨ ਡਿਜ਼ਾਈਨ

ਟੈਟਰਾਡਿਕ

ਪੂਰਕ ਰੰਗਾਂ ਦੇ ਦੋ ਸੈੱਟ, ਰੰਗ ਦੇ 60 ਡਿਗਰੀ ਨਾਲ ਵੱਖ ਕੀਤੇ ਗਏ।

ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ: ਅਮੀਰ, ਵਿਭਿੰਨ ਰੰਗ ਸਕੀਮਾਂ

ਰੰਗ ਸਿਧਾਂਤ ਦੇ ਸਿਧਾਂਤ

ਬਕਾਇਆ

ਇੱਕ ਪ੍ਰਮੁੱਖ ਰੰਗ ਦੀ ਵਰਤੋਂ ਕਰੋ, ਸੈਕੰਡਰੀ ਰੰਗ ਦੇ ਨਾਲ ਸਮਰਥਨ ਕਰੋ, ਅਤੇ ਘੱਟ ਲਹਿਜ਼ਾ ਵਰਤੋ।

ਕੰਟ੍ਰਾਸਟ

ਪੜ੍ਹਨਯੋਗਤਾ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਕਾਫ਼ੀ ਕੰਟ੍ਰਾਸਟ ਯਕੀਨੀ ਬਣਾਓ।

ਸਦਭਾਵਨਾ

ਇੱਕ ਏਕੀਕ੍ਰਿਤ ਦ੍ਰਿਸ਼ਟੀਗਤ ਅਨੁਭਵ ਬਣਾਉਣ ਲਈ ਰੰਗਾਂ ਨੂੰ ਇਕੱਠੇ ਕੰਮ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।

ਰੰਗ ਕੰਟ੍ਰਾਸਟ ਚੈਕਰ

ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਰੰਗ ਸੰਜੋਗਾਂ ਦੀ ਜਾਂਚ ਕਰੋ ਕਿ ਉਹ ਟੈਕਸਟ ਪੜ੍ਹਨਯੋਗਤਾ ਲਈ WCAG ਪਹੁੰਚਯੋਗਤਾ ਮਿਆਰਾਂ ਨੂੰ ਪੂਰਾ ਕਰਦੇ ਹਨ।

ਟੈਕਸਟ ਰੰਗ
ਬੈਕਗ੍ਰਾਊਂਡ ਦਾ ਰੰਗ
ਕੰਟ੍ਰਾਸਟ
1.00
Fail
ਬਹੁਤ ਗਰੀਬ
ਛੋਟਾ ਟੈਕਸਟ
✖︎
ਵੱਡਾ ਟੈਕਸਟ
✖︎
WCAG ਮਿਆਰ
AA:ਆਮ ਟੈਕਸਟ ਲਈ ਘੱਟੋ-ਘੱਟ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ 4.5:1 ਅਤੇ ਵੱਡੇ ਟੈਕਸਟ ਲਈ 3:1। ਜ਼ਿਆਦਾਤਰ ਵੈੱਬਸਾਈਟਾਂ ਲਈ ਲੋੜੀਂਦਾ ਹੈ।
AAA:ਆਮ ਟੈਕਸਟ ਲਈ 7:1 ਅਤੇ ਵੱਡੇ ਟੈਕਸਟ ਲਈ 4.5:1 ਦਾ ਵਧਿਆ ਹੋਇਆ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ। ਅਨੁਕੂਲ ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਸਿਫ਼ਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।
ਸਾਰੇ ਟੈਕਸਟ ਆਕਾਰਾਂ ਲਈ ਮਾੜਾ ਵਿਪਰੀਤ।

ਐਡਵਾਂਸਡ ਕੰਟ੍ਰਾਸਟ ਚੈਕਰ

ਸਲਾਈਡਰਾਂ, ਕਈ ਪੂਰਵਦਰਸ਼ਨਾਂ ਅਤੇ ਹੋਰ ਚੀਜ਼ਾਂ ਨਾਲ ਸੁਧਾਰ ਕਰੋ

ਹਰ ਕੋਈ ਜੀਨਿਅਸ ਹੈ। ਪਰ ਜੇ ਤੁਸੀਂ ਇੱਕ ਮੱਛੀ ਨੂੰ ਦਰੱਖਤ 'ਤੇ ਚੜ੍ਹਨ ਦੀ ਯੋਗਤਾ ਦੁਆਰਾ ਨਿਰਣਾ ਕਰਦੇ ਹੋ, ਤਾਂ ਇਹ ਆਪਣੀ ਪੂਰੀ ਜ਼ਿੰਦਗੀ ਇਹ ਮੰਨ ਕੇ ਜੀਵੇਗੀ ਕਿ ਇਹ ਮੂਰਖ ਹੈ।

- Albert Einstein

ਤਕਨੀਕੀ ਫਾਰਮੈਟ

ਵਿਹਾਰਕ ਫਾਰਮੈਟ

ਰੰਗ ਵਿਸ਼ਲੇਸ਼ਣ

ਅੰਨ੍ਹਾਪਣ ਸਿਮੂਲੇਟਰ

ਰਚਨਾਤਮਕ ਪਹਿਲੂ