ਰੰਗ ਕਨਵਰਟਰ — ਔਨਲਾਈਨ HEX, RGB, HSL ਕਨਵਰਟਰ _

ਰੰਗ ਕਨਵਰਜ਼ਨ ਕੀ ਹੈ?

ਤੁਹਾਡਾ ਬ੍ਰਾਊਜ਼ਰ ਜੋ ਵੀ ਰੰਗ ਰੈਂਡਰ ਕਰਦਾ ਹੈ ਉਹ ਅੰਤਮ ਤੌਰ ਤੇ ਇੱਕ sRGB ਤਿੱਕੜੀ ਹੈ — ਲਾਲ, ਹਰੇ ਅਤੇ ਨੀਲੇ ਚੈਨਲਾਂ ਲਈ 0 ਤੋਂ 255 ਦੇ ਵਿਚਕਾਰ ਤਿੰਨ ਸੰਖਿਆਵਾਂ, ਅਤੇ ਵਿਕਲਪਿਕ ਅਲਫਾ। CSS Color Level 4 ਵਿਸ਼ੇਸ਼ਤਾ ਕਈ ਟੈਕਸਟ ਫਾਰਮੈਟ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ ਜੋ ਉਸੇ ਤਿੱਕੜੀ ਤੇ ਵਾਪਸ ਜਾਂਦੇ ਹਨ, ਅਤੇ ਅਨੁਭਵੀ-ਇਕਸਾਰ OKLCH ਸਪੇਸ ਵੀ। ਇਹ ਸਾਧਨ ਉਹਨਾਂ ਵਿੱਚੋਂ ਕੋਈ ਵੀ ਪੜ੍ਹਦਾ ਹੈ, ਸਾਰਿਆਂ ਵਿੱਚ ਬਦਲਦਾ ਹੈ, ਅਤੇ ਦੂਜੇ ਰੰਗ ਦੇ ਵਿਰੁੱਧ WCAG 2.1 ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਦੱਸਦਾ ਹੈ।

ਰੰਗ ਕਨਵਰਜ਼ਨ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ?

ਕਨਵਰਜ਼ਨ ਚੰਗੀ ਤਰ੍ਹਾਂ ਪਰਿਭਾਸ਼ਿਤ ਲੀਨੀਅਰ ਅਤੇ ਗੈਰ-ਲੀਨੀਅਰ ਪਰਿਵਰਤਨਾਂ ਦੀ ਇੱਕ ਲੜੀ ਹੈ। ਹਰ ਕਦਮ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦਾ ਹੈ — ਕੋਈ ਇਨਪੁੱਟ ਕਦੇ ਸਾਡੇ ਸਰਵਰਾਂ ਤੱਕ ਨਹੀਂ ਪਹੁੰਚਦਾ:

