ตัวสร้างจานสี
สร้างจานสีแบบประกอบ คล้ายคลึง สามเหลี่ยม และสี่เหลี่ยมจากสีพื้นฐานใดก็ได้
สีพื้นฐาน
โครงสร้างสี
จานสีที่สร้าง
จานสีคืออะไร?
จานสีคือชุดสีที่กำหนดไว้เพื่อให้ทำงานร่วมกันได้ในงานออกแบบ เมื่อคุณเลือกสีพื้นฐานสีเดียวสำหรับแบรนด์ เว็บไซต์ หรือภาพประกอบ คุณต้องการสีประกอบที่เข้ากันได้ดี การสร้างจานสีโดยอัตโนมัติจะเลือกสีเหล่านั้นโดยอาศัยกฎทฤษฎีสี โดยเฉพาะความสัมพันธ์เชิงเรขาคณิตบนวงล้อสี HSL มาตรฐาน
วงล้อสี HSL (Hue, Saturation, Lightness) จัดเรียงสีในวงกลม 360 องศา สีแดงอยู่ที่ 0 องศา สีเขียวที่ 120 องศา และสีน้ำเงินที่ 240 องศา โครงสร้างสีทุกแบบทำงานโดยการเลือกสีที่มีมุมห่างจากสีพื้นฐานในระยะที่กำหนด ตัวอย่างเช่น คู่สีประกอบใช้สีสองสีที่อยู่ห่างกัน 180 องศา ชุดสีคล้ายคลึงเลือกสีภายใน 30 องศาจากสีพื้นฐานทั้งสองด้าน กฎเชิงเรขาคณิตเหล่านี้สร้างชุดสีที่สมดุลเพราะสีที่เลือกกระจายรอบวงล้อแทนที่จะรวมกลุ่มในบริเวณเดียว
เครื่องมือนี้รับสีในรูปแบบ hex เป็นอินพุต แปลงเป็น HSL หมุนค่า hue ตามมุมที่กำหนดโดยโครงสร้างที่เลือก แล้วแปลงผลลัพธ์กลับเป็น hex รองรับหกโครงสร้าง ได้แก่ ประกอบ คล้ายคลึง สามเหลี่ยม แยกประกอบ สี่เหลี่ยม และโมโนโครมาติก แต่ละโครงสร้างสร้างสีในจำนวนที่แตกต่างกัน ตั้งแต่ 2 ถึง 5 สี
ทำไมต้องใช้ตัวสร้างจานสีนี้?
การเลือกสีที่เข้ากันได้ด้วยการลองผิดลองถูกนั้นช้าและไม่สม่ำเสมอ ตัวสร้างจานสีใช้กฎทฤษฎีสีได้ทันที ให้ผลลัพธ์ที่สมดุลทางคณิตศาสตร์จากจุดเริ่มต้นใดก็ได้
กรณีการใช้งานตัวสร้างจานสี
การเปรียบเทียบโครงสร้างสีประสาน
โครงสร้างสีประสานทุกแบบเลือกสีตามมุมหมุน hue จากสีพื้นฐานบนวงล้อ HSL ตารางด้านล่างแสดงแต่ละโครงสร้าง จำนวนสีที่สร้าง มุม hue และบริบทการออกแบบที่เหมาะสม
| โครงสร้าง | จำนวนสี | มุม Hue | เหมาะสำหรับ |
|---|---|---|---|
| Complementary | 2 | 180 | High contrast, call-to-action buttons |
| Analogous | 3 | -30, 0, +30 | Harmonious, low-tension backgrounds |
| Triadic | 3 | 0, 120, 240 | Balanced variety, dashboards |
| Split-Complementary | 3 | 0, 150, 210 | Softer contrast than complementary |
| Tetradic (Rectangle) | 4 | 0, 90, 180, 270 | Rich palettes, complex UIs |
| Monochromatic | 5 | Same hue, varied lightness | Subtle, single-brand pages |
วิธีทำงานของการหมุนวงล้อสี HSL
การสร้างจานสีทั้งหมดในเครื่องมือนี้อาศัยโมเดลสี HSL การเข้าใจแกนทั้งสามช่วยให้คุณคาดเดาได้ว่าสีพื้นฐานจะเปลี่ยนแปลงอย่างไรในแต่ละโครงสร้าง
ตัวอย่างโค้ด
สร้างจานสีโดยใช้โปรแกรมผ่านการแปลง HSL และการหมุน hue
// 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"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']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
}