สีเว็บไซต์โทนเขียว 6 พาเลตต์ พร้อมรหัส Hex

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

คำถามที่พบบ่อย

สีเขียวแบบไหนเหมาะกับเว็บไซต์ที่สุด

ไม่มีเขียวที่ดีที่สุดเพียงเฉดเดียว แต่เขียวเข้มที่ความอิ่มตัวลดลงเล็กน้อย เช่น #166534 หรือ #2D6A4F เป็นจุดเริ่มต้นที่ปลอดภัยที่สุด ทั้งสองสีผ่านเกณฑ์ข้อความ WCAG AA ที่ 4.5:1 เมื่อวางบนพื้นขาว (7.13:1 และ 6.39:1) จึงใช้กับปุ่ม ลิงก์ และหัวข้อได้ ส่วนเขียวสว่างอย่าง #22C55E ไม่ผ่านเมื่อวางบนพื้นขาว (2.28:1) ควรเก็บไว้ใช้กับไอคอนหรือพื้นหลังสีเข้ม

สีอะไรเข้ากับสีเขียวบนเว็บไซต์

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

ใช้สีเขียวกับตัวอักษรแล้วอ่านง่ายตามหลักการเข้าถึงหรือไม่

เขียวเข้มผ่าน แต่เขียวอ่อนและเขียวกลางมักไม่ผ่าน WCAG 2 ระดับ AA กำหนดให้ข้อความทั่วไปมีค่าอย่างน้อย 4.5:1 และข้อความขนาดใหญ่กับองค์ประกอบอินเทอร์เฟซอย่างน้อย 3:1 ควรทดสอบทุกคู่สีแทนการดูด้วยตา เพราะเขียวโทนกลาง เช่น #40916C (3.83:1 บนพื้นขาว) อยู่ในช่วงที่ผ่านเฉพาะข้อความขนาดใหญ่

สีเขียวสื่อความหมายอะไรในงานออกแบบเว็บ

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

ควรใช้สีเขียวกับปุ่ม Call-to-Action หรือไม่

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

จำเป็นต้องมีพาเลตต์สีเขียวสำหรับโหมดมืดหรือไม่

ไม่จำเป็น แต่พื้นหลังสีเขียวเข้มก็เป็นงานออกแบบที่ได้รับความนิยมอยู่แล้ว หากต้องการทำโหมดมืด อย่านำพาเลตต์โหมดสว่างมาใช้ซ้ำตรง ๆ เพราะเขียวสว่างที่ไม่ผ่านบนพื้นขาวมักใช้ได้ดีบนพื้นเขียวเข้มเกือบดำ เช่น #22C55E บน #052E16 ได้ 6.54:1

สรุปสั้น ๆ: สำหรับเว็บไซต์โทนเขียว ให้ใช้เขียวเข้ม เช่น #166534 หรือ #2D6A4F กับปุ่ม ลิงก์ และหัวข้อ ใช้สีขาวนวลที่อมโทนสี เช่น #F6F4EC หรือ #F0FDF4 เป็นพื้นหลัง และเก็บเขียวสว่างอย่าง #22C55E ไว้ใช้กับพื้นหลังสีเข้มหรืองานตกแต่งเท่านั้น เขียวเข้มบนพื้นสว่างผ่านเกณฑ์ข้อความ WCAG AA ที่ 4.5:1 ส่วนเขียวสว่างบนพื้นขาวไม่ผ่าน (#22C55E บนพื้นขาวได้ 2.28:1)

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

ทำไมสีเขียวจึงใช้ยากบนหน้าจอ

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

หลักปฏิบัติคือ เลือกสีเขียวจากค่าคอนทราสต์ ไม่ใช่จากความรู้สึกเมื่อเห็นตัวอย่างสี สำหรับข้อความทั่วไป ควรได้ 4.5:1 ขึ้นไป ส่วนข้อความขนาดใหญ่ (ประมาณ 24px ปกติ หรือ 19px ตัวหนาขึ้นไป) และองค์ประกอบ UI เช่น เส้นขอบช่องกรอกและไอคอน ขั้นต่ำคือ 3:1

พาเลตต์เว็บไซต์สีเขียว 6 ชุด พร้อมรหัส Hex

แต่ละพาเลตต์ระบุสีพื้นหลัง สีข้อความ สีเน้นสำหรับปุ่มหรือลิงก์ และค่าคอนทราสต์ของคู่สีที่สำคัญ

1. เขียวป่าและครีม (บทความ ธรรมชาติ อาหาร)

บทบาทHexคู่สีและอัตราส่วน
พื้นหลัง#F6F4EC
ข้อความและหัวข้อ#1B4332บนพื้นหลัง: 10.06:1
ปุ่ม / ลิงก์#2D6A4Fตัวอักษรสีขาวบนสีนี้: 6.39:1
แผงสีอ่อน#95D5B2ตัวอักษร #1B4332 บนสีนี้: 6.56:1

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