1. ਤੁਹਾਡਾ ਇਨਪੁੱਟ ਪਾਰਸ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਸਾਧਨ ਆਟੋਮੈਟਿਕ 3, 4, 6, ਜਾਂ 8-ਅੰਕ HEX, ਕਾਰਜਾਤਮਕ ਰੂਪ rgb()/rgba()/hsl()/hsla()/hsv()/hwb() ਜਾਂ 150 ਨਾਮੀ CSS ਰੰਗਾਂ ਵਿੱਚੋਂ ਕੋਈ ਵੀ ਪਛਾਣਦਾ ਹੈ (rebeccapurple ਸਮੇਤ)।
2. ਪਾਰਸ ਕੀਤਾ ਰੰਗ ਕੈਨੋਨੀਕਲ sRGB ਤੇ ਮਿਆਰੀਕਰਣ ਕੀਤਾ ਜਾਂਦਾ ਹੈ — ਚਾਰ ਫਲੋਟ {r, g, b, a} ਹਰ ਇੱਕ 0–1 ਦੀ ਰੇਂਜ ਵਿੱਚ। ਇਹ ਸੱਚਾਈ ਦਾ ਇੱਕੋ ਸਰੋਤ ਹੈ ਜਿਸ ਤੋਂ ਹਰ ਆਉਟਪੁੱਟ ਫਾਰਮੈਟ ਲਿਆ ਜਾਂਦਾ ਹੈ।
3. HEX ਹਰ ਚੈਨਲ ਨੂੰ ਉਸਦੇ 0–255 ਬਾਈਟ ਮੁੱਲ ਤੇ ਗੋਲ ਕਰਕੇ ਅਤੇ hex ਅੰਕ ਜੋੜ ਕੇ ਆਉਂਦਾ ਹੈ। RGB / RGBA ਉਹੀ ਬਾਈਟ ਪ੍ਰਿੰਟ ਕਰਦੇ ਹਨ। HSL ਅਤੇ HSV ਮਿਆਰੀ W3C ਸਿਲੰਡ੍ਰੀਕਲ-ਕੋਆਰਡੀਨੇਟ ਐਲਗੋਰਿਦਮ ਲਾਗੂ ਕਰਦੇ ਹਨ; HWB ਹਿਊ HSV ਤੋਂ ਲੈਂਦਾ ਹੈ, ਵ੍ਹਾਈਟਨੈੱਸ min(r, g, b) ਤੋਂ, ਅਤੇ ਬਲੈਕਨੈੱਸ 1 - max(r, g, b) ਤੋਂ।
4. CMYK ਇੱਕ ਸਾਧਾਰਣ ਅਨੁਮਾਨ ਹੈ — k = 1 - max(r, g, b), ਫਿਰ ਬਾਕੀ ਚੈਨਲਾਂ ਤੋਂ c, m, y। ਇਹ ਸਕ੍ਰੀਨ ਪ੍ਰੀਵਿਊ ਲਈ ਢੁਕਵਾਂ ਹੈ ਪਰ ਪ੍ਰਿੰਟ ਲਈ ਨਹੀਂ: ਅਸਲ CMYK ਆਉਟਪੁੱਟ ਲਈ ICC ਪ੍ਰੋਫਾਈਲ ਦੀ ਲੋੜ ਹੈ।
5. OKLCH css-color-4 ਫਾਰਵਰਡ ਮਾਰਗ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ: sRGB ਲੀਨੀਅਰਾਈਜ਼ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, LMS ਮੈਟ੍ਰਿਕਸ ਰਾਹੀਂ ਗੁਣਾ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, cube-root ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਅੰਤ ਵਿੱਚ OKLCH ਵਿੱਚ ਬਦਲਿਆ ਜਾਂਦਾ ਹੈ। OKLCH ਅਨੁਭਵੀ ਤੌਰ ਤੇ ਇਕਸਾਰ ਹੈ, ਜੋ ਇਸਨੂੰ ਸੰਤੁਲਿਤ ਦਿੱਖਣ ਵਾਲੇ ਪੈਲੇਟ ਡਿਜ਼ਾਈਨ ਕਰਨ ਲਈ ਸਹੀ ਸਪੇਸ ਬਣਾਉਂਦਾ ਹੈ।

ਇਹ ਰੰਗ ਕਨਵਰਟਰ ਕਿਉਂ ਵਰਤੋ?

