RevealTheme logo

เครื่องมือสร้างชุดสี

สร้างชุดสีที่กลมกลืนจากสีฐานใดก็ได้ รองรับโทนสีคู่ตรงข้าม สีข้างเคียง สามสีไตรแอด และสีโมโนโครม

Complementary

#6366F1
#F1EE63

Analogous

#63ADF1
#6366F1
#A763F1

Triadic

#6366F1
#F16366
#66F163

Split Complement

#6366F1
#F1A763
#ADF163

Tetradic

#6366F1
#F163AD
#F1EE63
#63F1A7

Monochromatic

#0F13AC
#1D21EB
#6366F1
#A1A3F7
#D0D1FB

วิธีใช้เครื่องมือนี้

  1. 1

    Click the color swatch to open your system color picker, or type a 6-digit hex code like #6366F1 into the text field next to it.

  2. 2

    Watch the six scheme rows update instantly as you change the base color.

  3. 3

    Read the uppercase hex code shown in the bottom-left corner of each swatch and copy the ones you want into your design tool or stylesheet.

เครื่องมือสร้างชุดสีคืออะไร?

ทฤษฎีสีกำหนดความสัมพันธ์ที่กลมกลืนตามตำแหน่งบนวงล้อสี สีคู่ตรงข้ามอยู่ในตำแหน่งตรงข้ามกัน (180°) สีข้างเคียงอยู่ติดกัน (30°) โทนสีไตรแอดใช้สามสีที่ห่างเท่ากัน (120°) เครื่องมือนี้คำนวณแต่ละแบบจากสีฐานที่คุณเลือก ทำให้คุณได้ชุดสีเริ่มต้นที่มีพื้นฐานจากทฤษฎีสีที่ได้รับการพิสูจน์แล้ว

กรณีการใช้งานทั่วไป

  • Picking a primary plus accent color for a website by reading the complementary pair off your brand color.

  • Building a calm, unified UI background-and-card scheme from the analogous row.

  • Generating a 5-step monochromatic tint and shade ramp for hover, active, and disabled button states.

  • Sketching a data-visualization palette where triadic or tetradic colors keep series visually distinct.

  • Exploring logo or illustration color combinations before committing in Figma or Illustrator.

  • Quickly grabbing hex codes for a CSS variable set without leaving the browser.

คำถามที่พบบ่อย

โทนสีแบบใดดีที่สุดสำหรับเว็บไซต์?
สีข้างเคียง (โทนสีที่ใกล้กัน) ให้ความรู้สึกสงบและเป็นหนึ่งเดียว สีคู่ตรงข้ามสร้างความตัดกันที่ชัดเจนสำหรับปุ่มเรียกให้ดำเนินการ ส่วนสีโมโนโครมเป็นตัวเลือกที่ปลอดภัยและดูเป็นมืออาชีพที่สุด

เครื่องมือที่เกี่ยวข้อง

เครื่องมือแปลงสี (HEX/RGB/HSL)

แปลงสีระหว่างรูปแบบ HEX, RGB และ HSL เลือกสีด้วยภาพหรือป้อนค่าด้วยตนเอง

เครื่องมือสร้าง Box Shadow CSS

สร้างค่า box-shadow ใน CSS แบบมองเห็นภาพได้ ดูตัวอย่างแบบเรียลไทม์และคัดลอก CSS ที่สร้างขึ้น

เครื่องมือสร้างไล่ระดับสีของ CSS

สร้างไล่ระดับสีของ CSS แบบเส้นตรงและแบบรัศมี เลือกสีแบบเห็นภาพและคัดลอก CSS ที่สร้างขึ้น

เครื่องมือสร้างเส้นโค้งการเร่งความเร็ว Cubic Bezier

สร้างเส้นโค้งการเร่งความเร็ว cubic-bezier สำหรับ CSS รวมค่าที่ตั้งไว้ล่วงหน้าแบบมาตรฐาน

เครื่องมือสร้าง Border Radius CSS

สร้างค่า border-radius ที่ซับซ้อนใน CSS แบบมองเห็นภาพได้ ควบคุมแต่ละมุมได้อย่างอิสระ

ตัวสร้าง CSS Clamp()

สร้างค่า CSS แบบลื่นไหลและตอบสนองด้วย clamp() ปรับขนาดอย่างนุ่มนวลระหว่างขนาดต่ำสุดและสูงสุดตลอดช่วงของ viewport

สมัครรับข่าวสารอัปเดต

เราไม่ขายอีเมลของคุณ เราไม่ส่งสแปม

© 2026 RevealTheme. All rights reserved.