M

MLOG

தமிழ்

CSS சார்பு வண்ண தொடரியலுக்கான விரிவான வழிகாட்டி, HSL மற்றும் Lab வண்ண வெளிகளில் கவனம் செலுத்தி, உலகளாவிய வலை வடிவமைப்பாளர்களுக்கு ஆற்றல்மிக்க, அணுகக்கூடிய வண்ணத் திட்டங்களை உருவாக்க உதவுகிறது.

CSS சார்பு வண்ண தொடரியலை எளிமையாக விளக்குதல்: உலகளாவிய வலை வடிவமைப்புக்கான HSL மற்றும் Lab வண்ண வெளிகள்

வலை வடிவமைப்பு உலகம் தொடர்ந்து வளர்ந்து வருகிறது, அதனுடன், பார்வைக்கு ஈர்க்கக்கூடிய மற்றும் அணுகக்கூடிய அனுபவங்களை உருவாக்க நாம் பயன்படுத்தும் கருவிகளும் நுட்பங்களும் மாறுகின்றன. CSS-இல் சமீபத்திய மிக அற்புதமான சேர்த்தல்களில் ஒன்று சார்பு வண்ண தொடரியல் ஆகும். இந்த சக்திவாய்ந்த அம்சம் உங்கள் CSS-க்குள்ளேயே வண்ணங்களைக் கையாள அனுமதிக்கிறது, இதன் மூலம் ஆற்றல்மிக்க தீம்கள், நுட்பமான வேறுபாடுகள் மற்றும் அணுகக்கூடிய வடிவமைப்புகளை அதிக எளிமை மற்றும் நெகிழ்வுத்தன்மையுடன் உருவாக்கலாம். இந்தக் கட்டுரை சார்பு வண்ண தொடரியலின் நுணுக்கங்களை ஆராய்கிறது, குறிப்பாக HSL மற்றும் Lab வண்ண வெளிகளில் கவனம் செலுத்துகிறது, மேலும் அவற்றை உங்கள் உலகளாவிய திட்டங்களுக்கு எவ்வாறு பயன்படுத்தலாம் என்பதை விளக்குகிறது.

CSS சார்பு வண்ண தொடரியல் என்றால் என்ன?

சார்பு வண்ண தொடரியலுக்கு முன்பு, CSS-இல் வண்ணங்களைக் கையாள்வது பெரும்பாலும் Sass அல்லது Less போன்ற முன்செயலிகளைப் பயன்படுத்துவதையோ அல்லது JavaScript-ஐச் சார்ந்திருப்பதையோ உள்ளடக்கியிருந்தது. சார்பு வண்ண தொடரியல், உங்கள் CSS விதிகளுக்குள் இருக்கும் வண்ணங்களை நேரடியாக மாற்ற அனுமதிப்பதன் மூலம் இதை மாற்றுகிறது. இது ஒரு வண்ணத்தின் தனிப்பட்ட கூறுகளான (HSL-இல் உள்ள சாயல், செறிவு மற்றும் வெளிச்சம் போன்றவை) குறிப்பு எடுத்து, அவற்றின் மீது கணித செயல்பாடுகளைப் பயன்படுத்துவதன் மூலம் இதைச் செய்கிறது. இதன் பொருள், ஒரு வண்ணத்தின் தற்போதைய மதிப்பின் அடிப்படையில் அதை ஒளிரச் செய்யவோ, இருளச் செய்யவோ, செறிவூட்டவோ, செறிவு நீக்கவோ அல்லது சாயலை மாற்றவோ முடியும், இவை அனைத்தையும் பல வண்ண வேறுபாடுகளை முன்கூட்டியே வரையறுக்கத் தேவையில்லாமல் செய்யலாம்.

இந்த தொடரியல் color() செயல்பாட்டைச் சுற்றி கட்டமைக்கப்பட்டுள்ளது, இது ஒரு வண்ண வெளியை (hsl, lab, lch, rgb, அல்லது oklab போன்றவை), மாற்றுவதற்கான அடிப்படை வண்ணம் மற்றும் விரும்பிய மாற்றங்களை குறிப்பிட உங்களை அனுமதிக்கிறது. உதாரணமாக:

.element { color: color(hsl red calc(h + 30) s l); }

