# สีดำในการสร้างแบรนด์ บนจอ OLED และ Dark Mode ประหยัดไฟแค่ไหน

> ที่มา: https://phygital.co.th/insights/black-color-brand-identity-meaning-guide · เผยแพร่ 12 กรกฎาคม 2566 · อ่าน 11 นาที · โดย PARANATH PANARATANA

สีดำบนจอ OLED ใช้ไฟน้อยลงเท่าไรจริง งานวิจัย Purdue 2564 พบว่าประหยัด 3-9% ที่ความสว่าง 30-50% และ 39-47% ที่ 100% พร้อมวิธีทำเว็บพื้นดำตามค่าของผู้ใช้

## Key Takeaways

- **จอ OLED ใช้ไฟน้อยลงเมื่อแสดงพิกเซลสีเข้ม แต่ปริมาณที่ประหยัดขึ้นกับความสว่างของจอ** — ทีมวิจัยของ Purdue University วัดแอป 6 ตัวบนโทรศัพท์ 4 รุ่น พบว่าการเปลี่ยนเป็นโหมดมืดที่ความสว่าง 30-50% ประหยัดไฟเฉลี่ย 3-9% และที่ความสว่าง 100% ประหยัด 39-47%
- **โหมดมืดเป็นค่าที่ผู้ใช้ตั้งไว้ในเครื่อง** — สเปก Media Queries Level 5 ของ W3C ให้หน้าเว็บอ่านค่านี้ผ่าน prefers-color-scheme และกำหนดให้ถือว่าผู้ใช้ที่ไม่ได้ตั้งค่าต้องการพื้นสว่าง
- **แบรนด์สีดำจึงต้องตัดสินใจสองชั้น** — คือสีดำของแบรนด์ใช้ค่าใด และหน้าเว็บจะตามค่าที่ผู้ใช้ตั้งไว้หรือกำหนดโหมดเอง เว็บของฟิจิทัลเลือกพื้นมืด #0a0a0f เป็นค่าเริ่มต้นและยังไม่อ่านค่าจากเครื่องผู้ใช้

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

บทนี้ใช้ตัวเลขชุดนั้นประกอบกับสเปก `prefers-color-scheme` ของ W3C และการตั้งค่าธีมในเว็บไซต์ของฟิจิทัลเอง เพื่อตอบว่าสีดำของแบรนด์ควรอยู่บนจออย่างไร และอ้างเรื่องการประหยัดพลังงานได้แค่ไหน

## ทำไมพิกเซลสีดำบนจอ OLED ใช้ไฟน้อยลง

จอ OLED (organic light-emitting diode) ให้พิกเซลแต่ละจุดเปล่งแสงเอง ไม่มีไฟส่องหลังจอแบบจอ LCD พิกเซลที่แสดงสีเข้มจึงใช้ไฟน้อยกว่าพิกเซลสีสว่าง และพิกเซลสีดำสนิทปิดการเปล่งแสงได้ ข่าวเผยแพร่ของ Purdue ระบุว่าโทรศัพท์ที่ออกหลังปี 2560 มีแนวโน้มใช้จอ OLED ส่วนจอ LCD รุ่นเก่ายังใช้ไฟส่องหลังเท่าเดิมไม่ว่าจะแสดงสีอะไร

### Dark Mode ประหยัดแบตเตอรี่บนทุกจอหรือไม่

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

## ตัวเลขประหยัดไฟจากงานวิจัยของ Purdue