• ਗੋਪਨੀਯਤਾ: ਹਰ ਕਨਵਰਜ਼ਨ ਸਾਦੇ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦੀ ਹੈ। ਤੁਸੀਂ ਜੋ ਰੰਗ ਪੇਸਟ ਕਰਦੇ ਹੋ ਉਹ ਕਦੇ ਤੁਹਾਡੇ ਡਿਵਾਈਸ ਤੋਂ ਨਹੀਂ ਜਾਂਦਾ, ਜੋ NDA ਅਧੀਨ ਅਜੇ ਜਾਰੀ ਨਾ ਕੀਤੇ ਬਰਾਂਡ ਕੰਮ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ।
• ਡਿਜ਼ਾਈਨਰ-ਤੋਂ-ਡਿਵੈਲਪਰ ਹੈਂਡਆਫ: Figma ਤੋਂ HEX ਪੇਸਟ ਕਰੋ ਅਤੇ Tailwind ਕਨਫਿਗ ਲਈ rgb() ਸਤਰ, CSS ਕਸਟਮ ਪ੍ਰੌਪਰਟੀ ਲਈ hsl() ਸਤਰ, ਜਾਂ ਆਧੁਨਿਕ ਪੈਲੇਟ ਲਈ oklch() ਸਤਰ ਵਾਪਸ ਪੜ੍ਹੋ — ਸਾਰੇ ਫਾਰਮੈਟ ਇੱਕ ਜਗ੍ਹਾ।
• WCAG ਸ਼ੁੱਧਤਾ: ਕੰਟ੍ਰਾਸਟ ਚੈਕਰ ਸਹੀ WCAG 2.1 ਰਿਲੇਟਿਵ-ਲੂਮੀਨੈਂਸ ਫਾਰਮੂਲਾ ਅਤੇ ਆਮ ਅਤੇ ਵੱਡੇ ਟੈਕਸਟ ਲਈ ਪ੍ਰਕਾਸ਼ਿਤ AA (4.5 / 3.0) ਅਤੇ AAA (7.0 / 4.5) ਸੀਮਾਵਾਂ ਵਰਤਦਾ ਹੈ।
• ਡਾਰਕ-ਮੋਡ ਅਤੇ ਪੈਲੇਟ ਡੈਰੀਵੇਸ਼ਨ: HSL ਅਤੇ OKLCH ਚਮਕ ਨੂੰ ਇੱਕ ਚੈਨਲ ਵਜੋਂ ਦਰਸਾਉਂਦੇ ਹਨ, ਇਸ ਲਈ ਇੱਕ ਬਰਾਂਡ ਰੰਗ ਨੂੰ ਉੱਪਰ ਜਾਂ ਹੇਠਾਂ ਸ਼ਿਫਟ ਕਰਕੇ ਮਿਲੇ ਡਾਰਕ-ਮੋਡ ਟੋਕਨ ਜਾਂ 10-ਕਦਮ ਪੈਲੇਟ ਰੈਂਪ ਬਣਾਉਣਾ ਆਸਾਨ ਹੈ।

ਰੰਗ ਕਨਵਰਜ਼ਨ ਦੀਆਂ ਆਮ ਵਰਤੋਂਆਂ ਕੀ ਹਨ?

ਰੰਗ ਕਨਵਰਜ਼ਨ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ, ਡਿਜ਼ਾਈਨ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਕੰਮ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ:

• ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ: CSS ਕਸਟਮ-ਪ੍ਰੌਪਰਟੀ ਸਕੇਲ ਲਈ ਬਰਾਂਡ HEX ਨੂੰ ਮਿਲਦੇ HSL ਅਤੇ OKLCH ਟੋਕਨਾਂ ਵਿੱਚ ਬਦਲਣਾ, ਫਿਰ ਪ੍ਰਮਾਣਿਤ ਕਰਨਾ ਕਿ ਹਰ ਟੋਕਨ ਸੰਜੋਗ WCAG AA ਪਾਸ ਕਰਦਾ ਹੈ।
• ਪਹੁੰਚਯੋਗਤਾ ਆਡਿਟ: ਅਸਲ ਉਤਪਾਦ ਸਕ੍ਰੀਨ ਤੋਂ ਫੋਰਗ੍ਰਾਊਂਡ ਅਤੇ ਬੈਕਗ੍ਰਾਊਂਡ ਜੋੜੀ ਪੇਸਟ ਕਰਨਾ ਅਤੇ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਅਤੇ AA/AAA ਫੈਸਲੇ ਇੱਕ ਨਜ਼ਰ ਵਿੱਚ ਪੜ੍ਹਨਾ।
• ਕਰਾਸ-ਟੂਲ ਰਾਉਂਡ-ਟ੍ਰਿਪ: ਸਕ੍ਰੀਨਸ਼ੌਟ ਪਿਕਰ ਤੋਂ ਰੰਗ ਖਿੱਚਣਾ (HEX), ਇੱਥੇ ਪੇਸਟ ਕਰਨਾ, ਅਤੇ hsl() ਜਾਂ oklch() ਸਤਰ ਸਿੱਧੇ Tailwind, Figma ਟੋਕਨਾਂ, ਜਾਂ CSS-in-JS ਥੀਮ ਵਿੱਚ ਕਾਪੀ ਕਰਨਾ।

