สร้างสีใหม่ตามแชแนลและค่าของสีอื่น
ใน Chrome 119 เป็นฟีเจอร์สีที่มีประสิทธิภาพสูงจาก CSS Color Level 5 ไวยากรณ์สีสัมพัทธ์ สร้างเส้นทางที่ราบรื่นสำหรับการเปลี่ยนสีภายใน CSS โดยมีวิธีสำหรับ นักเขียนและนักออกแบบในการทำสิ่งต่อไปนี้
- ทำให้สว่างขึ้น
- ทำให้เข้มขึ้น
- เร่งสี
- สีจาง
- การเร่งสี
- ปรับความทึบแสง
- กลับ
- ส่งเสริม
- แปลง
- คอนทราสต์
- ชุดสี
ก่อนไวยากรณ์สีสัมพัทธ์ หากต้องการแก้ไขความทึบแสงของสี คุณต้องสร้างพร็อพเพอร์ตี้ที่กำหนดเองสำหรับแชแนลของสีที่มักจะเป็น HSL แล้วนำมารวมกันเป็นสีสุดท้ายและสีตัวแปรสุดท้าย ซึ่งหมายถึงการจัดการชิ้นส่วนสีจำนวนมาก ซึ่งอาจกลายเป็นภาระอย่างรวดเร็ว
:root {
--brand-hue: 300deg;
--brand-saturation: 75%;
--brand-lightness: 50%;
--brand-hsl:
var(--brand-hue)
var(--brand-saturation)
var(--brand-lightness);
--brand-color: hsl(var(--brand-hsl));
/* all this work just so I can set the opacity to 50% in a variant */
--brand-color-variant: hsl(var(--brand-hsl) / 50%);
}
หลังไวยากรณ์สีสัมพัทธ์ คุณสามารถสร้างสีของแบรนด์โดยใช้พื้นที่สีหรือไวยากรณ์ที่ต้องการ แล้วสร้างตัวแปรความทึบแสงครึ่งหนึ่งโดยใช้โค้ดน้อยลงมาก และยังอ่านเจตนาของรูปแบบและระบบได้ง่ายกว่ามาก
:root {
--brand-color: hsl(300deg 75% 50%);
--brand-color-variant: hsl(from var(--brand-color) h s l / 50%);
}
โพสต์นี้จะช่วยเรียนรู้ไวยากรณ์และสาธิตการปรับแต่งสีโดยทั่วไป
ถ้าคุณต้องการดูวิดีโอ ภารกิจ GUI นี้ครอบคลุมบทความเกือบทั้งหมดต่อไปนี้
ภาพรวมไวยากรณ์
เป้าหมายของไวยากรณ์สีสัมพัทธ์คือการช่วยให้ได้สีจากสีอื่น สีฐานนี้เรียกว่าสีดั้งเดิม โดยเป็นสีที่อยู่หลังคีย์เวิร์ด from ใหม่ เบราว์เซอร์จะแปลงและแยกสีต้นทางนี้ออก และเสนอส่วนต่างๆ เป็นตัวแปรสำหรับใช้ในคำจำกัดความสีใหม่
แผนภาพก่อนหน้าแสดงสีต้นกำเนิด green ที่ถูกแปลงเป็นพื้นที่สีของสีใหม่ เปลี่ยนเป็นแต่ละตัวเลขที่แสดงเป็นตัวแปร r, g, b และ alpha ซึ่งจะใช้เป็นค่าของสี rgb() ใหม่โดยตรง
แม้ว่ารูปภาพนี้แสดงรายละเอียด กระบวนการ และตัวแปร แต่ก็ไม่ได้เปลี่ยนสีด้วยเช่นกัน ระบบจะเปลี่ยนตัวแปรกลับไปเป็นสีโดยไม่มีการเปลี่ยนแปลง ซึ่งจะทำให้สีเขียวยังคงเป็นเหมือนเดิม
คีย์เวิร์ด from
ส่วนแรกของไวยากรณ์ที่ต้องเรียนรู้คือส่วนที่ from <color> เป็นส่วนเพิ่มเติมในการระบุสี โดยจะดำเนินการทันทีก่อนที่คุณจะระบุค่า ต่อไปนี้คือตัวอย่างโค้ดที่เพิ่มทั้งหมดเป็น from green ก่อนที่จะระบุค่าสำหรับ rgb()
.syntax-introduction_same-colors {
color: green;
color: rgb(0 128 0);
color: rgb(from green r g b); /* result = rgb(0 128 0) */
}
คีย์เวิร์ด from นั้นเมื่อเห็นเป็นพารามิเตอร์แรกในสัญลักษณ์ที่ทำงาน
จะเปลี่ยนคำจำกัดความสีเป็นสีสัมพัทธ์! หลังคีย์เวิร์ด from แล้ว CSS คาดหวังว่าสีจะเป็นสีที่เหมาะกับสีถัดไป
การแปลงสี
พูดง่ายๆ คือจะแปลงสีเขียวเป็นแชแนล r g และ b เพื่อใช้ในสีใหม่
rgb(from green r g b) /* r=0 g=128 b=0 */
rgb(from rgb(0 128 0) r g b); /* r=0 g=128 b=0 */
สีจากคุณสมบัติที่กำหนดเอง
การอ่าน rgb from green ชัดเจนและเข้าใจง่ายมาก นี่เป็นเหตุผลที่พร็อพเพอร์ตี้ที่กำหนดเองและไวยากรณ์สีที่เกี่ยวข้องกันอย่างมาก เนื่องจากคุณทำให้สี from เข้าใจได้ โดยทั่วไปแล้วคุณไม่จำเป็นต้องทราบรูปแบบสีของสีพร็อพเพอร์ตี้ที่กำหนดเองด้วย เพราะคุณจะสร้างสีใหม่ในรูปแบบที่ต้องการ
rgb(from rgb(255 105 180) r g b) /* ????? */
rgb(from var(--hotpink) r g b) /* clear */
ทำงานในพื้นที่สีที่คุณต้องการ
คุณสามารถเลือกพื้นที่สีโดยใช้สัญลักษณ์สีที่ใช้งานได้ตามต้องการ
rgb(from hsl(120 100% 25%) r g b) /* r=0 g=128 b=0 */
hsl(from hsl(120 100% 25%) h s l) /* h=120 s=100% l=25% */
hwb(from hsl(120 100% 25%) h w b) /* h=120 w=0% b=50% */
lch(from hsl(120 100% 25%) l c h) /* l=46 c=68 h=134 */
ไวยากรณ์สีสัมพัทธ์มีขั้นตอน Conversion ดังกล่าว สีหลังจาก from จะถูกแปลงเป็นพื้นที่สีตามที่ระบุไว้ในตอนต้นของสีสัมพัทธ์ อินพุตและเอาต์พุตไม่จำเป็นต้องตรงกัน ซึ่งให้อิสระมาก
การเลือกพื้นที่สีก็มีประโยชน์เช่นกัน เนื่องจากการเลือกพื้นที่สีมักจะให้ความสำคัญกับประเภทของการสลับสีมากกว่าที่จะเป็นที่ต้องการ ค่ากำหนดจะอยู่ในผลลัพธ์ ไม่ใช่รูปแบบสีหรือประเภทแชแนล ซึ่งจะชัดเจนขึ้นในส่วนที่สาธิต Use Case เพราะพื้นที่สีที่แตกต่างกันจะทำงานได้ดีเป็นพิเศษกับงานที่ต่างกัน
ผสม จับคู่ ละเว้น และทำซ้ำตัวแปร
เป็นอะไรที่แปลกแต่น่าตื่นเต้นเกี่ยวกับไวยากรณ์นี้ โดยไม่จำเป็นต้องจัดเรียงตัวแปรใหม่ให้ครบและนำมาใช้ซ้ำๆ ได้
rgb(from green g g g) /* rgb(128 128 128) */
rgb(from green b r g) /* rgb(0 0 128) */
rgb(from green 0 0 g) /* rgb(0 0 128) */
ความทึบแสงเป็นตัวแปร
ไวยากรณ์ยังระบุความทึบแสงเป็นตัวแปรที่ชื่อ alpha ด้วย ค่านี้ไม่บังคับ
และจะอยู่หลัง / ในสัญลักษณ์สีที่ทำงาน
rgb(from #00800080 r g b / alpha) /* alpha=50% */
rgb(from rgba(0,128,0,.5) r g b / alpha) /* alpha=50% */
rgb(from rgb(0 128 0 / 50%) r g b / alpha) /* alpha=50% */
ใช้ฟังก์ชัน calc() หรือ CSS อื่นๆ ในตัวแปร
เราก็ได้สร้างสีเขียวซ้ำแล้วซ้ำอีก การเรียนรู้ไวยากรณ์ ทำความคุ้นเคยกับขั้นตอนการเปลี่ยน และโครงสร้างการทำลาย ตอนนี้ถึงเวลาแล้วที่จะแก้ไขตัวแปร ปรับเปลี่ยนเอาต์พุตให้ต่างจากอินพุต
green /* h=120 s=100% l=25% */
hsl(from green calc(h * 2) s l) /* h=240 s=100% l=25% */
เป็นกองทัพเรือแล้ว! เพิ่มโทนสีเป็น 2 เท่า โดยใช้โทนสี 120 แล้วเปลี่ยนเป็น 240 ซึ่งเป็นการเปลี่ยนสีอย่างสมบูรณ์ วิธีนี้ช่วยหมุนโทนสีตามวงล้อสี ซึ่งเป็นกลเม็ดเคล็ดลับที่เข้าใจง่ายมากๆ ด้วยพื้นที่สีทรงกระบอก
เช่น HSL,
HWB,
LCH และ
OKLCH
หากต้องการดูค่าของแชแนลแบบเห็นภาพ เพื่อให้คุณคำนวณได้ทันทีโดยไม่ต้องเดาหรือจำข้อมูลจำเพาะไว้ ลองใช้เครื่องมือค่าแชแนลไวยากรณ์แบบสัมพัทธ์นี้ โดยจะแสดงค่าแต่ละแชแนลตามไวยากรณ์ที่คุณระบุ เพื่อให้คุณทราบว่าคุณสามารถเล่นค่าใดได้บ้าง
ตรวจสอบการรองรับเบราว์เซอร์
@supports (color: rgb(from white r g b)) {
/* safe to use relative color syntax */
}
กรณีการใช้งานและการสาธิต
ตัวอย่างและกรณีการใช้งานต่อไปนี้มีไวยากรณ์ทางเลือกอีกหลายแบบเพื่อให้ได้ผลลัพธ์ที่คล้ายกันหรือเหมือนกัน รูปแบบเหล่านี้มาจากพื้นที่สีและ ช่องทางที่โฆษณานั้นนำเสนอ
นอกจากนี้ หลายๆ ตัวอย่างยังจะแสดงการปรับสีด้วยค่าจริงของ by และ to สีที่เปลี่ยนสี by เป็นการเปลี่ยนสีแบบสัมพัทธ์ คือการเปลี่ยนแปลงที่ใช้ค่าของตัวแปรและทำการปรับเปลี่ยนตามค่าปัจจุบัน สีที่เปลี่ยนสี to เป็นการเปลี่ยนสีสัมบูรณ์ การเปลี่ยนแปลงที่ไม่ใช้ค่าของตัวแปรและระบุค่าใหม่ทั้งหมดแทน
ดูเดโมทั้งหมดได้ในคอลเล็กชัน Codepen
ทำให้สีอ่อนลง
พื้นที่สี OKLCH, OKLAB, XYZ หรือ sRGB จะให้ผลลัพธ์ที่คาดการณ์ได้มากที่สุดเมื่อปรับสีให้สว่างขึ้น
เบาลงเล็กน้อย
ตัวอย่างต่อไปนี้ .lighten-by-25 นำสี blue มาแปลงเป็น OKLCH จากนั้นทำให้สีฟ้าสว่างขึ้นโดยเพิ่มช่องทาง l (ความเบา) ด้วยการคูณค่าปัจจุบันด้วย 1.25 ซึ่งจะทําให้แสงสีฟ้ากลายเป็นสีขาวขึ้น 25%
.lighten-by-25 {
background: oklch(from blue calc(l * 1.25) c h);
}
ทำให้สว่างขึ้นเป็นค่าเฉพาะ
ตัวอย่างต่อไปนี้ .lighten-to-75 ไม่ได้ใช้แชแนล l เพื่อลด blue แต่จะแทนที่ค่าด้วย 75% โดยสมบูรณ์
.lighten-to-75 {
background: oklch(from blue 75% c h);
}
ปรับสีให้เข้มขึ้น
พื้นที่สีเดียวกันมีประสิทธิภาพในการทำให้สีอ่อนลงด้วยเช่นกัน เหมาะสำหรับการทำให้สีมืดลงด้วย
ปรับให้เข้มขึ้น
ตัวอย่างต่อไปนี้ .darken-by-25 นำสีน้ำเงินมาแปลงเป็น OKLCH จากนั้นทำให้สีน้ำเงินเข้มขึ้นโดยลดช่องทาง l (ความสว่าง) ลง 25% ด้วยการคูณค่าด้วย .75 ซึ่งจะทำให้สีน้ำเงินกลายเป็นสีดำ 25%
.darken-by-25 {
background: oklch(from blue calc(l * .75) c h);
}
ปรับให้เข้มเป็นค่าที่ระบุ
ตัวอย่างต่อไปนี้ .darken-to-25 ไม่ได้ใช้แชแนล l เพื่อทําให้มืดลง blue แต่จะแทนที่ค่าด้วย 25% โดยสมบูรณ์
.darken-to-25 {
background: oklch(from blue 25% c h);
}
เร่งสี
อิ่มตัวตามจำนวน
ตัวอย่างต่อไปนี้ .saturate-by-50 ใช้ s จาก hsl() เพื่อเพิ่มความสดของ orchid เป็น 50% แบบสัมพัทธ์
.saturate-by-50 {
background: hsl(from orchid h calc(s * 1.5) l);
}
เร่งสีจนถึงปริมาณที่ต้องการ
ตัวอย่างต่อไปนี้ .saturate-to-100 ไม่ได้ใช้ s Channel จาก hsl() แต่จะระบุค่าความอิ่มตัวที่ต้องการแทน ในตัวอย่างนี้
ความอิ่มตัวจะเพิ่มเป็น 100%
.saturate-to-100 {
background: hsl(from orchid h 100% l);
}
ทำให้สีจางลง
จางลงตามจำนวน
ตัวอย่างต่อไปนี้ .desaturate-by-half ใช้ s จาก hsl() เพื่อลดความอิ่มตัวของ indigo ลงครึ่งหนึ่ง
.desaturate-by-half {
background: hsl(from indigo h calc(s / 2) l);
}
จางลงเป็นค่าเฉพาะ
แทนที่จะทำให้สีจางลงทีละน้อย คุณสามารถทำให้ค่าดังกล่าวจางลงจนเห็นค่าที่ต้องการได้ ตัวอย่างต่อไปนี้ .desaturate-to-25 จะสร้างสีใหม่โดยอิงตาม indigo แต่ตั้งค่าความอิ่มตัวเป็น 25%
.desaturate-to-25 {
background: hsl(from indigo h 25% l);
}
เพิ่มความเข้มของโครมา
เอฟเฟกต์นี้คล้ายกับความอิ่มตัวของสี แต่จะแตกต่างกันใน 2 วิธีนี้ อย่างแรก เป็นการเปลี่ยนแปลงchroma ไม่ใช่การเปลี่ยนแปลงsaturation และเนื่องจากพื้นที่สีที่สามารถเร่งการแสดงผลในช่วงไดนามิกสูงได้ไม่ได้ใช้ความอิ่มตัว พื้นที่สีที่มี chroma สามารถใช้ช่วงไดนามิกสูง ซึ่งช่วยให้ผู้เขียนเพิ่มความสดของสีได้มากกว่าความอิ่มตัว
.increase-chroma {
background: oklch(from orange l calc(c + .1) h);
}
ปรับความทึบแสงของสี
การทำตัวแปรแบบกึ่งโปร่งใสของสีเป็นหนึ่งในการปรับสีที่พบบ่อยที่สุดในระบบการออกแบบ ดูตัวอย่างในบทนำของบทความนี้ หากคุณพลาดไป ซึ่งจะสรุปประเด็นปัญหาได้เป็นอย่างดี
ปรับความทึบแสงตามจํานวน
.decrease-opacity-by-25 {
background: rgb(from lime r g b / calc(alpha / 2));
}
ปรับความทึบแสงเป็นค่าเฉพาะ
.decrease-opacity-to-25 {
background: rgb(from lime r g b / 25%);
}
กลับสี
การกลับสีเป็นฟังก์ชันการปรับสีทั่วไปที่พบในไลบรารีสี วิธีหนึ่งที่ทำได้คือการแปลงสีเป็น RGB แล้วลบค่าของแต่ละแชแนลออกจาก 1
.invert-each-rgb-channel {
background: rgb(from yellow calc(255 - r) calc(255 - g) calc(255 - b));
}
เสริมสี
หากเป้าหมายของคุณไม่ใช่การสลับสี แต่เป็นการเสริมสี ก็แสดงว่าการหมุนสีน่าจะตรงกับสิ่งที่คุณกำลังมองหา เลือกพื้นที่สีที่ให้โทนสีเป็นมุม จากนั้นใช้ calc() เพื่อหมุนโทนสีตามจำนวนที่ต้องการ
การหาองค์ประกอบที่เติมกันของสีโดยการหมุนครึ่งเลี้ยว ในกรณีนี้คุณสามารถเพิ่มหรือลบออกจากแชแนล h ด้วย 180 เพื่อให้ได้ผลลัพธ์
.complementary-color {
background: hsl(from blue calc(h + 180) s l);
}
ตัดกันของสี
ลองใช้ L* (Lstar) เป็นวิธีสร้างอัตราส่วนคอนทราสต์ของสีที่เข้าถึงได้
โหมดนี้จะใช้ช่องความสว่าง (L) ที่รับรู้เท่ากัน (L) จาก LCH และ OKLCH ใน calc() เดลต้า L&midast จะอยู่ที่ประมาณ 40, ~50 หรือ ~60 ขึ้นอยู่กับว่าคุณกำหนดเป้าหมายไปที่คอนทราสต์ต่ำ ปานกลาง หรือสูง
เทคนิคนี้ใช้ได้ดีกับทุกสีใน LCH หรือ OKLCH
ตัดกันสีที่เข้มขึ้น
คลาส .well-contrasting-darker-color แสดง L* ที่มีเดลต้าเท่ากับ 60
เนื่องจากสีเริ่มต้นเป็นสีมืด (ค่าแสงต่ำ) จึงเพิ่ม 60% (.6) ลงในช่องความสว่าง เราใช้เทคนิคนี้ค้นหาข้อความสีเข้ม สีเดียวกัน และสีเดียวกันบนพื้นหลังสีอ่อน
.well-contrasting-darker-color {
background: darkred;
color: oklch(from darkred calc(l + .60) c h);
}
ตัดกันสีอ่อนกว่า
คลาส .well-contrasting-lighter-color แสดง L* ที่มีเดลต้า 60% ด้วย เนื่องจากสีเริ่มต้นเป็นสีอ่อน (ค่าแสงสูง)
เราจึงลบค่า 0.60 ออกจากช่องความสว่าง
.well-contrasting-lighter-color {
background: lightpink;
color: oklch(from lightpink calc(l - .60) c h);
}
ชุดสี
ไวยากรณ์สีสัมพัทธ์ช่วยสร้างชุดสีได้เป็นอย่างดี เป็นประโยชน์และมีประสิทธิภาพเป็นพิเศษเนื่องจากจำนวนพื้นที่สีที่มี ตัวอย่างต่อไปนี้ใช้ OKLCH เนื่องจากช่องความสว่างมีความน่าเชื่อถือ และสามารถหมุนช่องโทนสีได้โดยไม่เกิดผลข้างเคียง ตัวอย่างที่สุดท้ายคือการปรับความสว่างและการหมุนโทนสีรวมกันเพื่อให้ได้ผลลัพธ์ที่น่าสนใจมากขึ้น
เปิดซอร์สโค้ดตัวอย่างของรายการเหล่านี้แล้วลองเปลี่ยน --base-color เพื่อดูว่าจานสีเหล่านี้มีการเปลี่ยนแปลงอยู่ตลอดเวลาอย่างไร สนุกจัง!
หากคุณชอบวิดีโอ เรามีข้อมูลเชิงลึกเกี่ยวกับการสร้างชุดสีใน CSS ด้วย OKLCH บน YouTube
จานสีโมโนโครมาติก
การสร้างจานสีโมโนโครมาติกคือการสร้างพาเล็ตจากโทนสีเดียวกัน แต่จะสว่างและมืดหลายระดับ สีกลางคือสีต้นทางของชุดสี โดยสีอ่อนและเข้มกว่า 2 แบบจะใส่สีทั้งสองข้าง
:root {
--base-color: deeppink;
--color-0: oklch(from var(--base-color) calc(l + .20) c h); /* lightest */
--color-1: oklch(from var(--base-color) calc(l + .10) c h);
--color-2: var(--base-color);
--color-3: oklch(from var(--base-color) calc(l - .10) c h);
--color-4: oklch(from var(--base-color) calc(l - .20) c h); /* darkest */
}
ลองใช้ชุดจานสีที่สร้างขึ้นโดยใช้ไวยากรณ์สีที่เกี่ยวข้องและ OKLCH
Open Props ซึ่งเป็นไลบรารีตัวแปร CSS ฟรีมีชุดสีที่สร้างด้วยกลยุทธ์นี้และทำให้สามารถใช้งานด้วยการนำเข้าได้อย่างง่ายดาย นอกจากนี้ยังสร้างขึ้นจากสีที่คุณปรับแต่งได้ แค่ใส่สีลงไป แล้วตัวเลือกสีก็จะออกมาสวยงาม
จานสีที่คล้ายกัน
เนื่องจากการหมุนโทนสีนั้นง่ายมากเมื่อใช้ OKLCH และ HSL การสร้างชุดสีที่คล้ายกันจึงไม่ใช่เรื่องง่าย หมุนโทนสีตามปริมาณที่คุณชอบผลลัพธ์ที่ได้ และเปลี่ยนสีฐาน แล้วดูจานสีใหม่ที่สร้างขึ้นโดยเบราว์เซอร์
:root {
--base-color: blue;
--primary: var(--base-color);
--secondary: oklch(from var(--base-color) l c calc(h - 45));
--tertiary: oklch(from var(--base-color) l c calc(h + 45));
}
จานสี Triadic
ชุดสีแบบสามสีนั้นคล้ายสีที่เข้ากัน แต่ใช้การหมุนโทนสีที่กลมกลืนไปกับสีฐาน เมื่อสีเสริมอยู่ด้านตรงข้ามของสี เช่น เส้นตรงที่ลากผ่านจุดกึ่งกลางของวงล้อสี จานสี 3 สีก็เหมือนสามเหลี่ยมของเส้นตรงเพื่อหาสี 2 สีที่หมุนเท่าๆ กันจากสีฐาน
หากต้องการทำให้สำเร็จโดยการหมุนโทนสี 120deg
นี่เป็นทฤษฎีสีให้เข้าใจง่ายๆ เล็กน้อย แต่ก็เพียงพอแล้วที่คุณจะนำพาคุณไปสู่ชุดสีสามมิติที่ซับซ้อนขึ้นหากคุณสนใจ
:root {
--base-color: yellow;
--triad-1: oklch(from var(--base-color) l c calc(h - 120));
--triad-2: oklch(from var(--base-color) l c calc(h + 120));
}
จานสี Tetradic
จานสี Tetradic แบ่งเป็น 4 สีเท่าๆ กันรอบๆ วงล้อสี ทำให้เป็นจานสีที่ไม่มีค่าโดดเด่นที่ชัดเจน คุณลองนึกภาพดูก็เหมือนกับ สีคู่ 2 สีคู่กัน ดังนั้นจงใช้ให้ดีจะมีความหมายอย่างมาก
นี่เป็นทฤษฎีสีให้เข้าใจได้ง่ายนิดเดียว แต่หากคุณสนใจก็จะทำให้คุณเริ่มหันมาใช้จานสี tetradic ที่ซับซ้อนขึ้นได้
:root {
--base-color: lime;
--color-1: var(--base-color);
--color-2: oklch(from var(--base-color) l c calc(h + 90));
--color-3: oklch(from var(--base-color) l c calc(h + 180));
--color-4: oklch(from var(--base-color) l c calc(h + 270));
}
สีเดียวและหมุนโทนสีเล็กน้อย
ผู้เชี่ยวชาญด้านสีมากมายใช้กลเม็ดเหล่านี้เด็ดขาด ปัญหาคือ สเกลสีแบบสีเดียวอาจน่าเบื่อ วิธีแก้ไขคือให้เพิ่มการหมุนโทนสีหลักหรือการหมุนสีหลักให้กับสีใหม่แต่ละสีเมื่อความสว่างเปลี่ยนไป
ตัวอย่างต่อไปนี้จะลดความสว่างลง 10% ในแต่ละตัวอย่างและยังหมุนโทนสี 10 องศาด้วย เพื่อให้ได้ชุดสี Hotpink ไปจนถึงสีครามที่กลมกลืนไปกับการไล่ระดับสี
:root {
--base-color: deeppink;
--color-1: var(--base-color);
--color-2: oklch(from var(--base-color) calc(l - .10) c calc(h - 10));
--color-3: oklch(from var(--base-color) calc(l - .20) c calc(h - 20));
--color-4: oklch(from var(--base-color) calc(l - .30) c calc(h - 30));
--color-5: oklch(from var(--base-color) calc(l - .40) c calc(h - 40));
}
ลองใช้ลีดเดอร์บอร์ดนี้ที่สร้างด้วย OKLCH และการหมุนโทนสี
อินเทอร์เฟซลีดเดอร์บอร์ดต่อไปนี้ใช้กลยุทธ์การหมุนเวียนโทนสี แต่ละรายการจะติดตามดัชนีในเอกสารเป็นตัวแปรที่เรียกว่า --i ดัชนีนี้จะนำมาใช้ในการปรับสี ความสว่าง และโทนสี การปรับจะอยู่ที่ 5% หรือ 5deg ซึ่งละเอียดกว่าตัวอย่างด้านบนด้วยดีพพิงค์เป็นอย่างมาก เราจึงต้องคอยสังเกตเหตุผลที่ลีดเดอร์บอร์ดนี้สามารถเป็นโทนสีต่างๆ ที่สง่างามเช่นนี้ได้
อย่าลืมเปลี่ยนโทนสีในแถบเลื่อนใต้ลีดเดอร์บอร์ด แล้วดูไวยากรณ์ที่ใช้สีสัมพัทธ์ในการสร้างช่วงเวลาสีที่สวยงาม
li {
--_bg: oklch(
/* decrease lightness as list grows */
calc(75% - (var(--i) * 5%))
/* decrease chroma as list grows */
calc(.2 - (var(--i) * .01))
/* lightly rotate the hue as the list grows */
calc(var(--hue) - (var(--i) + 5))
);
}