Bảng màu tôi thực sự sử dụng thay vì mặc định của Tailwind

Tôi thích hệ thống màu của Tailwind như một công cụ thiết kế: việc có sẵn 50 sắc thái xanh lam được đặt tên và sẵn sàng sử dụng thực sự hữu ích. Nhưng có một nhược điểm: mọi trang web dùng Tailwind đều sử dụng cùng 50 sắc thái xanh lam đó. Khi tôi chuyển các dự án cá nhân của mình sang vanilla CSS, tôi không chỉ mất đi các utility class; tôi còn mất đi cái nạng là một bảng màu được xây dựng sẵn.

Dưới đây là những lựa chọn thay thế mà tôi đã chọn, kèm theo mã thực tế.

Uchu: Lựa chọn tôi luôn quay lại

Uchu là một bảng màu được tuyển chọn cẩn thận gồm các màu ấm, dịu, hoạt động tốt cho các trang web nhiều nội dung. Nó có sẵn dưới dạng tệp CSS mà bạn có thể thêm vào bất kỳ dự án nào.

:root {
  --uchu-blue: #3b82f6;
  --uchu-indigo: #6366f1;
  --uchu-amber: #f59e0b;
  --uchu-rose: #f43f5e;
  --uchu-slate: #64748b;
}

Điều tôi thích ở nó: các màu sắc có đủ cá tính để không trông chung chung, nhưng chúng đủ dịu để không xung đột với nội dung. Đó là một sự cân bằng tốt.

Flexoki: Dành cho các dự án tối giản

Flexoki là một bảng màu mực, độ tương phản thấp được thiết kế để đọc văn bản dài. Nó sử dụng màu đen ấm và màu trắng ngà thay vì #000 và #fff thuần khiết, giúp giảm mỏi mắt.

:root {
  --flexoki-black: #100f0f;
  --flexoki-paper: #fffcf0;
  --flexoki-muted: #6f6e69;
  --flexoki-accent: #205ea6;
}

Tôi sử dụng cái này cho blog cá nhân của mình. Nền màu trắng ngà (#fffcf0) dễ đọc hơn đáng kể so với màu trắng tinh, đặc biệt là ở chế độ tối.

Reasonable Colors: Ưu tiên khả năng tiếp cận

Reasonable Colors được xây dựng từ đầu để tuân thủ WCAG. Mọi màu trong bảng màu đều đáp ứng tỷ lệ tương phản AA trở lên khi được sử dụng làm văn bản trên nền được khuyến nghị.

:root {
  --rc-primary: #0057b3;
  --rc-primary-bg: #e8f1fa;
  --rc-success: #1e7a1e;
  --rc-warning: #9e5d00;
  --rc-error: #c41e1e;
}

Đây là thứ tôi sử dụng cho các dự án của khách hàng khi các yêu cầu về khả năng tiếp cận là rõ ràng. Tài liệu bao gồm tỷ lệ tương phản cho mọi sự kết hợp.

Cách tiếp cận một dòng

Nếu bạn không muốn cam kết với một bảng màu đầy đủ, bạn có thể đạt được những kết quả đáng ngạc nhiên chỉ với các thuộc tính tùy chỉnh CSS dựa trên một màu chính duy nhất:

:root {
  --primary: #2563eb;
  --primary-light: oklch(from var(--primary) 0.7 0.15 h);
  --primary-dark: oklch(from var(--primary) 0.3 0.2 h);
  --surface: #fafafa;
  --text: #171717;
}

Cú pháp oklch(from ...) hiện được hỗ trợ trong tất cả các trình duyệt hiện đại (2026) và cho phép bạn tạo ra toàn bộ bảng màu từ một giá trị màu mà không cần chọn thủ công.

Bạn cũng có thể thích

• Bắt đầu với Katalon Studio + Tự động hóa Bootstrap Date Picker
• Intersection Observer và getBoundingClientRect trong JavaScript: Phân tích sâu về hiệu suất
• Kiến trúc tác nhân AI trong thực tế: Bộ nhớ, sử dụng công cụ và các chế độ lỗi
• Next.js App Router Complete Guide: Architecture, Patterns & Enterprise Best Practices (2026)

Các câu hỏi thường gặp