Bảng màu Uchū dành cho những người yêu Internet

 (uchu.style)
2 điểm bởi GN⁺ 2025-02-17 | 1 bình luận | Chia sẻ qua WhatsApp
  • Uchū là bảng màu dành cho những người yêu Internet do NetOperator Wibby tạo ra, được cung cấp chủ yếu dưới dạng danh sách các giá trị oklch() hơn là tên màu
  • Bảng màu được chia thành 8 nhóm màu, mỗi nhóm gồm 9 mức giá trị oklch(L C H)
  • Nhóm đầu tiên là dải độ bão hòa thấp với mức sắc độ 0.002~0.004, các nhóm còn lại trông như các dải đỏ, hồng, tím, xanh dương, xanh lá, vàng và cam theo góc màu
  • Không có tên riêng cho từng màu, ví dụ áp dụng, mã mẫu, cách tải xuống hay thông tin giấy phép
  • Nếu muốn dùng cho design system hoặc theme, cần tự sao chép và áp dụng trực tiếp các giá trị OKLCH được cung cấp

Hình thức cơ bản của bảng màu Uchū

  • Uchū là một bảng màu được giới thiệu với mô tả “the color palette for internet lovers”
  • Tác giả được ghi là NetOperator Wibby
  • Bảng màu tập trung vào danh sách các giá trị oklch() hơn là phần mô tả, mỗi giá trị dùng ba con số tương ứng với độ sáng, sắc độ và góc màu để xác định màu

Cách cấu thành bảng màu

  • Toàn bộ bảng màu gồm 8 nhóm màu
  • Mỗi nhóm có 9 giá trị oklch()
  • Cách đánh dấu mức trong mỗi nhóm hiển thị từ ### 2 đến ### 9, còn giá trị đầu tiên được đặt phía trên mà không có tiêu đề số riêng

Phạm vi OKLCH theo từng nhóm màu

  • Dải độ bão hòa thấp

    • Giá trị sắc độ ở mức 0.002~0.004
    • Giá trị đầu: oklch(0.9557 0.003 286.35)
    • Giá trị cuối: oklch(0.5682 0.004 247.89)

  • Góc màu trông như dải đỏ·hồng

    • Nhóm thứ hai có góc màu trong khoảng 3~19
      • Giá trị đầu: oklch(0.8898 0.052 3.28)
      • Giá trị cuối: oklch(0.4117 0.157 16.58)
    • Nhóm thứ ba có góc màu trong khoảng 352~355
      • Giá trị đầu: oklch(0.958 0.023 354.27)
      • Giá trị cuối: oklch(0.5768 0.074 353.14)

  • Góc màu trông như dải tím·xanh dương

    • Nhóm thứ tư có góc màu trong khoảng 298~305
      • Giá trị đầu: oklch(0.891 0.046 305.24)
      • Giá trị cuối: oklch(0.3601 0.145 298.35)
    • Nhóm thứ năm có góc màu trong khoảng 258~260
      • Giá trị đầu: oklch(0.8966 0.046 260.67)
      • Giá trị cuối: oklch(0.3953 0.15 259.87)

  • Góc màu trông như dải xanh lá·vàng·cam

    • Nhóm thứ sáu có góc màu trong khoảng 144~149
      • Giá trị đầu: oklch(0.9396 0.05 148.74)
      • Giá trị cuối: oklch(0.5277 0.138 145.41)
    • Nhóm thứ bảy có góc màu trong khoảng 91~92
      • Giá trị đầu: oklch(0.9705 0.039 91.2)
      • Giá trị cuối: oklch(0.6229 0.097 91.9)
    • Nhóm thứ tám có góc màu trong khoảng 51~57
      • Giá trị đầu: oklch(0.9383 0.037 56.93)
      • Giá trị cuối: oklch(0.5249 0.113 51.98)

Những điểm cần lưu ý khi sử dụng

  • Tên màu cho từng nhóm không được cung cấp
  • Không bao gồm ví dụ áp dụng theme, mã mẫu, cách tải xuống hay thông tin giấy phép
  • Người dùng thực tế phải tự sao chép các giá trị oklch() trong danh sách để dùng khi xây dựng palette hoặc theme

Bài viết liên quan

