Trình tạo bảng màu Tailwind CSS 11 cấp và API

 (tints.dev)
5 điểm bởi GN⁺ 2024-02-03 | 1 bình luận | Chia sẻ qua WhatsApp
  • Có thể bắt đầu làm việc với bảng màu Tailwind CSS từ một giá trị Hex duy nhất và nhanh chóng mở rộng thành 11 cấp màu từ 50 đến 950
  • Điểm dừng chuẩn mặc định là 500; nếu cần, có thể chỉ định một vị trí khác trong phạm vi 50–950 làm màu chuẩn
  • Có thể điều chỉnh độ bão hòa và Hue để tạo bảng màu tự nhiên hơn so với chỉ thay đổi độ sáng đơn thuần
  • Phân bố màu về phía trắng/đen sẽ thay đổi tùy theo giá trị tối thiểu/tối đa của Lightness/Luminance và chế độ được chọn
  • API hiện tập trung vào việc trả về bảng màu dựa trên giá trị Hex mặc định, và chưa cung cấp tùy chọn điều chỉnh HSL

Tạo bảng màu Tailwind CSS

  • Palette Creator nhận một giá trị màu thập lục phân hợp lệ làm giá trị ban đầu và tạo bảng màu 11 cấp cho Tailwind CSS
  • Điểm dừng chuẩn mặc định là 500, nhưng có thể đổi sang một điểm dừng khác trong khoảng 50–950 để đặt màu mong muốn vào trung tâm của bảng màu

  • Cách điều chỉnh màu

    • Với màu có Saturation 100%, có thể áp dụng Hue Shift lên hoặc xuống để tạo biến hóa cho bảng màu
    • Với màu cơ sở có độ bão hòa thấp, việc tăng Saturation ở hai đầu sẽ tạo ra bảng màu thú vị hơn
    • Có thể điều chỉnh Minimum/Maximum Lightness hoặc Luminance để trải các màu còn lại tới hai cực trắng và đen
    • Khi chuyển đổi giữa Lightness và Luminance, phân bố màu ở các cực sẽ được tạo ra khác nhau
    • Nguyên tắc thiết kế màu sắc được lấy cảm hứng từ Refactoring UI của Adam Wathan và Steve Schoger; cuốn sách này không khuyến nghị sử dụng công cụ tự động hóa
    • Công cụ này tập trung vào việc khởi đầu nhanh cho quá trình tạo bảng màu mới, thay vì tạo thay một đáp án hoàn chỉnh

Sử dụng API và đầu ra

  • Có thể lấy nhiều bộ bảng màu thông qua Palette API
  • Có thể dùng trong các công cụ thiết kế cần tạo bảng màu 50–950 chỉ từ một giá trị Hex duy nhất
  • Hiện API chỉ trả về bảng màu dựa trên giá trị Hex mặc định và không cung cấp tùy chọn HSL tweak
  • Bảng màu được tạo được cung cấp ở dạng có thể dán vào CSS cho cấu hình Tailwind
    • Đầu ra ví dụ bao gồm các biến màu OKLCH từ --color-yellow-50 đến --color-yellow-950 bên trong khối @theme

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-02-03
Ý kiến trên Hacker News

  • Sẽ rất tốt nếu các công cụ như thế này tích hợp sẵn trải nghiệm phát triển về khả năng tiếp cận
    Tức là khi định nghĩa bảng màu, chỉ cần nhìn tên màu cũng biết được tổ hợp đó có đáp ứng khả năng tiếp cận hay không
    Ví dụ, trong hệ thống thiết kế USWDS, có thể biết blue-30 trên gray-80 là đáp ứng khả năng tiếp cận (WCAG AA), vì chênh lệch giữa hai giá trị là từ 50 trở lên
    Trước đây tôi từng viết về khái niệm hơi hẹp này: https://darekkay.com/blog/accessible-color-palette/

    • Dù gọi là khái niệm hẹp, trong thiết kế web tôi nghĩ nó nên là yếu tố ưu tiên hàng đầu
      Ai rồi cũng sẽ có lúc gặp khuyết tật, dù vĩnh viễn hay tạm thời, và nhiều khi không dùng được cả những công cụ tuyệt vời như Streamlit vì vấn đề khả năng tiếp cận
    • Radix Colors có tích hợp rất nhiều tính năng liên quan đến khả năng tiếp cận
      https://www.radix-ui.com/colors
      Tôi đang làm ở WorkOS, còn Radix là dự án mã nguồn mở do chúng tôi vận hành
    • Stripe cũng đã viết về hệ thống màu có khả năng tiếp cận của họ: https://stripe.com/blog/accessible-color-systems
      Tuy vậy, tôi chưa biết rõ công cụ nào dùng khái niệm đó để tạo bảng màu mới
    • Material 3, một bộ đặc tả khá lớn mà Google dùng, cũng có hệ thống màu hoạt động theo kiểu này

  • Tôi thích nghịch màu sắc, và đây cũng là một công cụ hay
    Một số lựa chọn thay thế ổn khác là https://adevade.github.io/color-scheme-generator/, https://colorcolor.in tuy không trực tiếp tạo Tailwind nhưng chất lượng tốt, http://colormind.io, và https://uicolors.app/create

    • Tôi đã tìm công cụ màu sắc hoàn hảo từ rất lâu nhưng vẫn chưa thấy
      Tôi muốn một công cụ có thể xử lý nâng cao đến mức thư viện này thể hiện: https://colorjs.io/
    • Tôi muốn giới thiệu https://github.com/ardov/huetone (https://huetone.ardov.me/)
      Nó có UI độc đáo mà tôi chưa thấy ở các công cụ tương tự, và qua biểu đồ có thể xem L/C/H tương đối của toàn bộ màu trong bảng màu
      Nhờ đó dễ tạo bảng màu nhất quán hơn
    • Tôi thích https://huemint.com/
    • Dạo này có vẻ trang tải hơi chậm, nhưng tôi đã thích https://www.colourlovers.com từ lâu
    • Danh sách hay
      Nếu thêm vài liên kết về lý thuyết màu phổ thông mà cá nhân tôi hay dùng, https://paletton.com/ có thể tạo bảng màu dựa trên lý thuyết màu và sinh toàn bộ phối màu
      https://medialab.github.io/iwanthue/ dùng k-means để tách màu, phù hợp cho màu biểu đồ và đảm bảo độ tương phản

  • Gần đây tôi có làm một cái
    Đơn giản hơn nhiều và mang nặng gu cá nhân, nhưng có thể tạo cấu hình Tailwind: https://ghola.dev dùng trên desktop hoặc iPad là tốt nhất
    Cũng có một bài viết dài về cách tôi tạo nó bằng web component: https://www.naildrivin5.com/blog/2024/01/24/web-components-i...

    • Tôi thích công cụ bạn làm
      Gọi thứ chỉ xử lý một màu mỗi lần là trình tạo bảng màu thì có vẻ không đúng, hoặc ít nhất không phải thứ tôi đang tìm
      Tôi cần một trình tạo bảng màu tạo ra bộ màu cho ứng dụng, và công cụ này gần với hướng đó hơn

  • Tuyệt vời
    Tôi bắt đầu từ một logo và tạo được bảng màu trong chưa đến 1 phút, kết quả còn tốt hơn bảng màu lần trước tôi tự làm mất 30 phút

  • Tôi thích nó
    Không biết cách dễ nhất để đồng bộ các màu này với Figma là gì
    Có lẽ các nhà thiết kế chuyên nghiệp dùng plugin tạo các màu như vậy rồi export sang Tailwind

    • Bạn đang tìm loại plugin như thế này à? https://github.com/croma-app/huehive-figma-plugin
    • Figma Tokens là một hướng tiếp cận khá ổn
    • Cách Figma xử lý màu sắc quá khó chịu và kỳ quặc, nên giờ tôi không còn bận tâm nữa
      Tôi đã vài lần cố dùng cho đúng, nhưng nó quá thủ công và phiền phức nên rồi bỏ cuộc

  • Công cụ hay
    Một cách tiếp cận khác tôi dùng trong codebase là định nghĩa bảng màu bằng biến CSS, rồi cho cấu hình Tailwind trỏ tới các biến đó
    Như vậy có thể gắn các theme màu khác nhau vào lúc chạy

  • Công cụ rất hữu ích
    Sau khi tạo bảng màu từ một màu đơn, tôi đưa kết quả vào https://palettte.app để chỉnh từng màu thủ công rồi dùng

  • Tôi thắc mắc ví dụ brand trong demo có phải là cách mọi người thường dùng trong cấu hình không
    Tôi cứ nghĩ sẽ dùng theo kiểu sửa màu cơ bản hoặc tạo biến mới như primary, secondary

    • Tôi là người tạo tints.dev
      Bộ màu brand là màu tôi dùng trên blog simeongriggs.dev của mình, và thực tế tôi đã nhập mẫu 500 vào công cụ này để tạo các màu còn lại

  • Có vẻ hữu ích cho gradient
    Lạ là không ai nhắc đến Paletton, công cụ chủ lực của tôi khi chọn màu: https://paletton.com/
    Nếu bắt đầu từ màu cơ bản, bạn cũng có thể có gradient nối sang các màu liền kề trong bảng màu
    Đặc biệt phối màu bộ ba và phối màu bộ bốn rất hữu ích

  • Tôi đã chủ động tìm cách áp dụng chuyển dịch màu, vậy mà vẫn mất khá lâu mới tìm ra