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