Trình Tạo Bảng Màu
Tạo bảng màu bổ sung, tương đồng, bộ ba và tứ giác từ bất kỳ màu cơ bản nào
Màu cơ bản
Sơ đồ màu
Bảng màu được tạo
Bảng Màu Là Gì?
Bảng màu là một tập hợp cố định các màu sắc được chọn để phối hợp với nhau trong thiết kế. Khi bạn chọn một màu cơ bản cho thương hiệu, trang web hoặc hình minh họa, bạn cần các màu bổ trợ phù hợp bên cạnh nó. Việc tạo bảng màu tự động hoá lựa chọn đó bằng cách áp dụng các quy tắc từ lý thuyết màu sắc, cụ thể là các mối quan hệ hình học trên vòng màu HSL chuẩn.
Vòng màu HSL (Hue, Saturation, Lightness) sắp xếp các màu trong một vòng tròn 360 độ. Màu đỏ nằm ở 0 độ, màu xanh lá ở 120 độ và màu xanh dương ở 240 độ. Mỗi sơ đồ hòa màu hoạt động bằng cách chọn các màu ở khoảng cách góc cụ thể so với màu cơ bản. Ví dụ, cặp bổ sung dùng hai màu cách nhau 180 độ. Tập tương đồng chọn các màu trong phạm vi 30 độ ở mỗi bên. Các quy tắc hình học này tạo ra các tổ hợp cân bằng vì các màu được chọn trải đều trên vòng màu thay vì tập trung vào một vùng.
Công cụ này nhận bất kỳ màu hex nào làm đầu vào, chuyển đổi sang HSL, xoay màu sắc theo góc được xác định bởi sơ đồ đã chọn, rồi chuyển kết quả trở lại hex. Công cụ hỗ trợ sáu sơ đồ: bổ sung, tương đồng, bộ ba, bổ sung chia đôi, tứ giác và đơn sắc. Mỗi sơ đồ tạo ra số lượng màu đầu ra khác nhau, từ 2 đến 5.
Tại Sao Dùng Trình Tạo Bảng Màu Này?
Chọn màu phối hợp tốt bằng cách thử và sai tốn thời gian và thiếu nhất quán. Trình tạo bảng màu áp dụng các quy tắc lý thuyết màu sắc ngay lập tức, cho bạn kết quả cân bằng về mặt toán học từ bất kỳ điểm xuất phát nào.
Các Trường Hợp Sử Dụng Trình Tạo Bảng Màu
So Sánh Các Sơ Đồ Hòa Màu
Mỗi sơ đồ hòa màu chọn màu sắc dựa trên góc xoay màu từ màu cơ bản trên vòng HSL. Bảng dưới đây liệt kê từng sơ đồ, số lượng màu tạo ra, góc xoay và bối cảnh thiết kế phù hợp nhất.
| Sơ đồ | Màu sắc | Góc màu | Phù hợp nhất cho |
|---|---|---|---|
| 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 |
Cách Xoay Vòng Màu HSL Hoạt Động
Toàn bộ quá trình tạo bảng màu trong công cụ này dựa trên mô hình màu HSL. Hiểu ba trục của nó giúp bạn dự đoán cách màu cơ bản sẽ biến đổi trong mỗi sơ đồ.
Ví Dụ Code
Tạo bảng màu theo chương trình bằng cách dùng chuyển đổi HSL và xoay màu sắc.
// 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
}