HSL คืออะไรและทำไมนักออกแบบควรเชี่ยวชาญ

Color เป็นหนึ่งในเครื่องมือที่ทรงพลังที่สุดในชุดเครื่องมือของนักออกแบบ แต่การทำงานกับระบบแบบดั้งเดิมเช่น HEX และ RGB บางครั้งอาจรู้สึก จำกัด รูปแบบเหล่านี้ใช้งานได้ แต่พวกเขาไม่ได้สะท้อนให้เห็นว่าเราเห็นหรือคิดเกี่ยวกับสีจริง ๆ ต้องการเฉดสีที่เบากว่าหรือต้องการจับคู่ความอิ่มตัวของสีที่แตกต่างกันหรือไม่? คุณกำลังคาดเดา

นั่นคือสิ่งที่เกิดขึ้นความอิ่มตัวและความสว่าง (HSL) เข้ามามันทำให้การปรับสีมีภาพและคาดการณ์ได้มากขึ้นและตอนนี้ Divi 5 รองรับมันด้วยการปล่อยสีสันและคุณสมบัติ HSL มาสำรวจว่ามันทำงานอย่างไรและทำไมคุณถึงต้องการเชี่ยวชาญ

ทำไมนักออกแบบส่วนใหญ่ต่อสู้กับตัวเลือกสี

เครื่องมือสีมักไม่ตรงกับวิธีที่เราคิดเกี่ยวกับสี คุณเห็นสีน้ำเงินที่คุณรัก แต่วิธีเดียวที่จะจับได้คือผ่านรหัส hex เช่น #4A90E2 ตัวอักษรและตัวเลขเหล่านั้นไม่มีความหมายอะไรกับสมองของคุณ

สีหกเหลี่ยมทำโดยการผสมค่าสีแดงสีเขียวและสีน้ำเงิน แต่ละคู่ (เช่น 4A, 90, E2) แสดงจำนวนของแต่ละสีตั้งแต่ 0 ถึง 255 รวมกันพวกเขาสร้างสีสุดท้าย #4A90E2

คุณอาจมีปัญหาในการหาตัวเลขที่จะเปลี่ยนเมื่อคุณต้องการแบรนด์สีน้ำเงินรุ่นที่เบากว่า คุณควรเพิ่มค่า RGB ทั้งหมดอย่างเท่าเทียมกันหรือไม่? หรือปรับช่อง RGB เพียงช่องเดียว (สีแดงสีเขียวหรือสีน้ำเงิน)? ตัวเลขไม่ตรงกับสิ่งที่ดวงตาของคุณคาดหวังดังนั้นคุณจึงปรับและดูตัวอย่างจนกว่าจะรู้สึกถูกต้อง

ระบบสีแบบดั้งเดิมสร้างปัญหาที่ใหญ่ขึ้นเมื่อคุณทำงานในบริบทที่แตกต่างกัน การสร้างความแปรปรวนของสีกลายเป็นการคาดเดาที่บริสุทธิ์ คุณต้องการห้าเฉดสีที่ทำงานร่วมกัน แต่ไม่มีระบบสำหรับมัน การลดน้ำหนัก #4A90E2 ถึง #6BA3E8 อาจดูถูกต้องหรืออาจดูล้างออก คุณจะไม่รู้จนกว่าคุณจะเห็น

