สีพาสเทล: จานสีพร้อมรหัส HEX และ RGB
สีพาสเทลคือสีอ่อนที่สว่างแต่ไม่สดจัด อย่างชมพูอ่อน ฟ้าอ่อน เขียวมิ้นต์ และม่วงลาเวนเดอร์ หน้านี้รวมรหัสสีพาสเทล 26 สีแยกตามโทน กดที่สีไหนก็คัดลอกรหัสไปวางใน Canva, Figma, Photoshop หรือ CSS ได้ทันที ถ้ายังไม่เจอสีที่ใช่ ให้สุ่มจานสีใหม่หรือแปลงสีของคุณเองเป็นโทนพาสเทลได้ในกล่องด้านล่าง
ใช้กับทุกสีในหน้านี้ HEX ใช้ได้กับโปรแกรมแทบทุกตัว ส่วน RGB กับ HSL เหมาะกับงานเขียนเว็บ
สุ่มจานสีพาสเทลชุดใหม่
กดสุ่มแล้วได้สีพาสเทล 5 สีที่สีห่างกันพอดี ใช้เป็นชุดสีสำหรับสไลด์ โพสต์ หรือการ์ดงานได้เลย ชุดที่ชอบให้กดคัดลอกทั้งชุดเก็บไว้ก่อน เพราะกดสุ่มอีกครั้งแล้วชุดเดิมจะหายไป
แปลงสีที่มีอยู่ให้เป็นสีพาสเทล
มีสีประจำแบรนด์หรือสีที่ชอบอยู่แล้ว แต่อยากได้เวอร์ชันอ่อนลง ให้เลือกสีนั้นตรงนี้ ระบบจะผสมสีขาวเพิ่มทีละขั้น จาก 40% ถึง 90% แบบเดียวกับที่ช่างสีเติมสีขาวลงไปเพื่อให้ได้สีพาสเทล สีอ่อนที่ได้ยังเป็นโทนเดียวกับสีเดิม จึงใช้คู่กันได้
ตัวเลขใต้แต่ละช่องคือสัดส่วนสีขาวที่ผสมลงไป กดที่ช่องเพื่อคัดลอกรหัส
รหัสสีพาสเทลยอดนิยม แยกตามโทนสี
ชื่อภาษาไทยในตารางเป็นชื่อที่คนไทยเรียกกันทั่วไป ส่วนรหัส HEX มาจากรายชื่อสีมาตรฐานภาษาอังกฤษ (ชื่อที่อยู่ใต้รหัส) ร้านสีหรือโปรแกรมแต่ละเจ้าอาจตั้งชื่อเดียวกันให้เฉดต่างกันเล็กน้อย ถ้างานต้องตรงเป๊ะ ให้ใช้รหัสแทนชื่อเสมอ
สีพาสเทลโทนชมพู
สีพาสเทลโทนส้ม พีช และครีม
สีพาสเทลโทนเหลืองและเขียว
สีพาสเทลโทนฟ้า
สีพาสเทลโทนม่วง
สีพาสเทลคืออะไร ต่างจากสีอ่อนทั่วไปอย่างไร
ชื่อ "พาสเทล" มาจากสีชอล์กเนื้อนุ่มที่ศิลปินใช้วาดภาพ สีชอล์กแบบนี้มักออกมาอ่อนและนวล ต่อมาคำนี้จึงใช้เรียกกลุ่มสีที่หน้าตาคล้ายกัน
ถ้าวัดเป็นตัวเลขในระบบสี HSV สีพาสเทลมีค่าความสว่าง (value) สูง และค่าความอิ่มสี (saturation) ต่ำถึงปานกลาง พูดง่ายๆ คือสว่างเกือบเท่าสีขาว แต่ยังเห็นว่าเป็นชมพู ฟ้า หรือเขียวอยู่ ส่วนสีอ่อนที่หม่นออกเทา เช่น เทาอมชมพู จัดเป็นกลุ่ม "สีหม่น" หรือ muted มากกว่า
- สีพาสเทล: สว่าง ใส ความสดน้อยถึงกลาง เช่น #F4C2C2 หรือ #B0E0E6
- สีสด (vivid): ความสดเต็มที่ เช่น แดง #FF0000 ซึ่งเป็นสีตั้งต้นที่เอาไปผสมขาวจนเป็นพาสเทลได้
- เอิร์ธโทน: สีดิน สีไม้ สีใบไม้แห้ง ความสว่างต่ำกว่าและอมน้ำตาล
บนหน้าจอ เครื่องมือสุ่มของเราสร้างสีพาสเทลโดยตั้งความสว่างไว้ที่ราว 80–88% และความสดที่ 55–90% ในระบบ HSL ช่วงนี้ทดลองแล้วได้สีที่ดูเป็นพาสเทลทุกเฉด ไม่ซีดจนกลายเป็นขาว
วิธีทำสีพาสเทลด้วยสีโปสเตอร์ สีอะคริลิก หรือสีทาบ้าน
หลักมีข้อเดียว: ผสมสีขาวลงไป ช่างสีเรียกวิธีนี้ว่าการทำ tint ยิ่งใส่ขาวมาก สียิ่งอ่อน
- บีบสีขาวลงจานสีก่อน ให้ขาวเป็นฐาน
- แตะสีที่ต้องการลงไปทีละนิดแล้วคนให้เข้ากัน การเติมสีลงในขาวคุมง่ายกว่าเติมขาวลงในสี เพราะสีเข้มกลบสีขาวเร็วมาก
- ทาลงกระดาษแผ่นเล็ก รอแห้งแล้วค่อยตัดสินใจ สีอะคริลิกแห้งแล้วมักเข้มขึ้นเล็กน้อย ส่วนสีโปสเตอร์บางยี่ห้อแห้งแล้วอ่อนลง
- จดสัดส่วนที่ได้ไว้ เช่น ขาว 5 ช้อนต่อแดง 1 ช้อน จะผสมซ้ำได้สีเดิม
| อยากได้ | ผสมจาก | สัดส่วนเริ่มต้น |
|---|---|---|
| ชมพูพาสเทล | ขาว + แดง | ขาว 6 : แดง 1 |
| ฟ้าพาสเทล | ขาว + น้ำเงิน | ขาว 8 : น้ำเงิน 1 |
| เขียวพาสเทล | ขาว + เขียว (หรือขาว + เหลือง + น้ำเงินนิดเดียว) | ขาว 6 : เขียว 1 |
| ม่วงลาเวนเดอร์ | ขาว + ม่วง (หรือขาว + แดง + น้ำเงิน) | ขาว 8 : ม่วง 1 |
| พีช | ขาว + ส้ม + แดงนิดเดียว | ขาว 6 : ส้ม 1 |
| เหลืองพาสเทล | ขาว + เหลือง | ขาว 4 : เหลือง 1 |
สัดส่วนในตารางเป็นจุดเริ่ม ไม่ใช่สูตรตายตัว สีแต่ละยี่ห้อเข้มไม่เท่ากัน น้ำเงินกับม่วงแรงกว่าเหลืองมาก จึงต้องใช้ขาวมากกว่า ส่วนสีทาบ้าน ร้านสีผสมจากเครื่องตามรหัสในแคตตาล็อกของยี่ห้อนั้น เอารหัส HEX จากหน้านี้ไปให้ร้านเทียบหาเฉดที่ใกล้ที่สุดได้ แต่ควรขอดูแผ่นสีจริงก่อนสั่ง เพราะสีบนจอสว่างกว่าสีบนผนัง
อยากลองดูผลผสมบนจอก่อนลงมือ ใช้เครื่องมือผสมสีออนไลน์ ใส่สีขาวกับสีที่ต้องการแล้วปรับสัดส่วนได้
ใช้สีพาสเทลในงานออกแบบให้อ่านง่ายและไม่จืด
ปัญหาที่เจอบ่อยที่สุดคือตัวหนังสือสีขาวบนพื้นพาสเทล ดูน่ารักแต่อ่านแทบไม่ออก เราวัดทั้ง 26 สีในหน้านี้แล้ว ตัวหนังสือสีขาวได้ค่าคอนทราสต์แค่ 1.0–2.2:1 ขณะที่เกณฑ์ขั้นต่ำของ WCAG สำหรับตัวหนังสือปกติคือ 4.5:1 ถ้าเปลี่ยนเป็นตัวหนังสือเทาเข้ม #1F1F1F ทุกสีได้เกิน 7:1
- ใช้พาสเทลเป็นพื้น ใช้สีเข้มเป็นตัวหนังสือ: ดำ เทาเข้ม หรือสีเข้มในโทนเดียวกัน เช่น พื้นชมพูอ่อนกับตัวหนังสือแดงเลือดหมู
- ใส่สีเข้มหนึ่งสีเป็นจุดเด่น: จานสีที่เป็นพาสเทลล้วนมักดูเบลอ ปุ่มหรือหัวข้อสีเข้มหนึ่งสีช่วยให้สายตามีที่ไป
- คุมจำนวนสี: 2–3 สีพาสเทลต่อชิ้นงานกำลังดี มากกว่านั้นดูเป็นสายรุ้ง
ถ้าต้องการหาสีเข้มที่เข้ากับพาสเทลที่เลือก หรืออยากเช็กค่าคอนทราสต์ระหว่างสองสี ไปที่หน้าคู่สีและโทนสีที่เข้ากัน
คำถามที่พบบ่อย
สีพาสเทลคือสีแบบไหน
สีพาสเทลคือสีอ่อนที่สว่างมากแต่ความสดไม่จัด ถ้าวัดในระบบสี HSV จะมีค่าความสว่าง (value) สูงและค่าความอิ่มสี (saturation) ต่ำถึงปานกลาง ชมพูอ่อน ฟ้าอ่อน เขียวมิ้นต์ และม่วงลาเวนเดอร์จึงนับเป็นพาสเทลทั้งหมด
ทำสีพาสเทลด้วยสีโปสเตอร์หรือสีอะคริลิกยังไง
ผสมสีขาวลงในสีที่ต้องการ เริ่มจากสีขาวเป็นหลัก แล้วแตะสีจริงลงไปทีละนิด เช่น ขาว 6 ส่วนต่อแดง 1 ส่วนจะได้ชมพูอ่อน การเติมสีลงในขาวคุมโทนง่ายกว่าเติมขาวลงในสี เพราะสีเข้มกลบสีขาวเร็วมาก
สีพาสเทลใช้กับตัวหนังสือสีอะไรถึงอ่านง่าย
ใช้ตัวหนังสือสีเข้ม เช่น ดำหรือเทาเข้ม ทั้ง 26 สีในหน้านี้ได้ค่าคอนทราสต์กับตัวหนังสือเทาเข้ม #1F1F1F เกิน 7:1 ผ่านเกณฑ์ WCAG ระดับ AAA ส่วนตัวหนังสือสีขาวได้แค่ 1.0–2.2:1 ต่ำกว่าเกณฑ์ขั้นต่ำ 4.5:1 มาก
รหัสสี HEX กับ RGB ต่างกันอย่างไร
เป็นค่าเดียวกันที่เขียนคนละแบบ RGB บอกปริมาณแสงแดง เขียว น้ำเงิน ช่องละ 0–255 ส่วน HEX เขียนสามค่านั้นเป็นเลขฐานสิบหก เช่น rgb(244, 194, 194) เท่ากับ #F4C2C2 ใช้แบบไหนก็ได้ใน Canva, Figma หรือ CSS
ที่มาของรหัสสีและวิธีคำนวณ
รหัส HEX ของสีที่มีชื่อเทียบกับ รายชื่อสีของ Wikipedia เมื่อ 24 ต.ค. 2569 สีที่มีวงเล็บ (CSS) ต่อท้ายชื่อเป็นชื่อสีมาตรฐานของ CSS Color Module Level 4 ด้วย นิยามสีพาสเทลแบบ HSV อ้างอิงจาก Wikipedia: Pastel (color) ค่าคอนทราสต์คำนวณตามสูตร WCAG 2.2