Tổng hợp nguồn bảng màu CSS

Ngày 4 tháng 5, 2026

Cách đây một thời gian, mình quyết định "quay xe", không dùng Tailwind CSS cho mấy dự án mới nữa mà chuyển hẳn sang viết CSS thuần (vanilla CSS) cho nó thanh tịnh.

Nhưng đời không như là mơ, có một thứ của Tailwind khiến mình nhớ nhung da diết: đó chính là bảng màu (color palette) siêu đỉnh của nó. Bình thường nếu cần một màu xanh dương nhạt, mình chỉ việc lôi thằng blue-100 ra xài, thấy chưa ưng thì đổi sang blue-200 hoặc hạ xuống blue-50. Thú thật là gu thẩm mỹ phối màu của mình siêu tệ, nên việc có sẵn một palette màu chuẩn chỉnh được thiết kế bởi những bộ óc đầy nghệ thuật đúng là "cứu cánh" cuộc đời làm dev.

Cơ mà dùng hoài mấy tông màu Tailwind thì cũng có ngày thấy ngán. Thế là hôm nay, mình lên Mastodon hỏi han anh em xem có palette màu nào khác "bánh cuốn" hơn không. Tiện thể có người bạn cũng muốn xin link ké, nên mình lên luôn bài blog này để chia sẻ cho bạn mình, và tất nhiên là cho cả anh em nữa! :)

Mấy bộ mình 'kết' nhất

Dưới đây là những bảng màu mình thấy ưng cái bụng nhất:

• uchū (file css, FAQ)
• flexoki (file css)
• reasonable colours — bộ này cực kỳ chú trọng vào khả năng tiếp cận (accessibility) nha anh em (file css)

Thêm nhiều palette màu khác cho anh em quẹo lựa

Nếu mấy bộ trên vẫn chưa đủ làm anh em "rạo rực" thì đây, bơi hết vào đây:

• web awesome
• radix
• US web design systems (Hệ thống design token của chính phủ Mỹ, nhìn uy tín phết)
• material design

Trình tạo palette màu (Colourscheme generators)

Bên cạnh đó, các đồng nghiệp trên mạng cũng share thêm một rổ các công cụ tạo bảng màu tự động:

• harmonizer
• tints.dev
• coolors
• colorpalette.pro

Nói thật là trước giờ mình thấy mấy cái tool generator kiểu này cứ bị phức tạp và khó dùng thế nào ấy. Nhưng biết đâu một ngày đẹp trời, trình cảm thụ nghệ thuật của mình đột phá, lúc đó chắc sẽ cần đến nên cứ lưu lại đây cái đã.

Và thêm một công cụ check màu xịn sò khác:

• colorhexa — trang này có quả thông tin phân tích về mù màu (colorblindness) siêu chi tiết và hữu ích.

oklch

Nếu anh em muốn chơi hệ tự động hóa bằng code, bài viết Generative colors with CSS có chia sẻ một ví dụ cực hay về cách sử dụng hàm oklch trong CSS để tự động tạo (generate) các tông màu cực kỳ linh hoạt và mượt mà.