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

Thử ví dụ

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.

Tạo Bảng Màu Ngay Lập Tức
Chọn màu cơ bản và loại sơ đồ, bảng màu xuất hiện ngay lập tức. Không cần gửi biểu mẫu, không có màn hình tải. Thay đổi màu cơ bản và đầu ra cập nhật theo thời gian thực.
🎨
Sáu Sơ Đồ Hòa Màu
Chọn từ bổ sung, tương đồng, bộ ba, bổ sung chia đôi, tứ giác hoặc đơn sắc. Mỗi sơ đồ tạo ra hiệu ứng thị giác khác nhau, từ các cặp tương phản cao đến các dải màu đơn tinh tế.
🔒
Xử Lý Ưu Tiên Bảo Mật
Toàn bộ tính toán màu sắc chạy trên trình duyệt của bạn. Không có dữ liệu màu nào được gửi đến bất kỳ máy chủ nào. Công cụ hoạt động ngoại tuyến sau khi trang được tải.
📋
Xuất Một Cú Nhấp
Sao chép từng mã hex riêng lẻ hoặc toàn bộ bảng màu chỉ bằng một cú nhấp. Dán trực tiếp vào CSS, Figma, cấu hình Tailwind hoặc bất kỳ công cụ thiết kế nào chấp nhận giá trị hex.

Các Trường Hợp Sử Dụng Trình Tạo Bảng Màu

Tạo Giao Diện UI
Lập trình viên frontend xây dựng ứng dụng mới có thể bắt đầu với màu thương hiệu và tạo bảng màu đầy đủ cho các token chính, phụ và nhấn mạnh. Sơ đồ bộ ba hoặc tứ giác tạo ra đủ sự đa dạng cho nút, liên kết, cảnh báo và nền.
Token Màu Hệ Thống Thiết Kế
Kỹ sư hệ thống thiết kế dùng bảng màu đơn sắc để tạo thang độ sáng cho một màu thương hiệu đơn lẻ, rồi ánh xạ từng bước sang một token có tên (ví dụ: blue-100 đến blue-900).
Trực Quan Hóa Dữ Liệu
Kỹ sư và phân tích viên dữ liệu cần các màu riêng biệt cho chuỗi biểu đồ không xung đột. Bảng màu tương đồng hoặc bộ ba cho đủ sự phân tách cho 3-6 chuỗi trong khi vẫn giữ biểu đồ nhất quán về mặt thị giác.
Trang Đích Marketing
Nhà thiết kế xây dựng trang chiến dịch bắt đầu từ màu chính của thương hiệu và dùng sơ đồ bổ sung chia đôi để tìm màu nhấn cho nút CTA và các phần được làm nổi bật mà không xung đột với logo.
Kiểm Tra Khả Năng Tiếp Cận
Kỹ sư QA kiểm tra tuân thủ WCAG ghép các màu trong bảng màu và chạy chúng qua công cụ kiểm tra độ tương phản. Bắt đầu từ sơ đồ bổ sung hoặc bổ sung chia đôi thường tạo ra các cặp có độ tương phản sáng cao.
Học Lý Thuyết Màu Sắc
Sinh viên học thiết kế có thể chuyển đổi giữa tất cả sáu sơ đồ trên cùng một màu cơ bản và xem cách mỗi hình học phân phối màu sắc trên vòng màu. Đầu ra trực quan làm cho các góc trừu tượng trở nên cụ thể.

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ắcGóc màuPhù hợp nhất cho
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

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ơ đồ.

Màu Sắc (0-360)
Vị trí trên vòng màu tính theo độ. 0 là đỏ, 60 là vàng, 120 là xanh lá, 180 là xanh lục lam, 240 là xanh dương, 300 là tím hồng. Các sơ đồ bảng màu xoay giá trị này trong khi giữ nguyên độ bão hòa và độ sáng.
Độ Bão Hòa (0-100%)
Mức độ rực rỡ của màu. 100% là bão hòa hoàn toàn; 0% là sắc xám. Các sơ đồ bảng màu giữ nguyên độ bão hòa cơ bản để tất cả màu được tạo ra có cùng cường độ.
Độ Sáng (0-100%)
Mức độ sáng của màu. 0% là đen, 50% là màu thuần, 100% là trắng. Sơ đồ đơn sắc thay đổi độ sáng để tạo thang màu; tất cả sơ đồ khác giữ nguyên độ sáng.

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.

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
}

