HSL ରେ ରଙ୍ଗ ଚୟନ କରିବା ସୁବିଧାଜନକ, କିନ୍ତୁ stylesheets, design handoffs ଏବଂ brand documents ତଥାବିଦି HEX ରେ ଚାଲିଥାଏ। ଏହି କନଭର୍ଟର୍ ସେଇ ଖାଲିକୁ ପୁରଣ କରେ ଏବଂ ଯେକୌଣସି hue, saturation ଓ lightness ଦ୍ୱାରା ଛଅ-ଡିଜିଟ୍ HEX କୋଡ୍ ଦିଏ।
HSL କୁ HEX ପରିବର୍ତ୍ତନ କିପରି କାମ କରେ
- saturation ଓ lightness କୁ ଭାଗ ଭଳେ ପରିବର୍ତ୍ତନ କର: 60% ହେବ 0.6।
- chroma C = (1 − |2L − 1|) × S ଗଣନା କର — ଏହା ଦର୍ଶାଏ ରଙ୍ଗ କେତେ ଧରଣର ଗ୍ରେ (grey) ଠାରୁ ଦୂରରେ ଅଛି।
- hue ବ୍ୟବହାର କରି ସେଇ chroma କୁ ଲାଲ୍, ହରିତ ଓ ନୀଳ ଚ୍ୟାନେଲରେ ରଖ, ତାପରେ ସବୁ ତିନୋଟି କୁ L − C/2 ଦ୍ୱାରା ସ୍ଥାନାନ୍ତର କର।
- ପ୍ରତ୍ୟେକ ଚ୍ୟାନେଲକୁ 255 ରେ ଗୁଣ କର, ଘନା କର (round), ଏବଂ ତାହାକୁ ଦୁଇ ହେକ୍ସାଡେସିମାଲ୍ ଡିଜିଟ୍ ଭାବେ ଲେଖ।
କାର୍ଯ୍ୟକ୍ଷମ ଉଦାହରଣ
ଗୋଲାକାର ହେଉଛି ଶେଷ ପଦକ୍ଷେପରେ, ଯେତେବେଳେ ପ୍ରତ୍ୟେକ ଚ୍ୟାନେଲକୁ 0–255 ର ସଂପୁର୍ଣ୍ଣ ମୂଲ୍ୟରେ ନଜରଦ୶ାଯାଏ। ଫଳାଫଳ ତୁମ HSL ଇନପୁଟ୍କୁ ଅତ୍ୟନ୍ତ ନିକଟତମ HEX କୋଡ୍ ଦିଏ ଏବଂ ସାଧାରଣତଃ ଏହା design tool ଯେଉଁଥିରେ ଦେଖାଯାଏ ସହିତ ପରିଚିତ ହୁଏ।
HSL ଓ HEX ବ୍ୟାଖ୍ୟା
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
HEX କ'ଣ?
HEX କୋଡ୍ ହେଉଛି ଏକ ଛଅ-ଅଙ୍କର ହେକ୍ସାଡେସିମାଲ୍ ସଂଖ୍ୟା ଯାହା ଏକ ଆଗର # ସହିତ ରଙ୍ଗର ଲାଲ, ସବୁଜ ଓ ନୀଳ ଚ୍ୟାନେଲ୍ ସଂରକ୍ଷଣ କରେ। ପ୍ରତ୍ୟେକ ଜୋଡ଼ା ଡିଜିଟ୍ ଗୋଟିଏ ଚ୍ୟାନେଲ୍କୁ କଭର୍ କରେ, 00 (କେହି ନାହିଁ) ଠାରୁ FF (ପୂରା) ପର୍ଯ୍ୟନ୍ତ, ଯାହା RGB ର 16.7 ମିଲିଅନ୍ ରଙ୍ଗକୁ ସଂକ୍ଷିପ୍ତ ଭାବରେ ପ୍ରତିନିଧିତ୍ୱ କରେ। HEX CSS, ଡିଜାଇନ୍ ଟୁଲ୍ ଏବଂ brand guidelines ରେ ଡିଫଲ୍ଟ ଅଟକାଉଛି।
- ସିନ୍ଟାକ୍ସ:
- #RRGGBB
- ରେଞ୍ଜ:
- 00–FF per channel
- ଶ୍ରେଷ୍ଠ ପାଇଁ:
- CSS, design handoff, brand guidelines
HSL କୁ HEX ରେଫରେନ୍ସ ଟେବୁଲ୍
ସବୁଠାରୁ ସାଧାରଣ CSS ରଙ୍ଗଗୁଡ଼ିକ, HSL ରୁ HEX କୁ ପରିବର୍ତ୍ତିତ ।
| ରଙ୍ଗ | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |