# สีน้ำเงินในการสร้างแบรนด์บนเว็บ เมื่อสีแบรนด์ตรงกับสีลิงก์

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

มาตรฐาน HTML ของ WHATWG ให้เบราว์เซอร์แสดงลิงก์ด้วยสี #0000EE ขีดเส้นใต้ และลิงก์ที่เคยกดเป็น #551A8B แบรนด์สีน้ำเงินจึงต้องแยกข้อความธรรมดากับลิงก์ให้ชัด

## Key Takeaways

- **มาตรฐาน HTML ของ WHATWG กำหนดสไตล์ตั้งต้นให้ลิงก์ที่ยังไม่เคยกดเป็นสี #0000EE และลิงก์ที่เคยกดแล้วเป็น #551A8B** — พร้อมขีดเส้นใต้และเปลี่ยนเคอร์เซอร์เป็นรูปมือ เบราว์เซอร์ใช้ค่าเหล่านี้กับทุกหน้าที่ไม่ได้แต่ง CSS ทับ
- **ข้อกำหนดสีของ CSS ระดับ 4 (CSS Color 4) อธิบายสีระบบ LinkText ว่าเป็นสีข้อความของลิงก์ ซึ่งบนพื้นสว่างเป็นสีน้ำเงินมาแต่เดิม** — แบรนด์ที่ใช้ตัวอักษรสีน้ำเงินกับข้อความธรรมดาบนหน้าเว็บจึงใช้สีเดียวกับที่มาตรฐานใช้บอกว่าเป็นลิงก์
- **สีน้ำเงินบนป้ายหน้าร้านไม่มีปัญหานี้ เพราะป้ายกดไม่ได้** — แบรนด์ที่ใช้สีเดียวกันทั้งหน้าร้านและหน้าเว็บจึงต้องมีกติกาเพิ่มสำหรับหน้าเว็บ คือกำหนดว่าลิงก์ใช้สัญญาณอะไรนอกจากสี และข้อความธรรมดาใช้สีอะไร

ธุรกิจที่ใช้สีน้ำเงินของแบรนด์ค่าเดียวกันทั้งบนป้ายหน้าร้าน นามบัตร และหน้าเว็บ จะเจอความต่างข้อหนึ่ง บนป้ายและกระดาษ สีน้ำเงินเป็นแค่สีของแบรนด์ แต่บนหน้าเว็บ สีเดียวกันซ้อนกับสีที่มาตรฐานใช้แสดงลิงก์ บทนี้อ่านข้อกำหนดของ WHATWG และ W3C ที่เกี่ยวกับสีลิงก์ แล้วแปลงเป็นกติกาที่แบรนด์สีน้ำเงินใช้วางสีบนหน้าเว็บได้

หัวข้อ 15.3.4 ของ[มาตรฐาน HTML ฉบับ Living Standard ของ WHATWG](https://html.spec.whatwg.org/multipage/rendering.html) เขียนสไตล์ตั้งต้นที่เบราว์เซอร์ใช้กับลิงก์ไว้สี่บรรทัด

* `:link { color: #0000EE; }`
* `:visited { color: #551A8B; }`
* `:link:active, :visited:active { color: #FF0000; }`
* `:link, :visited { text-decoration: underline; cursor: pointer; }`

ตัวเลข #0000EE ในบรรทัดแรกคือสีน้ำเงิน และเป็นสีแรกที่ลิงก์บนหน้าเว็บได้รับก่อนที่ใครจะแต่งอะไรเลย

## สีลิงก์ตั้งต้นในมาตรฐาน HTML

หัวข้อ 15.2 ของมาตรฐาน HTML ระบุว่ากฎ CSS ในส่วนนี้คาดหวังให้เบราว์เซอร์ใช้เป็นสไตล์ตั้งต้นระดับเบราว์เซอร์สำหรับทุกเอกสารที่มีองค์ประกอบ HTML เว้นแต่มีการระบุเป็นอย่างอื่น ค่าที่เกี่ยวกับลิงก์มีสามสถานะ และแต่ละสถานะมีสีระบบที่ตรงกันในข้อกำหนด CSS

| สถานะของลิงก์ | สีตั้งต้นใน HTML | ค่า RGB   | สีระบบใน CSS Color 4                               |
| --------------- | ------------------- | --------- | ---------------------------------------------------- |
| ยังไม่เคยกด  | #0000EE             | 0 0 238   | LinkText (บนพื้นสว่างเป็นสีน้ำเงินมาแต่เดิม)  |
| เคยกดแล้ว     | #551A8B             | 85 26 139 | VisitedText (บนพื้นสว่างเป็นสีม่วงมาแต่เดิม) |
| กำลังกด        | #FF0000             | 255 0 0   | ActiveText (บนพื้นสว่างเป็นสีแดงมาแต่เดิม)   |

### #0000EE เป็นสีน้ำเงินแบบไหน

ค่า #0000EE ไม่มีแสงสีแดงและสีเขียวเลย มีแต่แสงสีน้ำเงิน 238 จาก 255 หรือราวร้อยละ 93 ของค่าสูงสุด จึงเป็นน้ำเงินจัดที่เข้มกว่าคำว่า blue ใน CSS ซึ่งมีค่า #0000FF อยู่เล็กน้อย สีน้ำเงินของแบรนด์ส่วนใหญ่มีแดงหรือเขียวปนอยู่บ้าง ค่าจึงไม่ตรงกับ #0000EE พอดี แต่ถ้าอยู่ในโทนน้ำเงินจัดเหมือนกัน คนที่เห็นก็แยกสองสีนี้ออกจากกันได้ยาก

### ทำไมลิงก์ที่กดแล้วเปลี่ยนเป็นสีม่วง

มาตรฐาน HTML กำหนดสี #551A8B ให้ลิงก์ในสถานะ :visited และ W3C อธิบายสีระบบ VisitedText ไว้ใน CSS Color 4 ว่าเป็นสีข้อความของลิงก์ที่เคยเข้าชมแล้ว ซึ่งบนพื้นสว่างเป็นสีม่วงมาแต่เดิม สีม่วงจึงทำหน้าที่บอกผู้ใช้ว่าลิงก์นั้นเคยเปิดแล้ว เรื่องสีม่วงในอีกบริบทหนึ่งเขียนไว้ใน[สีม่วงในการสร้างแบรนด์ สีอัญชันเปลี่ยนตาม pH และอุณหภูมิ](https://phygital.co.th/insights/purple-color-brand-identity-meaning-guide)

### สีลิงก์ตั้งต้นบนพื้นหลังสีเข้มเป็นสีอะไร

ข้อกำหนดไม่ได้ให้ค่าตายตัวไว้ CSS Color 4 เขียนเพียงว่าสีระบบ LinkText บนพื้นสว่างเป็นสีน้ำเงินมาแต่เดิม คำอธิบายนี้จำกัดไว้ที่พื้นสว่าง จึงไม่ได้บอกว่าบนพื้นมืดต้องเป็นสีอะไร เว็บไซต์ที่มีโหมดมืดจึงควรกำหนดสีลิงก์ของโหมดมืดเอง และทดสอบว่ายังแยกจากเนื้อความได้ แทนการปล่อยให้เบราว์เซอร์เลือกให้

## สีน้ำเงินของแบรนด์บนป้ายกับบนหน้าเว็บ

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

### ข้อความสีน้ำเงินที่ไม่ใช่ลิงก์ควรทำอย่างไร

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

### ป้ายหน้าร้านสีน้ำเงินต้องเปลี่ยนตามหน้าเว็บไหม

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

### ข้อความสีน้ำเงินในรูปภาพกดได้ไหม

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

## เปลี่ยนสีลิงก์เป็นสีแบรนด์

สไตล์ตั้งต้นของเบราว์เซอร์เป็นชั้นล่างสุดของการจัดลำดับ CSS สไตล์ที่ผู้สร้างเว็บเขียนเองจึงแทนที่สีลิงก์ได้ แบรนด์ที่อยากให้ลิงก์เป็นสีน้ำเงินของตัวเองแทน #0000EE ทำได้ด้วยการกำหนดสีให้ :link และ :visited และควรคงสัญญาณอื่นของลิงก์ไว้ เช่น เส้นใต้ ส่วนเคอร์เซอร์รูปมือก็เป็นค่าตั้งต้นในบรรทัดเดียวกัน

### สีลิงก์ที่เคยกดแล้วแต่งได้แค่ไหน

แต่งได้จำกัด ข้อกำหนด Selectors Level 4 ของ W3C ฉบับ 22 มกราคม 2569 ระบุว่า :visited มีผลต่อความเป็นส่วนตัว เพราะเว็บไซต์อาจใช้สถานะนี้สืบว่าผู้ใช้เคยเข้าเว็บไหน เบราว์เซอร์จึงต้องปกป้องความเป็นส่วนตัวในการทำงานของ :visited และข้อกำหนดเสนอวิธีหนึ่งคือให้ลิงก์จับคู่ :visited เฉพาะเมื่อปลายทาง หน้าต้นทาง และเว็บไซต์ระดับบนตรงกับประวัติที่บันทึกไว้ นักออกแบบจึงไม่ควรฝากความหมายสำคัญไว้กับสีของลิงก์ที่เคยกด

### ค่า :focus-visible ในสไตล์ตั้งต้นเกี่ยวกับสีแบรนด์อย่างไร

หัวข้อ 15.3.4 ของมาตรฐาน HTML มีบรรทัด `:focus-visible { outline: auto; }` อยู่ถัดจากกฎของลิงก์ ค่านี้ทำให้เบราว์เซอร์วาดเส้นขอบรอบองค์ประกอบที่ถูกเลือกด้วยแป้นพิมพ์ เวลาแต่งสีลิงก์ให้เป็นสีแบรนด์ จึงควรตรวจด้วยว่าเส้นขอบนี้ยังมองเห็นได้บนพื้นสีน้ำเงินของแบรนด์ ถ้ามองไม่เห็น ต้องกำหนดสีเส้นขอบใหม่แทนการลบทิ้ง

### ถอดเส้นใต้ลิงก์ออกได้ไหม

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

## วางชุดสีน้ำเงินของแบรนด์สำหรับหน้าเว็บ

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

1. ยืนยันรหัสสีน้ำเงินหลักของแบรนด์ที่ใช้บนป้ายและเอกสารอยู่แล้ว
2. ตัดสินว่าลิงก์ใช้สีน้ำเงินของแบรนด์หรือใช้สีอื่น แล้วกำหนดสัญญาณเสริมของลิงก์ เช่น เส้นใต้
3. กำหนดสีของลิงก์ในสถานะที่เคยกด กำลังกด และเมื่อชี้เมาส์ ให้ต่างกันพอสังเกตได้
4. เลือกสีเนื้อความธรรมดาที่ไม่ใช่โทนเดียวกับลิงก์
5. เปิดหน้าจริงบนจอโทรศัพท์และคอมพิวเตอร์ แล้วไล่กดทุกลิงก์กับทุกปุ่มก่อนเปิดใช้

### ปุ่มสีน้ำเงินกับลิงก์สีน้ำเงินควรต่างกันไหม

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

### ฟอนต์ภาษาไทยกับเส้นใต้ลิงก์ต้องระวังอะไร

เส้นใต้ที่เบราว์เซอร์วาดอาจทับหรือชิดกับสระล่างและวรรณยุกต์บางตัวของภาษาไทย ขึ้นกับฟอนต์และขนาดตัวอักษร ทีมทำเว็บควรเปิดหน้าที่มีลิงก์ภาษาไทยจริงแล้วดูว่าเส้นใต้ยังอ่านง่ายไหม ถ้าไม่ ให้ปรับระยะของเส้นใต้ด้วย CSS แทนการถอดเส้นใต้ออก การเลือกฟอนต์ไทยให้อ่านง่ายอยู่ในบท[Font Pairing คืออะไร จับคู่ฟอนต์ไทยให้คนทุกวัยอ่านง่าย](https://phygital.co.th/insights/font-pairing-typography-basics-guide)

### ชุดสีลิงก์ต้องมีกี่ค่า

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

## ข้อจำกัดของบทนี้

ข้อกำหนดที่ใช้เป็นหลักฐานในบทนี้มีสามฉบับ คือมาตรฐาน HTML ของ WHATWG หัวข้อ 15.2 และ 15.3.4 ข้อกำหนด CSS Color 4 ที่ W3C ปรับปรุงล่าสุดเมื่อ 13 กันยายน 2569 และ Selectors Level 4 ฉบับ 22 มกราคม 2569 ข้อกำหนดเหล่านี้บอกค่าตั้งต้นและการทำงานของเบราว์เซอร์ ไม่ได้วัดว่าผู้ใช้กดหรือไม่กดข้อความสีน้ำเงิน บทนี้จึงไม่ได้อ้างผลวิจัยพฤติกรรมผู้ใช้

### เว็บไซต์ส่วนใหญ่ยังใช้สีลิงก์ตั้งต้นอยู่ไหม

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

## ตรวจหน้าเว็บของแบรนด์สีน้ำเงินก่อนเปิดใช้

การตรวจที่ใช้เวลาไม่นานมีสามข้อ เปิดหน้าหลักแล้วไล่ดูว่าข้อความสีน้ำเงินทุกจุดกดได้หรือไม่ ข้อความที่เป็นสีน้ำเงินแต่กดไม่ได้ควรเปลี่ยนสีหรือเปลี่ยนรูปแบบ ต่อมากดแป้น Tab เพื่อดูว่าเส้นขอบ :focus-visible ยังเห็นชัดทุกจุด และสุดท้ายเทียบรหัสสีน้ำเงินบนหน้าเว็บกับรหัสที่ใช้สั่งทำป้าย ให้เป็นค่าเดียวกัน

สีที่ถูกกำหนดโดยกติกาภายนอกแบรนด์ยังมีตัวอย่างในซีรีส์นี้อีกบท คือสีตัวอักษรบนป้ายคลินิกใน[สีเขียวในการสร้างแบรนด์คลินิก สีป้ายชื่อที่กฎกระทรวงกำหนด](https://phygital.co.th/insights/green-color-brand-identity-meaning-guide) ส่วนตัวอย่างชื่อสีในภาษาคอมพิวเตอร์ที่ผูกกับค่าเดียว อยู่ใน[สีส้มในการสร้างแบรนด์ ส้มกับแสดต่างกันแค่คำเดียวในพจนานุกรม](https://phygital.co.th/insights/orange-color-brand-identity-meaning-guide)

## สรุป

มาตรฐาน HTML ของ WHATWG ให้เบราว์เซอร์แสดงลิงก์ที่ยังไม่เคยกดเป็นสี #0000EE ลิงก์ที่เคยกดเป็น #551A8B และขีดเส้นใต้ทั้งสองแบบ ข้อกำหนด CSS Color 4 อธิบายสีลิงก์บนพื้นสว่างว่าเป็นสีน้ำเงินมาแต่เดิม แบรนด์ที่ใช้สีน้ำเงินบนป้ายจึงใช้สีเดิมบนหน้าเว็บได้ แต่ต้องแยกลิงก์ออกจากข้อความธรรมดาด้วยสัญญาณอื่น เช่น เส้นใต้ และตรวจเส้นขอบ :focus-visible บนสีของแบรนด์ก่อนเปิดใช้

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

### WHATWG คือใคร และมาตรฐาน HTML ของที่นี่ใช้กับเว็บไซต์ทุกเว็บไหม

WHATWG เป็นกลุ่มที่ดูแลมาตรฐาน HTML ฉบับ Living Standard ซึ่งผู้พัฒนาเบราว์เซอร์ใช้เป็นเกณฑ์ สไตล์ตั้งต้นของลิงก์ในมาตรฐานนี้มีผลกับทุกหน้าที่เปิดในเบราว์เซอร์ จนกว่าผู้สร้างเว็บจะเขียน CSS กำหนดสีลิงก์เอง

### สีน้ำเงินของแบรนด์ใกล้กับ #0000EE มากแค่ไหนถึงควรระวัง

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

### อีเมลการตลาดใช้สีลิงก์ตั้งต้นแบบเดียวกันไหม

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

### ใช้สีน้ำเงินเป็นพื้นหลังเว็บทั้งหน้าได้ไหม

ได้ แต่ลิงก์สีตั้งต้น #0000EE จะแทบมองไม่เห็นบนพื้นน้ำเงินเข้ม ทีมทำเว็บต้องกำหนดสีลิงก์ใหม่ให้ตัดกับพื้นหลัง และตรวจเส้นขอบ :focus-visible บนพื้นเดียวกันด้วย

### R Code บนป้ายหน้าร้านควรพาไปหน้าไหนของเว็บ

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

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

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

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