เครื่องสร้างเฉดสีเข้ม
เฉดสีเข้ม (shade) คือผลของการผสมสีกับสีดำ โดยแต่ละขั้นจะเข้มขึ้นเรื่อย ๆ เครื่องมือนี้รับสีพื้นฐานรูปแบบ HEX เข้ามา แล้วสร้างเฉดสีที่เข้มขึ้นทีละขั้นจำนวน 3-20 ขั้น (ค่าเริ่มต้น 10) พร้อมเฉดสีอ่อนของสีพื้นฐานเดียวกัน มีประโยชน์สำหรับลำดับชั้นชุดสีของระบบออกแบบ (500 → 900) สถานะกด/ใช้งานของปุ่ม สีข้อความที่ยังคงอ่านง่าย และการซ้อนทับเงา แต่ละขั้นแสดงเป็นสวอตช์พร้อมค่า hex ที่พร้อมให้คัดลอก
เฉดสีเข้มถูกสร้างขึ้นอย่างไร
-
1
เลือกสีพื้นฐาน
ใช้ตัวเลือกสี หรือในโหมดแบบเป็นขั้นตอน ส่งค่า hex ผ่าน URL ของหน้า สีพื้นฐานอยู่ระหว่างช่วงเฉดสีอ่อนกับช่วงเฉดสีเข้ม
-
2
เลือกจำนวนขั้น
3-20 ขั้น ค่าเริ่มต้นคือ 10 ขั้นมากทำให้ลำดับเนียนขึ้น ขั้นน้อยทำให้การเปลี่ยนชัดเจนขึ้น
-
3
ผสมกับสีดำในขั้นที่สม่ำเสมอ
แต่ละขั้นคูณช่องสีแดง เขียว และน้ำเงินด้วยตัวคูณเดียวกัน ซึ่งเท่ากับการผสมกับสีดำ (หรือสีขาวสำหรับเฉดสีอ่อน) ในขั้นที่สม่ำเสมอ หากใช้ 10 ขั้น แต่ละขั้นจะเข้มหรืออ่อนลงประมาณ 9 % โดย hue ยังคงตรงกับสีพื้นฐาน
-
4
อ่านสเกล
แต่ละสวอตช์แสดงค่า hex ของตัวเอง เลือกข้อความเพื่อคัดลอกไปยัง CSS ธีม Tailwind หรือไฟล์ design tokens
เฉดสีเข้ม เฉดสีอ่อน และโทนสี ต่างกันอย่างไร
- เฉดสีเข้ม (shade): สี + ดำ → เข้มขึ้น
- เฉดสีอ่อน (tint): สี + ขาว → อ่อนลง
- โทนสี (tone): สี + เทา → อิ่มตัวน้อยลง
เครื่องมือนี้สร้างทั้งเฉดสีเข้มและเฉดสีอ่อนจากสีพื้นฐานเดียวกัน โดยทั่วไปคู่ของเฉดสีอ่อนและเฉดสีเข้มจะประกอบกันเป็นชุดสีของระบบออกแบบ (เช่น brand-100 ถึง brand-900 โดยที่ 500 เป็นสีพื้นฐาน)
ตัวอย่างสเกล: #3B82F6 (Tailwind blue-500)
| ขั้น | HEX | การผสม | บทบาทในระบบออกแบบ |
|---|---|---|---|
| 0 | #3B82F6 | สีพื้นฐาน | แบรนด์หลัก (เช่น blue-500) |
| 1 | #316CCD | สีดำ 17% | สถานะโฮเวอร์ |
| 2 | #2756A4 | สีดำ 33% | สถานะกด/ใช้งาน (blue-600) |
| 3 | #1D417B | สีดำ 50% | blue-700 |
| 4 | #132B52 | สีดำ 67% | blue-800 |
| 5 | #091528 | สีดำ 83% | blue-900 |
ตารางนี้แสดงสเกล 5 ขั้น: แต่ละขั้นเดินทางไปทางสีดำ 1 ใน 6 ของระยะทางทั้งหมด
วิธีคำนวณแต่ละขั้น
เครื่องมือคูณช่องสีแดง เขียว และน้ำเงินของสีพื้นฐานด้วยตัวคูณเดียวกันในทุกขั้น ซึ่งเท่ากับการผสมกับสีดำในช่วงเฉดสีเข้ม และกับสีขาวในช่วงเฉดสีอ่อน ในขั้นที่สม่ำเสมอ หากใช้ 10 ขั้น แต่ละขั้นจะเข้มหรืออ่อนลงประมาณ 9 % จากขั้นก่อนหน้า
เพราะทุกช่องถูกคูณเท่ากัน hue ของสีพื้นฐานจึงคงเดิมทุกประการ สีน้ำเงินก็ยังเป็นสีน้ำเงิน สีเขียวก็ยังเป็นสีเขียว การผสมกับสีดำยังลดความอิ่มตัวไปพร้อมกับความสว่าง ทำให้ขั้นที่เข้มดูเป็นธรรมชาติแทนที่จะเรืองแสง หากลดความสว่างเพียงอย่างเดียวโดยไม่แตะความอิ่มตัว สีเข้มจะเหลือความอิ่มตัวสูงเกินไป
การใช้เฉดสีเข้มในส่วนติดต่อผู้ใช้ (UI)
- ปุ่ม: ใช้สีพื้นฐานสำหรับสถานะปกติ, เข้มขึ้น 1-2 ขั้นสำหรับโฮเวอร์, เข้มขึ้น 2-3 ขั้นสำหรับสถานะใช้งาน/กด
- ข้อความเนื้อหา: เข้มกว่าสีพื้นฐาน 2-3 ขั้นเพื่อให้อ่านง่ายบนพื้นขาว และอ่อนกว่าสำหรับข้อความรอง
- เส้นขอบ / เส้นแบ่ง: เข้มกว่าพื้นหลัง 1-2 ขั้น มากพอที่จะแบ่งแยกได้โดยไม่ดูหนักจนเกินไป
- เงา: ใช้ขั้นที่เข้มที่สุด (หรือเข้มกว่านั้น) โดยลดค่าอัลฟา แทนการใช้สีเทาใหม่
- การแสดงผลข้อมูลด้วยภาพ: ใช้เฉดสีเข้มของสีเดียวสำหรับสเกลแบบเรียงลำดับ (ขนาดของค่า) หรือจับคู่เฉดสีเข้มของสองสีสำหรับสเกลแบบแยกสองทาง (ค่าบวกกับค่าลบ)
ข้อผิดพลาดที่พบบ่อย
- ขั้นมากเกินไปจะอัดกันจนกลายเป็นแถบที่แยกไม่ออก สเกล 10 ขั้นทำงานได้ดีเพราะแต่ละขั้นเข้มขึ้นราว 9 % หากใช้ 20 ขั้นความต่างจะแทบมองไม่เห็น สำหรับคอนทราสต์ที่ชัดเจน ควรใช้ 3-5 ขั้น
- hue จะไม่เพี้ยนในเครื่องมือนี้: แต่ละขั้นคูณทุกช่องเท่ากัน สีแดงจึงยังเป็นสีแดง สีเขียวจึงยังเป็นสีเขียว การเพี้ยนของ hue เกิดจากการอินเทอร์โพเลตระหว่างสองสีที่ต่างกัน ซึ่งเครื่องมือนี้ไม่ได้ทำ
- มองข้ามการเข้าถึง: เฉดสีที่ดูกลมกลืนกันอาจมีค่าคอนทราสต์ไม่ผ่านเกณฑ์ WCAG เมื่อเทียบกับพื้นหลัง ควรตรวจสอบคอนทราสต์ในทุกขั้นเสมอ
- สเกลที่มีแต่เฉดสีเข้มจะให้ความรู้สึกอึดอัดบนพื้นหลังสีเข้ม ควรจับคู่กับสเกลเฉดสีอ่อนเพื่อให้ได้โหมดมืดที่ใช้งานได้จริง
คำถามที่พบบ่อย
สำหรับระบบออกแบบ เฉดสีเข้ม 5 ขั้น + เฉดสีอ่อน 5 ขั้น (รวม 10 ขั้นรอบสีพื้นฐาน) ถือเป็นแนวทางที่ใช้กันทั่วไป ส่วนสีสำหรับสถานะของ UI แบบเร็ว ๆ (โฮเวอร์, ใช้งาน) เพียง 3 ขั้นก็พอ
การผสมที่สม่ำเสมอซึ่งใช้ที่นี่ทำให้แต่ละขั้นอยู่บนเส้นตรงระหว่างสีพื้นฐานกับสีดำ ขั้นช่วงกลางจึงสะอาดเสมอ ส่วนกลางที่ขุ่นมั่วมักมาจากเครื่องมือที่อินเทอร์โพเลตระหว่างสองสีที่ต่างกัน หรือลดความสว่างโดยไม่ลดความอิ่มตัว
สีเข้มมีช่องว่างเหลือน้อยมากก่อนจะกลายเป็นสีดำ สีม่วงเข้มเป็นสีพื้นฐานจะให้ขั้นที่แยกแยะได้เพียง 2-3 ขั้นก่อนที่สเกลจะยุบตัว หากต้องการสเกลที่สมบูรณ์ขึ้น ควรเลือกสีพื้นฐานที่มีความสว่างปานกลาง
จุดประสงค์คล้ายกัน แต่การผสมกับสีดำจะลดความอิ่มตัวไปพร้อมกับความสว่าง ซึ่งมักดูเป็นธรรมชาติมากกว่า ส่วนการลดเฉพาะความสว่างจะคงความอิ่มตัวไว้สูง และอาจทำให้สีเข้มดูอิ่มตัวเกินไป
เครื่องมือที่เกี่ยวข้อง
ตารางอ้างอิง ASCII
ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL
อ้างอิงตัวอักษร HTML
รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ
ตัวลดรูปพีชคณิตบูลีน
ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^
เครื่องสร้างตัวอักษรสุ่ม
สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน
ตารางอ้างอิงแป้นพิมพ์ลัด
ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux
เครื่องมือตรวจสอบหมายเลขโทรศัพท์
ตรวจสอบโครงสร้างหมายเลขตามประเทศ พร้อมดูภูมิภาค ประเภท และรูปแบบ E.164 ระหว่างประเทศ ในประเทศ และ RFC 3966