Câu Hỏi Thường Gặp

Sự khác biệt giữa bổ sung và bổ sung chia đôi là gì?
Bổ sung dùng hai màu cách nhau chính xác 180 độ trên vòng màu, tạo ra độ tương phản màu sắc tối đa. Bổ sung chia đôi thay thế màu đối diện trực tiếp bằng hai màu ở 150 và 210 độ so với màu cơ bản, cho độ tương phản mạnh với ít căng thẳng thị giác hơn. Bổ sung chia đôi dễ làm việc hơn trong thiết kế UI vì không có màu nhấn nào trực tiếp đối lập với màu cơ bản.
Bảng màu UI nên có bao nhiêu màu?
Hầu hết các hệ thống thiết kế dùng 3-5 màu cốt lõi: một màu chính, một màu phụ, một màu trung tính và một hoặc hai màu nhấn. Mỗi màu cốt lõi sau đó có thang độ sáng (100 đến 900). Bắt đầu với sơ đồ bộ ba hoặc tứ giác cho các màu cốt lõi, rồi tạo thang đơn sắc cho từng màu.
Tôi có thể dùng các bảng màu này với Tailwind CSS không?
Có. Sao chép các giá trị hex và thêm chúng vào đối tượng colors trong file tailwind.config.js hoặc tailwind.config.ts của bạn. Với thang đơn sắc, ánh xạ từng sắc độ sang một khóa có số (50, 100, 200, v.v.) để phù hợp với quy ước đặt tên của Tailwind.
Tại sao một số màu được tạo ra trông nhạt hoặc đục?
Nếu màu cơ bản của bạn có độ bão hòa thấp hoặc độ sáng cực đoan (rất gần 0% hoặc 100%), các màu được xoay cũng sẽ trông nhạt. Công cụ giữ nguyên các giá trị độ bão hòa và độ sáng của màu cơ bản. Để có bảng màu rực rỡ, chọn màu cơ bản có độ bão hòa trên 50% và độ sáng từ 30% đến 70%.
Sự khác biệt giữa HSL và HSV/HSB là gì?
HSL và HSV đều dùng màu sắc làm trục tròn, nhưng chúng định nghĩa độ sáng khác nhau. Trong HSL, độ sáng 50% là màu thuần và 100% là trắng. Trong HSV (còn gọi là HSB), giá trị 100% là màu thuần và không có cách nào đạt được màu trắng mà không giảm độ bão hòa. Hầu hết các trình tạo bảng màu dùng HSL vì trục độ sáng của nó ánh xạ trực quan hơn đến cách chúng ta cảm nhận độ sáng màu.
Các sơ đồ hòa màu liên quan đến khả năng tiếp cận như thế nào?
Hòa màu và độ tương phản WCAG là hai vấn đề riêng biệt. Cặp bổ sung có độ tương phản màu sắc tối đa, nhưng điều đó không đảm bảo đủ độ tương phản sáng cho khả năng đọc văn bản. Sau khi tạo bảng màu, hãy kiểm tra từng cặp nền trước/nền sau theo WCAG AA (tỷ lệ 4,5:1 cho văn bản thường). Các màu có độ sáng tương tự sẽ không đạt yêu cầu bất kể mối quan hệ màu sắc của chúng.
HSL có giống với hàm hsl() trong CSS không?
Có. Hàm hsl() trong CSS nhận ba đối số: màu sắc theo độ (0-360), độ bão hòa theo phần trăm và độ sáng theo phần trăm. CSS Color Level 4 cũng chấp nhận giá trị alpha phân tách bằng dấu gạch chéo: hsl(240 60% 50% / 0.8). Mô hình HSL được dùng bởi công cụ này khớp chính xác với đặc tả CSS, vì vậy bạn có thể dán các giá trị màu sắc, độ bão hòa và độ sáng trực tiếp vào stylesheet của mình.