ข้ามไปยังเนื้อหา
ไทยกราฟ English

ทฤษฎีสี

เฉดสีและโทนสี: Tint, Shade, Tone ต่างกันอย่างไร

สีหนึ่งสีแยกย่อยได้สามแบบ: เติมขาวได้สีอ่อน (tint) เติมดำได้สีเข้ม (shade) และเติมเทาได้สีหม่น (tone) ทั้งสามทางยังคงเป็นสีเดิม แค่ความสว่างหรือความสดเปลี่ยนไป ในภาษาที่ใช้กันทั่วไป คนไทยมักเรียกทุกแบบรวมกันว่าเฉดสีหรือโทนสี หน้านี้จึงใช้คำว่า “เฉดสี” หมายถึงชุดสีอ่อนไปเข้มของสีเดียวกัน และแยกชื่อ tint, shade, tone เมื่อต้องการความแม่นยำ ด้านล่างมีตารางไล่เฉดสี 11 สี และเครื่องมือสร้างเฉดสีจากโค้ดสีของคุณเอง

Portrait of Ploypailin Srisuwan, Thai Design Researcher at ThaiGraph

โดย Ploypailin Srisuwan

Thai Design Researcher & Editor, ThaiGraph ·

ตรวจสอบข้อมูลเมื่อ November 2026

Tint สีอ่อน · + ขาว

  • ตั้งต้น
  • #5C8DE0
  • #90B1EA
  • #C3D5F4
  • #EAF0FB

Shade สีเข้ม · + ดำ

  • ตั้งต้น
  • #183F81
  • #122E5E
  • #0B1D3C
  • #060F1E

Tone สีหม่น · + เทา

  • ตั้งต้น
  • #2F5492
  • #405882
  • #505D71
  • #616161
สีน้ำเงิน #1F4FA3 แตกเป็น tint (ความสว่างเพิ่ม) shade (ความสว่างลด) และ tone (ความสดลดจนเป็นเทา)

Tint คืออะไร: สีอ่อนที่ได้จากการเติมขาว

Tint คือสีที่ผสมขาวเข้าไป ความสว่างจึงเพิ่มขึ้นโดยที่ยังเป็นสีเดิม เช่น แดงผสมขาวได้ชมพู และน้ำเงินผสมขาวได้ฟ้าอ่อน ในโปรแกรมออกแบบ วิธีที่ตรงที่สุดคือเพิ่มค่า L (Lightness) ในโหมด HSL โดยไม่แตะค่า H และ S เมื่อ L ขึ้นไปถึง 100% สีจะกลายเป็นขาวล้วน Tint คือเครื่องมือหลักสำหรับทำพื้นหลังของกล่องข้อความ การ์ด และแถวสลับสีในตาราง เพราะยังเก็บกลิ่นอายของสีแบรนด์ไว้แต่ไม่รบกวนตัวหนังสือ สีพาสเทลส่วนใหญ่ก็คือ tint ที่มีความสว่างสูง ดูตัวอย่างได้ที่ โค้ดสีพาสเทล

Shade คืออะไร: สีเข้มที่ได้จากการเติมดำ

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

Tone คืออะไร: สีหม่นที่ได้จากการเติมเทา

Tone คือสีที่ผสมเทาเข้าไป ความสดจึงลดลงจนดูนุ่มและหม่น ในโหมด HSL คือการลดค่า S (Saturation) โดยคงค่า L ไว้ เมื่อ S เหลือ 0% สีจะกลายเป็นเทาล้วน Tone คือที่มาของสีสไตล์มินิมอล สีฝุ่น และสีเอิร์ธโทน สีที่ความสดต่ำวางด้วยกันได้ง่ายกว่าสีสดมาก เพราะไม่มีสีไหนแย่งกันเด่น ถ้าพาเล็ตต์ของคุณดูฉูดฉาดเกินไป ลองลดความสดของทุกสีลงเท่าๆ กันก่อนเปลี่ยนสี มักแก้ปัญหาได้ทันที ดูตัวอย่างสีโทนหม่นได้ที่ สีเอิร์ธโทน

ตารางไล่เฉดสีอ่อนไปเข้ม 11 สี

ตารางนี้ไล่เฉดสีของ 11 สีหลักจากอ่อนสุดไปเข้มสุด 9 ระดับ ทุกช่องใช้ค่าฮิวและความอิ่มตัวเดียวกับสีตั้งต้น เปลี่ยนเฉพาะความสว่าง (L 95% ถึง 15%) แตะช่องไหนก็คัดลอกโค้ด HEX ได้ทันที ระดับ 1–3 ใช้เป็นพื้นหลัง ระดับ 4–6 ใช้เป็นสีหลักและปุ่ม ระดับ 7–9 ใช้เป็นตัวหนังสือหรือเส้นบนพื้นอ่อน การใช้สีจากแถวเดียวกันทั้งงานเรียกว่าสีเดียวไล่น้ำหนัก (monotone) ซึ่งคุมง่ายและดูเรียบร้อยเสมอ บนมือถือเลื่อนตารางไปด้านข้างได้

สี1L952L883L784L665L546L447L348L249L15
แดง FDE8E8 F9C7C8 F5999A EF6164 EA2A2D CC1417 9E1012 6F0B0D 460708
ส้ม FEF3E6 FDE3C4 FBCC93 F9B058 F7951D D97B08 A75F06 764304 4A2A03
เหลือง FFFCE6 FFF9C2 FFF48F FFEE52 FFE814 E0CA00 AD9C00 7A6E00 4D4500
เขียว EBF9EF CFF2D8 A7E6B7 78D990 48CB69 31AF51 26873E 1B5F2C 113C1C
เขียวน้ำเงิน E8FDFD C7F9F9 99F5F5 61EFEF 2AEAEA 14CCCC 109E9E 0B6F6F 074646
ฟ้า E6F2FF C2E0FF 8FC7FF 52A8FF 148AFF 0070E0 0057AD 003D7A 00264D
น้ำเงิน EAF0FB CCDBF5 A1BDED 6D99E3 3A74D9 245CBC 1C4792 143267 0C1F40
ม่วง F4EBF9 E5D0F1 CFA9E5 B57AD6 9A4CC8 8035AC 632985 461D5E 2C123B
ชมพู FBE9F2 F6CAE0 EF9FC6 E76AA6 DE3587 C11F6E 951855 69113C 420B25
น้ำตาล F9F2EB F1E0D0 E5C6A9 D6A77A C8884C AC6E35 855529 5E3C1D 3B2612
เทา F2F2F2 E0E0E0 C7C7C7 A8A8A8 8A8A8A 707070 575757 3D3D3D 262626

ช่องในตารางแสดงโค้ด HEX โดยตัดเครื่องหมาย # ออกเพื่อให้พอดีช่อง เมื่อแตะคัดลอกจะได้โค้ดเต็มพร้อม #

สร้างเฉดสีจากโค้ดสีของคุณ

เลือกสีหรือพิมพ์โค้ด HEX ระบบจะไล่เฉดสีอ่อนไปเข้ม 9 ระดับ และสีหม่น 5 ระดับให้ทันที

เฉดสีอ่อนไปเข้ม (tint → shade)

  1. 1 #EAF0FB
  2. 2 #CCDBF5
  3. 3 #A1BDED
  4. 4 #6D99E3
  5. 5 #3A74D9
  6. 6 #245CBC
  7. 7 #1C4792
  8. 8 #143267
  9. 9 #0C1F40

สีหม่น (tone) ความสด 100% → 0%

  1. 100% #1F4FA3
  2. 75% #2F5492
  3. 50% #405882
  4. 25% #505D71
  5. 0% #616161

ทำไมเหลืองกับน้ำเงินที่ L 50% ดูสว่างไม่เท่ากัน

