RGB ଏକ ସ୍କ୍ରିନ୍ କେତେ ଆଲୋକ ଜାରି କରିବାକୁ କହେ; HSL ତୁମକୁ କହେ ରଙ୍ଗଟି ଆସଲେ କେମିତି ଲାଗେ। ତିନୋଟି ଚ୍ୟାନେଲକୁ hue, saturation ଓ lightness ରେ ପରିବର୍ତ୍ତନ କରିବା ରଙ୍ଗକୁ ହାତରେ ସଜାଇବାକୁ ସହଜ କରେ।
RGB କୁ HSL ପରିବର୍ତ୍ତନ କିପରି କାମ କରେ
- R, G ଓ B କୁ 255 ଦ୍ୱାରା ଭାଜନ କର, ଯାହାର ଫଳରେ ପ୍ରତ୍ୟେକ ମୂଲ୍ୟ 0 ରୁ 1 ମଧ୍ୟରେ ରହିବ।
- ତିନୋଟିର ମଧ୍ୟରୁ ସର୍ବାଧିକ ଓ ସର୍ବନିମ୍ନ ନେଉ — ସେମାନଙ୍କର ଗଣିତ ମଧ୍ୟମ lightness L।
- ଯଦି ସର୍ବାଧିକ ଓ ସର୍ବନିମ୍ନ ସମାନ ହୁଏ, ତେବେ ରଙ୍ଗଟି ଧୂସର: hue ଓ saturation ଦୁଇଟି 0 ହେବ।
- ନହେଲେ S କୁ ସର୍ବାଧିକ ଓ ସର୍ବନିମ୍ନ ମଧ୍ୟର ଅନ୍ତରରୁ ଉତ୍ପନ୍ନ କର, ଏବଂ H କୁ ଯେଉଁ ଚ୍ୟାନେଲ ସର୍ବାଧିକ ସେଠାରୁ ପଢ଼।
କାର୍ଯ୍ୟକ୍ଷମ ଉଦାହରଣ
ତତ୍ତ୍ୱତଃ ସଠିକ୍। କାରଣ H, S ଓ L ସାଧାରଣତଃ ଗୋଲାକାର ଗୋଟିଏ ପୁରା ସଂଖ୍ୟାରେ ପ୍ରଦର୍ଶିତ ହୁଏ, ପୁଣି ପରିବର୍ତ୍ତନ କଲେ ଗୋଟିଏ ଚ୍ୟାନେଲ କିମ୍ବା ଦୁଇଟି ଷ୍ଟେପ୍ ଯାଏତୁକୁ ସ୍ଥାନାନ୍ତର ହେବା ସମ୍ଭବ।
RGB ଓ HSL ବ୍ୟାଖ୍ୟା
RGB କ'ଣ?
RGB ଏକ ରଙ୍ଗକୁ ତିନିଟି ଲାଇଟ୍ ଚ୍ୟାନେଲ୍ ଭାବରେ ବର୍ଣ୍ଣନା କରେ — ଲାଲ, ସବୁଜ ଓ ନୀଳ — ପ୍ରତ୍ୟେକ 0 ଠାରୁ 255 ପର୍ଯ୍ୟନ୍ତ। ଏହା ସ୍କ୍ରିନ୍ କିପରି କାମ କରେ ତାହାକୁ ପ୍ରତିବିମ୍ବିତ କରେ: ତିନିଟିଆ ଭିତରୁ ସମସ୍ତ 255 ହେଲେ ଧଳା, ସମସ୍ତ 0 ହେଲେ କଳା ହୁଏ। RGB ସେତେବେଳେ ଠିକ୍ ଯେଉଁବେଳେ ତୁମେ ରଙ୍ଗ ସହିତ ଗଣିତ କରିବାକୁ ଚାହାଁ, ଏବଂ rgba() ଟ୍ରାନ୍ସପାରେନ୍ସି ଯୋଗ କରେ।
- ସିନ୍ଟାକ୍ସ:
- rgb(R, G, B)
- ରେଞ୍ଜ:
- 0–255 per channel
- ଶ୍ରେଷ୍ଠ ପାଇଁ:
- code, canvas, transparency with rgba()
HSL କ'ଣ?
HSL ଗୋଟିଏ ରଙ୍ଗକୁ hue (ରଙ୍ଗଚକ୍ରରେ 0–360°), saturation (କେତେ ରଙ୍ଗୀନ, 0–100%) ଏବଂ lightness (କେତେ ଉଜ୍ଜ୍ୱଳ, 0–100%) ଭାଗରେ ବିଭାଜିତ କରେ। ପ୍ରତ୍ୟେକ ଅଂଶ ଲୋକେ କିପରି ରଙ୍ଗ କୁଣ୍ଡଳୀ ବର୍ଣ୍ଣନା କରନ୍ତି ସେଇପରି ମେଳ ଖାଏ, ତେଣୁ HSL ହାତୋଲା ଭାବରେ କିମ୍ବା କୋଡ୍ ମାଧ୍ୟମରେ ଟିଣ୍ଟ, ଶେଡ୍ ଓ ସଙ୍ଗତିପୂର୍ଣ୍ଣ ପ୍ୟାଲେଟ୍ ତିଆରି କରିବାକୁ ସରଳ।
- ସିନ୍ଟାକ୍ସ:
- hsl(H, S%, L%)
- ରେଞ୍ଜ:
- 0–360°, 0–100%, 0–100%
- ଶ୍ରେଷ୍ଠ ପାଇଁ:
- palettes, tints and shades, theming
RGB କୁ HSL ରେଫରେନ୍ସ ଟେବୁଲ୍
ସବୁଠାରୁ ସାଧାରଣ CSS ରଙ୍ଗଗୁଡ଼ିକ, RGB ରୁ HSL କୁ ପରିବର୍ତ୍ତିତ ।
| ରଙ୍ଗ | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |