HSL ଏକ-friendly ଉପାୟ ରଙ୍ଗ ଚୟନ ପାଇଁ, RGB ହେଉଛି ସେଇ ଫର୍ମାଟ୍ ଯାହା screens, canvas APIs ଏବଂ image code ବାସ୍ତବରେ ଖାଇଯାଏ। ଏହି କନଭର୍ଟର କୌଣସି hue, saturation ଏବଂ lightness ତ୍ରୟକୁ ସଠିକ୍ 0–255 ଚ୍ୟାନେଲ୍ରେ ପରିଣତ କରେ।
HSL କୁ RGB ପରିବର୍ତ୍ତନ କିପରି କାମ କରେ
- S ଏବଂ L କୁ ଭାଗ ଭାବରେ ପରିଣତ କର ଏବଂ chroma C = (1 − |2L − 1|) × S ଗଣନା କର।
- Hue କୁ 60 ଦ୍ୱାରା ଭାଗ କରି ତାହାର segment ଖୋଜନ୍ତୁ ଏବଂ ମଧ୍ୟସ୍ଥ ମୂଲ୍ୟ X = C × (1 − |(H/60 mod 2) − 1|) ଗଣନା କର।
- ସେହି segment ଅନୁଯାୟୀ R, G ଏବଂ B ସ୍ଲଟ୍ଗୁଡିକୁ C, X ଏବଂ 0 ଦିଅ।
- ସମସ୍ତ ତିନି ଚ୍ୟାନେଲ୍ରେ lightness offset L − C/2 ଯୋଗ କର ଏବଂ 255 ଦ୍ୱାରା ଗୁଣ କର।
କାର୍ଯ୍ୟକ୍ଷମ ଉଦାହରଣ
ଫଳାଫଳ ଅନ୍ତିମ ଗୋଲ କରାଯିବା ପର୍ଯ୍ୟନ୍ତ ସଠିକ୍ ଥାଏ। ଦଶମିକ hue କିମ୍ବା saturation ମୂଲ୍ୟ ସମର୍ଥିତ ଓ ସେଗୁଡିକ ସରଳଭାବେ ସବୁଠାରୁ ନିକଟତମ RGB ତ୍ରୟରେ ଉତ୍ତୀର୍ଣ୍ଣ ହୁଏ।
HSL ଓ RGB ବ୍ୟାଖ୍ୟା
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 କ'ଣ?
RGB ଏକ ରଙ୍ଗକୁ ତିନିଟି ଲାଇଟ୍ ଚ୍ୟାନେଲ୍ ଭାବରେ ବର୍ଣ୍ଣନା କରେ — ଲାଲ, ସବୁଜ ଓ ନୀଳ — ପ୍ରତ୍ୟେକ 0 ଠାରୁ 255 ପର୍ଯ୍ୟନ୍ତ। ଏହା ସ୍କ୍ରିନ୍ କିପରି କାମ କରେ ତାହାକୁ ପ୍ରତିବିମ୍ବିତ କରେ: ତିନିଟିଆ ଭିତରୁ ସମସ୍ତ 255 ହେଲେ ଧଳା, ସମସ୍ତ 0 ହେଲେ କଳା ହୁଏ। RGB ସେତେବେଳେ ଠିକ୍ ଯେଉଁବେଳେ ତୁମେ ରଙ୍ଗ ସହିତ ଗଣିତ କରିବାକୁ ଚାହାଁ, ଏବଂ rgba() ଟ୍ରାନ୍ସପାରେନ୍ସି ଯୋଗ କରେ।
- ସିନ୍ଟାକ୍ସ:
- rgb(R, G, B)
- ରେଞ୍ଜ:
- 0–255 per channel
- ଶ୍ରେଷ୍ଠ ପାଇଁ:
- code, canvas, transparency with rgba()
HSL କୁ RGB ରେଫରେନ୍ସ ଟେବୁଲ୍
ସବୁଠାରୁ ସାଧାରଣ CSS ରଙ୍ଗଗୁଡ଼ିକ, HSL ରୁ RGB କୁ ପରିବର୍ତ୍ତିତ ।
| ରଙ୍ଗ | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |