sinh palette màu từ base color: scale 50–900 và semantic cho dashboard
· Tác giả: Trường — Founder Webchốt
sinh palette màu từ base color là bước bắt buộc khi bạn chỉ có một mã brand duy nhất nhưng cần border nhạt, hover đậm, focus ring và thậm chí biểu đồ đa chuỗi. sinh palette màu từ base color không phải random: mỗi bước sáng phải đọc được chữ xám hoặc trắng, và dark mode phải không “rửa” sang tím lạ. Bài viết kết hợp lý thuyết color palette generator thực dụng với checklist handoff cho dev — kèm liên kết dịch vụ, bảng giá, liên hệ Webchốt (0905 151 701) khi muốn design token trong dự án Next.js.
scale màu ổn khi nhìn cả bảng nhỏ và component lớn | Nguồn: webchot.com
color palette generator: HSL, OKLCH và perceptual uniform
color palette generator truyền thống hay xoay hue 180° cho accent phụ nhưng dễ tạo cặp màu “đánh nhau” với brand. Thực tế team product ưa OKLCH hoặc LAB vì lightness gần với cảm nhận mắt hơn HSL thuần.
Khi prototype nhanh Figma, dùng style với variable collection: base chính, sau đó bind các bước tới alias semantic — ví dụ color.bg.surface thay vì blue-50 cố định, để đổi theme sau này vẫn không refactor mỏi tay.
Đừng quên kiểm tra màu trên màn chỉ phủ 99% sRGB — một số máy Windows có profile lạ làm brand neon trông khác Mac.
Trong thực tế agency, bạn có thể phải “né” hue trùng đối thủ trong cùng vertical SaaS — color palette generator vẫn hữu ích để dự phòng bản phác 2–3 accent trong cùng family. Ghi lại lý do chọn step 500 làm base thay vì 600 trong README brand để PM sau này không đổi một cách cảm tính.
Với illustration minh họa landing, đồng bộ bão hòa icon set và ảnh stock bằng một lớp color grading nhẹ trước khi đặt cạnh button primary — mắt người dùng so sánh vùng liền kề ngay lập tức.
Semantic token: primary, success, warning và neutral
Base color thường map vào primary interactive; neutral xám được sinh riêng từ độ xám lạnh hoặc ấm khớp undertone brand — trộn xám thuần vào nền pastel có undertone hồng sẽ lộ “bẩn”.
- Điểm 1: success/warning/error không nên chỉ hue rotate từ primary — dùng màu chuẩn UX (xanh lá, cam, đỏ) tinh chỉnh saturation.
- Điểm 2: Border subtle thường là bước 200/300 của neutral, không phải primary.
- Điểm 3: Focus ring đủ contrast nhưng không chói hơn button.
- Điểm 4: Chart categorical nên định nghĩa 6 màu tối thiểu tách biệt trên projector.
Bảng so sánh: HSL steps, hand-pick và engine OKLCH
Chọn phương pháp theo deadline và độ phức tạp thương hiệu.
| Tiêu chí | Lựa chọn A | Lựa chọn B | Khuyên dùng |
|---|---|---|---|
| Tốc độ MVP | HSL tweak tay | OKLCH generator | MVP: HSL; sau đó OKLCH |
| Đồng đều perceptual | Hand pick từng bước | OKLCH uniform | OKLCH cho DS lớn |
| Handoff Figma→code | Export hex thủ công | JSON token CI | Style Dictionary hoặc tương đương |
| Accessibility | Chỉ nhìn mắt | Contrast calculator | WCAG AA tối thiểu text UI |
Sau bảng: tool chỉ mạnh khi team thống nhất đơn vị (hex/hsl/oklch) — tránh dev nhận hex và designer chỉnh HSL cùng lúc.
Khi làm việc với stakeholder không kỹ thuật, xuất bảng mẫu vật lý hoặc ít nhất PDF có ô lớn — họ bắt lỗi “xanh lệch” nhanh hơn engineer nhìn code. Với animation scroll, nhớ test màu gradient hero trên Firefox và Safari vì engine gradient khác một chút gamma.
Quy trình 5 bước từ brand một màu đến file tokens.json
- Bước 1: Xác định base ở độ sáng nào (thường 500 hoặc 600) và chụp màn brand guideline gốc.
- Bước 2: Sinh 9–11 bước sáng — kiểm tra 50/100 có đủ nhạt cho background không.
- Bước 3: Đặt semantic: color.text.primary / color.surface / color.border.default mapping tới scale.
- Bước 4: Dark mode: tạo bộ surface riêng, đừng chỉ invert hex.
- Bước 5: Xuất JSON + snippet CSS variable — PR vào repo design-tokens.
Ghi chú trong README: “base #2563eb sinh 2026-05-04 engine X” để mọi người biết generator version.
Sau khi có tokens.json, chạy một vòng preview trong Storybook với toàn bộ trạng thái button, input error, skeleton — những state này dễ lộ bước 100 quá bão hòa hoặc 800 quá tối cho shadow.
Palette trên Webchốt: sinh nhanh trước khi vào code
Thuận tiện cho founder không có Figma file nặng: dùng color palette trong bộ công cụ để thử base mới rồi copy biến sang globals.css. Nếu cần audit toàn site sau khi đổi brand, xem template landing đồng bộ hero và CTA.
Đổi palette ảnh hưởng CLS khi chiều cao component khác — nhắn liên hệ nếu muốn snapshot visual regression trong pipeline deploy.
Sai lầm khiến palette “đẹp trong Figma, lỗi trên web”
Các lỗi phổ biến khiến tái brand mất niềm tin người dùng. Một bài học nhỏ: khi marketing yêu cầu “đổi xanh sang xanh ngọc”, hãy lock delta E và số bước scale trước khi designer mở Figma — tránh vòng chỉnh vô hạn không đo được.
- Sai lầm 1: Dùng opacity layer thay vì scale — hover state khác giữa browser.
- Sai lầm 2: Chỉ test contrast chữ đen trên pastel, quên chữ trắng trên brand đậm.
- Sai lầm 3: Map token sai semantic — button danger dùng mã success vì copy nhầm JSON.
- Sai lầm 4: Không định nghĩa neutral riêng — mọi border dùng primary 20% opacity trông lệch theme.
FAQ — sinh palette màu từ base color
Nên để bao nhiêu bước trong scale?
Từ 9–11 bước phổ biến (50–900 hoặc 25–975). Quá ít thiếu linh hoạt cho subtle border; quá nhiều designer không nhớ hết. Quan trọng là naming ổn định, không đổi số giữa release.
Print CMYK có cần scale riêng?
Có — chuyển từ RGB screen sang CMYK in offset thường tối và lệch hue. Xuất proof in trước khi chốt brand guide vật lý.
Gradient hero có dùng chung token solid không?
Gradient nên reference hai đầu từ palette sau đó chuyển sang variable --grad-start và --grad-end; tránh hardcode tím hồng lạc loài khỏi scale.
Chart accessibility cho mùa màu?
Dùng pattern fill + stroke width khác nhau, bảng chú thích text song song, không chỉ dựa vào màu. Kiểm tra bằng simulator.
Liên hệ Webchốt để đồng bộ token Shadcn/Tailwind?
Gửi theme.config và mong muốn dark mode — 0905 151 701 hoặc hi@webchot.com để ước giờ tích hợp.
Liên Hệ Webchốt
sinh palette màu từ base color là nền móng của cảm giác “đắt tiền” trên SaaS và TMĐT. Webchốt giúp bạn chốt token, migrate CSS cũ và kiểm thử contrast theo route. Hotline 0905 151 701, email hi@webchot.com; studio TP.HCM như chân trang. Bạn có thể đính kèm file Figma cũ và bảng màu in để team đối chiếu một lần duy nhất.
- Hotline / Zalo: 0905 151 701 — gặp anh Trường (founder/dev).
- Chat Zalo: zalo.me/0905151701 — phản hồi nhanh.
- Email: hi@webchot.com — phản hồi <12h làm việc.
- Studio: 262/1/93 Phan Anh, Phường Phú Thạnh, TP.HCM (T2–T7, 9h–18h).
Tham khảo thêm: 17 template Next.js · 10 dịch vụ web chuyên sâu · bảng giá Webchốt 2026 · 12 công cụ kế toán/tài chính miễn phí.
Reference: Next.js docs · web.dev Core Web Vitals.
