ToolDeck

ตัวสร้างจานสี

สร้างจานสีแบบประกอบ คล้ายคลึง สามเหลี่ยม และสี่เหลี่ยมจากสีพื้นฐานใดก็ได้

ลองตัวอย่าง

สีพื้นฐาน

โครงสร้างสี

จานสีที่สร้าง

จานสีคืออะไร?

จานสีคือชุดสีที่กำหนดไว้เพื่อให้ทำงานร่วมกันได้ในงานออกแบบ เมื่อคุณเลือกสีพื้นฐานสีเดียวสำหรับแบรนด์ เว็บไซต์ หรือภาพประกอบ คุณต้องการสีประกอบที่เข้ากันได้ดี การสร้างจานสีโดยอัตโนมัติจะเลือกสีเหล่านั้นโดยอาศัยกฎทฤษฎีสี โดยเฉพาะความสัมพันธ์เชิงเรขาคณิตบนวงล้อสี HSL มาตรฐาน

วงล้อสี HSL (Hue, Saturation, Lightness) จัดเรียงสีในวงกลม 360 องศา สีแดงอยู่ที่ 0 องศา สีเขียวที่ 120 องศา และสีน้ำเงินที่ 240 องศา โครงสร้างสีทุกแบบทำงานโดยการเลือกสีที่มีมุมห่างจากสีพื้นฐานในระยะที่กำหนด ตัวอย่างเช่น คู่สีประกอบใช้สีสองสีที่อยู่ห่างกัน 180 องศา ชุดสีคล้ายคลึงเลือกสีภายใน 30 องศาจากสีพื้นฐานทั้งสองด้าน กฎเชิงเรขาคณิตเหล่านี้สร้างชุดสีที่สมดุลเพราะสีที่เลือกกระจายรอบวงล้อแทนที่จะรวมกลุ่มในบริเวณเดียว

เครื่องมือนี้รับสีในรูปแบบ hex เป็นอินพุต แปลงเป็น HSL หมุนค่า hue ตามมุมที่กำหนดโดยโครงสร้างที่เลือก แล้วแปลงผลลัพธ์กลับเป็น hex รองรับหกโครงสร้าง ได้แก่ ประกอบ คล้ายคลึง สามเหลี่ยม แยกประกอบ สี่เหลี่ยม และโมโนโครมาติก แต่ละโครงสร้างสร้างสีในจำนวนที่แตกต่างกัน ตั้งแต่ 2 ถึง 5 สี

ทำไมต้องใช้ตัวสร้างจานสีนี้?

การเลือกสีที่เข้ากันได้ด้วยการลองผิดลองถูกนั้นช้าและไม่สม่ำเสมอ ตัวสร้างจานสีใช้กฎทฤษฎีสีได้ทันที ให้ผลลัพธ์ที่สมดุลทางคณิตศาสตร์จากจุดเริ่มต้นใดก็ได้

สร้างจานสีได้ทันที
เลือกสีพื้นฐานและประเภทโครงสร้าง จานสีจะปรากฏทันที ไม่ต้องส่งฟอร์ม ไม่มีหน้าโหลด เปลี่ยนสีพื้นฐานแล้วผลลัพธ์อัปเดตแบบเรียลไทม์
🎨
หกโครงสร้างสี
เลือกจากประกอบ คล้ายคลึง สามเหลี่ยม แยกประกอบ สี่เหลี่ยม หรือโมโนโครมาติก แต่ละโครงสร้างสร้างเอฟเฟกต์ภาพที่แตกต่างกัน ตั้งแต่คู่สีคอนทราสต์สูงไปจนถึงไล่ระดับสีเดียวที่ละเอียดอ่อน
🔒
ประมวลผลโดยให้ความเป็นส่วนตัวเป็นหลัก
การคำนวณสีทั้งหมดทำงานในเบราว์เซอร์ของคุณ ไม่มีข้อมูลสีถูกส่งไปยังเซิร์ฟเวอร์ใด เครื่องมือทำงานแบบออฟไลน์หลังจากโหลดหน้าแล้ว
📋
ส่งออกด้วยคลิกเดียว
คัดลอกค่า hex แต่ละค่าหรือทั้งจานสีด้วยคลิกเดียว วางลงใน CSS, Figma, Tailwind config หรือเครื่องมือออกแบบใดก็ได้ที่รับค่า hex

กรณีการใช้งานตัวสร้างจานสี

การสร้างธีม UI
นักพัฒนา Frontend ที่สร้างแอปใหม่สามารถเริ่มจากสีแบรนด์และสร้างจานสีเต็มรูปแบบสำหรับโทเค็น primary, secondary และ accent โครงสร้างสามเหลี่ยมหรือสี่เหลี่ยมสร้างความหลากหลายเพียงพอสำหรับปุ่ม ลิงก์ การแจ้งเตือน และพื้นหลัง
โทเค็นสีใน Design System
วิศวกร design system ใช้จานสีโมโนโครมาติกเพื่อสร้างสเกลความสว่างสำหรับ hue แบรนด์เดียว แล้วแมปแต่ละขั้นกับโทเค็นที่มีชื่อ เช่น blue-100 ถึง blue-900
การแสดงข้อมูลด้วยภาพ
วิศวกรข้อมูลและนักวิเคราะห์ต้องการสีที่แตกต่างกันชัดเจนสำหรับชุดข้อมูลในกราฟ จานสีแบบคล้ายคลึงหรือสามเหลี่ยมให้ระยะห่างเพียงพอสำหรับ 3-6 ชุดข้อมูลพร้อมรักษาความสอดคล้องของกราฟ
หน้า Landing Page การตลาด
นักออกแบบที่สร้างหน้าแคมเปญเริ่มจากสีหลักของแบรนด์และใช้โครงสร้างแยกประกอบเพื่อหาสี accent สำหรับปุ่ม CTA และส่วนที่เน้น โดยไม่ขัดแย้งกับโลโก้
การจับคู่เพื่อ Accessibility
วิศวกร QA ที่ทดสอบการปฏิบัติตาม WCAG จับคู่สีจากจานสีที่สร้างและทดสอบผ่านตัวตรวจสอบคอนทราสต์ การเริ่มจากโครงสร้างประกอบหรือแยกประกอบมักสร้างคู่สีที่มีคอนทราสต์ความสว่างสูง
การเรียนรู้ทฤษฎีสี
นักศึกษาที่ศึกษาการออกแบบสามารถสลับระหว่างหกโครงสร้างบนสีพื้นฐานเดียวกันและดูว่าแต่ละรูปแบบเรขาคณิตกระจาย hue รอบวงล้ออย่างไร ผลลัพธ์ภาพทำให้มุมที่เป็นนามธรรมจับต้องได้

การเปรียบเทียบโครงสร้างสีประสาน

โครงสร้างสีประสานทุกแบบเลือกสีตามมุมหมุน hue จากสีพื้นฐานบนวงล้อ HSL ตารางด้านล่างแสดงแต่ละโครงสร้าง จำนวนสีที่สร้าง มุม hue และบริบทการออกแบบที่เหมาะสม

โครงสร้างจำนวนสีมุม Hueเหมาะสำหรับ
Complementary2180High contrast, call-to-action buttons
Analogous3-30, 0, +30Harmonious, low-tension backgrounds
Triadic30, 120, 240Balanced variety, dashboards
Split-Complementary30, 150, 210Softer contrast than complementary
Tetradic (Rectangle)40, 90, 180, 270Rich palettes, complex UIs
Monochromatic5Same hue, varied lightnessSubtle, single-brand pages

วิธีทำงานของการหมุนวงล้อสี HSL

การสร้างจานสีทั้งหมดในเครื่องมือนี้อาศัยโมเดลสี HSL การเข้าใจแกนทั้งสามช่วยให้คุณคาดเดาได้ว่าสีพื้นฐานจะเปลี่ยนแปลงอย่างไรในแต่ละโครงสร้าง

Hue (0-360)
ตำแหน่งบนวงล้อสีในหน่วยองศา 0 คือสีแดง 60 คือสีเหลือง 120 คือสีเขียว 180 คือสีฟ้าเขียว 240 คือสีน้ำเงิน 300 คือสีม่วงแดง โครงสร้างจานสีหมุนค่านี้ขณะคงค่า saturation และ lightness ไว้
Saturation (0-100%)
ความสดของสี 100% คือความอิ่มตัวเต็มที่ 0% คือโทนสีเทา โครงสร้างจานสีรักษาค่า saturation พื้นฐานไว้เพื่อให้สีที่สร้างทั้งหมดมีความเข้มเท่ากัน
Lightness (0-100%)
ความสว่างของสี 0% คือสีดำ 50% คือสีบริสุทธิ์ 100% คือสีขาว โครงสร้างโมโนโครมาติกเปลี่ยนแปลงค่า lightness เพื่อสร้างสเกลโทนสี โครงสร้างอื่นทั้งหมดคงค่า lightness ไว้คงที่