2. เขียวมิ้นต์สดใส (เวลเนส คลินิก คอนเทนต์สุขภาพ)

บทบาทHexคู่สีและอัตราส่วน
พื้นหลัง#F0FDF4
ข้อความและหัวข้อ#14532Dบนพื้นหลัง: 8.70:1
ปุ่ม#15803Dตัวอักษรสีขาวบนสีนี้: 5.02:1
แถบสีเข้ม#052E16ตัวอักษร #DCFCE7 บนสีนี้: 13.57:1

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

3. เขียวเซจและมะกอก (สตูดิโอ ตกแต่งภายใน งานแฮนด์เมด)

บทบาทHexคู่สีและอัตราส่วน
พื้นหลัง#E9F5DB
ข้อความและหัวข้อ#31572Cบนพื้นหลัง: 7.33:1
ปุ่ม#4F772Dตัวอักษรสีขาวบนสีนี้: 5.24:1
ไฮไลต์#90A955ตัวอักษร #132A13 บนสีนี้: 5.84:1

พาเลตต์โทนนุ่มและเรียบง่ายแบบธรรมชาติ เหมาะกับพอร์ตโฟลิโอและแบรนด์บูติกที่อยากได้สีเขียวโดยไม่โฉ่งฉาด

4. ธีมมืดเขียวเข้ม (ฟินเทค SaaS แบรนด์พรีเมียม)

บทบาทHexคู่สีและอัตราส่วน
พื้นหลัง#081C15
ข้อความ#B7E4C7บนพื้นหลัง: 12.58:1
สีเน้น / ลิงก์#40916Cบนพื้นหลัง: 4.62:1
การ์ด#1B4332ตัวอักษร #95D5B2 บนสีนี้: 6.56:1

พื้นหลังสีเข้มทำให้เขียวโทนกลางใช้เป็นสีเน้นได้ โปรดทราบว่า #40916C ผ่านเมื่อวางบน #081C15 แต่ไม่ผ่านบนพื้นขาว (3.83:1) จึงไม่ควรนำไปใช้ซ้ำในส่วนที่มีพื้นหลังสว่าง

5. เขียวมะนาวนีออนบนเขียวเข้ม (อีเวนต์ ครีเอเตอร์ แบรนด์วัยรุ่น)

บทบาทHexคู่สีและอัตราส่วน
พื้นหลัง#1A2E05
หัวข้อหลัก / ปุ่ม#A3E635บนพื้นหลัง: 9.69:1
เขียวสว่างสำรอง#22C55Eบน #052E16: 6.54:1

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

6. เขียวอมฟ้า Teal (SaaS เฮลธ์เทค ความยั่งยืน)

บทบาทHexคู่สีและอัตราส่วน
พื้นหลัง#CCFBF1
ข้อความและหัวข้อ#134E4Aบนพื้นหลัง: 8.41:1
ปุ่ม#0F766Eตัวอักษรสีขาวบนสีนี้: 5.47:1

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

เฉดเขียวที่ไม่ผ่านเกณฑ์ และสีที่ควรใช้แทน

ไม่ผ่านคู่สีอัตราส่วนเปลี่ยนเป็น
ปุ่มเขียวสว่าง#22C55E กับตัวอักษรสีขาว2.28:1#15803D กับตัวอักษรสีขาว (5.02:1)
ลิงก์เขียวมะนาวบนพื้นขาว#65A30D บนพื้นขาว3.09:1#4D7C0F บนพื้นขาว (4.99:1)
ข้อความเขียวกลาง#40916C บนพื้นขาว3.83:1#2D6A4F บนพื้นขาว (6.39:1)

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