1 bình luận

 
GN⁺ 2025-02-17
Các ý kiến trên Hacker News

  • Hôm nay tôi mới biết đến oklch()
    https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...

    • Tôi học được từ bài này: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg...
      Tự mình thử dùng thì rất ngạc nhiên vì màu sắc bỗng sống động hẳn lên, và lúc đó tôi quyết định phải tạo một theme
    • Để hiểu rõ hơn, tôi đã thử làm một công cụ trực quan hóa bằng v0 :)
      https://v0-oklch-visualiser-e69nx1.vercel.app/
    • Cũng nên biết là hầu hết trình duyệt đều hỗ trợ nó
      https://caniuse.com/?search=oklch
    • Có cảm giác đây là tương lai của màu sắc
    • Tôi cũng chỉ mới biết gần đây, nhưng đồng nghiệp của tôi thì thường bắt kịp những thay đổi kiểu này nhanh hơn nhiều

  • Tôi tò mò vì sao lại dùng từ uchu
    Dạo này gần như mọi thứ, từ bảng phối màu, mô hình AI, startup, công cụ, ứng dụng, v.v. đều có vẻ được đặt tên bằng một từ tiếng Nhật chọn ngẫu nhiên nào đó, mà tôi không hiểu tại sao

    • Tôi không muốn nghe có vẻ tiêu cực, nhưng giờ cảm giác hơi bị lạm dụng rồi
      Thú vị là ở Nhật cũng đang xảy ra chuyện tương tự với những từ tiếng Anh có vẻ được chọn ngẫu nhiên, nên có lẽ đây không hẳn là chuyện chưa từng có
    • Tôi tự hỏi liệu những tên sản phẩm như Galaxy hay Forester có làm bạn khó chịu không
      Việc phàn nàn về tên sản phẩm chỉ có một từ trông khá kỳ lạ. Không rõ vấn đề là ngôn ngữ xuất xứ của từ đó, hay là bạn ghen tị vì họ dùng từ hai âm tiết thay vì một từ dài như Navigator, hay bạn không thích vì nó không chỉ có một âm tiết như Chrome.
      Tôi cũng tò mò liệu Ubuntu thì ổn vì không phải tiếng Nhật, hay ý bạn là cả những cái tên như Twitter hay Yahoo cũng nên bị loại bỏ và tất cả nên chuyển thành một chữ cái như X
    • “uchū” trong tiếng Nhật có nghĩa là vũ trụ
      Vì tôi dùng theme này cho mọi dự án, nên có thể nói nó mang nghĩa phổ dụng
      Tôi không rõ các trường hợp khác thế nào, nhưng cá nhân tôi thích phong cách hay thẩm mỹ Nhật, nên nếu có từ phù hợp thì tôi sẽ dùng
    • Những từ ngắn và phát âm được là khá hiếm
      Nếu muốn một tên dự án 4~6 ký tự, các từ tiếng Nhật thường đáp ứng điều kiện khá tốt, và văn hóa Nhật cũng đã lan tỏa rất rộng ra nước ngoài
    • Có vẻ thế hệ trẻ lớn lên quen thuộc hơn với văn hóa Nhật như anime, video game, và các tham chiếu văn hóa không mang tính retro, nên họ đặt tên bằng những từ nghe hay đối với họ

  • Tôi tò mò liệu đã thử phân tích độ dễ đọc bằng cái này chưa
    Độ tương phản giữa nền và chữ có vẻ quá thấp, nên trông không thoải mái để đọc trong thời gian dài

    • Dạo này có vẻ người ta quá tập trung vào độ dễ đọc
      Ở chỗ làm có một đội mới được lập ra, bắt mọi người đo tất cả độ tương phản để phục vụ những người gặp khó khăn khi đọc. Nào là độ tương phản phải trên 80%, cỡ chữ cũng phải cực lớn, không được đổi theme, và vì “lý do bảo mật” còn cấm cài plugin như Dark Reader
      Vấn đề là kết quả lại rất xấu và gây mỏi mắt cho những người khác. Giờ còn không dùng được Dark Reader nên càng tệ hơn. Mọi thứ đều đậm và như đang hét lên, khiến còn khó phân biệt đâu là phần quan trọng hơn. Tôi không mua màn hình hiển thị 4,7 triệu màu chỉ để nhìn 10 màu. Tôi thường bị đau đầu khi độ tương phản quá cao, nên thích các theme dịu hơn như Solarized
      0,5% nhân viên có vấn đề về thị giác cũng có thể được hỗ trợ đủ tốt bằng các plugin trình duyệt cho phép mỗi người điều chỉnh theo vấn đề của mình. Khó khăn thị giác không phải cái nào cũng giống nhau. Có người không nhìn được một số tổ hợp màu nhất định nên cần tránh hoặc chỉnh lại; có người nhìn mờ nên cần chữ lớn, thậm chí có thể phải lớn hơn hiện tại rất nhiều. Với người hoàn toàn không nhìn thấy thì những thứ này cũng chẳng giúp được, họ cần màn hình chữ nổi và văn bản thay thế tốt cho hình ảnh. Nhưng công ty dường như không quan tâm những thứ đó, chỉ chú ý đến những gì đập ngay vào mắt
      Trước đây có chữ ký email dịu mắt, còn giờ thì quá phô trương với màu kiểu mẫu giáo và chữ khổng lồ. Trong khi đó vốn là thông tin chẳng ai đọc. Có lý do khiến nó từng được cố ý giảm nhấn mạnh: để khi cần thì biết nó ở đó, nhưng cũng hiểu rằng đó không phải thông tin quan trọng. Nếu thật sự muốn đọc thì có thể bôi chọn để xem, hoặc chuyển sang chế độ văn bản thuần
      Tôi hoàn toàn không phản đối hỗ trợ người khuyết tật, nhưng muốn thấy một cách tiếp cận được cá nhân hóa hơn. Tôi không thích kiểu sửa một thứ mà làm hỏng trải nghiệm của tất cả những người còn lại. Tôi cũng không dùng điện thoại ở chế độ chữ khổng lồ, nhưng tôi thấy tốt khi tính năng đó tồn tại cho những ai cần nó
    • Nếu nói về độ tương phản thì tôi tự hỏi có phải đang nói đến khu vực mẫu màu không
      Nếu vậy thì các giá trị màu nhỏ đó thiên về mục đích thị giác hơn là truyền đạt thông tin, còn trong repository thì các giá trị được để ở dạng dễ đọc. Ví dụ, chắc hẳn không ai muốn đọc hơn một đoạn văn bằng chữ màu cam sáng trên nền màu cam

  • Cách diễn đạt bảng phối màu dễ gây nhầm lẫn
    Với tôi, bảng phối màu nghĩa là một số ít màu hợp nhau, như Monokai. Các nơi áp dụng như tô sáng cú pháp trong trình biên tập mã cũng rõ ràng và dễ hiểu
    Cái này trông giống một danh sách có rất nhiều màu đơn sắc theo từng hệ, nên tôi không biết phải dùng thế nào. Không phải tôi muốn chê bai, mà thật sự thấy khó hiểu

    • Cái này giống cách Tailwind cung cấp một bảng màu hoàn chỉnh có thể dùng cho phát triển UI
      Khi có nhiều mức độ sáng của cùng một màu, chúng tạo cảm giác cùng một hệ và linh hoạt để tạo các thành phần UI ăn khớp với nhau. Ví dụ nếu muốn dùng viền tông xanh cho một thẻ màu xanh, bạn có thể dùng màu xanh sáng hơn cho nền và màu xanh đậm hơn cho viền
      Thay vì dùng viền màu đen rồi thêm độ trong suốt, mỗi mức độ sáng trong bảng màu này được chọn riêng để hài hòa trong cùng hệ màu. Một lợi ích khác là có thể đảm bảo mỗi “mức độ sáng” nhất quán giữa các màu. Xám 50% nằm ở vị trí tương tự đỏ 50%
      Nói chung hơn, mỗi màu ở đây được thiết kế để phối hợp tốt với mọi màu khác. Không phải màu nào cũng được, mà chúng phải hài hòa với nhau
    • Gọi là bảng màu thì chính xác hơn
    • Cá nhân tôi cũng nghĩ đáng ra nên gọi là “bảng màu”. Một vài ví dụ tương tự như sau
      Open Color của OpenProps https://yeun.github.io/open-color/
      Bảng màu của Tailwind https://tailwindcss.com/docs/colors
      Từ góc độ thiết kế, bảng màu có thể rất khó chọn trong khi vẫn giữ điểm tương phản màu tốt và các tiêu chí khả năng tiếp cận khác. Một bảng màu chuẩn hóa hữu ích vì nó làm thay phần việc đó. Tôi thường dùng bảng màu OC hoặc Tailwind, nhưng nhiều khi thiếu hệ màu mình muốn, nên có 3 lựa chọn như thế này là khá hay
    • Tôi cũng không hiểu nổi vì sao về cơ bản một danh sách hộp màu lại nhận được 476 điểm

  • Bảng màu này có vẻ không đồng đều về mặt cảm nhận
    Ý tôi là tỷ lệ tương phản giữa từng sắc độ và trắng/đen không giống nhau trên mọi màu. Tôi tò mò không biết đã phân tích bằng https://huetone.ardov.me/ chưa

    • Tôi đã phân tích bằng công cụ a11y-contrast[1] của mình, và thực tế độ chói không đồng đều. Tôi đã viết ở [2] vì sao đặc tính như vậy cũng có thể đáng mong muốn trong bảng màu
      [1] https://github.com/darekkay/a11y-contrast
      [2] https://darekkay.com/blog/accessible-color-palette/
    • Không, tôi chỉ làm theo cảm giác sao cho nhìn đẹp
      Tôi không biết công cụ huetone có hỗ trợ OKLCH không. Tôi không thấy tùy chọn chuyển đổi nào

  • Tôi tò mò vì sao đây là bảng phối màu cho người yêu Internet

    • Tôi thích Internet, và cũng thích những màu đẹp. Chắc không chỉ mình tôi như vậy đâu nhỉ ;)

  • Khi so sánh theo số, màu xanh dương trông rực và đặc hơn hẳn các màu khác
    Nếu đặt cả 5 mức cạnh nhau, xanh dương nổi bật như điện, còn các màu khác trông như đã được pha tint
    Tất nhiên còn tùy gamma màn hình và cấu hình màu, nhưng tôi tò mò liệu chủ ý có phải là làm cho mỗi số trông như một mức tint tương tự so với màu thuần hay không. Hiện tại nó giống một hệ tương tự RGB/CMYK nhưng ký hiệu khác, hơn là một triển khai Munsell Color System tạo ra sự tương đương về cảm nhận theo thang cường độ màu

    • Không hẳn
      Tôi không dùng công thức nào để ra những màu này; chỉ nhìn bằng mắt và điều chỉnh cho đến khi thấy hợp với mình

  • Xem trên Firefox của Android thì tôi chỉ thấy chữ đen trên nền trắng
    Có vẻ đáng ra phải thấy thêm thứ gì đó, không biết có đúng không

    • Có dùng CSS nesting[1]. Có thể hình dung như SCSS. Hỗ trợ đầy đủ cần Firefox 117 và Chrome 120[2]
      [1] https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_sel...
      [2] https://caniuse.com/css-nesting
    • Trên Firefox của desktop Linux cũng vậy, bật JavaScript cũng không khác
      Sửa: xem ra có vẻ đang dùng Oklab/oklch() [1]; tài liệu nói hoạt động từ Firefox 113, nhưng trên 115 có vẻ không chạy. Hoặc cũng có thể có yếu tố nào đó khác làm hỏng
      [1] https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...
    • Nếu cuộn xuống mà không thấy nhiều bộ mẫu màu được nhóm theo độ sáng, thì bạn đang không xem đúng rồi
      Trên Firefox của tôi hoạt động tốt, nhưng tôi không dùng Android
    • Trên Firefox 50 của Linux cũng vậy
      Tôi không biết nên gọi những người phớt lờ khả năng tương thích ngược là gì. Trang của tôi vẫn chạy trên IE6 nếu cần
    • Trên Chromium PC cũng vậy

  • Tôi không dùng Tailwind, nhưng vẫn dùng bảng màu Tailwind cho mục đích này
    https://tailwindcss.com/docs/colors

    • Cần cẩn thận. Tailwind lại đổi màu giữa phiên bản 3 và 4, và đây đã là lần thứ ba
      Nói rõ ra, việc nâng cấp thư viện CSS lên phiên bản mới không nên khiến chủ đề màu của toàn bộ trang web âm thầm thay đổi, nhưng thực tế là vậy
      Vì thế tôi đã bắt đầu chuyển sang Radix Colors

  • Có lẽ không có yêu cầu nghiêm ngặt rằng độ bão hòa giữa các màu phải nhất quán, nhưng với gu của tôi thì trông hơi không đồng đều
    Màu vàng đậm và cam trông hơi quá nhạt
    Tổng thể bảng màu thì tốt. Đặc biệt tôi thích việc tránh màu đỏ “đỏ chót”. Tôi nghĩ đó là màu mà nhiều nhà thiết kế không thích. Tôi muốn xem nếu có nghiên cứu nào về mối quan hệ giữa màu mắt và sở thích màu sắc
    Cũng theo hướng tương tự nhưng có nhiều dải màu hơn: https://www.s-ings.com/scratchpad/oklch-smooth/

    • Màu vàng và cam đúng là khó xử lý
      Cảm ơn vì liên kết, các dải màu đó trông thật sự rất đẹp