ตัวอย่างโค้ด

สร้างจานสีโดยใช้โปรแกรมผ่านการแปลง HSL และการหมุน hue

JavaScript
// Generate a complementary color by rotating hue 180 degrees
function hexToHsl(hex) {
  let r = parseInt(hex.slice(1,3), 16) / 255;
  let g = parseInt(hex.slice(3,5), 16) / 255;
  let b = parseInt(hex.slice(5,7), 16) / 255;
  const max = Math.max(r,g,b), min = Math.min(r,g,b);
  let h = 0, s = 0, l = (max + min) / 2;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
    else if (max === g) h = ((b - r) / d + 2) / 6;
    else h = ((r - g) / d + 4) / 6;
  }
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}

function hslToHex(h, s, l) {
  s /= 100; l /= 100;
  const a = s * Math.min(l, 1 - l);
  const f = n => {
    const k = (n + h / 30) % 12;
    return Math.round(255 * (l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1))));
  };
  return '#' + [f(0), f(8), f(4)].map(v => v.toString(16).padStart(2, '0')).join('');
}

const base = '#6366f1';
const [h, s, l] = hexToHsl(base);
const comp = hslToHex((h + 180) % 360, s, l);
console.log(comp); // → "#f1ee63"
Python
import colorsys

def hex_to_hsl(hex_color: str):
    r, g, b = (int(hex_color[i:i+2], 16) / 255 for i in (1, 3, 5))
    h, l, s = colorsys.rgb_to_hls(r, g, b)
    return round(h * 360), round(s * 100), round(l * 100)

def hsl_to_hex(h: int, s: int, l: int) -> str:
    r, g, b = colorsys.hls_to_rgb(h / 360, l / 100, s / 100)
    return '#{:02x}{:02x}{:02x}'.format(round(r * 255), round(g * 255), round(b * 255))

def complementary(hex_color: str) -> str:
    h, s, l = hex_to_hsl(hex_color)
    return hsl_to_hex((h + 180) % 360, s, l)

def triadic(hex_color: str) -> list[str]:
    h, s, l = hex_to_hsl(hex_color)
    return [hex_color, hsl_to_hex((h + 120) % 360, s, l), hsl_to_hex((h + 240) % 360, s, l)]

print(complementary('#6366f1'))  # → #f1ee63
print(triadic('#6366f1'))        # → ['#6366f1', '#66f163', '#f16366']
Go
package main

import (
	"fmt"
	"math"
)

func hexToHSL(hex string) (float64, float64, float64) {
	var r, g, b uint8
	fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
	max := math.Max(rf, math.Max(gf, bf))
	min := math.Min(rf, math.Min(gf, bf))
	l := (max + min) / 2
	if max == min {
		return 0, 0, l * 100
	}
	d := max - min
	s := d / (2 - max - min)
	if l <= 0.5 {
		s = d / (max + min)
	}
	var h float64
	switch max {
	case rf:
		h = (gf - bf) / d
		if gf < bf { h += 6 }
	case gf:
		h = (bf-rf)/d + 2
	case bf:
		h = (rf-gf)/d + 4
	}
	return h * 60, s * 100, l * 100
}

func hslToHex(h, s, l float64) string {
	s /= 100; l /= 100
	a := s * math.Min(l, 1-l)
	f := func(n float64) uint8 {
		k := math.Mod(n+h/30, 12)
		return uint8(255 * (l - a*math.Max(-1, math.Min(math.Min(k-3, 9-k), 1))))
	}
	return fmt.Sprintf("#%02x%02x%02x", f(0), f(8), f(4))
}

func main() {
	h, s, l := hexToHSL("#6366f1")
	comp := hslToHex(math.Mod(h+180, 360), s, l)
	fmt.Println(comp) // → #f1ee63
}

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