สร้างพาเลตต์สีเขียวของคุณเอง ทีละขั้นตอน

  1. กำหนดหน้าที่ของสีเขียวก่อน เป็นสีแบรนด์ สีปุ่มกระตุ้นการกระทำ หรือเป็นแค่สีเน้น ถ้าเป็นสีแบรนด์อย่างเดียวจะเลือกเฉดไหนก็ได้ แต่สีเขียวที่ใช้กับปุ่มต้องผ่านเกณฑ์คอนทราสต์
  2. เลือกสีหลักที่เข้ม เริ่มจากเขียวช่วงประมาณ #14532D ถึง #2D6A4F ใช้เป็นสีหัวข้อ ลิงก์ และปุ่มบนพื้นหลังสว่าง
  3. ใส่โทนสีให้พื้นหลัง ใช้เขียวอ่อนมากหรือครีมอบอุ่นแทนสีขาวล้วน เช่น #F0FDF4 หรือ #F6F4EC แล้วตรวจคอนทราสต์ของข้อความอีกครั้งหลังเปลี่ยนสี
  4. เพิ่มสีเน้นที่ไม่ใช่สีเขียวหนึ่งสี สีเหลืองอำพันหรือสีดินเผาช่วยให้ปุ่มแยกออกจากพื้นหลังในหน้าที่มีสีเขียวมาก ตรวจค่าคอนทราสต์ของข้อความบนปุ่มด้วย เช่น ตัวอักษร #92400E บน #FEF3C7 ได้ 6.37:1
  5. ทดสอบทุกคู่สีของข้อความกับพื้นหลัง นำหัวข้อ เนื้อหา ลิงก์ ปุ่ม และข้อความ placeholder ไปตรวจด้วยเครื่องมือ หากต่ำกว่า 4.5:1 ที่ขนาดตัวอักษรเนื้อหา ต้องปรับให้เข้มขึ้นหรืออ่อนลง
  6. ตรวจสถานะ hover และ disabled เฉดสีตอนโฮเวอร์มักเลื่อนไปอยู่ในช่วงที่ไม่ผ่านโดยไม่รู้ตัว
  7. บันทึกพาเลตต์เป็นโทเคนที่ตั้งชื่อไว้ การใช้ชื่อตัวแปร เช่น brand-900, brand-700 และ brand-100 ช่วยให้แก้ไขภายหลังได้ในบรรทัดเดียว คู่มือสี Tailwind CSS อธิบายแนวคิดของสเกลเฉดสี และรหัส Hex หลายตัวข้างต้นก็มาจากสเกลรูปแบบนี้

เลือกเขียวแบบไหนให้เหมาะกับเว็บไซต์ประเภทใด

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

เช็กลิสต์ก่อนเผยแพร่ (คัดลอกไปใช้ได้)

  • [ ] ข้อความเนื้อหามีคอนทราสต์กับพื้นหลังอย่างน้อย 4.5:1
  • [ ] ข้อความขนาดใหญ่และไอคอนมีอย่างน้อย 3:1
  • [ ] ข้อความบนปุ่มมีคอนทราสต์กับสีปุ่มอย่างน้อย 4.5:1
  • [ ] ลิงก์แยกออกจากข้อความเนื้อหาได้ด้วยมากกว่าสี (ขีดเส้นใต้ก็ใช้ได้)
  • [ ] เขียวสว่างปรากฏเฉพาะบนพื้นหลังสีเข้มหรือเป็นงานตกแต่ง
  • [ ] ใช้สีเน้นนอกเหนือจากสีเขียวไม่เกินหนึ่งสี
  • [ ] ส่วนที่เป็นพื้นเข้มใช้คู่สีที่ทดสอบแยกต่างหาก ไม่นำคู่สีโหมดสว่างมาใช้ซ้ำ
  • [ ] บันทึกพาเลตต์เป็นโทเคนที่ตั้งชื่อไว้ เพื่อแก้ไขได้จากจุดเดียว

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

นำพาเลตต์สีเขียวไปใช้กับเว็บไซต์จริง

เมื่อได้รหัส Hex แล้ว คุณก็ต้องมีที่สำหรับนำไปใช้ แผนฟรีของ We.Inc ให้คุณเผยแพร่ได้สูงสุดสามเว็บไซต์จากเทมเพลตสำเร็จรูป ส่วน AI builder ที่ร่างเว็บไซต์จากพรอมต์เริ่มต้นที่แผน Starter ราคา $20 ต่อเดือน คุณสมัครได้ที่นี่ แล้วนำรหัส Hex ของพื้นหลัง ข้อความ และปุ่มไปใส่ในสไตล์ของเว็บไซต์ จากนั้นตรวจคอนทราสต์ซ้ำบนหน้าที่เผยแพร่แล้ว

เริ่มต้นฟรี · ไม่ต้องใช้บัตรเครดิต

Umair Ali Sadaqat

ผู้ก่อตั้ง We.Inc

Umair เป็นผู้ก่อตั้ง We.Inc เขาเขียนเกี่ยวกับการสร้างเว็บไซต์ด้วย AI เอเจนซี และธุรกิจการบริหารเว็บสตูดิโอ

พร้อมสร้างสิ่งที่ยอดเยี่ยมแล้วหรือยัง

เข้าร่วมกับธุรกิจ 15,000+ รายที่ใช้ We.Inc เปิดตัว เติบโต และทำงานอัตโนมัติ ทั้งหมดจากแพลตฟอร์มเดียว

เริ่มต้นฟรี

ไม่ต้องใช้บัตรเครดิต · ติดต่อฝ่ายขาย

ที่เกี่ยวข้อง: บล็อก

ผลิตภัณฑ์

เหมาะกับใคร

ฟีเจอร์

แหล่งข้อมูล

บริษัท

แผนผังเว็บไซต์