โค้ดสี · Brown · 24 เฉด
สีน้ำตาล โค้ดสีน้ำตาลทุกเฉด รหัสสี HEX RGB CMYK
โค้ดสีน้ำตาลที่หน้านี้ใช้เป็นสีตัวแทนคือน้ำตาลอานม้า #8B4513 หรือ RGB 139, 69, 19 ซึ่งเป็นชื่อสีมาตรฐาน CSS saddlebrown และหน้านี้รวมสีน้ำตาลไว้ 24 เฉด พร้อมโค้ด HEX RGB CMYK HSL ให้แตะคัดลอกได้ทันที
- 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
มาตรฐาน CSS
burlywood- HEX
-
#DEB887 - RGB
-
222, 184, 135 - CMYK
-
0, 17, 39, 13 - HSL
-
34°, 57%, 70%
- #D2B48C
น้ำตาล
แทน Tan
มาตรฐาน CSS
tan- HEX
-
#D2B48C - RGB
-
210, 180, 140 - CMYK
-
0, 14, 33, 18 - HSL
-
34°, 44%, 69%
- #F4A460
น้ำตาล
ทราย Sandy brown
มาตรฐาน CSS
sandybrown- HEX
-
#F4A460 - RGB
-
244, 164, 96 - CMYK
-
0, 33, 61, 4 - HSL
-
28°, 87%, 67%
- #BC8F8F
น้ำตาล
อม ชมพู Rosy brown
มาตรฐาน CSS
rosybrown- 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
มาตรฐาน CSS
darkkhaki- 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
มาตรฐาน CSS
peru- HEX
-
#CD853F - RGB
-
205, 133, 63 - CMYK
-
0, 35, 69, 20 - HSL
-
30°, 59%, 53%
- #D2691E
น้ำตาล
ช็อกโกแลต Chocolate
มาตรฐาน CSS
chocolate- 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
มาตรฐาน CSS
brown- 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
มาตรฐาน CSS
sienna- 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
มาตรฐาน CSS
saddlebrown- 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น้ำตาล
อานม้า สีตั้งต้น#13598Bใกล้ น้ำเงิน
อม +180°เขียว -
สีข้างเคียง Analogous · -30° / +30°
กลมกลืนและสบายตา เหมาะกับพื้นหลัง ภาพประกอบ และงานที่ต้องการอารมณ์เดียวกันทั้งหน้า
-
สามเส้า Triadic · +120° / +240°
สดใสและสมดุล ควรให้สีหนึ่งเด่นที่สุด แล้วใช้อีกสองสีเป็นสีรองในพื้นที่เล็กกว่า
-
คู่ตรงข้ามแยก Split complementary · +150° / +210°
ตัดกันชัดแต่ไม่แรงเท่าคู่ตรงข้าม จับคู่ง่ายกว่าและพลาดยากกว่า
ตัวหนังสือบนสีน้ำตาลควรเป็นสีอะไร
บนน้ำตาลอานม้า #8B4513 ตัวหนังสือสีขาวอ่านง่ายกว่า ได้ค่าคอนทราสต์ 7.09:1 ส่วนตัวหนังสือสีดำได้ 2.95:1 เกณฑ์ขั้นต่ำของ WCAG 2.2 (ระดับ AA) คือคอนทราสต์ระหว่างตัวหนังสือกับพื้นหลังอย่างน้อย 4.5:1 สำหรับตัวหนังสือขนาดปกติ และ 3:1 สำหรับตัวหนังสือขนาดใหญ่ (อย่างน้อย 18pt หรือ 14pt ตัวหนา) ตารางด้านล่างคำนวณค่านี้ให้สีน้ำตาลอีกหลายเฉด เพื่อเลือกสีตัวหนังสือได้ถูกตั้งแต่แรก
| เฉด | ตัวหนังสือขาว | ตัวหนังสือดำ |
|---|---|---|
| น้ำตาล | 1.85:1 ไม่ผ่าน | 11.31:1 ผ่าน · แนะนำ |
| น้ำตาล | 2.81:1 ไม่ผ่าน | 7.46:1 ผ่าน · แนะนำ |
| กากี | 2.06:1 ไม่ผ่าน | 10.14:1 ผ่าน · แนะนำ |
| น้ำตาล | 2.99:1 ไม่ผ่าน | 7.02:1 ผ่าน · แนะนำ |
| น้ำตาล | 3.94:1 ผ่านเฉพาะตัวใหญ่ | 5.32:1 ผ่าน · แนะนำ |
| น้ำตาล | 6.60:1 ผ่าน · แนะนำ | 3.18:1 ผ่านเฉพาะตัวใหญ่ |
| น้ำตาล | 7.67:1 ผ่าน · แนะนำ | 2.73:1 ไม่ผ่าน |
| น้ำตาล | 7.09:1 ผ่าน · แนะนำ | 2.95:1 ไม่ผ่าน |
| น้ำตาล | 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
แหล่งอ้างอิง
- ค่า HEX ของเฉดที่มีป้าย "มาตรฐาน CSS" ทั้ง 10 เฉด (เช่น brown = #A52A2A) ตามตารางชื่อสีมาตรฐาน—W3C, CSS Color Module Level 4 — §6.1 Named Colors (accessed Nov 3, 2026)
- ความหมายของคำว่า "น้ำตาล": "สีคล้ายสีน้ำตาลหม้อที่เคี่ยวแก่ไฟ, ถ้าแก่ไฟจนไหม้ เรียกว่า สีน้ำตาลไหม้"—พจนานุกรมฉบับราชบัณฑิตยสถาน (ฉบับออนไลน์) สำนักงานราชบัณฑิตยสภา (accessed Nov 3, 2026)
- ความหมายของคำว่า "กากี ๓": "สีน้ำตาลปนเหลือง, สีสนิมเหล็ก"—พจนานุกรมฉบับราชบัณฑิตยสถาน (ฉบับออนไลน์) สำนักงานราชบัณฑิตยสภา (accessed Nov 3, 2026)
- โค้ด HEX 6 หลักคือค่าแดง เขียว และน้ำเงิน คู่ละ 2 หลัก ในระบบเลขฐานสิบหก—W3C, CSS Color Module Level 4 — §5.2 The RGB Hexadecimal Notations (accessed Nov 3, 2026)
- เกณฑ์คอนทราสต์ขั้นต่ำ 4.5:1 สำหรับตัวหนังสือขนาดปกติ และ 3:1 สำหรับตัวหนังสือขนาดใหญ่ (อย่างน้อย 18pt หรือ 14pt ตัวหนา)—W3C, Understanding WCAG 2.2 — Success Criterion 1.4.3 Contrast (Minimum) (accessed Nov 3, 2026)