ค่า L ในระบบ HSL ไม่ได้บอกว่าตาเรามองเห็นสีนั้นสว่างแค่ไหน เหลือง #FFFF00 กับน้ำเงิน #0000FF มีค่า L 50% เท่ากันพอดี แต่น้ำเงินดูมืดกว่ามาก ซึ่ง W3C เองก็ยกตัวอย่างนี้ไว้ในมาตรฐาน CSS ผลคือถ้าใช้ตารางไล่เฉดเดียวกันกับทุกสี ระดับเดียวกันของเหลืองจะสว่างกว่าของน้ำเงินเสมอ อย่าตัดสินว่าตัวหนังสืออ่านออกหรือไม่จากค่า L ให้ตรวจอัตราส่วนคอนทราสต์แทน ข้อความทั่วไปควรได้อย่างน้อย 4.5:1 ตามเกณฑ์ WCAG

#FFFF00hsl(60, 100%, 50%)
#0000FFhsl(240, 100%, 50%)

คอนทราสต์เทียบกับพื้นขาว: เหลือง 1.07:1 · น้ำเงิน 8.59:1 ค่า L เท่ากัน แต่ความต่างจากพื้นขาวห่างกันหลายเท่า

นักออกแบบใช้เฉดสีและโทนสีอย่างไร

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

  • พื้นหลังและการ์ด ใช้ tint ระดับ 1–2 แทนสีขาวล้วน งานจะดูมีสีแบรนด์โดยไม่รก
  • ปุ่มและสถานะ สีหลักอยู่ระดับ 5 เมื่อชี้เมาส์ใช้ระดับ 6 เมื่อกดใช้ระดับ 7
  • ตัวหนังสือบนพื้นสี ใช้ shade ระดับ 8–9 ของสีเดียวกันแทนดำ จะกลมกลืนกว่า แต่ต้องตรวจคอนทราสต์ทุกครั้ง
  • กราฟและแผนที่ ใช้เฉดของสีเดียวไล่ค่าน้อยไปมาก คนอ่านจะเข้าใจทันทีว่าสีเข้มคือค่ามาก
  • ภาพรวมที่นุ่มลง ลดความสด (tone) ของทุกสีในพาเล็ตต์พร้อมกัน แทนการเปลี่ยนสี

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

ตรวจสอบข้อมูลเมื่อ November 2026

แหล่งอ้างอิง

  1. Tint คือสีผสมขาวซึ่งเพิ่มความสว่าง Shade คือสีผสมดำซึ่งเพิ่มความมืด Tone คือสีผสมเทา สีที่มีฮิวกับความอิ่มตัวเดียวกันแต่ความสว่างต่างกันเรียกว่า tint และ shade และสีที่มีฮิวกับความสว่างเดียวกันแต่ความอิ่มตัวต่างกันเรียกว่า tone—Wikipedia — Tints and shades (accessed Nov 3, 2026)
  2. ใน hsl() ความอิ่มตัว 0% คือเทา ความสว่าง 0% คือดำ 100% คือขาว 50% คือสีปกติ และน้ำเงิน #00F กับเหลือง #FF0 มีค่า L 50% เท่ากันแม้น้ำเงินจะดูมืดกว่ามาก—W3C — CSS Color Module Level 4 (accessed Nov 3, 2026)
  3. ชุดสีเอกรงค์ประกอบด้วย tint, tone และ shade ของสีเดียว—Wikipedia — Color scheme (accessed Nov 3, 2026)
  4. สีเดียวไล่น้ำหนัก (monotone) คือการใช้สีเฉดเดียวกันที่มีความเข้มอ่อนต่างกัน—คณะศิลปกรรมศาสตร์ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี — ทฤษฎีการจับคู่สี (Color wheel) (accessed Nov 3, 2026)
  5. ข้อความทั่วไปต้องมีอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1—W3C — Web Content Accessibility Guidelines (WCAG) 2.1, SC 1.4.3 (accessed Nov 3, 2026)