இந்த குறியீடு சிவப்பு நிறத்தை எடுத்து, hsl வண்ண வெளியைப் பயன்படுத்தி, சாயலை 30 டிகிரி அதிகரிக்கிறது. இங்கு h, s, மற்றும் l ஆகியவை முறையே ஏற்கனவே உள்ள சாயல், செறிவு மற்றும் வெளிச்சம் மதிப்புகளைக் குறிக்கின்றன. கணித செயல்பாடுகளைச் செய்ய calc() செயல்பாடு மிக முக்கியமானது.

ஏன் HSL மற்றும் Lab?

சார்பு வண்ண தொடரியல் பல்வேறு வண்ண வெளிகளுடன் வேலை செய்தாலும், HSL மற்றும் Lab வண்ண கையாளுதல் மற்றும் அணுகல்தன்மைக்கு தனித்துவமான நன்மைகளை வழங்குகின்றன. ஏன் என்று ஆராய்வோம்:

HSL (சாயல், செறிவு, வெளிச்சம்)

HSL என்பது ஒரு உருளை வடிவ வண்ண வெளியாகும், இது மனித உணர்வின் அடிப்படையில் வண்ணங்களை உள்ளுணர்வாகக் குறிக்கிறது. இது மூன்று கூறுகளால் வரையறுக்கப்படுகிறது:

HSL-இன் நன்மைகள்:

உதாரணம்: டார்க் மோட் தீம் உருவாக்குதல்

உங்கள் பிராண்ட் வண்ணம் #007bff (ஒரு துடிப்பான நீலம்) என்று வைத்துக்கொள்வோம். குறைந்த ஒளி நிலைகளில் கண்களுக்கு எளிதாக இருக்கும் அதே வேளையில், பிராண்டின் சாராம்சத்தை பராமரிக்கும் ஒரு டார்க் மோட் தீம் உருவாக்க HSL-ஐப் பயன்படுத்தலாம்.