ความแตกต่างระหว่างสีประกอบ (complementary) และสีแยกประกอบ (split-complementary) คืออะไร?
สีประกอบใช้สองสีที่อยู่ห่างกัน 180 องศาบนวงล้อสีพอดี ให้คอนทราสต์ hue สูงสุด สีแยกประกอบแทนที่ตรงกันข้ามโดยตรงด้วยสองสีที่ 150 และ 210 องศาจากสีพื้นฐาน ให้คอนทราสต์ที่แข็งแกร่งพร้อมความตึงเครียดทางภาพน้อยลง สีแยกประกอบใช้งานง่ายกว่าในการออกแบบ UI เพราะสี accent ไม่มีสีใดที่ตรงข้ามกับสีพื้นฐานโดยตรง
จานสี UI ควรมีกี่สี?
design system ส่วนใหญ่ใช้ hue หลัก 3-5 สี ได้แก่ primary, secondary, neutral และ accent หนึ่งหรือสองสี hue หลักแต่ละสีจะมีสเกล lightness (100 ถึง 900) เริ่มต้นด้วยโครงสร้างสามเหลี่ยมหรือสี่เหลี่ยมสำหรับ hue หลัก แล้วสร้างสเกลโมโนโครมาติกสำหรับแต่ละสี
ใช้จานสีเหล่านี้กับ Tailwind CSS ได้หรือไม่?
ได้ คัดลอกค่า hex และเพิ่มลงในอ็อบเจกต์ colors ในไฟล์ tailwind.config.js หรือ tailwind.config.ts สำหรับสเกลโมโนโครมาติก ให้แมปแต่ละโทนกับคีย์ตัวเลข (50, 100, 200 เป็นต้น) เพื่อให้ตรงกับรูปแบบการตั้งชื่อของ Tailwind
ทำไมสีบางสีที่สร้างดูหม่นหรือขุ่น?
หากสีพื้นฐานของคุณมีค่า saturation ต่ำหรือค่า lightness ที่สุดขีด (ใกล้ 0% หรือ 100% มาก) hue ที่หมุนแล้วก็จะดูจืดชืดเช่นกัน ตัวสร้างรักษาค่า saturation และ lightness ของสีพื้นฐานไว้ สำหรับจานสีที่สดใส ควรเลือกสีพื้นฐานที่มีค่า saturation เกิน 50% และค่า lightness ระหว่าง 30% ถึง 70%
ความแตกต่างระหว่าง HSL และ HSV/HSB คืออะไร?
HSL และ HSV ต่างใช้ hue เป็นแกนวงกลม แต่กำหนดความสว่างต่างกัน ใน HSL ค่า lightness 50% คือสีบริสุทธิ์และ 100% คือสีขาว ใน HSV (เรียกอีกชื่อว่า HSB) ค่า value 100% คือสีบริสุทธิ์และไม่สามารถถึงสีขาวได้โดยไม่ลดค่า saturation ตัวสร้างจานสีส่วนใหญ่ใช้ HSL เพราะแกน lightness สัมพันธ์กับการรับรู้ความสว่างสีของมนุษย์ได้ตรงกว่า
โครงสร้างสีประสานเกี่ยวข้องกับ accessibility อย่างไร?
สีประสานและคอนทราสต์ WCAG เป็นคนละเรื่องกัน คู่สีประกอบมีคอนทราสต์ hue สูงสุด แต่ไม่ได้รับประกันว่าคอนทราสต์ความสว่างจะเพียงพอสำหรับการอ่านข้อความ หลังจากสร้างจานสีแล้ว ให้ทดสอบคู่พื้นหน้า/พื้นหลังแต่ละคู่กับ WCAG AA (อัตราส่วน 4.5:1 สำหรับข้อความปกติ) สีที่มีค่า lightness คล้ายกันจะไม่ผ่านเกณฑ์ไม่ว่าความสัมพันธ์ hue จะเป็นอย่างไร
HSL เหมือนกับฟังก์ชัน CSS hsl() หรือไม่?
ใช่ ฟังก์ชัน CSS hsl() รับอาร์กิวเมนต์สามตัว ได้แก่ hue ในหน่วยองศา (0-360), saturation เป็นเปอร์เซ็นต์ และ lightness เป็นเปอร์เซ็นต์ CSS Color Level 4 ยังรองรับค่า alpha แบบคั่นด้วยเครื่องหมายทับ เช่น hsl(240 60% 50% / 0.8) โมเดล HSL ที่ใช้ในตัวสร้างนี้ตรงกับข้อกำหนด CSS อย่างสมบูรณ์ คุณจึงวาง hue, saturation และค่า lightness ลงใน stylesheet โดยตรงได้