ਰੰਗ ਕਨਵਰਜ਼ਨ ਉਦਾਹਰਣ ਕਿਹੋ ਜਿਹੀ ਦਿੱਖਦੀ ਹੈ?

ਮਸ਼ਹੂਰ rebeccapurple ਲਓ। ਨਾਮੀ-ਰੰਗ ਲੁੱਕਅੱਪ ਇਸਨੂੰ #663399 ਵਿੱਚ ਹੱਲ ਕਰਦਾ ਹੈ। RGB ਕਨਵਰਜ਼ਨ rgb(102, 51, 153) ਦਿੰਦੀ ਹੈ। HSL ਕਨਵਰਜ਼ਨ hsl(270, 50%, 40%) ਦਿੰਦੀ ਹੈ — ਇੱਕ ਵਾਯਲੇਟ ਹਿਊ, ਅੱਧਾ-ਸੰਤ੍ਰਿਪਤ, ਚਾਰ-ਦਸਵੇਂ ਚਮਕੀਲਾ। ਉਸ ਰੰਗ ਨੂੰ ਕੰਟ੍ਰਾਸਟ ਟੂਲ ਨਾਲ ਸ਼ੁੱਧ ਚਿੱਟੇ ਦੇ ਵਿਰੁੱਧ ਜਾਂਚਣ ਤੇ 7.39 ਦੇ ਨੇੜੇ ਇੱਕ ਅਨੁਪਾਤ ਵਾਪਸ ਆਉਂਦਾ ਹੈ, ਜੋ ਆਮ ਟੈਕਸਟ ਲਈ AAA (7.0) ਅਤੇ ਵੱਡੇ ਟੈਕਸਟ ਲਈ AAA (4.5) ਸਾਫ਼ ਕਰਦਾ ਹੈ — ਇੱਕ ਮਜ਼ਬੂਤ, ਪਹੁੰਚਯੋਗ ਫੋਰਗ੍ਰਾਊਂਡ ਚੋਣ। #663399 ਨੂੰ RGB → HSL → RGB → HEX ਰਾਹੀਂ ਰਾਊਂਡ-ਟ੍ਰਿਪ ਕਰਨ ਤੇ ਅਸਲ ਸਤਰ ਬਿਲਕੁਲ ਉਹੀ, ਬਾਈਟ-ਦਰ-ਬਾਈਟ ਵਾਪਸ ਆਉਂਦੀ ਹੈ।

ਇਸ ਕਨਵਰਟਰ ਨੂੰ ਕਿਸੇ ਵੀ ਰੰਗ ਲਈ ਤੁਰੰਤ ਹਵਾਲੇ ਵਜੋਂ ਵਰਤੋ — ਕੋਡ ਵਿੱਚ, ਡਿਜ਼ਾਈਨ ਫਾਈਲਾਂ ਵਿੱਚ, ਜਾਂ ਸਕ੍ਰੀਨਸ਼ੌਟ ਵਿੱਚ — ਅਤੇ ਸ਼ਿਪਿੰਗ ਤੋਂ ਪਹਿਲਾਂ ਕੰਟ੍ਰਾਸਟ ਚੈਕਰ ਨੂੰ ਸੈਨਿਟੀ ਜਾਂਚ ਵਜੋਂ ਵਰਤੋ। ਸਭ ਕੁਝ ਸਥਾਨਕ ਤੌਰ ਤੇ ਚੱਲਦਾ ਹੈ, ਕੁਝ ਵੀ ਲੌਗ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ।