ข้ามไปยังเนื้อหา

โค้ดสี · Brown · 24 เฉด

สีน้ำตาล โค้ดสีน้ำตาลทุกเฉด รหัสสี HEX RGB CMYK

โค้ดสีน้ำตาลที่หน้านี้ใช้เป็นสีตัวแทนคือน้ำตาลอานม้า #8B4513 หรือ RGB 139, 69, 19 ซึ่งเป็นชื่อสีมาตรฐาน CSS saddlebrown และหน้านี้รวมสีน้ำตาลไว้ 24 เฉด พร้อมโค้ด HEX RGB CMYK HSL ให้แตะคัดลอกได้ทันที

น้ำตาลอานม้า Saddle brown
HEX
#8B4513
RGB
139, 69, 19
CMYK
0, 50, 86, 45
HSL
25°, 76%, 31%

น้ำตาลเป็นสีที่อบอุ่นและเป็นธรรมชาติที่สุดสีหนึ่ง หน้านี้รวมน้ำตาลตั้งแต่กากีและน้ำตาลอูฐโทนอ่อน ไปจนถึงน้ำตาลกาแฟและช็อกโกแลตเข้ม

โค้ดสีน้ำตาลทั้ง 24 เฉด

ด้านล่างคือสีน้ำตาลทั้ง 24 เฉด เรียงจากอ่อนไปเข้ม แต่ละเฉดมีค่า HEX, RGB, CMYK และ HSL ให้แตะคัดลอกได้ทีละค่า เฉดที่มีป้าย "มาตรฐาน CSS" (10 เฉด) ใช้ค่าตามตารางชื่อสีมาตรฐานของ W3C พิมพ์ชื่อสีนั้นในโค้ด CSS ได้ตรง ๆ ส่วนเฉดที่มีป้าย "ค่าที่นิยมใช้" (14 เฉด) เป็นค่าที่ ThaiGraph เลือกให้ตรงกับชื่อเรียกที่คนไทยใช้ ไม่ใช่ค่ามาตรฐาน และแต่ละคนอาจเรียกสีเดียวกันต่างกันได้เล็กน้อย ความต่างของเฉดอ่อน เฉดเข้ม และโทนหม่น อธิบายไว้ที่ เฉดสีและโทนสี

  • #DEB887

    น้ำตาลไม้เบิร์ล

    Burlywood

    มาตรฐาน CSSburlywood

    HEX
    #DEB887
    RGB
    222, 184, 135
    CMYK
    0, 17, 39, 13
    HSL
    34°, 57%, 70%
  • #D2B48C

    น้ำตาลแทน

    Tan

    มาตรฐาน CSStan

    HEX
    #D2B48C
    RGB
    210, 180, 140
    CMYK
    0, 14, 33, 18
    HSL
    34°, 44%, 69%
  • #F4A460

    น้ำตาลทราย

    Sandy brown

    มาตรฐาน CSSsandybrown

    HEX
    #F4A460
    RGB
    244, 164, 96
    CMYK
    0, 33, 61, 4
    HSL
    28°, 87%, 67%
  • #BC8F8F

    น้ำตาลอมชมพู

    Rosy brown

    มาตรฐาน CSSrosybrown

    HEX
    #BC8F8F
    RGB
    188, 143, 143
    CMYK
    0, 24, 24, 26
    HSL
    0°, 25%, 65%
  • #C8A27C

    น้ำตาลชานม

    Milk tea

    ค่าที่นิยมใช้

    HEX
    #C8A27C
    RGB
    200, 162, 124
    CMYK
    0, 19, 38, 22
    HSL
    30°, 41%, 64%
  • #C19A6B

    น้ำตาลอูฐ

    Camel

    ค่าที่นิยมใช้

    HEX
    #C19A6B
    RGB
    193, 154, 107
    CMYK
    0, 20, 45, 24
    HSL
    33°, 41%, 59%
  • #BDB76B

    กากีเข้ม

    Dark khaki

    มาตรฐาน CSSdarkkhaki

    HEX
    #BDB76B
    RGB
    189, 183, 107
    CMYK
    0, 3, 43, 26
    HSL
    56°, 38%, 58%
  • #B49A6A

    กากี

    Khaki brown

    ค่าที่นิยมใช้

    HEX
    #B49A6A
    RGB
    180, 154, 106
    CMYK
    0, 14, 41, 29
    HSL
    39°, 33%, 56%
  • #B5835A

    น้ำตาลอ่อน

    Light brown

    ค่าที่นิยมใช้

    HEX
    #B5835A
    RGB
    181, 131, 90
    CMYK
    0, 28, 50, 29
    HSL
    27°, 38%, 53%
  • #CD853F

    น้ำตาลเปรู

    Peru

    มาตรฐาน CSSperu

    HEX
    #CD853F
    RGB
    205, 133, 63
    CMYK
    0, 35, 69, 20
    HSL
    30°, 59%, 53%
  • #D2691E

    น้ำตาลช็อกโกแลต

    Chocolate

    มาตรฐาน CSSchocolate

    HEX
    #D2691E
    RGB
    210, 105, 30
    CMYK
    0, 50, 86, 18
    HSL
    25°, 75%, 47%
  • #8B6F5C

    น้ำตาลมอคค่า

    Mocha

    ค่าที่นิยมใช้

    HEX
    #8B6F5C
    RGB
    139, 111, 92
    CMYK
    0, 20, 34, 45
    HSL
    24°, 20%, 45%
  • #B5702D

    น้ำตาลคาราเมล

    Caramel

    ค่าที่นิยมใช้

    HEX
    #B5702D
    RGB
    181, 112, 45
    CMYK
    0, 38, 75, 29
    HSL
    30°, 60%, 44%
  • #A0763A

    น้ำตาลไม้สัก

    Teak

    ค่าที่นิยมใช้

    HEX
    #A0763A
    RGB
    160, 118, 58
    CMYK
    0, 26, 64, 37
    HSL
    35°, 47%, 43%
  • #A52A2A

    น้ำตาลแดง

    Brown

    มาตรฐาน CSSbrown

    HEX
    #A52A2A
    RGB
    165, 42, 42
    CMYK
    0, 75, 75, 35
    HSL
    0°, 59%, 41%
  • #954535

    น้ำตาลเกาลัด

    Chestnut

    ค่าที่นิยมใช้

    HEX
    #954535
    RGB
    149, 69, 53
    CMYK
    0, 54, 64, 42
    HSL
    10°, 48%, 40%
  • #A0522D

    น้ำตาลเซียนนา

    Sienna

    มาตรฐาน CSSsienna

    HEX
    #A0522D
    RGB
    160, 82, 45
    CMYK
    0, 49, 72, 37
    HSL
    19°, 56%, 40%
  • #875F42

    น้ำตาลโกโก้

    Cocoa

    ค่าที่นิยมใช้

    HEX
    #875F42
    RGB
    135, 95, 66
    CMYK
    0, 30, 51, 47
    HSL
    25°, 34%, 39%
  • #8B3A2B

    น้ำตาลอิฐแดง

    Red brick brown

    ค่าที่นิยมใช้

    HEX
    #8B3A2B
    RGB
    139, 58, 43
    CMYK
    0, 58, 69, 45
    HSL
    9°, 53%, 36%
  • #6F4E37

    น้ำตาลกาแฟ

    Coffee

    ค่าที่นิยมใช้

    HEX
    #6F4E37
    RGB
    111, 78, 55
    CMYK
    0, 30, 50, 56
    HSL
    25°, 34%, 33%
  • #8B4513

    น้ำตาลอานม้า

    Saddle brown

    มาตรฐาน CSSsaddlebrown

    HEX
    #8B4513
    RGB
    139, 69, 19
    CMYK
    0, 50, 86, 45
    HSL
    25°, 76%, 31%
  • #5C4033

    น้ำตาลเข้ม

    Dark brown

    ค่าที่นิยมใช้

    HEX
    #5C4033
    RGB
    92, 64, 51
    CMYK
    0, 30, 45, 64
    HSL
    19°, 29%, 28%
  • #5D3A1A

    น้ำตาลไหม้

    Burnt brown

    ค่าที่นิยมใช้

    HEX
    #5D3A1A
    RGB
    93, 58, 26
    CMYK
    0, 38, 72, 64
    HSL
    29°, 56%, 23%
  • #3F2A1E

    น้ำตาลดาร์กช็อกโกแลต

    Dark chocolate

    ค่าที่นิยมใช้

    HEX
    #3F2A1E
    RGB
    63, 42, 30
    CMYK
    0, 33, 52, 75
    HSL
    22°, 35%, 18%

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

พาเล็ตต์สีน้ำตาลพร้อมใช้

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

  • ร้านกาแฟ

    #3F2A1E
    #6F4E37
    #C8A27C
    #F3E9DC
    #2E8B57
  • ไม้สักกับครีม

    #A0763A
    #5C4033
    #EADBC8
    #FAF6EF
    #556B2F
  • คาราเมลกับฟ้า

    #B5702D
    #C19A6B
    #F4ECE1
    #8DA9C4
    #3B4A5A
  • กากีเอาท์ดอร์

    #B49A6A
    #4B5320
    #875F42
    #EFE6D2
    #1F1F1F

สีน้ำตาลเข้ากับสีอะไร

สีที่ตัดกับน้ำตาลอานม้าได้ชัดที่สุดคือสีตรงข้ามบนวงจรสี #13598B (ใกล้เคียงน้ำเงินอมเขียว) ส่วนสีที่กลมกลืนที่สุดคือสีข้างเคียง #8B131D และ #8B8113 ทุกค่าด้านล่างคำนวณจากน้ำตาลอานม้า #8B4513 ด้วยการหมุนค่าเฉดสี (Hue) ในระบบ HSL โดยคงความสด (Saturation) และความสว่าง (Lightness) ไว้เท่าเดิม ชื่อที่กำกับใต้สีคือเฉดในคลังที่ดูใกล้เคียงที่สุด ถ้าไม่มีเฉดไหนใกล้พอจะแสดงเพียงองศาที่หมุน หลักการของแต่ละแบบอ่านต่อได้ที่ สีคู่ตรงข้าม และ วงจรสี

  • คู่ตรงข้าม Complementary · +180°

    ตัดกันแรงที่สุด ใช้สีหนึ่งเป็นสีหลักและให้อีกสีเป็นจุดเน้นเล็ก ๆ เช่น ปุ่มหรือหัวข้อ

    #8B4513

    น้ำตาลอานม้า สีตั้งต้น

  • สีข้างเคียง Analogous · -30° / +30°

    กลมกลืนและสบายตา เหมาะกับพื้นหลัง ภาพประกอบ และงานที่ต้องการอารมณ์เดียวกันทั้งหน้า

    #8B4513

    น้ำตาลอานม้า สีตั้งต้น

  • สามเส้า Triadic · +120° / +240°

    สดใสและสมดุล ควรให้สีหนึ่งเด่นที่สุด แล้วใช้อีกสองสีเป็นสีรองในพื้นที่เล็กกว่า

    #8B4513

    น้ำตาลอานม้า สีตั้งต้น

    #138B45

    ไม่มีชื่อเฉดในคลัง +120°

  • คู่ตรงข้ามแยก Split complementary · +150° / +210°

    ตัดกันชัดแต่ไม่แรงเท่าคู่ตรงข้าม จับคู่ง่ายกว่าและพลาดยากกว่า

    #8B4513

    น้ำตาลอานม้า สีตั้งต้น

    #131D8B

    ไม่มีชื่อเฉดในคลัง +210°

ตัวหนังสือบนสีน้ำตาลควรเป็นสีอะไร

บนน้ำตาลอานม้า #8B4513 ตัวหนังสือสีขาวอ่านง่ายกว่า ได้ค่าคอนทราสต์ 7.09:1 ส่วนตัวหนังสือสีดำได้ 2.95:1 เกณฑ์ขั้นต่ำของ WCAG 2.2 (ระดับ AA) คือคอนทราสต์ระหว่างตัวหนังสือกับพื้นหลังอย่างน้อย 4.5:1 สำหรับตัวหนังสือขนาดปกติ และ 3:1 สำหรับตัวหนังสือขนาดใหญ่ (อย่างน้อย 18pt หรือ 14pt ตัวหนา) ตารางด้านล่างคำนวณค่านี้ให้สีน้ำตาลอีกหลายเฉด เพื่อเลือกสีตัวหนังสือได้ถูกตั้งแต่แรก

ตัวหนังสือสีขาว Aa 7.09:1 · ผ่าน
ตัวหนังสือสีดำ Aa 2.95:1 · ไม่ผ่าน
เฉดตัวหนังสือขาวตัวหนังสือดำ
น้ำตาลไม้เบิร์ล#DEB887 1.85:1 ไม่ผ่าน 11.31:1 ผ่าน · แนะนำ
น้ำตาลอมชมพู#BC8F8F 2.81:1 ไม่ผ่าน 7.46:1 ผ่าน · แนะนำ
กากีเข้ม#BDB76B 2.06:1 ไม่ผ่าน 10.14:1 ผ่าน · แนะนำ
น้ำตาลเปรู#CD853F 2.99:1 ไม่ผ่าน 7.02:1 ผ่าน · แนะนำ
น้ำตาลคาราเมล#B5702D 3.94:1 ผ่านเฉพาะตัวใหญ่ 5.32:1 ผ่าน · แนะนำ
น้ำตาลเกาลัด#954535 6.60:1 ผ่าน · แนะนำ 3.18:1 ผ่านเฉพาะตัวใหญ่
น้ำตาลอิฐแดง#8B3A2B 7.67:1 ผ่าน · แนะนำ 2.73:1 ไม่ผ่าน
น้ำตาลอานม้า#8B4513 7.09:1 ผ่าน · แนะนำ 2.95:1 ไม่ผ่าน
น้ำตาลเข้ม#5C4033 9.39:1 ผ่าน · แนะนำ 2.23:1 ไม่ผ่าน

