โค้ดสี · Orange · 22 เฉด
สีส้ม โค้ดสีส้มทุกเฉด รหัสสี HEX RGB CMYK
โค้ดสีส้มที่หน้านี้ใช้เป็นสีตัวแทนคือส้มฟักทอง #FF7518 หรือ RGB 255, 117, 24 และหน้านี้รวมสีส้มไว้ 22 เฉด พร้อมโค้ด HEX RGB CMYK HSL ให้แตะคัดลอกได้ทันที
- HEX
-
#FF7518 - RGB
-
255, 117, 24 - CMYK
-
0, 54, 91, 0 - HSL
-
24°, 100%, 55%
ส้มอยู่ระหว่างแดงกับเหลือง จึงได้ทั้งพลังของแดงและความร่าเริงของเหลือง หน้านี้รวมส้มตั้งแต่ส้มพีชอ่อน ๆ สีแสด ไปจนถึงส้มอิฐและส้มสนิม
ตรวจสอบข้อมูลเมื่อ November 2026
โค้ดสีส้มทั้ง 22 เฉด
ด้านล่างคือสีส้มทั้ง 22 เฉด เรียงจากอ่อนไปเข้ม แต่ละเฉดมีค่า HEX, RGB, CMYK และ HSL ให้แตะคัดลอกได้ทีละค่า เฉดที่มีป้าย "มาตรฐาน CSS" (8 เฉด) ใช้ค่าตามตารางชื่อสีมาตรฐานของ W3C พิมพ์ชื่อสีนั้นในโค้ด CSS ได้ตรง ๆ ส่วนเฉดที่มีป้าย "ค่าที่นิยมใช้" (14 เฉด) เป็นค่าที่ ThaiGraph เลือกให้ตรงกับชื่อเรียกที่คนไทยใช้ ไม่ใช่ค่ามาตรฐาน และแต่ละคนอาจเรียกสีเดียวกันต่างกันได้เล็กน้อย ความต่างของเฉดอ่อน เฉดเข้ม และโทนหม่น อธิบายไว้ที่ เฉดสีและโทนสี
- #FFEFD5
ส้ม
มะละกอ วิป Papaya whip
มาตรฐาน CSS
papayawhip- HEX
-
#FFEFD5 - RGB
-
255, 239, 213 - CMYK
-
0, 6, 16, 0 - HSL
-
37°, 100%, 92%
- #FFDAB9
ส้ม
พีช พัฟ Peach puff
มาตรฐาน CSS
peachpuff- HEX
-
#FFDAB9 - RGB
-
255, 218, 185 - CMYK
-
0, 15, 27, 0 - HSL
-
28°, 100%, 86%
- #FBCEB1
ส้ม
แอปริคอต Apricot
ค่าที่นิยมใช้
- HEX
-
#FBCEB1 - RGB
-
251, 206, 177 - CMYK
-
0, 18, 29, 2 - HSL
-
24°, 90%, 84%
- #FFCBA4
ส้ม
พีช Peach
ค่าที่นิยมใช้
- HEX
-
#FFCBA4 - RGB
-
255, 203, 164 - CMYK
-
0, 20, 36, 0 - HSL
-
26°, 100%, 82%
- #F8A488
ส้ม
คอรัล อ่อน Soft coral
ค่าที่นิยมใช้
- HEX
-
#F8A488 - RGB
-
248, 164, 136 - CMYK
-
0, 34, 45, 3 - HSL
-
15°, 89%, 75%
- #FFA07A
ส้ม
แซลมอน อ่อน Light salmon
มาตรฐาน CSS
lightsalmon- HEX
-
#FFA07A - RGB
-
255, 160, 122 - CMYK
-
0, 37, 52, 0 - HSL
-
17°, 100%, 74%
- #E9967A
ส้ม
แซลมอน เข้ม Dark salmon
มาตรฐาน CSS
darksalmon- HEX
-
#E9967A - RGB
-
233, 150, 122 - CMYK
-
0, 36, 48, 9 - HSL
-
15°, 72%, 70%
- #FF7F50
ส้ม
คอรัล Coral
มาตรฐาน CSS
coral- HEX
-
#FF7F50 - RGB
-
255, 127, 80 - CMYK
-
0, 50, 69, 0 - HSL
-
16°, 100%, 66%
- #E2725B
ส้ม
เทอร์ราคอตตา Terracotta
ค่าที่นิยมใช้
- HEX
-
#E2725B - RGB
-
226, 114, 91 - CMYK
-
0, 50, 60, 11 - HSL
-
10°, 70%, 62%
- #F37A48
ส้ม
แมนดาริน Mandarin
ค่าที่นิยมใช้
- HEX
-
#F37A48 - RGB
-
243, 122, 72 - CMYK
-
0, 50, 70, 5 - HSL
-
18°, 88%, 62%
- #FF5F1F
ส้ม
นีออน Neon orange
ค่าที่นิยมใช้
- HEX
-
#FF5F1F - RGB
-
255, 95, 31 - CMYK
-
0, 63, 88, 0 - HSL
-
17°, 100%, 56%
- #FF7518
ส้ม
ฟักทอง Pumpkin
ค่าที่นิยมใช้
- HEX
-
#FF7518 - RGB
-
255, 117, 24 - CMYK
-
0, 54, 91, 0 - HSL
-
24°, 100%, 55%
- #F28C28
ส้ม
ชาไทย Thai tea orange
ค่าที่นิยมใช้
- HEX
-
#F28C28 - RGB
-
242, 140, 40 - CMYK
-
0, 42, 83, 5 - HSL
-
30°, 89%, 55%
- #F15A22
สี
แสด Vermilion orange
ค่าที่นิยมใช้
- HEX
-
#F15A22 - RGB
-
241, 90, 34 - CMYK
-
0, 63, 86, 5 - HSL
-
16°, 88%, 54%
- #ED9121
ส้ม
แครอท Carrot
ค่าที่นิยมใช้
- HEX
-
#ED9121 - RGB
-
237, 145, 33 - CMYK
-
0, 39, 86, 7 - HSL
-
33°, 85%, 53%
- #FF4500
ส้ม
อม แดง Orange red
มาตรฐาน CSS
orangered- HEX
-
#FF4500 - RGB
-
255, 69, 0 - CMYK
-
0, 73, 100, 0 - HSL
-
16°, 100%, 50%
- #FF8C00
ส้ม
เข้ม Dark orange
มาตรฐาน CSS
darkorange- HEX
-
#FF8C00 - RGB
-
255, 140, 0 - CMYK
-
0, 45, 100, 0 - HSL
-
33°, 100%, 50%
- #FFA500
ส้ม
Orange
มาตรฐาน CSS
orange- HEX
-
#FFA500 - RGB
-
255, 165, 0 - CMYK
-
0, 35, 100, 0 - HSL
-
39°, 100%, 50%
- #F28500
ส้ม
แทนเจอรีน Tangerine
ค่าที่นิยมใช้
- HEX
-
#F28500 - RGB
-
242, 133, 0 - CMYK
-
0, 45, 100, 5 - HSL
-
33°, 100%, 47%
- #C0502B
ส้ม
อิฐ Brick orange
ค่าที่นิยมใช้
- HEX
-
#C0502B - RGB
-
192, 80, 43 - CMYK
-
0, 58, 78, 25 - HSL
-
15°, 63%, 46%
- #CC5500
ส้ม
ไหม้ Burnt orange
ค่าที่นิยมใช้
- HEX
-
#CC5500 - RGB
-
204, 85, 0 - CMYK
-
0, 58, 100, 20 - HSL
-
25°, 100%, 40%
- #B7410E
ส้ม
สนิม Rust
ค่าที่นิยมใช้
- HEX
-
#B7410E - RGB
-
183, 65, 14 - CMYK
-
0, 64, 92, 28 - HSL
-
18°, 86%, 39%
ค่า CMYK ในหน้านี้คำนวณจากค่าสีบนจอด้วยสูตรแปลงพื้นฐาน ใช้เป็นจุดตั้งต้นได้ดี แต่สีที่พิมพ์ออกมาจริงขึ้นกับกระดาษ หมึก และโปรไฟล์สีของโรงพิมพ์ งานที่สีต้องตรงควรขอปรู๊ฟก่อนเสมอ ความต่างของ RGB กับ CMYK อ่านต่อได้ที่ CMYK กับ RGB ต่างกันอย่างไร
พาเล็ตต์สีส้มพร้อมใช้
พาเล็ตต์ 4 ชุดนี้จับคู่สีส้มกับสีพื้น สีตัวหนังสือ และสีเน้นไว้ให้แล้ว แตะสีใดก็ได้เพื่อคัดลอกโค้ดทีละสี หรือกด "คัดลอกทั้งชุด" เพื่อเอาไปวางทีเดียวครบ 5 สี ลำดับสีในแต่ละชุดไม่ได้บังคับ ลองสลับว่าสีไหนเป็นพื้นหลังและสีไหนเป็นตัวหนังสือ แล้วตรวจความอ่านง่ายด้วยตารางค่าคอนทราสต์ด้านล่าง หรือแปลงค่าเป็นรูปแบบอื่นด้วย เครื่องมือแปลงโค้ดสี
-
ส้มกับกรมท่า
#FF7518#1F2A44#F4F1EA#FFCBA4#3D5A80 -
ดินเผา
#C0502B#E2725B#F3E3D3#9CAF88#4A3B2A -
พีชนุ่มนวล
#FFCBA4#FBCEB1#FFF5EC#F8A488#6B4E3D -
ชาไทย
#F28C28#CC5500#FFF0DC#7B3F00#FFFFFF
สีส้มเข้ากับสีอะไร
สีที่ตัดกับส้มฟักทองได้ชัดที่สุดคือสีตรงข้ามบนวงจรสี #18A2FF ส่วนสีที่กลมกลืนที่สุดคือสีข้างเคียง #FF182F และ #FFE918 ทุกค่าด้านล่างคำนวณจากส้มฟักทอง #FF7518 ด้วยการหมุนค่าเฉดสี (Hue) ในระบบ HSL โดยคงความสด (Saturation) และความสว่าง (Lightness) ไว้เท่าเดิม ชื่อที่กำกับใต้สีคือเฉดในคลังที่ดูใกล้เคียงที่สุด ถ้าไม่มีเฉดไหนใกล้พอจะแสดงเพียงองศาที่หมุน หลักการของแต่ละแบบอ่านต่อได้ที่ สีคู่ตรงข้าม และ วงจรสี
-
คู่ตรงข้าม Complementary · +180°
ตัดกันแรงที่สุด ใช้สีหนึ่งเป็นสีหลักและให้อีกสีเป็นจุดเน้นเล็ก ๆ เช่น ปุ่มหรือหัวข้อ
#FF7518ส้ม
ฟักทอง สีตั้งต้น#18A2FFไม่มีชื่อเฉดในคลัง +180°
-
สีข้างเคียง Analogous · -30° / +30°
กลมกลืนและสบายตา เหมาะกับพื้นหลัง ภาพประกอบ และงานที่ต้องการอารมณ์เดียวกันทั้งหน้า
-
สามเส้า Triadic · +120° / +240°
สดใสและสมดุล ควรให้สีหนึ่งเด่นที่สุด แล้วใช้อีกสองสีเป็นสีรองในพื้นที่เล็กกว่า
-
คู่ตรงข้ามแยก Split complementary · +150° / +210°
ตัดกันชัดแต่ไม่แรงเท่าคู่ตรงข้าม จับคู่ง่ายกว่าและพลาดยากกว่า
#FF7518ส้ม
ฟักทอง สีตั้งต้น#18FFE9ไม่มีชื่อเฉดในคลัง +150°
#182FFFไม่มีชื่อเฉดในคลัง +210°
ตัวหนังสือบนสีส้มควรเป็นสีอะไร
บนส้มฟักทอง #FF7518 ตัวหนังสือสีดำอ่านง่ายกว่า ได้ค่าคอนทราสต์ 7.80:1 ส่วนตัวหนังสือสีขาวได้ 2.68:1 เกณฑ์ขั้นต่ำของ WCAG 2.2 (ระดับ AA) คือคอนทราสต์ระหว่างตัวหนังสือกับพื้นหลังอย่างน้อย 4.5:1 สำหรับตัวหนังสือขนาดปกติ และ 3:1 สำหรับตัวหนังสือขนาดใหญ่ (อย่างน้อย 18pt หรือ 14pt ตัวหนา) ตารางด้านล่างคำนวณค่านี้ให้สีส้มอีกหลายเฉด เพื่อเลือกสีตัวหนังสือได้ถูกตั้งแต่แรก
| เฉด | ตัวหนังสือขาว | ตัวหนังสือดำ |
|---|---|---|
| ส้ม | 1.13:1 ไม่ผ่าน | 18.55:1 ผ่าน · แนะนำ |
| ส้ม | 1.46:1 ไม่ผ่าน | 14.33:1 ผ่าน · แนะนำ |
| ส้ม | 2.30:1 ไม่ผ่าน | 9.10:1 ผ่าน · แนะนำ |
| ส้ม | 2.73:1 ไม่ผ่าน | 7.68:1 ผ่าน · แนะนำ |
| ส้ม | 2.45:1 ไม่ผ่าน | 8.55:1 ผ่าน · แนะนำ |
| ส้ม | 2.68:1 ไม่ผ่าน | 7.80:1 ผ่าน · แนะนำ |
| ส้ม | 3.44:1 ผ่านเฉพาะตัวใหญ่ | 6.10:1 ผ่าน · แนะนำ |
| ส้ม | 2.58:1 ไม่ผ่าน | 8.13:1 ผ่าน · แนะนำ |
| ส้ม | 5.56:1 ผ่าน · แนะนำ | 3.77: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" ทั้ง 8 เฉด (เช่น orange = #FFA500) ตามตารางชื่อสีมาตรฐาน—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)