เครื่องสร้างสีข้างเคียง
เลือกสีฐานและระยะห่างเป็นองศา เครื่องมือจะแสดงสีฐานกับสีข้างเคียงทั้งสองฝั่งที่มุมตามกำหนด ซึ่งสามสีตรงกลางนี้คือชุดสีข้างเคียงแบบคลาสสิก จากนั้นจะเพิ่มสีรอบนอกอีกสองสีที่มุมเป็นสองเท่าเพื่อให้ได้ชุดสีห้าสีที่กว้างขึ้น ชุดสีข้างเคียงเป็นหนึ่งในการจัดสีคลาสสิกที่กลมกลืนที่สุด เพราะสีที่อยู่ใกล้กันมีโทนหลักร่วมกัน จึงพบได้บ่อยในธรรมชาติ (พระอาทิตย์ตก ป่าไม้) และงานออกแบบสิ่งพิมพ์
วิธีสร้างชุดสีข้างเคียง
-
1
เลือกสีฐาน
วางรหัส HEX, ค่า RGB หรือค่า HSL สีโทนกลางที่อิ่มตัวจะให้ชุดสีข้างเคียงที่เข้มและน่าสนใจที่สุด
-
2
เลือกมุมเยื้อง
30° คือระยะของสีข้างเคียงแบบคลาสสิก 15° ให้ชุดที่แน่นและเกือบเป็นสีเดียว ส่วน 45° เริ่มเข้าใกล้สีคู่ตรงข้ามแบบแยก
-
3
ปรับความสว่างให้ต่างกัน
เลือกปรับความสว่างของทั้งสามเฉดเพื่อไม่ให้ชุดสีดูแบน การทำให้สีปีกสองฝั่งสว่างขึ้นจะให้ความรู้สึกนุ่มนวลแบบงานสิ่งพิมพ์
-
4
ส่งออกสี
คัดลอก HEX, RGB หรือ HSL เหมาะกับตัวแปร CSS, สไตล์ใน Figma หรือเอกสารกำหนดสีสำหรับงานพิมพ์
การจัดสีคลาสสิกเทียบกับสีข้างเคียง
| การจัดสี | ความสัมพันธ์เชิงมุม | ลักษณะ |
|---|---|---|
| สีเดียว | 0° (เฉดเดียวกัน ต่างความสว่าง/ความอิ่มตัว) | สงบ เป็นหนึ่งเดียว |
| สีข้างเคียง | 30° ทั้งสองฝั่ง | กลมกลืน เป็นธรรมชาติ |
| สีคู่ตรงข้าม | ห่างกัน 180° | ตัดกันสูง ตึงเครียด |
| สีคู่ตรงข้ามแบบแยก | สีฐาน + สองเฉดขนาบสีคู่ตรงข้าม | ตัดกันอย่างละเอียดอ่อน |
| สามสีสมดุล | ห่างกัน 120° | สมดุล สดใส |
| สี่สีสมดุล | สีคู่ตรงข้ามสองคู่ | เข้มข้น ซับซ้อน |
ตัวอย่างชุดสีข้างเคียงจากธรรมชาติ
- พระอาทิตย์ตก: เหลือง → ส้ม → ส้มแดง (ไล่ทีละ 30° ฝั่งสีอุ่น)
- ป่า: เขียวเหลือง → เขียว → เขียวน้ำเงิน
- มหาสมุทร: เขียวน้ำเงิน → น้ำเงิน → ม่วงน้ำเงิน
- ฤดูใบไม้ร่วง: ส้มแดง → ส้ม → ส้มเหลือง
ออกแบบด้วยชุดสีข้างเคียง
- เลือกสีหนึ่งเป็น สีหลัก (60% ของพื้นที่), ใช้สีที่สองเป็น สีเน้น (30%) และสีที่สามเป็น สีไฮไลต์ (10%) ตามกฎ “60-30-10”
- จับคู่สีข้างเคียงกับสีกลาง (ขาว ดำ เทาอุ่น) สำหรับเนื้อความและองค์ประกอบของส่วนติดต่อผู้ใช้
- หลีกเลี่ยงการใช้สีข้างเคียงทั้งสามที่ความอิ่มตัวเท่ากันบนพื้นที่ใหญ่ เพราะจะดูขุ่น ควรปรับความสว่างหรือความอิ่มตัวระหว่างสีปีกกับสีฐาน
ปริภูมิสีและการคำนวณมุม
ระยะเยื้อง 30° คำนวณในปริภูมิเฉดสีของ HSL หรือ HSV ซึ่งมองเฉดสีเป็นมุม (0-360°) การหมุนวงล้อใน RGB ทำไม่ได้ ต้องแปลงเป็น HSL หมุนเฉดสี แล้วแปลงกลับ นั่นคือสิ่งที่เครื่องมือทำเบื้องหลัง และแสดงผลครบทั้งสามรูปแบบ เพราะ CSS เครื่องมือออกแบบ และขั้นตอนงานพิมพ์ ต่างนิยมรูปแบบที่ต่างกัน
คำถามที่พบบ่อย
สีเดียวใช้เฉดเดียวโดยปรับความสว่างและความอิ่มตัวให้ต่างกัน (กรมท่า น้ำเงิน ฟ้า) ส่วนสีข้างเคียงใช้เฉดต่างกันสามสีที่อยู่ติดกันบนวงล้อ (เขียวน้ำเงิน น้ำเงิน ม่วงน้ำเงิน) จึงมีความหลากหลายทางสายตามากกว่า
สีข้างเคียงอาจมีส่วนผสมหมึก CMYK ทับซ้อนกัน ทำให้ความต่างของสีลดลงบนแท่นพิมพ์ ลองตรวจด้วยการพิสูจน์อักษรบนจอ (soft-proof) และพิจารณาเพิ่มระยะจาก 30° เป็น 40° สำหรับงานพิมพ์
ได้ แต่ควรให้หนึ่งในสามสีเป็นสีหลักของแบรนด์ และให้อีกสองสีทำหน้าที่เสริม (ป้าย จุดเน้น) การใช้ทั้งสามสีกับปุ่มการกระทำหลักจะทำให้สับสน เพราะผู้ใช้จะเรียนรู้ว่าหนึ่งสีเชื่อมกับปุ่มเรียกการกระทำหลัก
สามสีตรงกลางคือชุดสีข้างเคียงแบบคลาสสิก ได้แก่สีฐานและสีข้างเคียงทั้งสองฝั่งที่มุมตามกำหนด ส่วนสีรอบนอกสองสีอยู่ที่มุมเป็นสองเท่าและเป็นตัวเลือกเสริมสำหรับขยายชุดสี เมื่อใช้ระยะห่างเริ่มต้น 30° สามสีแกนกลางจะอยู่ที่ ±30° และสีรอบนอกจะอยู่ที่ ±60°
เครื่องมือที่เกี่ยวข้อง
เลขฐานสองเป็นฐานสิบ
แปลงเลขฐานสองเป็นฐานสิบได้ทันที แสดงการกระจายตามตำแหน่งเพื่อให้เห็นว่าแต่ละบิตมีส่วนอย่างไร
ตัวแปลง ASCII เป็นเลขฐานสอง
แปลงสตริง ASCII ใดก็ได้เป็นเลขฐานสอง อักขระทุกตัวกลายเป็นแปดบิต คั่นด้วยช่องว่าง พร้อมวางในการติดตามโปรโตคอลหรือการบ้าน
ตัวแปลง ASCII เป็น Hex
แปลงข้อความ ASCII เป็นค่า byte แบบ hexadecimal output ใช้ hex digits สองตัวต่อ character พร้อมสำหรับ memory dumps, packet traces หรือ firmware tables
เครื่องสร้างตัวอักษรสุ่ม
สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน
ตัวแปลงไบนารีเป็น ASCII
วางข้อมูลไบนารี (ไบต์ที่คั่นด้วยช่องว่าง หรือบิตสตรีมยาวๆ) แล้วรับข้อความ ASCII ที่แทนค่านั้น รองรับการเข้ารหัสแบบ 7 บิตและ 8 บิต
เครื่องกำเนิดจานสี
สร้างพาเลตสีแบบเอกรงค์ ใกล้เคียง คู่ตรงข้าม ไตรแอดิก หรือเตตราดิกจากสี HEX หลัก พร้อมส่งออกตัวแปร CSS ที่คัดลอกได้ทันที