Stax
Tools

ตัวสร้างพาเลทสี

สร้างเฉดความสว่าง 10 ระดับและสีที่สอดคล้อง 10 สีจากสี hex

HSL(217°, 91%, 60%)

Lightness scale from 10% (darkest) to 90% (lightest). Click any swatch to copy its hex value.

อะไรทำให้ colour palette ดี?

กฎความสามัคคีของสี

การใช้ palette ในโค้ด

Colour palette ที่แข็งแกร่งมักมีสามชั้น: สีหลักที่แสดงถึง brand หรือแนวคิดของคุณ ชุดสีประสานที่สร้างความหลากหลายทางสายตาพร้อมยังคงความสวยงาม และ lightness scale ที่ให้ตัวเลือกสำหรับพื้นหลัง ขอบ ข้อความ และ accent โดยไม่ต้องเพิ่ม hue ใหม่

คัดลอกค่า hex โดยตรงไปยัง CSS custom properties, Tailwind config หรือ design token file ของคุณ Shade scale (100–1000) สอดคล้องโดยตรงกับ naming convention ของ Tailwind — วาง shade เข้าไปใน tailwind.config.js ภายใต้ theme.colors เพื่อรับ colour system ที่กำหนดเองอย่างสมบูรณ์ซึ่งทำงานร่วมกับ utility class ทั้งหมด

  • Complementary: Contrast สูง มีพลัง ใช้สำหรับปุ่ม call-to-action ที่ตัดกับ brand color
  • Analogous: Contrast ต่ำ กลมกลืน เหมาะสำหรับ UI ที่สงบเงียบหรือการออกแบบที่ได้แรงบันดาลใจจากธรรมชาติ
  • Triadic: สมดุล สดใส ทำงานได้ดีสำหรับแบรนด์ที่สนุกสนานหรือ data visualisation ที่มีสามหมวดหมู่
  • Split-complementary: ความตึงเครียดน้อยกว่า complementary ความหลากหลายมากกว่า analogous เป็นตัวเลือกที่ยืดหยุ่นสำหรับการออกแบบเว็บ
  • Tetradic: สมบูรณ์ ซับซ้อน ดีที่สุดเมื่อสีหนึ่งครอบงำและสีอื่นทำหน้าที่เป็น accent

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

What is a colour palette?
A colour palette is a curated set of colours used consistently across a design — brand identity, UI, or illustration. A good palette typically has a primary colour, a few harmonics (colours that work well together based on colour theory), and a lightness scale (shades from very dark to very light).
What are colour harmonics?
Colour harmonics are colours related to your base by their position on the colour wheel. Complementary is directly opposite (180°); analogous colours are neighbours (±30°); triadic colours are equally spaced at 120°; split-complementary replaces the direct complement with two adjacent colours at ±150°; tetradic (square) uses four colours at 90° intervals.
How do the shades work?
The shade scale keeps your hue and saturation constant and varies lightness from 10% (very dark) to ~90% (very light) in equal steps — generating 10 swatches labelled 100–1000, similar to Tailwind CSS colour scales.
How do I copy a colour?
Click any swatch to copy its hex code to your clipboard. A 'Copied!' confirmation appears briefly. You can then paste the hex code into Figma, CSS, or any design tool.
What colour model does this tool use internally?
All calculations are done in HSL (Hue, Saturation, Lightness) which makes it easy to rotate hue for harmonics and vary lightness for shades. The display and copy values are standard hex codes.

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