چکیدهای از مفاهیم به روز مهندسی نرم افزار برای مهندسین نرمافزار.
معماری نوین نرمافزار، تکنولوژیهای برنامه نویسی جدید
Post #2336
1.55K
🚀 تعریف color در css با OKLCH
🔹 خیلی وقتها در طراحی (وب یا گرافیک) از RGB یا HSB استفاده میکنیم.
ولی یک مدل رنگ جدیدتر به اسم OKLCH آمده است که دقیقتر و طبیعیتر عمل میکند.
مدل OKLCH یک فضای رنگ ادراکی (Perceptual) است، یعنی رنگها را به گونهای تعریف میکند که تغییراتش برای چشم انسان واقعیتر و یکنواختتر باشد.
پارامترها:
پارامتر L (Lightness) : روشنایی (۰ تا ۱۰۰)
پارامتر C (Chroma): شدت/خلوص رنگ
پارامتر H (Hue): فام (زاویه روی چرخه رنگ ۰ تا ۳۶۰)
🔄 تفاوت با RGB
مدل RGB بر اساس سختافزار (سه کانال قرمز، سبز، آبی) است.
اما OKLCH بر اساس چشم انسان.
در RGB وقتی رنگ را روشنتر میکنیم، ممکن است فامش تغییر کند. ولی در OKLCH همان رنگ فقط روشنتر میشود.
🔄 تفاوت با HSB
مدل HSB سادهتر از RGB است، ولی همچنان غیرادراکی
در واقع Saturation و Brightness تو HSB خطی نیستند.
در مدل OKLCH اما Chroma و Lightness دقیقاً همان چیزی هستند که چشم ما حس میکند.
🎨 مثال
گرادینت از قرمز به آبی در RGB : وسط بنفشی تیره و کدر میشود.
همان گرادینت در OKLCH: بنفشی روشن و طبیعی به وجود میآید.
🔗 مطلب کامل را در این لینک میتوانید مطالعه کنید.
⁉️ برای بحث و تبادل نظر فنی در مورد این پست، نظرات خود را با ما در قسمت کامنتها به اشتراک بگذارید.
#حامد_حاجیلو (لینکدین)
کانال تلگرام:
@SoftwarePhilosophy
______
🔹 خیلی وقتها در طراحی (وب یا گرافیک) از RGB یا HSB استفاده میکنیم.
ولی یک مدل رنگ جدیدتر به اسم OKLCH آمده است که دقیقتر و طبیعیتر عمل میکند.
مدل OKLCH یک فضای رنگ ادراکی (Perceptual) است، یعنی رنگها را به گونهای تعریف میکند که تغییراتش برای چشم انسان واقعیتر و یکنواختتر باشد.
پارامترها:
پارامتر L (Lightness) : روشنایی (۰ تا ۱۰۰)
پارامتر C (Chroma): شدت/خلوص رنگ
پارامتر H (Hue): فام (زاویه روی چرخه رنگ ۰ تا ۳۶۰)
🔄 تفاوت با RGB
مدل RGB بر اساس سختافزار (سه کانال قرمز، سبز، آبی) است.
اما OKLCH بر اساس چشم انسان.
در RGB وقتی رنگ را روشنتر میکنیم، ممکن است فامش تغییر کند. ولی در OKLCH همان رنگ فقط روشنتر میشود.
🔄 تفاوت با HSB
مدل HSB سادهتر از RGB است، ولی همچنان غیرادراکی
در واقع Saturation و Brightness تو HSB خطی نیستند.
در مدل OKLCH اما Chroma و Lightness دقیقاً همان چیزی هستند که چشم ما حس میکند.
🎨 مثال
گرادینت از قرمز به آبی در RGB : وسط بنفشی تیره و کدر میشود.
background: linear-gradient(to right, rgb(255,0,0), rgb(0,0,255));
همان گرادینت در OKLCH: بنفشی روشن و طبیعی به وجود میآید.
background: linear-gradient(to right, oklch(65% 0.25 29), oklch(65% 0.25 265));
🔗 مطلب کامل را در این لینک میتوانید مطالعه کنید.
⁉️ برای بحث و تبادل نظر فنی در مورد این پست، نظرات خود را با ما در قسمت کامنتها به اشتراک بگذارید.
#حامد_حاجیلو (لینکدین)
کانال تلگرام:
@SoftwarePhilosophy
______
- 👍 9
- ❤ 3
