เครื่องมือสร้างพาเลตสี

เครื่องมือสร้าง
简 繁 BM BI 日本語 한국어 ไทย EN
Share:
By Checked against sources by , Founder & Architect, RECATOOLS Published Updated Last reviewed

สร้างพาเลต 5 สีที่กลมกลืนได้ในแตะเดียว — สุ่ม สีคู่ตรงข้าม สีข้างเคียง สามเหลี่ยม หรือสีเดียว ล็อกสีที่ชอบแล้วสุ่มที่เหลือใหม่ คลิกเพื่อคัดลอกค่า HEX ใดก็ได้ และส่งออกการ์ดพาเลตสวย ๆ ทำงานในเบราว์เซอร์ล้วน สร้างทันที

RT-FUN-091 · Fun & Misc
Your browser is too old for this tool’s interactive features. Please update to Safari 13.1, Chrome or Edge 80, Firefox 74 or newer.

เครื่องมือสร้างพาเลตสี

(หรือกด Space)

ตรวจคอนทราสต์ (WCAG 2.2)

 

สีHEXrgb()hsl()บนพื้นขาวบนพื้นดำ
     
     
     
     
     

ทุกคู่สี เรียงจากคอนทราสต์สูงสุด

  1. Aa
  2. Aa
  3. Aa
  4. Aa
  5. Aa
  6. Aa
  7. Aa
  8. Aa
  9. Aa
  10. Aa

ตัวเลขคืออัตราส่วนคอนทราสต์ตาม WCAG 2.2 ปัดลง ดังนั้นถ้าแสดง 4.5:1 ก็ถึง 4.5:1 จริง เนื้อความต้องได้ 4.5:1 (AA) หรือ 7:1 (AAA) ตัวอักษรใหญ่ (18pt หรือ 14pt ตัวหนา) ต้องได้ 3:1 กฎความกลมกลืนกำหนดแค่ความสัมพันธ์ของเฉดสี ไม่ได้รับประกันคอนทราสต์ สองสีที่อยู่ตรงข้ามกันบนวงล้ออาจมีความสว่างสัมพัทธ์แทบเท่ากัน

Advertisement
After tool · AD-W1 Responsive

วิธีใช้

เลือกโหมดพาเลต

เลือกจาก สุ่ม สีคู่ตรงข้าม สีข้างเคียง สามเหลี่ยม หรือสีเดียว แต่ละแบบคือกฎความกลมกลืนของสีที่กำหนดว่าทั้ง 5 สีสัมพันธ์กันอย่างไร

กดสร้าง หรือกด Space

ทุกครั้งที่กดจะได้พาเลตที่กลมกลืนชุดใหม่ ไม่ถูกใจ? กดอีกครั้ง หรือเคาะแป้น Space เพื่อสุ่มใหม่อย่างรวดเร็ว

ล็อกและคัดลอก