:root { --brand-color: #007bff; --brand-color-hsl: color(oklch #007bff h s l); --bg-color: #fff; --text-color: #000; } @media (prefers-color-scheme: dark) { :root { --bg-color: #121212; /* ஒரு அடர் சாம்பல் */ --text-color: #fff; --brand-color: color(hsl var(--brand-color) h calc(s * 0.8) calc(l * 1.2)); /* சற்று செறிவு நீக்கப்பட்டு, ஒளிரூட்டப்பட்ட பிராண்ட் வண்ணம் */ } } body { background-color: var(--bg-color); color: var(--text-color); } .brand-button { background-color: var(--brand-color); color: #fff; }

இந்த எடுத்துக்காட்டில், பயனர் இருண்ட வண்ணத் திட்டத்தை விரும்புகிறாரா என்பதைச் சரிபார்க்கிறோம். அப்படியானால், இருண்ட பின்னணிக்கு எதிராக சிறந்த மாறுபாட்டிற்காக பிராண்ட் வண்ணத்தை சற்று செறிவு நீக்கி, ஒளிரச் செய்ய சார்பு வண்ண தொடரியலைப் பயன்படுத்துகிறோம். இது டார்க் மோடில் பயனர் அனுபவத்தை மேம்படுத்தும்போது, பிராண்ட் அடையாளம் சீராக இருப்பதை உறுதி செய்கிறது.

Lab (வெளிச்சம், a, b)

Lab (அல்லது CIELAB) என்பது உணர்தல் ரீதியாக சீரானதாக வடிவமைக்கப்பட்ட ஒரு வண்ண வெளியாகும். இதன் பொருள், வண்ண மதிப்புகளில் ஏற்படும் மாற்றம், தொடக்க வண்ணத்தைப் பொருட்படுத்தாமல், உணரப்பட்ட வண்ண வேறுபாட்டில் இதே போன்ற மாற்றத்திற்கு ஒத்திருக்கிறது. இது மூன்று கூறுகளால் வரையறுக்கப்படுகிறது:

Lab-இன் நன்மைகள்:

உதாரணம்: அணுகல்தன்மைக்காக வண்ண மாறுபாட்டை மேம்படுத்துதல்

போதுமான வண்ண மாறுபாட்டை உறுதி செய்வது அணுகல்தன்மைக்கு இன்றியமையாதது. உங்களிடம் ஒரு உரை வண்ணம் மற்றும் பின்னணி வண்ணம் உள்ளது, அது WCAG AA மாறுபாடு விகிதத் தேவையை (4.5:1) பூர்த்தி செய்யவில்லை என்று வைத்துக்கொள்வோம். தேவை பூர்த்தியாகும் வரை உரையின் வெளிச்சத்தைச் சரிசெய்ய நீங்கள் Lab-ஐப் பயன்படுத்தலாம்.

குறிப்பு: சார்பு வண்ண தொடரியல் மூலம் CSS-இல் நேரடியாக மாறுபாடு விகிதத்தைக் கையாள்வது சாத்தியமில்லை என்றாலும், வெளிச்சத்தைச் சரிசெய்ய அதைப் பயன்படுத்தலாம், பின்னர் மாறுபாடு சரிபார்ப்பு கருவி மூலம் முடிவைச் சரிபார்க்கலாம்.

.text { color: var(--text-color); background-color: var(--bg-color); } :root { --text-color: #333; --bg-color: #eee; } /*உதாரணம்: இது உண்மையில் மாறுபாடு விகிதத்தை நேரடியாகக் கணக்கிடாது.*/ /*இது வெளிச்சத்தைச் சரிசெய்வதற்கான ஒரு கருத்தியல் எடுத்துக்காட்டு*/ .accessible-text { --current-text-color: var(--text-color); color: color(lab var(--current-text-color) calc(l + 10) a b); /* உரையை 10 அலகுகள் ஒளிரூட்டுகிறது. உரையின் L மதிப்பு 100-க்கு அருகில் இருந்தால் இது ஒரு குறிப்பிட்ட புள்ளி வரை மட்டுமே விளைவைக் கொண்டிருக்கும். இருளச் செய்ய, ஒருவர் கழிக்க வேண்டும்*/ }

இந்த எடுத்துக்காட்டில், மாறுபாட்டை மேம்படுத்த உரை வண்ணத்தை ஒளிரச் செய்ய முயற்சிக்கிறோம். CSS-இல் மாறுபாடு விகிதத்தைக் கணக்கிட முடியாததால், மாற்றத்திற்குப் பிறகு முடிவைச் சரிபார்த்து, தேவைக்கேற்ப செம்மைப்படுத்த வேண்டும்.

Oklab: Lab-இன் ஒரு மேம்பாடு

Oklab என்பது Lab-இன் சில உணரப்பட்ட குறைபாடுகளை நிவர்த்தி செய்வதற்காக வடிவமைக்கப்பட்ட ஒப்பீட்டளவில் புதிய வண்ண வெளியாகும். இது இன்னும் சிறந்த உணர்தல் ரீதியான சீரான தன்மையை நோக்கமாகக் கொண்டுள்ளது, வண்ண மதிப்புகளில் ஏற்படும் மாற்றங்கள் உணரப்பட்ட வண்ணத்தை எவ்வாறு பாதிக்கும் என்பதைக் கணிப்பதை எளிதாக்குகிறது. பல சந்தர்ப்பங்களில், Oklab, Lab-ஐ விட வண்ணங்களைச் சரிசெய்ய, குறிப்பாக செறிவு மற்றும் வெளிச்சத்தைக் கையாளும்போது, ஒரு மென்மையான மற்றும் இயல்பான வழியை வழங்குகிறது.

சார்பு வண்ண தொடரியலுடன் Oklab-ஐப் பயன்படுத்துவது Lab-ஐப் பயன்படுத்துவதைப் போன்றது. நீங்கள் வெறுமனே oklab-ஐ வண்ண வெளியாக்க் குறிப்பிட வேண்டும்:

.element { color: color(oklab #ff0000 calc(l * 1.1) a b); /*வண்ணத்தை 10% ஒளிரூட்டுகிறது*/ }

நடைமுறை எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்

HSL மற்றும் Lab உடன் கூடிய சார்பு வண்ண தொடரியல் வலை வடிவமைப்புக்கு பரந்த அளவிலான சாத்தியங்களைத் திறக்கிறது. இதோ சில நடைமுறை எடுத்துக்காட்டுகள்:

உதாரணம்: HSL மூலம் வண்ண தட்டு உருவாக்குதல்

:root { --base-color: #29abe2; /* ஒரு வெளிர் நீலம் */ --complementary-color: color(hsl var(--base-color) calc(h + 180) s l); --analogous-color-1: color(hsl var(--base-color) calc(h + 30) s l); --analogous-color-2: color(hsl var(--base-color) calc(h - 30) s l); --triadic-color-1: color(hsl var(--base-color) calc(h + 120) s l); --triadic-color-2: color(hsl var(--base-color) calc(h - 120) s l); } .base { background-color: var(--base-color); } .complementary { background-color: var(--complementary-color); } .analogous-1 { background-color: var(--analogous-color-1); } .analogous-2 { background-color: var(--analogous-color-2); } .triadic-1 { background-color: var(--triadic-color-1); } .triadic-2 { background-color: var(--triadic-color-2); }

இந்த எடுத்துக்காட்டு HSL-ஐப் பயன்படுத்தி ஒற்றை அடிப்படை வண்ணத்திலிருந்து வண்ணங்களின் தட்டுகளை எவ்வாறு உருவாக்குவது என்பதைக் காட்டுகிறது. வெவ்வேறு வண்ண இணக்கங்களை உருவாக்கவும், உங்கள் குறிப்பிட்ட வடிவமைப்புத் தேவைகளுக்கு ஏற்ப அவற்றை மாற்றியமைக்கவும் இந்த குறியீட்டை நீங்கள் எளிதாக மாற்றியமைக்கலாம்.

உதாரணம்: Lab மூலம் ஹோவர் விளைவை உருவாக்குதல்

.button { background-color: #4caf50; /* ஒரு பச்சை நிறம் */ color: #fff; border: none; padding: 10px 20px; cursor: pointer; transition: background-color 0.3s ease; } .button:hover { background-color: color(lab #4caf50 l calc(a * 1.1) calc(b * 1.1)); /* சற்று ஒளிரூட்டி, a மற்றும் b-ஐ அதிகரிக்கிறது */ }

இங்கே, ஹோவர் செய்யும்போது வண்ணத்தை சற்று ஒளிரச் செய்து, சிவப்பு மற்றும் மஞ்சள் நோக்கி நகர்த்த Lab-ஐப் பயன்படுத்துகிறோம், இது பயனருக்கு ஒரு நுட்பமான ஆனால் கவனிக்கத்தக்க காட்சிப் பின்னூட்டத்தை உருவாக்குகிறது.

உலாவி இணக்கத்தன்மை மற்றும் மாற்று வழிகள்

எந்தவொரு புதிய CSS அம்சத்தையும் போலவே, உலாவி இணக்கத்தன்மை ஒரு முக்கியமான கருத்தாகும். சார்பு வண்ண தொடரியல் Chrome, Firefox, Safari, மற்றும் Edge உட்பட பெரும்பாலான நவீன உலாவிகளில் ஆதரிக்கப்படுகிறது. இருப்பினும், பழைய உலாவிகள் அதை ஆதரிக்காமல் இருக்கலாம்.

உங்கள் வலைத்தளம் எல்லா உலாவிகளிலும் செயல்படுவதை உறுதிசெய்ய, சார்பு வண்ண தொடரியலை ஆதரிக்காத உலாவிகளுக்கு மாற்று வழிகளை வழங்குவது அவசியம். CSS மாறிகள் மற்றும் @supports விதியைப் பயன்படுத்தி இதைச் செய்யலாம்.

:root { --base-color: #29abe2; --highlight-color: #33b5e5; /* மாற்று வண்ணம் */ } @supports (color: color(hsl var(--base-color) h calc(s * 1.2) l)) { :root { --highlight-color: color(hsl var(--base-color) h calc(s * 1.2) l); /* ஆதரிக்கப்பட்டால் சார்பு வண்ண தொடரியலைப் பயன்படுத்தவும் */ } } .highlight { background-color: var(--highlight-color); }

இந்த எடுத்துக்காட்டில், நாங்கள் ஒரு மாற்று வண்ணத்தை (#33b5e5) வரையறுத்து, பின்னர் உலாவி சார்பு வண்ண தொடரியலை ஆதரிக்கிறதா என்பதைச் சரிபார்க்க @supports விதியைப் பயன்படுத்துகிறோம். அது ஆதரித்தால், சார்பு வண்ண தொடரியலைப் பயன்படுத்தி உருவாக்கப்பட்ட வண்ணத்துடன் --highlight-color மாறியை நாங்கள் புதுப்பிக்கிறோம். இது பழைய உலாவிகளில் உள்ள பயனர்கள், புதிய உலாவிகளில் உள்ளதைப் போன்ற சரியான வண்ணமாக இல்லாவிட்டாலும், முன்னிலைப்படுத்தப்பட்ட ஒரு தனிமத்தைப் பார்ப்பதை உறுதி செய்கிறது.

அணுகல்தன்மை பரிசீலனைகள்

சார்பு வண்ண தொடரியல் பார்வைக்கு ஈர்க்கக்கூடிய வடிவமைப்புகளை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த கருவியாக இருக்க முடியும் என்றாலும், அணுகல்தன்மையைக் கருத்தில் கொள்வது மிகவும் முக்கியம். நீங்கள் உருவாக்கும் வண்ண சேர்க்கைகள் பார்வைக் குறைபாடுள்ள பயனர்களுக்கு போதுமான மாறுபாட்டை வழங்குவதை உறுதிசெய்யுங்கள். உங்கள் வண்ண சேர்க்கைகள் WCAG AA அல்லது AAA மாறுபாடு விகிதத் தேவைகளைப் பூர்த்தி செய்கின்றனவா என்பதை சரிபார்க்க WebAIM Contrast Checker போன்ற கருவிகளைப் பயன்படுத்தவும்.

வண்ண உணர்தல் நபருக்கு நபர் கணிசமாக மாறுபடும் என்பதை நினைவில் கொள்ளுங்கள். வெவ்வேறு வகையான வண்ணக் குருடு அல்லது பார்வைக் குறைபாடு உள்ள பயனர்களுடன் உங்கள் வடிவமைப்புகளைச் சோதித்து, அவர்கள் உங்கள் வலைத்தளத்தை எளிதாக உணரவும் தொடர்பு கொள்ளவும் முடிகிறதா என்பதை உறுதிப்படுத்தவும்.

முடிவுரை

CSS சார்பு வண்ண தொடரியல், குறிப்பாக HSL மற்றும் Lab வண்ண வெளிகளுடன் இணைந்தால், வலை வடிவமைப்பாளர்களுக்கு ஒரு கேம்-சேஞ்சர் ஆகும். இது அதிக எளிமை மற்றும் நெகிழ்வுத்தன்மையுடன் ஆற்றல்மிக்க தீம்கள், நுட்பமான வேறுபாடுகள் மற்றும் அணுகக்கூடிய வடிவமைப்புகளை உருவாக்க உங்களுக்கு அதிகாரம் அளிக்கிறது. HSL மற்றும் Lab-இன் கொள்கைகளைப் புரிந்துகொள்வதன் மூலமும், பழைய உலாவிகளுக்கு மாற்று வழிகளை வழங்குவதன் மூலமும், உலகெங்கிலும் உள்ள பயனர்களுக்கு பார்வைக்கு பிரமிக்க வைக்கும் மற்றும் உள்ளடக்கிய அனுபவங்களை உருவாக்க இந்த சக்திவாய்ந்த அம்சத்தைப் பயன்படுத்தலாம்.

சார்பு வண்ண தொடரியலின் சக்தியைத் தழுவி, உங்கள் வலை வடிவமைப்புத் திறன்களை அடுத்த கட்டத்திற்கு உயர்த்துங்கள். வெவ்வேறு வண்ண வெளிகள், கணித செயல்பாடுகள் மற்றும் அணுகல்தன்மை பரிசீலனைகளுடன் பரிசோதனை செய்து, அனைவருக்கும் அழகாகவும் உள்ளடக்கமாகவும் இருக்கும் வலைத்தளங்களை உருவாக்குங்கள்.

மேலும் கற்க

CSS சார்பு வண்ண தொடரியலைப் புரிந்துகொண்டு பயன்படுத்துவதன் மூலம், உலகளாவிய பார்வையாளர்களுக்கு ஏற்றவாறு அதிக ஆற்றல்மிக்க, அணுகக்கூடிய மற்றும் பார்வைக்கு ஈர்க்கக்கூடிய வலைத்தளங்களை நீங்கள் உருவாக்கலாம். வண்ணத்துடன் வடிவமைக்கும்போது எப்போதும் அணுகல்தன்மை மற்றும் பயனர் அனுபவத்திற்கு முன்னுரிமை அளிக்க நினைவில் கொள்ளுங்கள்.