color-mix() และไวยากรณ์สีแบบสัมพัทธ์
ผสมสีเข้าด้วยกันและสร้างรูปแบบสีโดยใช้ฟังก์ชันสี CSS สมัยใหม่
color-mix() และไวยากรณ์สีแบบสัมพัทธ์ เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
ฟังก์ชัน color-mix()
color-mix() ผสมสีสองสีเข้าด้วยกันในปริภูมิสีที่กำหนด ช่วยให้สร้างความหลากหลายของสีจากโทเค็นการออกแบบได้โดยไม่ต้องใช้ Sass หรือ JavaScript
<button class="button-hover">Hover-mixed button</button>ไวยากรณ์ของ color-mix()
ไวยากรณ์เต็มรูปแบบ: color-mix(in <color-space>, <color-1> [percentage], <color-2> [percentage]) เปอร์เซ็นต์ทั้งหมดต้องรวมกันได้ 100%
<div class="mix-equal">Equal mix</div>
<div class="mix-weighted">Weighted mix</div>ปริภูมิสีใน color-mix()
ปริภูมิสีมีผลต่อผลลัพธ์ของการผสมสี ปริภูมิสีเชิงการรับรู้สมัยใหม่ เช่น oklch ให้ผลลัพธ์ที่สม่ำเสมอทางสายตามากกว่า srgb:
<div class="oklch-mix">OKLCH mix</div>
<div class="srgb-mix">sRGB mix</div>การสร้างมาตราส่วนสีด้วย color-mix()
สร้างชุดสีที่สม่ำเสมอจากสีแบรนด์เพียงสีเดียว:
<span class="swatch swatch-100"></span>
<span class="swatch swatch-300"></span>
<span class="swatch swatch-700"></span>
<span class="swatch swatch-900"></span>ไวยากรณ์สีสัมพัทธ์
สีสัมพัทธ์ช่วยให้สร้างสีใหม่จากสีที่มีอยู่ โดยปรับเปลี่ยนแชนเนลบางรายการ ใช้คีย์เวิร์ด from:
<p class="darker">20% darker text</p>
<p class="desaturated">Half saturation text</p>รูปแบบโปร่งใสด้วยสีสัมพัทธ์
สร้างสีแบรนด์แบบโปร่งใสโดยไม่ต้องทราบค่า RGB:
<div class="overlay">Overlay</div>การทำให้สว่างและมืดลง
เพิ่มหรือลดค่าความสว่างใน oklch เพื่อสร้างสีอ่อนและสีเข้ม:
<div class="card demo-active">Card</div>ภาพรวมปริภูมิสี OKLCH
OKLCH เป็นปริภูมิสีที่สม่ำเสมอในเชิงการรับรู้:
l— ความสว่าง (0 ถึง 1)c— ความเข้มสี/ความอิ่มตัว (0 ถึง 0.4+)h— มุมเฉดสี (0 ถึง 360)
การปรับ l จะทำให้สีอ่อนและสีเข้มมีความสม่ำเสมออย่างคาดการณ์ได้
การรองรับของเบราว์เซอร์
color-mix() รองรับใน Chrome 111+, Firefox 113+ และ Safari 16.2+ ส่วนไวยากรณ์สีสัมพัทธ์ (คีย์เวิร์ด from) รองรับใน Chrome 119+, Safari 16.4+ และ Firefox 128+ ตรวจสอบการรองรับปัจจุบันได้ที่ caniuse.com
อนาคตของ color-contrast()
color-contrast() เป็นฟังก์ชันที่อยู่ระหว่างการเสนอ ซึ่งจะเลือกสีที่อ่านง่ายที่สุดจากรายการสีโดยอัตโนมัติ เพื่อใช้ตัดกับพื้นหลังที่กำหนด ฟังก์ชันนี้ยังไม่รองรับในเบราว์เซอร์ แต่ได้รับการออกแบบมาสำหรับการกำหนดธีมที่ให้ความสำคัญกับการเข้าถึง
ตรวจสอบอย่างรวดเร็ว
ปริภูมิสีใดใน color-mix() ที่ให้ผลลัพธ์การผสมสีสม่ำเสมอที่สุดในเชิงการรับรู้
สรุปทบทวน
color-mix(in oklch, color1 %, color2 %) ผสมสีในปริภูมิที่กำหนด เหมาะสำหรับสร้างสีอ่อน สีเข้ม และรูปแบบโปร่งใสจากสีแบรนด์เพียงสีเดียว ไวยากรณ์สีสัมพัทธ์ (oklch(from var(--brand) calc(l+0.2) c h)) สร้างสีใหม่โดยปรับเปลี่ยนแชนเนลแต่ละรายการ OKLCH เป็นปริภูมิสีที่ดีที่สุดสำหรับผลลัพธ์ที่สม่ำเสมอในเชิงการรับรู้
เรียนรู้ CSS ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 40
- บทเรียน
- 159
คำถามที่พบบ่อย
บทเรียน “color-mix() และไวยากรณ์สีแบบสัมพัทธ์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “color-mix() และไวยากรณ์สีแบบสัมพัทธ์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “color-mix() และไวยากรณ์สีแบบสัมพัทธ์”
ผสมสีเข้าด้วยกันและสร้างรูปแบบสีโดยใช้ฟังก์ชันสี CSS สมัยใหม่ คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “color-mix() และไวยากรณ์สีแบบสัมพัทธ์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- calc() สำหรับการคำนวณแบบไดนามิก
- min() max() และ clamp() สำหรับค่าแบบยืดหยุ่น
- repeat() และ minmax() ในกริด
- color-mix() และไวยากรณ์สีแบบสัมพัทธ์