สีน้ำตาลให้ความรู้สึกแบบไหน

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

  • กากี "สีน้ำตาลปนเหลือง, สีสนิมเหล็ก"

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

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

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

เคล็ดลับใช้สีน้ำตาลในงานออกแบบ

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

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

วิธีนำโค้ดสีน้ำตาลไปใช้

แตะค่า HEX ในตารางเพื่อคัดลอก แล้ววางในช่องรหัสสีของโปรแกรมได้ทันที ใช้ได้ทั้ง Canva, Figma, Photoshop และ Illustrator ส่วน Microsoft Word ให้ไปที่ More Colors แล้ววางค่า HEX ในช่อง Hex ของแท็บ Custom (Word รุ่นเก่าที่ไม่มีช่องนี้ให้ใส่ค่า RGB แทน) ขั้นตอนของแต่ละโปรแกรมอยู่ที่ หน้ารวมโค้ดสี ถ้ามีโค้ดสีในรูปแบบอื่นอยู่แล้ว เช่น CMYK จากโรงพิมพ์ แปลงกลับเป็น HEX ได้ที่ เครื่องมือแปลงโค้ดสี

โค้ดสีตระกูลอื่น

ThaiGraph รวมโค้ดสีไว้ 19 ตระกูล รวม 450 เฉด เลือกตระกูลที่ต้องการด้านล่าง หรือดูทุกเฉดในหน้าเดียวพร้อมช่องค้นหาที่ รวมโค้ดสี ส่วนสีไทยโบราณอยู่ที่ สีไทย Thaitone

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

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

  1. ค่า HEX ของเฉดที่มีป้าย "มาตรฐาน CSS" ทั้ง 10 เฉด (เช่น brown = #A52A2A) ตามตารางชื่อสีมาตรฐาน—W3C, CSS Color Module Level 4 — §6.1 Named Colors (accessed Nov 3, 2026)
  2. ความหมายของคำว่า "น้ำตาล": "สีคล้ายสีน้ำตาลหม้อที่เคี่ยวแก่ไฟ, ถ้าแก่ไฟจนไหม้ เรียกว่า สีน้ำตาลไหม้"—พจนานุกรมฉบับราชบัณฑิตยสถาน (ฉบับออนไลน์) สำนักงานราชบัณฑิตยสภา (accessed Nov 3, 2026)
  3. ความหมายของคำว่า "กากี ๓": "สีน้ำตาลปนเหลือง, สีสนิมเหล็ก"—พจนานุกรมฉบับราชบัณฑิตยสถาน (ฉบับออนไลน์) สำนักงานราชบัณฑิตยสภา (accessed Nov 3, 2026)
  4. โค้ด HEX 6 หลักคือค่าแดง เขียว และน้ำเงิน คู่ละ 2 หลัก ในระบบเลขฐานสิบหก—W3C, CSS Color Module Level 4 — §5.2 The RGB Hexadecimal Notations (accessed Nov 3, 2026)
  5. เกณฑ์คอนทราสต์ขั้นต่ำ 4.5:1 สำหรับตัวหนังสือขนาดปกติ และ 3:1 สำหรับตัวหนังสือขนาดใหญ่ (อย่างน้อย 18pt หรือ 14pt ตัวหนา)—W3C, Understanding WCAG 2.2 — Success Criterion 1.4.3 Contrast (Minimum) (accessed Nov 3, 2026)