การรับเฉดสีโดยการเปลี่ยนรหัสฐานสิบหกไม่ใช่เรื่องง่าย ค่า hex ใหม่ ( #6BA3E8) ได้รับการคัดเลือกอย่างระมัดระวังทางด้านซ้ายเพื่อสร้างเฉดสีที่เบากว่า #4A90E2 ทางด้านขวาเพียงแค่ทำการเปลี่ยนแปลงเล็กน้อย (#3B99E5) ไม่ทำให้สีสว่างขึ้น แต่เปลี่ยนไปอย่างสมบูรณ์

เวิร์กโฟลว์แบบแมนนวลที่ช้านี้ใช้เวลาหลายชั่วโมงกว่าจะเสร็จสมบูรณ์ คุณปรับแต่งค่าตรวจสอบตัวอย่างและปรับแต่งอีกครั้งต่อสู้กับเครื่องมือแทนที่จะออกแบบ ความสนใจของคุณถูกดูดเข้าไปในรายละเอียดทางเทคนิคเมื่อควรมุ่งเน้นไปที่สีทำให้คนรู้สึกอย่างไร

นักออกแบบหลายคนจบลงด้วยการหลีกเลี่ยงการทดลองสีเพราะกระบวนการรู้สึกไม่ดี คุณยึดติดกับตัวเลือกที่ปลอดภัยหรือคัดลอกจานจากเว็บไซต์อื่น ๆ เครื่องมือที่จะช่วยให้คุณสำรวจความคิดสร้างสรรค์สีได้จริง

ปัญหาเกี่ยวกับค่า RGB แบบคงที่

ค่า RGB ไม่ได้ทำตามที่คุณคาดหวังเสมอไป สีเขียวปรากฏขึ้นในทางที่สว่างกว่าสีน้ำเงินในการตั้งค่าเดียวกัน แต่ระบบปฏิบัติต่อพวกเขาอย่างเท่าเทียมกัน RGB (128, 128, 128) เป็นสีเทาขนาดกลางที่สมบูรณ์แบบ แต่วิธีการดูอาจแตกต่างกันไปขึ้นอยู่กับหน้าจอแสงหรือโปรไฟล์สีที่ใช้

ต้องการสีแบรนด์ที่เบากว่าของคุณหรือไม่? คุณสามารถลองเพิ่มค่า RGB และบางครั้งคุณได้รับสิ่งที่คุณคาดหวัง บางครั้งคุณจะได้รับสิ่งที่ดูถูกล้างออกและแปลก ไม่มีวิธีที่จะบอกล่วงหน้า

สีฟ้าแบรนด์ที่มีค่า RGB เพิ่มขึ้นอย่างเท่าเทียมกันโดย +50 ส่งผลให้เกิดเฉดสีที่ถูกล้างออกซึ่งไม่ได้เป็นโทนสีที่เบากว่าที่คาดไว้ นี่แสดงให้เห็นว่าการเพิ่มจำนวนเท่ากันในแต่ละช่อง RGB ไม่ได้ผลิตเฉดสีที่คาดการณ์ได้หรือสมดุลเสมอไป

สี RGB ยังเปลี่ยนระหว่างโปรแกรมที่แตกต่างกัน สิ่งนี้เกิดขึ้นเนื่องจากความแตกต่างของโปรไฟล์สีเครื่องยนต์ที่แสดงผลและวิธีการที่เบราว์เซอร์ตีความค่าเหล่านั้น เลือกเฉดสีที่สมบูรณ์แบบใน Photoshop คัดลอกรหัส hex ไปยังเว็บไซต์ของคุณและอาจยังดูแตกต่างกันเล็กน้อย แนวทางของแบรนด์นั้นยากที่จะบังคับใช้เมื่อรหัสสีเดียวกันดูแตกต่างกันเล็กน้อยในเบราว์เซอร์และเครื่องมือออกแบบ

แต่ละสีเปลี่ยนไปในแบบของตัวเองเมื่อคุณพยายามทำให้เบาลงหรือทำให้มืดลง เนื่องจาก RGB ไม่ได้ปรับสีอย่างสม่ำเสมอ เฉดสีบางส่วนทำให้เร็วกว่าคนอื่นเมื่อความสว่างเพิ่มขึ้น สีน้ำเงินของคุณเปลี่ยนเป็นสีเทาในขณะที่สีแดงของคุณยังคงมีชีวิตชีวา สีม่วงของคุณได้รับโคลนในขณะที่สีส้มยังคงสะอาดอยู่

งานสีเปลี่ยนเป็นข้อผิดพลาดทดลองใช้แทนการออกแบบโดยเจตนา

ระบบสีความอิ่มตัวและความสว่าง (HSL) คืออะไร?

Hue, Saturation และ Lightness (HSL) แบ่งสีออกเป็นสามส่วนที่ตรงกับวิธีที่สมองของคุณคิดเกี่ยวกับสี Hue เลือกสีฐานจากตัวเลือก 360 ตัวเลือก ความอิ่มตัวควบคุมว่าสีสันสดใสหรือสีเทาดูเป็นอย่างไร Lightness ตัดสินใจว่ามันมืดสว่างหรืออยู่ที่ไหนสักแห่ง

เมื่อคุณคิดว่า“ ฉันต้องการสีเขียวเข้ม” คุณกำลังคิดถึงคำศัพท์ HSL อยู่แล้ว คุณรู้ว่าคุณต้องการสีเขียว (สี) อาจจะค่อนข้างรวย (ความอิ่มตัว) และด้านมืดกว่า (ความเบา)

องค์ประกอบทั้งสามทำงานร่วมกันอย่างไร

เว้ทำงานได้เหมือนการตัดล้อสีจากสเปกตรัมแสงที่มองเห็นได้ ปลายเชื่อมต่อสีแดงเข้ากับสีม่วงแดงสร้างวงที่ราบรื่นของทุกสีที่เป็นไปได้ ต้องการสีส้มที่สมบูรณ์แบบหรือไม่? เริ่มต้นที่สีแดง (0 องศา) และย้ายไปที่สีเหลืองประมาณ 30 องศา

ความอิ่มตัววัดความบริสุทธิ์สีเป็นเปอร์เซ็นต์ ศูนย์เปอร์เซ็นต์ลบสีทั้งหมดออกจากสีเทา หนึ่งร้อยเปอร์เซ็นต์ให้รุ่นที่สดใสที่สุดเท่าที่จะเป็นไปได้ คิดว่าความอิ่มตัวเป็นความแตกต่างระหว่างสัญญาณนีออนและสีน้ำที่ปิดเสียง

สี HSL ทำงานได้อย่างไรได้รับแรงบันดาลใจจากกราฟิกบน Wikipedia เกี่ยวกับหัวข้อเดียวกัน

ความสว่างมีตั้งแต่ 0% (สีดำบริสุทธิ์) ถึง 50% (เป็นกลาง) ถึง 100% (สีขาวบริสุทธิ์) สีที่ใช้งานได้ส่วนใหญ่มีชีวิตอยู่ระหว่าง 20% ถึง 80% สิ่งนี้ตรงกับวิธีที่คุณคิดเกี่ยวกับการทำให้สีอ่อนลงหรือเข้มขึ้น

ทำไมผู้สร้างหน้ามักจะหลีกเลี่ยง HSL

ผู้สร้างหน้าส่วนใหญ่ติดกับรหัส hex และ RGB ด้วยเหตุผลในทางปฏิบัติไม่ใช่เพราะระบบเหล่านี้ทำงานได้ดีขึ้น นักพัฒนาผู้สร้างเผชิญกับอุปสรรคทางเทคนิคที่แท้จริง ผู้ใช้รู้รหัส Hex จาก Photoshop และเครื่องมือออกแบบอื่น ๆ การแปลงระหว่างระบบสีต้องใช้การประมวลผลเพิ่มเติม

การสนับสนุน HSL หมายถึงการสร้างอินเทอร์เฟซใหม่และให้ความรู้แก่ผู้ใช้เกี่ยวกับแนวคิดที่ไม่คุ้นเคยเว้นแต่ว่าตัวเลือกสี HSL จะถูกจับอย่างสมบูรณ์แบบ วิธีการอนุรักษ์นี้ทำให้รู้สึกถึงมุมมองทางธุรกิจแม้ว่าจะจำกัดความเป็นไปได้ที่สร้างสรรค์

สร้างรูปแบบสีที่สมบูรณ์แบบด้วยการควบคุม HSL ใหม่ของ Divi 5

HSL ฟังดูยอดเยี่ยมในทางทฤษฎี แต่ทฤษฎีไม่ได้สร้างเว็บไซต์ คุณต้องการเครื่องมือที่สนับสนุนวิธีการนี้ ผู้สร้างหน้าส่วนใหญ่บังคับให้คุณกลับเข้าสู่รหัส hex และการคาดเดา RGB Divi 5 เปลี่ยนทุกอย่างเกี่ยวกับวิธีการทำงานกับสี แต่ก่อน:

Divi คืออะไร?

Divi เป็นตัวสร้างหน้าเว็บที่ทำงานแตกต่างจากผู้สร้างหน้า WordPress อื่น ๆ คุณได้รับเครื่องมือออกแบบภาพผสมกับการควบคุมการพิมพ์ที่จริงจัง ตัวแก้ไขสดแสดงการเปลี่ยนแปลงของคุณทันที ปรับขนาดตัวอักษร, ระยะห่างของเส้นปรับแต่งและดูการอัปเดตหน้าเว็บของคุณที่นั่น

คุณสามารถวางโมดูลกว่า 200+ ได้ทุกที่ที่คุณต้องการ บล็อกข้อความพาดหัวข่าวและชิ้นส่วนเนื้อหาพิเศษทั้งหมดเล่นเข้าด้วยกัน

นี่คือสิ่งที่ทำให้ Divi Special: 2000+ เลย์เอาต์สำเร็จรูปที่สร้างขึ้นสำหรับธุรกิจจริง เรากำลังพูดถึงการออกแบบที่แท้จริงไม่ใช่เทมเพลตเริ่มต้นพื้นฐาน ต้องการอะไรสำหรับร้านอาหารของคุณหรือไม่? มีเลย์เอาต์สำหรับสิ่งนั้น ใช้สตูดิโอถ่ายภาพ? เรามีคุณครอบคลุม ที่ปรึกษาและ บริษัท สตาร์ทอัพเทคโนโลยีได้รับการออกแบบของตัวเองเช่นกัน

แต่ละเค้าโครงรู้อุตสาหกรรมของคุณ สีระยะห่างและการไหลของเนื้อหาล้วนทำให้ลูกค้าคิดและเรียกดูอย่างไร

ใช้การควบคุมไซต์เต็มรูปแบบ

ตัวสร้างธีมวางสไตล์ข้อความของเว็บไซต์ของคุณทุกชิ้นในมือของคุณ สร้างส่วนหัวที่กำหนดเองที่พูดภาษาของแบรนด์ของคุณ ออกแบบหน้าบล็อกที่ทำให้บทความยาวอ่านง่าย หน้าข้อผิดพลาด 404 ของคุณสามารถเก็บแบบอักษรและสไตล์เดียวกันกับส่วนที่เหลือของเว็บไซต์ของคุณ

Divi Ai นำปัญญาประดิษฐ์เข้ามาในเวิร์กโฟลว์ของคุณ สร้างพาดหัวข่าวที่ฟังดูเหมือนคุณเขียน สร้างสำเนาผลิตภัณฑ์ที่ตรงกับเสียงแบรนด์ของคุณ

มันสร้างส่วนหน้าทั้งหมดที่เข้าใจธุรกิจของคุณ

เขียนโค้ดตัวอย่างเมื่อคุณต้องการ

Divi Ai ทำงานร่วมกับภาพของคุณในตัวสร้างเช่นกัน อธิบายสิ่งที่ต้องการการแก้ไขในภาพใด ๆ และวิธีการเปลี่ยนแปลงเหล่านั้น

แม้แต่สร้างภาพใหม่อย่างสมบูรณ์ตามความต้องการ

ข้ามปัญหาหน้าเว็บว่างด้วยไซต์ Divi Quick

ไซต์ Divi Quick แก้ไขปัญหาหน้าว่างที่หยุดโครงการหลายโครงการก่อนที่จะเริ่ม ไซต์เริ่มต้นมืออาชีพมาพร้อมกับการพิมพ์ตัวอักษรแล้ว ทีมออกแบบของเราสร้างเทมเพลตเหล่านี้ด้วยภาพและงานศิลปะที่ไม่เหมือนใครที่คุณจะไม่เห็นที่อื่น

ไซต์ Divi Quick ที่มี Divi AI ยังสามารถสร้างเลย์เอาต์ที่กำหนดเองตามคำอธิบายทางธุรกิจของคุณ บอกเกี่ยวกับแนวทางปฏิบัติหรือร้านอาหารของคุณและสร้างหน้าเว็บที่เกี่ยวข้องด้วยสำเนาที่เหมาะสมสำหรับอุตสาหกรรมของคุณ

สิ่งนี้นอกเหนือไปจากโครงร่าง คุณจะได้รับพาดหัวจริงสำเนาร่างกายและรูปภาพที่เหมาะสมสำหรับธุรกิจของคุณ คุณสามารถตั้งค่าฟอนต์แบรนด์และสีสันล่วงหน้าหรือปล่อยให้ AI เลือกให้คุณ

หลังจากนั้นทุกอย่างยังคงแก้ไขได้อย่างเต็มที่ดังนั้นคุณสามารถปรับแต่งการพิมพ์เพื่อให้ตรงกับวิสัยทัศน์ของคุณ

มีอะไรใหม่ใน Divi 5?

Divi 5 เป็นรุ่นต่อไปของ Builder Page ซึ่งปัจจุบันอยู่ในการทดสอบอัลฟ่าและพร้อมสำหรับโครงการเว็บไซต์ใหม่ เรามุ่งเน้นไปที่การปรับปรุงในทางปฏิบัติที่เร่งการทำงานประจำวันของคุณและทำให้ไซต์อาคารสนุกยิ่งขึ้น

ชิ้นส่วนที่ดีที่สุดของ Divi ปัจจุบันอยู่ในขณะที่เราสร้างทุกอย่างใหม่ การออกแบบอินเทอร์เฟซใหม่ตรงกับประสิทธิภาพที่ดีขึ้นภายใต้ประทุน แนวทางการเข้ารหัสที่ทันสมัยทำให้ระบบทั้งหมดเป็นระบบทั้งหมดในขณะนี้
โหลดหน้าเร็วกว่าเดิม การควบคุมตอบสนองเร็วขึ้นเมื่อคุณคลิก การพิมพ์จะยังคงสอดคล้องกันทั่วทั้งไซต์ของคุณโดยไม่ต้องทำงานด้วยตนเองเป็นพิเศษ

นี่คือไฮไลท์บางส่วน:

• Framework เสร็จสิ้นการ สร้างระบบรหัสย่อเก่าใหม่ ทุกอย่างทำงานบนสถาปัตยกรรมที่ใช้บล็อกที่ทันสมัยซึ่งเบราว์เซอร์จัดการได้ดีขึ้นมาก
• ระบบ FlexBox ของ Divi 5 ช่วยให้คุณควบคุมโดยตรงเพื่อสร้างเลย์เอาต์ที่ทันสมัยตอบสนองการจัดการการจัดตำแหน่งการเว้นระยะและการห่อหุ้มได้อย่างง่ายดายโดยไม่ต้องใช้รหัสที่กำหนดเอง
• ระบบสี HSL นำการควบคุมสีที่ตรงกับความคิดของนักออกแบบ ปรับสีความอิ่มตัวและความสว่างแทนที่จะคาดเดาด้วยรหัส hex
• เจ็ดจุดพักที่กำหนดเอง แทนที่ขีด จำกัด สามขนาดเก่า ตัวอักษรของคุณดูสมบูรณ์แบบสำหรับทุกอุปกรณ์ที่ผู้เยี่ยมชมใช้
• ฟังก์ชั่น CSS หมายถึง calc (), clamp (), min () และสูงสุด () ทำงานได้อย่างถูกต้องในตัวแก้ไขภาพ สร้างข้อความตอบสนองที่ปรับขนาดตามธรรมชาติโดยไม่มีรหัส
• ตัวแปรการออกแบบทั่วโลก เก็บแบบอักษรสีและระยะห่างในที่เดียว เปลี่ยนฟอนต์ส่วนหัวหลักของคุณหนึ่งครั้ง ทุก H1 ในเว็บไซต์ของคุณอัปเดตโดยอัตโนมัติ
• ระบบการออกแบบที่ตั้งไว้ล่วงหน้า รวมถึงการตั้งค่าองค์ประกอบสำหรับโมดูลแต่ละโมดูลและกลุ่มตัวเลือกที่ตั้งไว้ล่วงหน้าสำหรับรูปแบบการพิมพ์ที่สมบูรณ์ เพื่อให้สิ่งต่าง ๆ สอดคล้องกันให้ใช้โมดูลที่แตกต่างกัน
• อินเทอร์เฟซ Visual Builder ใหม่ จะได้รับแผงที่เชื่อมต่อได้หน้าต่างแบบแท็บคีย์บอร์ดลัดและมุมมองเลเยอร์ที่ดีขึ้นด้วย breadcrumbs การนำทางจะง่ายขึ้นมาก
• แถวซ้อนกัน วางแถวภายในแถวอื่น ๆ สำหรับเลย์เอาต์ที่ซับซ้อน สร้างการจัดเรียงเค้าโครงขั้นสูงโดยไม่มีประเภทส่วนพิเศษ
• กลุ่มโมดูล รวมองค์ประกอบที่แตกต่างกันเป็นหน่วยเดียว สิ่งนี้ทำให้การจัดการเค้าโครงข้อความที่ซับซ้อนง่ายขึ้นและคุณยังสามารถสร้างโมดูลที่กำหนดเองได้
• พื้นที่ทำงานหลายแผง เคลื่อนย้ายแผงควบคุมทุกที่ทำงานได้ดีที่สุด เปิดตัวควบคุมการพิมพ์ในขณะที่ปรับสิ่งของการออกแบบอื่น ๆ
• การจัดการแอตทริบิวต์ สำเนา, น้ำพริกและรีเซ็ตรูปแบบการพิมพ์ระหว่างองค์ประกอบ เลือกแอตทริบิวต์เฉพาะเพื่อถ่ายโอนแทนการคัดลอกทุกอย่าง
• โหมดอินเตอร์เฟสแสง/มืด ช่วยลดความเครียดของดวงตาในระหว่างการออกแบบที่ยาวนาน
• การปรับขนาดผ้าใบ แสดงให้เห็นว่าการพิมพ์ตัวอักษรดูขนาดหน้าจอที่แตกต่างกันโดยไม่ต้องออกจากตัวแก้ไข

ค้นพบฟีเจอร์ทั้งหมด Divi 5 เผยแพร่

วิธีสร้างสี HSL ด้วย Divi 5

ดังที่ได้กล่าวไว้ Divi 5 สร้างตัวเลือกสีตั้งแต่เริ่มต้น อินเทอร์เฟซใหม่ลดลงรหัส Hex สำหรับการควบคุม HSL ที่ทำงานเหมือนสมองของคุณคิดเกี่ยวกับสี ตัวเลื่อนสามตัวจัดการงาน:

• Hue ยอมรับ 0–360 องศาและค่าลบพันรอบ (เช่น -60 กลายเป็น 300) ล้อสีเชื่อมต่อที่ปลายทั้งสอง ศูนย์, 360 และลบ 360 ทั้งหมดให้สีแดงเหมือนกัน ต้องการสีเสริมหรือไม่? ตั้งค่าสีเป็น 180 องศาจากจุดเริ่มต้นของคุณ
• ความอิ่มตัวทำงานจาก 0% ถึง 100% และควบคุมว่าสีของคุณดูสดใสอย่างไร เป็นศูนย์เปอร์เซ็นต์ดึงความเข้มของสีทั้งหมดออกจากสีเทา หนึ่งร้อยเปอร์เซ็นต์ให้สีเต็มรูปแบบ
• Lightness ทำงานในช่วงเปอร์เซ็นต์เดียวกัน ศูนย์ทำให้สีดำ 100% สร้างสีขาวและ 50% แสดงรูปแบบที่บริสุทธิ์ของสีใด ๆ ที่คุณเลือก

การควบคุมอัปเดตสดในขณะที่คุณลาก ใช้ปุ่มหรือความล่าช้าในการรีเฟรชจะไม่ขัดขวางเวิร์กโฟลว์ของคุณ

1. สร้างสีสัมพัทธ์จากสีทั่วโลก

สีสัมพัทธ์ช่วยให้คุณสร้างสีใหม่ตามสีทั่วโลกที่มีอยู่โดยการปรับแต่งส่วนประกอบ HSL แต่ละรายการ เริ่มต้นในตัวจัดการตัวแปรการออกแบบโดยเพิ่มสีใหม่

การใช้ตัวเลือกสีตั้งค่าสีฐานของคุณ (อาจเป็นสีแบรนด์) เพื่อให้ตรงกับสีหลักระดับโลกที่มีอยู่

มาตั้งค่าสีรองโดยใช้การเปลี่ยนสีหลักของคุณเพื่อสร้างสีเสริม ใช้สีหลักของคุณด้วยความสว่างเป็น 25%

คุณสามารถเล่นกับสีหรือความอิ่มตัวเพื่อสร้างสีใหม่เป็นสีรอง

Color Swatches แสดงข้อมูลที่สำคัญอย่างรวดเร็ว คุณสามารถบอกได้ว่ามีบางอย่างที่ใช้ตัวแปรการออกแบบและดูว่าตัวกรอง HSL ปรับเปลี่ยนสีพื้นฐานได้อย่างไร ข้อเสนอแนะด้านภาพนี้ช่วยให้คุณเข้าใจสิ่งที่เกิดขึ้นกับความสัมพันธ์สีของคุณ

ในทำนองเดียวกันสร้างเฉดสีเข้มขึ้นสำหรับสีข้อความหัวและสีตัวอักษรสีทั่วโลกโดยใช้สีหลักเป็นฐาน

แน่นอนว่าคุณสามารถสร้างสีตกแต่งได้มากขึ้นที่นี่และคุณยังสามารถป้อน Hex, RGB หรือค่าสีชื่อด้วยตนเอง

2. จัดการความสัมพันธ์ตัวแปรการออกแบบหลายชั้น

ตัวแปรการออกแบบสามารถซ้อนกันด้านบนของกันและกันสำหรับระบบสีที่ซับซ้อน ขึ้นอยู่กับหลักของคุณคุณสามารถสร้างสีตกแต่งเพิ่มเติมเช่น Burnt Moss จากนั้นลดความทึบของมอสที่ถูกไฟไหม้เพื่อสร้างสีเงา

ความสัมพันธ์ที่ซ้อนกันเหล่านี้แสดงให้เห็นว่า Divi 5 จัดการลำดับชั้นสีที่ซับซ้อนได้อย่างไร เมื่อคุณปรับสีหลักการอัพเดทสีมอสที่เผาไหม้ก่อนเรียกใช้สีเงาเพื่ออัปเดต โซ่ทั้งหมดยังคงเชื่อมต่อ

วิธีการนี้เปลี่ยนการจัดการสีจากการคาดเดาแบบสุ่มเป็นระบบที่คาดการณ์ได้ จานสีของเว็บไซต์ของคุณยังคงกลมกลืนโดยไม่ต้องปรับเปลี่ยนด้วยตนเองในทุกองค์ประกอบ

3. ใช้สี HSL กับเว็บไซต์ของคุณ

กดโมดูลข้อความใด ๆ และเปิดตัวเลือกสี ตัวแปรที่บันทึกไว้ของคุณแสดงด้วยตัวบ่งชี้ คลิก“ สีรอง” และจะเติมเต็มพื้นหลังของส่วน สีเดียวกันใช้ได้กับปุ่มพื้นหลังและเส้นขอบ

ตัวอักษรทำงานเมื่อคุณติดกับหนึ่งสี แต่เปลี่ยนความสว่าง พาดหัวสามารถใช้สีหลักที่ -25% ความสว่าง ข้อความร่างกายเบาลงเล็กน้อยที่ -15% ลิงก์อยู่ที่ -45% ทุกอย่างเกี่ยวข้องกัน แต่ยังคงชัดเจน

พื้นหลังต้องการสีแบรนด์ของคุณลดลง ดันความสว่างสูงถึง 95% ลดความอิ่มตัวไป 15% ตอนนี้คุณมีภูมิหลังที่มีแบรนด์ที่ไม่ต่อสู้กับเนื้อหา ปุ่มทำงานด้วยความอิ่มตัวเต็มรูปแบบ โฮเวอร์ระบุความสว่างลง สีเดียวกันความเข้มที่แตกต่างกัน

ข้อความแสงต้องการพื้นหลังมืด ตัวเลขความสว่างบอกคุณว่าอะไรทำงานได้ดี ข้อความที่คู่แสง 50% ที่มีพื้นหลังต่ำกว่า -30% ของความสว่าง

ส่วนที่มีข้อความมืดบนพื้นหลังแสงย้อนกลับค่า เฉดสีเดียวกันความอิ่มตัวเดียวกัน เปลี่ยนค่าความเบาและคุณทำเสร็จแล้ว และแน่นอนว่าสีทั้งหมดเหล่านี้ยังคงเชื่อมโยงแม้หลังจากนำไปใช้ เปลี่ยนหนึ่งตัวแปรและทุกอย่างปรับ ง่ายอย่างนั้น!

4. บันทึกสี HSL ของคุณเป็นที่ตั้งไว้ล่วงหน้าที่นำกลับมาใช้ใหม่ได้

เมื่อคุณสร้างโมดูลของคุณและใช้ตัวแปรการออกแบบสีแล้วให้ตั้งค่าสีเหล่านี้ไว้ในสไตล์ที่นำมาใช้ซ้ำได้ Divi 5 เสนอสองประเภทที่ตั้งไว้ล่วงหน้าซึ่งทำงานร่วมกัน:

กลุ่มตัวเลือกที่ตั้งไว้ล่วงหน้าการควบคุมเฉพาะด้านการออกแบบเฉพาะในทุกโมดูล จัดสไตล์ส่วนหัวของคุณด้วยตัวแปรการออกแบบสีข้อความหัวเรื่อง เพิ่มเงาลงในคอลัมน์ของคุณโดยใช้ Burnt Moss และความทึบ 50% โฮเวอร์เหนือไอคอนโมดูลกลุ่มตัวเลือกในโมดูลใด ๆ ฉลากอย่างเหมาะสมและบันทึก

งานเดียวกันสำหรับพื้นหลังระยะห่างภาพเคลื่อนไหวและข้อความ เพิ่มรัศมีเส้นขอบผ่านตัวแปรการออกแบบตัวเลขและตั้งค่าตัวแปรที่ตั้งค่าไว้ล่วงหน้าการอ้างอิงตัวแปรตัวเลขนี้ กลุ่มตัวเลือกแต่ละกลุ่มจัดการกับอาณาเขตการออกแบบของตัวเองและสามารถใช้งานข้ามได้เช่นรัศมีเส้นขอบของคอลัมน์สามารถนำไปใช้กับคำกระตุ้นการตัดสินใจของคุณ

หากต้องการใช้ให้ไปที่ตัวเลือกที่เหมาะสมและเลือกที่ตั้งไว้ล่วงหน้า

องค์ประกอบที่ตั้งไว้ล่วงหน้า บันทึกสไตล์โมดูลที่สมบูรณ์ สไตล์โมดูลปุ่มด้วยสีรองของคุณที่ 80% ความเบา คลิกตัวเลือกที่ตั้งไว้ล่วงหน้าที่ด้านบนขวาของการตั้งค่าโมดูล สร้างที่ตั้งไว้ล่วงหน้าใหม่ที่เรียกว่า "ปุ่มสีแบรนด์" สิ่งนี้จะช่วยประหยัดการตั้งค่าปุ่มทั้งหมดรวมถึงสี HSL ของคุณ

ตอนนี้เมื่อคุณเพิ่มปุ่มใหม่ให้ใช้ที่ตั้งไว้ล่วงหน้านี้และมันสืบทอดสไตล์ทั้งหมด ในการตัดงานของคุณให้คุณใช้ที่ตั้งไว้ล่วงหน้า (กลุ่มตัวเลือกหรือองค์ประกอบ) ที่คุณสร้างขึ้นและคลิกไอคอนดาวข้างๆ ที่ตั้งไว้ล่วงหน้านั้นกลายเป็นค่าเริ่มต้นสำหรับอินสแตนซ์ใหม่ทั้งหมดขององค์ประกอบหรือกลุ่มตัวเลือกนั้น

ความสัมพันธ์ HSL ของคุณยังคงอยู่ในที่ตั้งล่วงหน้า เมื่อคุณอัปเดตสีทุกโมดูลและที่ตั้งไว้ล่วงหน้าโดยใช้การอัปเดตสีนั้นด้วย สร้างห้องสมุดที่ตั้งไว้ล่วงหน้าสำหรับส่วนแสงส่วนมืดและช่วงเวลาของแบรนด์พิเศษ ค่า HSL เดินทางไปพร้อมกับแต่ละที่ตั้งไว้ล่วงหน้าทำให้ระบบสีของคุณสอดคล้องกันในโครงการ

สร้างระบบสีสำหรับเว็บไซต์ของคุณด้วย Divi 5

งานสีที่ใช้ในการใช้เวลาหลายวัน คุณต้องการใช้รหัส hex, คัดลอกค่าระหว่างโปรแกรมและอธิษฐานบางสิ่งบางอย่างดูดี

HSL ทำให้สีทำงานสนุกอีกครั้ง คุณเห็นเฉดสีที่คุณรักและรู้วิธีสร้างใหม่ Hue เลือกสีความอิ่มตัวควบคุมความสดใสและความสว่างทำให้สว่างขึ้นหรือเข้มขึ้น ตอนนี้การรีเฟรชแบรนด์ใช้เวลาไม่กี่นาทีแทนที่จะเป็นชั่วโมง

นี่คือการควบคุมการออกแบบที่แท้จริง Divi 5 ทำให้มันเกิดขึ้นในวันนี้