เจอสีที่ชอบใช่ไหม? แตะ 🔓 ของสีนั้นเพื่อล็อกไว้ พอสร้างครั้งต่อไปสีนั้นก็จะคงเดิม คลิกค่า HEX ใดก็ได้ (เช่น #E8622A) เพื่อคัดลอกไปใช้ในงานออกแบบได้ทันที

ดาวน์โหลดหรือแชร์การ์ด

แตะ “ดาวน์โหลดพาเลต” เพื่อบันทึกทั้งชุดเป็นรูปภาพ (พร้อมค่า HEX), “แชร์” เพื่อส่งให้เพื่อนร่วมงาน หรือส่งออกเป็น PDF

เครื่องมือสร้างพาเลตสี: ได้สีสวยในไม่กี่วินาที ด้วยทฤษฎีสี

การเลือกสีมักเป็นขั้นตอนที่ทำให้คนติดขัดในงานออกแบบ สีเดียวดูดี แต่พอเอา 5 สีมารวมกันแบบไม่คิดมันกลับ "ตีกัน" เครื่องมือนี้เปลี่ยนกฎเบื้องหลังความกลมกลืนของสีให้เป็นปุ่มเดียว — มันไม่ได้ยื่นสีสุ่ม 5 สีให้คุณ แต่ประกอบชุดสีที่ "เข้ากันโดยธรรมชาติ" ตามเรขาคณิตของวงล้อสี คุณเพียงเลือก ล็อก และคัดลอกสีที่ชอบไปใส่ในงานออกแบบได้ทันที

ห้าโหมด ห้าความสัมพันธ์

เครื่องมือนี้มีกฎความกลมกลืนที่ใช้บ่อยที่สุด แต่ละแบบคือความสัมพันธ์หนึ่งบนวงล้อสี: สีเดียว — สีเดียวกัน ต่างกันแค่ความสว่าง ปลอดภัยที่สุดและไม่ตกยุค; สีข้างเคียง — สีที่อยู่ติดกันบนวงล้อ นุ่มนวลและเป็นธรรมชาติ ราวกับสีในทิวทัศน์เดียวกัน; สีคู่ตรงข้าม — สองสีที่อยู่ตรงข้ามกันพอดี คอนทราสต์สูงและสะดุดตา; สามเหลี่ยม — สามสีที่ห่างเท่ากัน สดใสแต่สมดุล; และ สุ่ม — ปล่อยเฉดสีให้อิสระแต่ยังคงช่วงความสว่างที่ชัดเจน เพื่อแรงบันดาลใจที่คาดไม่ถึง เปลี่ยนโหมด ความสัมพันธ์ทั้งหมดก็เปลี่ยนตาม

"พาเลตที่ดีไม่ได้เกิดจากการเอามารวมกันมั่ว ๆ แต่เรียงร้อยตามความสัมพันธ์"

HEX คืออะไร และทำไมมีอยู่ทุกที่

ชุดอักขระใต้แต่ละสี เช่น #E8622A คือ รหัส HEX ของสีนั้น — "บัตรประจำตัว" สากลของสีบนเว็บ ซอฟต์แวร์ออกแบบ และเครื่องมือดิจิทัลแทบทุกอย่าง ขึ้นต้นด้วย # ตามด้วยเลขฐานสิบหกหกหลัก แทนความเข้มของช่องสีแดง เขียว และน้ำเงิน คลิกหนึ่งครั้งเพื่อคัดลอก แล้ววางลงใน CSS, Figma หรือสไลด์ สีจะตรงกันเป๊ะ ทุกสีที่เครื่องมือนี้สร้างมาพร้อมรหัส HEX พร้อมนำไปใช้

ขอพูดถึงคอนทราสต์สักนิด

นอกจากสวยแล้ว พาเลตยังต้องใช้งานได้จริง: ข้อความต้องมีคอนทราสต์เพียงพอกับพื้นหลังจึงจะอ่านออก (มาตรฐานการเข้าถึง WCAG แนะนำอย่างน้อย 4.5:1 สำหรับเนื้อความ) ป้ายค่า HEX บนการ์ดจะสลับระหว่างตัวอักษรดำกับขาวโดยอัตโนมัติตามความสว่างของแต่ละช่องสี เพื่อให้อ่านง่ายอยู่เสมอ — เป็นตัวเตือนที่ดีให้ตรวจคอนทราสต์ทุกครั้งที่นำสีเหล่านี้ไปใช้กับข้อความและพื้นหลัง เครื่องมือทั้งหมดทำงานในเบราว์เซอร์ของคุณ สร้างทันที โดยไม่อัปโหลดสิ่งใด

Advertisement
After how-to · AD-W2 Responsive

วงสีเจ็ดส่วนของนิวตัน 16.7 ล้านสีของ HEX และเหตุที่ความสว่างของ HSL ชวนเข้าใจผิด

01

รหัส HEX เข้ารหัสสีแดง เขียว และน้ำเงินในเลขฐานสิบหก แต่ละช่องตั้งแต่ 00–FF (0–255) — ในทางทฤษฎีแสดงสีได้ราว 16.7 ล้านสี

02

หนังสือ Opticks ของนิวตัน (พิมพ์ครั้งแรก ค.ศ. 1704 เล่ม 1 ภาค 2 ข้อเสนอที่ 6) วาดวงกลมแบ่งเป็นเจ็ดสีจากแดงถึงม่วง โดยความยาวแต่ละส่วนโค้งเทียบกับช่วงเสียงของบันไดเสียงดนตรี — ต้นกำเนิดของวงล้อเฉดสีที่เครื่องมือนี้ใช้หมุน

03

ตามนุษย์ไวต่อสีเขียวมากที่สุด นั่นจึงเป็นเหตุผลที่สูตรความสว่างให้น้ำหนักสีเขียวสูงสุด (ราว 0.72) สูงกว่าสีแดง (0.21) และน้ำเงิน (0.07) มาก

04

มาตรฐานการเข้าถึง WCAG กำหนดคอนทราสต์อย่างน้อย 4.5:1 ระหว่างเนื้อความกับพื้นหลัง (3:1 สำหรับตัวอักษรขนาดใหญ่) เพื่อรองรับผู้ใช้ที่สายตาเลือนราง

05

หน้าจอใช้ RGB (แสงแบบบวก) ส่วนงานพิมพ์ใช้ CMYK (หมึกแบบลบ) สี HEX เดียวกันอาจดูต่างกันเล็กน้อยบนหน้าจอกับบนกระดาษ

06

เครื่องมือนี้สร้างพาเลตด้วย HSL เพราะความกลมกลืนคือการหมุนมุมเฉดสี แต่ความสว่างของ HSL ไม่ใช่สิ่งที่ตาเห็น: CSS Color 4 ชี้ว่าสีเหลือง hsl(60 100% 50%) กับสีน้ำเงิน hsl(240 100% 50%) มีความสว่าง 50% เท่ากัน แต่ค่าความสว่างสัมพัทธ์ตาม WCAG คือ 0.93 และ 0.07 — การตรวจคอนทราสต์ด้านบนจึงวัดทุกคู่จริง

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

  • แต่ละช่องสีจะแสดงรหัส HEX (เช่น #E8622A) คลิกเพื่อคัดลอก แล้ววางลงใน CSS, Figma, Photoshop, สไลด์ หรือที่ใดก็ตามที่รับ HEX — สีจะตรงกันเป๊ะ คุณยังดาวน์โหลดการ์ดพาเลตไว้อ้างอิงได้ด้วย

  • แต่ละแบบอิงเรขาคณิตบนวงล้อสี: สีเดียว = สีเดียวกันแต่ความสว่างต่างกัน (ปลอดภัยที่สุด); สีข้างเคียง = สีที่อยู่ติดกัน (นุ่มนวล); สีคู่ตรงข้าม = สีตรงข้ามกัน (คอนทราสต์สูง); สามเหลี่ยม = สามสีระยะเท่ากัน (สดใส สมดุล); สุ่ม = ปล่อยสีอิสระแต่คุมช่วงความสว่างไว้ เปลี่ยนโหมดแล้วความสัมพันธ์ทั้งชุดก็เปลี่ยนไป

  • แตะ 🔓 บนสีใดสีหนึ่งเพื่อล็อก เมื่อคุณกดสร้างครั้งถัดไป สีที่ล็อกจะคงไว้ และเปลี่ยนเฉพาะสีที่ไม่ได้ล็อก ทำให้คุณเก็บสีที่ชอบไว้สักหนึ่งสองสี แล้วสุ่มสีที่เหลือใหม่จนได้ทั้งชุดที่ลงตัว

  • ใช่ เว้นแต่คุณจะตั้งสีตั้งต้นไว้ การกดสร้างแต่ละครั้งจะสุ่มเฉดสี ความอิ่มตัว และความสว่างตั้งต้น แล้วสร้างอีกสี่สีตามกฎตายตัวของโหมดนั้น (กฎแสดงอยู่ใต้ส่วนควบคุม) เมื่อติ๊ก “เริ่มจากสีนี้” สีของคุณจะคงไว้ตรงตามเดิม และมีเพียงโหมดสุ่มที่ยังสุ่มค่าบางส่วน

  • ไม่รับประกันโดยอัตโนมัติ และโหมดความกลมกลืนเองก็ไม่ได้รับประกัน: สีคู่ตรงข้ามอาจมีความสว่างสัมพัทธ์แทบเท่ากัน และคอนทราสต์ขึ้นกับความสว่างสัมพัทธ์ สิ่งที่เครื่องมือทำคือวัดจริง: ส่วนตรวจคอนทราสต์แสดงทั้งสิบคู่พร้อมอัตราส่วนตาม WCAG 2.2 (เกณฑ์ AA ของเนื้อความคือ 4.5:1 ตัวอักษรใหญ่ 3:1) และป้ายบนแต่ละช่องสีใช้สีดำหรือขาว แล้วแต่ว่าอันไหนสูงกว่า จึงถึง 4.5:1 เสมอ เครื่องมือนี้ไม่ได้จำลองภาวะการมองเห็นสีบกพร่อง

  • ได้ เลือกสีใน “สีตั้งต้น” (หรือติ๊ก “เริ่มจากสีนี้”) แล้วทุกโหมดจะสร้างพาเลตรอบสีนั้น สีของคุณจะคงไว้ตรงตามเดิมในช่องที่กฎกำหนดให้เป็นสีตั้งต้น คุณยังล็อกช่องสีใดก็ได้ด้วย 🔒 แล้วสุ่มสีที่เหลือใหม่

  • เป็นภาพ JPEG ความละเอียดสูง แสดงสีทั้งห้าพร้อมค่า HEX ของแต่ละสี เหมาะสำหรับแชร์หรือเก็บไว้ และยังส่งออกเป็น PDF ได้ ภาพทั้งหมดสร้างขึ้นบนอุปกรณ์ของคุณ ไม่ผ่านเซิร์ฟเวอร์

  • ทั้งสามเป็นการเขียนสีเดียวกันคนละแบบ RGB ใช้ตัวเลขสามค่า 0–255 แทนแดง เขียว น้ำเงิน; HEX คือ RGB ที่เขียนเป็นฐานสิบหก (#RRGGBB); ส่วน HSL อธิบายด้วยเฉดสี ความอิ่มตัว และความสว่าง ซึ่งใกล้เคียงสัญชาตญาณคนมากกว่า เครื่องมือนี้คำนวณความกลมกลืนภายในด้วย HSL แล้วส่งออกเป็น HEX ที่ใช้ได้ทั่วไป

  • ไม่ พาเลตทุกชุดสร้างขึ้นทันทีในเบราว์เซอร์ของคุณ — ไม่อัปโหลด ไม่เขียนลง URL และไม่ถูกเก็บรวบรวม รีเฟรชหน้าแล้วก็เริ่มใหม่

Method & sources

How it computes

Five colours from fixed HSL hue rotations of a base (complementary +180°, triadic ±120°, analogous 20° steps, monochromatic lightness ladder); HSL to sRGB by the CSS Color 4 §7.1 algorithm. Every pair's WCAG 2.2 contrast ratio, (L1 + 0.05) / (L2 + 0.05), shown rounded down; swatch labels use black or white, whichever contrasts more (ColourPaletteKernel).

What this tool implements

  • Colour conversion: HSL to sRGB and back by the W3C CSS Color Module Level 4 sample algorithms (§7.1 hslToRgb, §7.2 rgbToHsl), through the site's shared ColourConvertKernel; HEX as #RRGGBB.
  • Contrast: WCAG 2.2 relative luminance (sRGB linearised at 0.04045; L = 0.2126 R + 0.7152 G + 0.0722 B) and contrast ratio (L1 + 0.05) / (L2 + 0.05). Bands: 7:1 AAA and 4.5:1 AA for body text (SC 1.4.6, SC 1.4.3), 3:1 for large text (18 point, or 14 point bold). Ratios print rounded DOWN to one decimal, so a figure shown as 4.5:1 is never a 4.46 that fails.
  • Harmony rules are this tool's own, stated on the page in degrees and percent: analogous −40° to +40° in 20° steps; complementary three of the base hue and two at +180°; triadic +120° and +240° plus a tint and a shade; monochromatic lightness 88/72/56/40/26%; random five hues over a random 40–160° arc. A base colour the reader enters is kept exactly.
  • HSL lightness is not perceived lightness (CSS Color 4 §7: yellow and blue at 50% have WCAG luminance 0.93 and 0.07), so no harmony is presented as accessible; every pair is measured instead.
  • Corrected 2026-11-03: label ink by luminance < 0.45 (32.5% of 500,000 generated swatches under 4.5:1, worst 2.10:1) replaced by the higher-contrast of black and white (floor 4.58:1); Newton's colour circle dated 1666 corrected to Opticks, 1704.

Sources

  • W3C. CSS Color Module Level 4, Candidate Recommendation Draft, 1 November 2026 — §7.1 and §7.2 sample code, and the §7 note on HSL lightness across hues: https://www.w3.org/TR/css-color-4/
  • W3C. Web Content Accessibility Guidelines (WCAG) 2.2 — definitions of relative luminance, contrast ratio and large-scale text; SC 1.4.3 and SC 1.4.6: https://www.w3.org/TR/WCAG22/
  • Newton I. Opticks. 4th ed. London: William Innys; 1730 (first edition 1704). Book I, Part II, Prop. VI, the seven-part colour circle. Project Gutenberg: https://www.gutenberg.org/ebooks/33504

What can make this go out of date

  • None at runtime: palettes and contrast are computed in the browser and nothing the reader picks is sent or written to the URL.
Advertisement
Pre-footer · AD-W3 728 × 90