ਰੰਗ ਕੋਡ ਜਨਰੇਟਰ ਅਤੇ ਪਿਕਰ

ਰੰਗ ਕੋਡ, ਵੈਰੀਏਸ਼ਨ, ਸਹਿਮਤੀਆਂ ਬਣਾਓ, ਅਤੇ ਕਾਂਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਚੈੱਕ ਕਰੋ।

ਰੰਗ ਰੂਪਾਂਤਰਨ

HEX

#ffffcc

Cream

HEX
#ffffcc
HSL
60, 100, 90
RGB
255, 255, 204
XYZ
88, 97, 71
CMYK
0, 0, 20, 0
LUV
99,18,42
LAB
99, -8, 24
HWB
60, 80, 0

ਵਿਭਿੰਨਤਾ

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

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

ਸ਼ੇਡਸ

ਤੁਹਾਡੇ ਬੇਸ ਰੰਗ ਵਿੱਚ ਕਾਲਾ ਸ਼ਾਮਲ ਕਰਕੇ ਬਣਾਈਆਂ ਗਈਆਂ ਗੂੜ੍ਹੀਆਂ ਵਿਭਿੰਨਤਾਵਾਂ।

ਟਿੰਟਸ

ਤੁਹਾਡੇ ਬੇਸ ਰੰਗ ਵਿੱਚ ਚਿੱਟਾ ਸ਼ਾਮਲ ਕਰਕੇ ਬਣਾਈਆਂ ਗਈਆਂ ਹਲਕੀਆਂ ਵਿਭਿੰਨਤਾਵਾਂ।

ਆਮ ਵਰਤੋਂ ਦੇ ਕੇਸ

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

ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਟਿਪ

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

ਰੰਗ ਜੋੜ

ਹਰ ਸਹਿਮਤੀ ਦਾ ਆਪਣਾ ਮੂਡ ਹੁੰਦਾ ਹੈ। ਸਹਿਮਤੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ਜੋ ਰੰਗਾਂ ਦੇ ਜੋੜਾਂ ਨੂੰ ਸੋਚਣ ਲਈ ਜੋ ਚੰਗੇ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ।

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

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

ਇਹ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ

ਰੰਗ ਸਹਿਮਤੀਆਂ ਸੰਤੁਲਨ ਬਣਾਉਂਦੀਆਂ ਹਨ ਅਤੇ ਤੁਹਾਡੇ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਖਾਸ ਭਾਵਨਾਵਾਂ ਨੂੰ ਜਗਾਉਂਦੀਆਂ ਹਨ।

ਪੂਰਨ

ਇੱਕ ਰੰਗ ਅਤੇ ਇਸਦਾ ਵਿਰੋਧੀ ਰੰਗ ਚੱਕਰ 'ਤੇ, +180 ਡਿਗਰੀ ਹਿਊ। ਉੱਚ ਵਿਰੋਧ।

#ffffcc
ਵਧੀਆ ਹੈ: ਉੱਚ-ਅਸਰ ਵਾਲੇ ਡਿਜ਼ਾਈਨ, CTA, ਲੋਗੋ

ਵੰਡੇ-ਪੂਰਨ

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

ਵਧੀਆ ਹੈ: ਜੋਸ਼ੀਲਾ ਪਰ ਸੰਤੁਲਿਤ ਲੇਆਉਟ

ਤਿਕੋਣੀ

ਰੰਗ ਚੱਕਰ 'ਤੇ ਸਮਾਨ ਤੌਰ 'ਤੇ ਤਿੰਨ ਰੰਗ, ਹਰ ਇੱਕ 120 ਡਿਗਰੀ ਹਿਊ ਦੂਰ। ਵਧੀਆ ਹੈ ਕਿ ਇੱਕ ਰੰਗ ਨੂੰ ਪ੍ਰਮੁੱਖ ਬਣਾਓ ਅਤੇ ਹੋਰਾਂ ਨੂੰ ਉਭਾਰ ਵਜੋਂ ਵਰਤੋ।

ਵਧੀਆ ਹੈ: ਖੇਡ-ਮਸਤੀ ਭਰੇ, ਉਰਜਾਵਾਨ ਡਿਜ਼ਾਈਨ

ਸਮਾਨ

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

ਵਧੀਆ ਹੈ: ਕੁਦਰਤ-ਪ੍ਰੇਰਿਤ, ਸ਼ਾਂਤ ਇੰਟਰਫੇਸ

ਇਕਰੰਗੀ

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

ਵਧੀਆ ਹੈ: ਘੱਟੋ-ਘੱਟ, ਸੁਫ਼ਿਆਨਾ ਡਿਜ਼ਾਈਨ

ਚਤੁਰਭੁਜੀ

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

ਵਧੀਆ ਹੈ: ਧਨਾਢ, ਵਿਭਿੰਨ ਰੰਗ ਸਕੀਮਾਂ

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

ਸੰਤੁਲਨ

ਇੱਕ ਪ੍ਰਮੁੱਖ ਰੰਗ ਦੀ ਵਰਤੋਂ ਕਰੋ, ਸਹਾਇਕ ਰੰਗ ਨਾਲ ਸਹਾਇਤਾ ਕਰੋ, ਅਤੇ ਥੋੜ੍ਹਾ ਜਿਹਾ ਉਭਾਰੋ।

ਵਿਰੋਧ

ਪੜ੍ਹਨਯੋਗਤਾ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਕਾਫ਼ੀ ਵਿਰੋਧ ਸੁਨਿਸ਼ਚਿਤ ਕਰੋ।

ਸਮਰਸਤਾ

ਰੰਗ ਇਕੱਠੇ ਕੰਮ ਕਰਨ ਚਾਹੀਦੇ ਹਨ ਤਾਂ ਜੋ ਇੱਕ ਇਕਸਾਰ ਵਿਜ਼ੂਅਲ ਅਨੁਭਵ ਬਣ ਸਕੇ।

ਰੰਗ ਵਿਰੋਧ ਚੈੱਕਰ

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

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

ਉੱਚ-ਤਕਨੀਕੀ ਕਾਂਟ੍ਰਾਸਟ ਚੈੱਕਰ

ਸਲਾਈਡਰਾਂ ਨਾਲ ਸੁਧਾਰੋ, ਕਈ ਪ੍ਰੀਵਿਊਜ਼ ਅਤੇ ਹੋਰ

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

- Albert Einstein

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

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

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

ਅੰਧਤਾ ਸਿਮੂਲੇਟਰ

ਰਚਨਾਤਮਕ ਪਹਲੂ