การประหยัดไฟของโหมดมืดขึ้นกับความสว่างของจอมากกว่าสีที่เลือก ข่าวของ [Elmore Family School of Electrical and Computer Engineering, Purdue University](https://engineering.purdue.edu/ECE/News/2021/dark-mode-may-not-save-your-phones-battery-life-as-much-as-you-think-but-there-are-a-few-silver-linings) ลงวันที่ 28 กรกฎาคม 2564 สรุปงานของ Pranab Dash และ Charlie Hu ที่นำเสนอในการประชุม MobiSys 2021 ของ ACM ทีมวัดกิจกรรม 60 วินาทีในแอปที่มีผู้ดาวน์โหลดมากที่สุด 6 ตัวบน Google Play บนโทรศัพท์ Pixel 2, Moto Z3, Pixel 4 และ Pixel 5

| ความสว่างของจอ | ไฟที่ประหยัดได้เมื่อเปลี่ยนเป็นโหมดมืด (เฉลี่ย) |
| ----------------- | ------------------------------------------------------- |
| 30-50%            | 3-9%                                                    |
| 100%              | 39-47%                                                  |

ทีมระบุว่าการตั้งความสว่างอัตโนมัติมักทำให้จออยู่ราว 30-40% เมื่ออยู่ในอาคาร ตามข้อสังเกตของทีม การใช้งานในอาคารจึงใกล้กับแถวแรก ส่วนแถวที่สองเกิดเมื่อใช้โทรศัพท์กลางแดดที่จอเร่งความสว่างเต็มที่

### ตัวเลข 39-47% ใช้อ้างในงานการตลาดได้หรือไม่

ใช้ได้ถ้าระบุเงื่อนไขครบ คือเป็นค่าเฉลี่ยของจอ OLED ที่ความสว่าง 100% จากโทรศัพท์ Android 4 รุ่นและแอป 6 ตัว ประโยคอย่าง "เว็บพื้นดำประหยัดแบตเตอรี่ได้เกือบครึ่ง" ตัดเงื่อนไขออกทั้งหมดและขัดกับข้อสรุปหลักของทีมวิจัยเอง ซึ่งเขียนว่าโหมดมืดไม่น่าจะสร้างความต่างมากนักกับการใช้งานประจำวันของคนส่วนใหญ่

ข้อค้นพบอีกข้อที่มีประโยชน์กับการออกแบบคือ Pranab Dash เก็บข้อมูลเพิ่มหลังงานวิจัย และพบว่าแอป Google News บน Pixel 5 ในโหมดสว่างที่ความสว่าง 20% ใช้ไฟเท่ากับโหมดมืดที่ความสว่าง 50% หน้าจอพื้นดำจึงเปิดให้ผู้ใช้เพิ่มความสว่างเพื่ออ่านให้ชัดขึ้นได้โดยไม่เสียแบตเตอรี่มากกว่าเดิม

### นักพัฒนาวัดไฟที่หน้าจอของแอปตัวเองใช้ได้อย่างไร

ข่าวของ Purdue ระบุว่าฟีเจอร์แสดงการใช้แบตเตอรี่ของ Android ไม่คิดผลของเนื้อหาบนจอ ตัวเลขในหน้าการตั้งค่าจึงไม่สะท้อนผลของโหมดมืด ทีมวิจัยพัฒนาเครื่องมือชื่อ Per-Frame OLED Power Profiler (PFOP) ที่ประเมินไฟของจอ OLED ทีละเฟรมจากแบบจำลองการใช้ไฟของพิกเซล มหาวิทยาลัยยื่นขอสิทธิบัตรเทคโนโลยีนี้และเปิดให้ขอใช้สิทธิ์ได้ Charlie Hu ให้สัมภาษณ์ในข่าวเดียวกันว่าอุตสาหกรรมรีบใช้โหมดมืดก่อนมีเครื่องมือวัดไฟของพิกเซลที่แม่นยำ สำหรับทีมทำแอปทั่วไป ข้อนี้แปลว่าการอ้างตัวเลขประหยัดไฟของแอปตัวเองต้องมีการวัดรองรับ ไม่ควรยกตัวเลขของงานวิจัยไปใช้แทน

## ผู้ใช้ตั้งโหมดมืดไว้ที่เครื่อง

หน้าเว็บรู้ว่าผู้ใช้ต้องการพื้นมืดหรือพื้นสว่างผ่าน media feature ชื่อ `prefers-color-scheme` ในสเปก [Media Queries Level 5 ของ W3C](https://www.w3.org/TR/mediaqueries-5/) ฉบับ Working Draft วันที่ 19 กุมภาพันธ์ 2569 ค่านี้มีสองค่าคือ `light` และ `dark` ผู้ใช้ตั้งได้จากระบบปฏิบัติการหรือจากเบราว์เซอร์

| ค่า   | ความหมายตามสเปก                                                                                                     |
| ----- | ---------------------------------------------------------------------------------------------------------------------- |
| light | ผู้ใช้ต้องการพื้นสว่างตัวอักษรเข้ม หรือไม่ได้ตั้งค่าใด ๆ ไว้ จึงได้ค่าเริ่มต้นของเว็บคือพื้นสว่าง |
| dark  | ผู้ใช้ต้องการพื้นมืดตัวอักษรสว่าง                                                                               |

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

### เขียนชุดสีตามค่า `prefers-color-scheme` อย่างไร

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

| เงื่อนไขที่เขียนในไฟล์ CSS          | สีพื้นหน้า | สีตัวอักษร |
| --------------------------------------- | ------------ | ------------ |
| @media (prefers-color-scheme: dark)     | #0a0a0f      | #ffffff      |
| @media not (prefers-color-scheme: dark) | #f4f6f9      | #2c1f60      |

การเก็บสีทั้งสองชุดเป็นตัวแปร CSS ทำให้ปุ่มสลับโหมดบนหน้าเว็บเปลี่ยนค่าชุดเดียวกันได้ ไม่ต้องเขียนสีซ้ำสองที่

### เว็บของแบรนด์สีดำควรเป็นพื้นดำตลอดหรือไม่

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

## เว็บของฟิจิทัลใช้ดำค่าไหน

เว็บไซต์ของฟิจิทัลใช้พื้นมืด `#0a0a0f` ซึ่งเป็นสีดำอมน้ำเงินเล็กน้อย ค่า RGB คือ 10, 10, 15 ส่วนพื้นสว่างใช้ `#f4f6f9` ทั้งสองค่ากำหนดไว้ในคู่มือแบรนด์และในโค้ดของเว็บ ข้อมูลด้านล่างมาจากไฟล์ตั้งค่าธีมของเว็บ ตรวจเมื่อ 27 กันยายน 2569

| การตั้งค่า                  | ค่าในเว็บของฟิจิทัล    | ผลที่เกิดขึ้น                                 |
| ----------------------------- | --------------------------- | ------------------------------------------------ |
| ธีมเริ่มต้น                 | defaultTheme="dark"         | ผู้เข้าชมครั้งแรกเห็นพื้นมืด              |
| อ่านค่าจากเครื่องผู้ใช้  | enableSystem={false}        | ยังไม่ตามค่า prefers-color-scheme ของเครื่อง |
| สีแถบเบราว์เซอร์บนมือถือ | สว่าง #f4f6f9 · มืด #0a0a0f | แถบด้านบนเปลี่ยนสีตามโหมดของเครื่อง      |
| ปุ่มสลับโหมด                | มี                          | ผู้ใช้เปลี่ยนเป็นพื้นสว่างเองได้          |

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

### ทำไมไม่ใช้ดำสนิท `#000000`

คู่มือแบรนด์ของฟิจิทัลไม่ได้เขียนเหตุผลของการเลือก `#0a0a0f` ไว้ ข้อเท็จจริงที่วัดได้คือตัวอักษรสีขาวบน `#000000` มีค่า Contrast Ratio 21:1 ส่วนบน `#0a0a0f` ได้ราว 19.75:1 ทั้งสองค่าสูงกว่าเกณฑ์ตัวอักษรทั่วไปมาก ส่วนความต่างด้านพลังงานระหว่างดำสนิทกับดำอมสีบนจอ OLED ข่าวของ Purdue ไม่ได้วัดไว้ บทนี้จึงไม่มีตัวเลขเปรียบเทียบให้

## สีดำบนจอกับสีดำบนกระดาษ

สีดำของแบรนด์ต้องมีค่าแยกสำหรับจอและสำหรับงานพิมพ์ เพราะสองสื่อสร้างสีดำคนละวิธี จอสร้างสีดำด้วยการไม่เปล่งแสง ส่วนงานพิมพ์สร้างสีดำด้วยหมึก สเปก Media Queries Level 5 ยกตัวอย่างไว้ในหมายเหตุว่าผู้ใช้คนเดียวกันอาจอยากได้พื้นมืดบนจอที่เปล่งแสง แต่อยากได้พื้นสว่างเมื่อพิมพ์ เพื่อประหยัดหมึก และเพราะตัวอักษรหมึกบนกระดาษเปล่าพิมพ์ออกมาดีกว่าตัวอักษรที่เว้นว่างบนพื้นหมึกเต็มหน้า

ข้อนี้ต่อกับงานเอกสารของแบรนด์ตรง ๆ หน้าเว็บพื้นดำที่ผู้ใช้กดสั่งพิมพ์ควรมีชุดสีสำหรับพิมพ์แยกไว้ ไม่งั้นเครื่องพิมพ์ต้องเทหมึกดำเต็มหน้า เรื่องค่าหมึกดำในระบบ CMYK และการพิมพ์ดำให้เข้มอธิบายไว้ในบท [RGB vs CMYK และ DPI สีจอกับสีพิมพ์ต่างกันตามค่าวัดของ ICC](https://phygital.co.th/insights/rgb-cmyk-resolution-dpi-print-guide)

## ตรวจสีดำของแบรนด์บนจอห้าขั้น

การตรวจสีดำบนจอเริ่มจากกำหนดค่าแล้วทดสอบกับจอจริง ลำดับด้านล่างรวมข้อค้นพบของ Purdue สเปกของ W3C และสิ่งที่ฟิจิทัลพบในเว็บของตัวเอง

1. **กำหนดค่าสีดำของแบรนด์เป็นรหัสสำหรับจอ** เลือกว่าจะใช้ดำสนิทหรือดำอมสี แล้วบันทึกค่า HEX ลงคู่มือแบรนด์แยกจากค่าหมึกพิมพ์
2. **ตัดสินว่าเว็บจะอ่านค่า `prefers-color-scheme` หรือไม่** ถ้าอ่าน ให้เขียนชุดสีสำหรับทั้ง `dark` และกรณีที่ไม่ใช่ `dark` ถ้าไม่อ่าน ให้บันทึกเหตุผลไว้
3. **ทดสอบบนจอ OLED และ LCD อย่างน้อยอย่างละเครื่อง** ดูว่าพื้นดำและตัวอักษรยังอ่านได้ทั้งที่ความสว่างต่ำและกลางแดด
4. **แยกชุดสีสำหรับสั่งพิมพ์** ให้หน้าเว็บพื้นดำพิมพ์ออกมาเป็นพื้นขาวตัวอักษรเข้ม
5. **เขียนข้อความเรื่องประหยัดพลังงานพร้อมเงื่อนไข** ถ้าจะสื่อสารเรื่องนี้ ให้ระบุชนิดจอและช่วงความสว่างตามต้นทาง

ฟอนต์ที่วางบนพื้นดำต้องอ่านได้ทั้งสองโหมดด้วย ระยะบรรทัดและน้ำหนักตัวอักษรไทยบนพื้นมืดอธิบายไว้ในบท [Font Pairing คืออะไร จับคู่ฟอนต์ไทยให้คนทุกวัยอ่านง่าย](https://phygital.co.th/insights/font-pairing-typography-basics-guide) ส่วนสีเน้นที่วางคู่กับสีดำ เช่น ชมพู ต้องกำหนดเป็นรหัสตามบท [สีชมพูในการสร้างแบรนด์ คำเดียวกันทั่วโลก แต่เฉดต้องเป็นรหัส](https://phygital.co.th/insights/pink-color-brand-identity-meaning-guide)

### แอปหรือเว็บที่มีภาพสินค้าพื้นขาวควรทำโหมดมืดอย่างไร

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

สีขาวของภาพสินค้าบนจอเกิดจากแสงของพิกเซล ส่วนสีขาวของผนังและสินค้าจริงในร้านเกิดจากแสงของหลอดไฟสะท้อนบนวัสดุ ตัวเลขที่ใช้เลือกหลอดให้สีขาวในร้านตรงกับแบบอธิบายไว้ในบท [สีขาวในการสร้างแบรนด์ เลือกไฟ LED ด้วยค่า CCT CRI และ Duv](https://phygital.co.th/insights/white-color-brand-identity-meaning-guide)

## สรุป

พื้นดำลดการใช้ไฟของจอ OLED ได้จริง แต่ข่าวของ Purdue จากงานของ Dash และ Hu ปี 2564 แสดงว่าที่ความสว่าง 30-50% ประหยัดเฉลี่ยเพียง 3-9% และขึ้นไปถึง 39-47% ที่ความสว่าง 100% บนจอ LCD แทบไม่ต่าง สเปก Media Queries Level 5 ให้เว็บอ่านโหมดที่ผู้ใช้ตั้งไว้ผ่าน `prefers-color-scheme` และถือว่าผู้ใช้ที่ไม่ได้ตั้งค่าต้องการพื้นสว่าง แบรนด์สีดำจึงควรกำหนดค่าดำสำหรับจอแยกจากหมึกพิมพ์ ตัดสินว่าจะตามค่าของผู้ใช้หรือไม่ และอ้างเรื่องพลังงานพร้อมเงื่อนไขเสมอ

## คำถามที่พบบ่อย (FAQ)

### ถ้าเว็บเป็นพื้นดำ โลโก้สีดำจะทำอย่างไร

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

### โทรศัพท์ iPhone ได้ผลเหมือนงานวิจัยของ Purdue หรือไม่

งานนี้วัดเฉพาะโทรศัพท์ Android สี่รุ่น ข่าวของ Purdue ระบุเพียงว่าผลอาจใช้กับ iPhone ที่มีจอ OLED ได้ในทิศทางเดียวกัน โดยยกตัวอย่างตั้งแต่ iPhone X ขึ้นไป แต่ไม่ได้ให้ตัวเลขของ iPhone

### คำว่าสีดำสื่ออารมณ์อะไรในงานวิจัยข้ามประเทศ

งานสำรวจ 30 ประเทศที่อธิบายไว้ในบทสีชมพูพบว่าคำว่าดำผูกกับความเศร้า ความกลัว และความเกลียดในระดับเด่นชัด ความหมายด้านหรูหราที่แบรนด์ใช้กันมาจากบริบทของสินค้าและการจัดวาง ไม่ได้มาจากคำเรียกสีเพียงอย่างเดียว

### เอกสาร สไลด์ และอีเมลของแบรนด์สีดำควรเป็นพื้นดำด้วยหรือไม่

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

### สีของแถบเบราว์เซอร์บนมือถือควรเป็นสีดำของแบรนด์หรือไม่

ตั้งได้สองค่าตามโหมดของเครื่อง เว็บของฟิจิทัลกำหนดค่า theme color ไว้สองชุด คือ #f4f6f9 เมื่อเครื่องเป็นโหมดสว่าง และ #0a0a0f เมื่อเครื่องเป็นโหมดมืด แถบด้านบนจึงกลืนกับระบบของผู้ใช้ทั้งสองแบบ

### ต้องทำภาพประกอบสองชุดสำหรับสองโหมดหรือไม่

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

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

ให้ PHYGITAL AGENCY วางชุดสีสองโหมดและชุดสีสำหรับสั่งพิมพ์ ให้สีดำของแบรนด์ทำงานได้ทั้งบนจอและบนกระดาษ

- [นัดประชุมผ่าน Google Meet](https://calendar.app.google/DotQdE7Ca8LZG6Us5)
- [เพิ่มเพื่อนใน LINE](https://lin.ee/J8Qq8Do)