Hướng dẫn Thực hành

Step-by-step tutorials applying color science concepts to real-world design and development tasks.

Tạo OG Images Đầy Màu Sắc Với Next.js và Satori
Hướng dẫn Thực hành

Tạo OG Images Đầy Màu Sắc Với Next.js và Satori

Tạo Open Graph images động với Next.js và Satori. Tạo template OG nhận biết màu với gradients, màu thương hiệu và thiết kế responsive.

Đã cập nhật Tháng 2 24, 2026

CSS Custom Properties Cho Hệ Thống Màu Động
Hướng dẫn Thực hành

CSS Custom Properties Cho Hệ Thống Màu Động

Tìm hiểu cách xây dựng hệ thống màu có thể bảo trì và tùy chỉnh theme với CSS custom properties. Bao gồm biến, chế độ sáng/tối và thay đổi màu JS runtime.

Đã cập nhật Tháng 2 18, 2026

Màu Tailwind CSS: Hướng Dẫn Hệ Thống Sắc Độ Đầy Đủ
Hướng dẫn Thực hành

Màu Tailwind CSS: Hướng Dẫn Hệ Thống Sắc Độ Đầy Đủ

Làm chủ hệ thống màu Tailwind CSS: bảng màu mặc định, quy ước sắc độ 50-950, màu tùy chỉnh trong config và cách tiếp cận CSS variables mới trong Tailwind v4.

Đã cập nhật Tháng 2 11, 2026

Triển Khai Chế Độ Tối: Hướng Dẫn Đầy Đủ Cho Nhà Phát Triển
Hướng dẫn Thực hành

Triển Khai Chế Độ Tối: Hướng Dẫn Đầy Đủ Cho Nhà Phát Triển

Tìm hiểu cách triển khai chế độ tối bằng CSS custom properties, prefers-color-scheme, JavaScript toggle, và các chiến lược điều chỉnh màu sắc phù hợp cho bất kỳ dự án web nào.

Đã cập nhật Tháng 2 04, 2026

Xây Dựng Color Picker Web Component Từ Đầu
Hướng dẫn Thực hành

Xây Dựng Color Picker Web Component Từ Đầu

Xây dựng color picker dễ tiếp cận như một Web Component. Triển khai canvas rendering, thanh trượt hue, kênh alpha và custom events với Shadow DOM.

Đã cập nhật Tháng 2 02, 2026

CSS color-mix(): Pha Trộn Màu Natively Trong Trình Duyệt
Hướng dẫn Thực hành

CSS color-mix(): Pha Trộn Màu Natively Trong Trình Duyệt

Học CSS color-mix() để pha trộn màu natively trong trình duyệt. Cú pháp, không gian màu và tạo bảng màu động không cần JavaScript.

Đã cập nhật Tháng 1 31, 2026

Giải Thích Color Gamut: sRGB, P3 và Rec. 2020
Hướng dẫn Thực hành

Giải Thích Color Gamut: sRGB, P3 và Rec. 2020

Hiểu color gamuts—sRGB, Display P3 và Rec. 2020—và cách dùng CSS wide-gamut colors với @media (color-gamut) cho màn hình hiện đại. Có kèm ví dụ thực tế.

Đã cập nhật Tháng 1 28, 2026

Hàm Màu CSS: So Sánh rgb(), hsl(), oklch()
Hướng dẫn Thực hành

Hàm Màu CSS: So Sánh rgb(), hsl(), oklch()

So sánh mọi hàm màu CSS—rgb(), rgba(), hsl(), hsla(), lab(), lch(), oklch() và color-mix(). Tìm hiểu nên dùng hàm nào, khi nào và mức hỗ trợ trình duyệt.

Đã cập nhật Tháng 1 22, 2026

Không Gian Màu Nhận Thức: Lab, LCH, Oklab, OKLCH
Hướng dẫn Thực hành

Không Gian Màu Nhận Thức: Lab, LCH, Oklab, OKLCH

Không gian màu đồng đều nhận thức—CIE Lab, LCH, Oklab và OKLCH. Cách thiết kế, ưu điểm và nên dùng cái nào cho CSS và thiết kế.

Đã cập nhật Tháng 1 22, 2026

Figma Auto-Layout Components Với Color Tokens
Hướng dẫn Thực hành

Figma Auto-Layout Components Với Color Tokens

Xây dựng Figma auto-layout components với kiến trúc color token. Tìm hiểu liên kết biến, token responsive, biến thể theme và bàn giao cho nhà phát triển.

Đã cập nhật Tháng 1 15, 2026

Kiểm Tra Màu In: Đảm Bảo Màu In Chính Xác
Hướng dẫn Thực hành

Kiểm Tra Màu In: Đảm Bảo Màu In Chính Xác

Tìm hiểu kỹ thuật soft proofing, hard proofing và press proof để đảm bảo tái tạo màu in chính xác từ màn hình đến thành phẩm.

Đã cập nhật Tháng 1 13, 2026

CMYK Cho Nhà Thiết Kế Web: Khi In Ấn Gặp Màn Hình
Hướng dẫn Thực hành

CMYK Cho Nhà Thiết Kế Web: Khi In Ấn Gặp Màn Hình

Nhà thiết kế web làm dự án in ấn cần hiểu CMYK. Tìm hiểu gamut, chiến lược RGB sang CMYK an toàn và quy trình kiểm tra in.

Đã cập nhật Tháng 1 12, 2026

Giấy Ảnh Hưởng Đến Màu Sắc Như Thế Nào: Chất Liệu và Chất Lượng In
Hướng dẫn Thực hành

Giấy Ảnh Hưởng Đến Màu Sắc Như Thế Nào: Chất Liệu và Chất Lượng In

Hiểu cách loại giấy, phủ bóng và định lượng ảnh hưởng đến màu in. Tìm hiểu sự khác biệt giữa giấy tráng, không tráng và giấy đặc biệt cho độ chính xác màu sắc.

Đã cập nhật Tháng 1 09, 2026

In Nhũ và Màu Sắc Kim Loại trong Thiết Kế In Ấn
Hướng dẫn Thực hành

In Nhũ và Màu Sắc Kim Loại trong Thiết Kế In Ấn

Tìm hiểu về kỹ thuật in nhũ, tùy chọn mực kim loại, lựa chọn nhũ vàng và bạc, và các cân nhắc thiết kế cho vật liệu in ấn cao cấp.

Đã cập nhật Tháng 1 08, 2026

Kiến Trúc Màu Đa Thương Hiệu: Một Codebase, Nhiều Theme
Hướng dẫn Thực hành

Kiến Trúc Màu Đa Thương Hiệu: Một Codebase, Nhiều Theme

Xây dựng kiến trúc màu đa thương hiệu với CSS custom properties và design tokens. Hỗ trợ white-label theming từ một codebase duy nhất với tích hợp Tailwind.

Đã cập nhật Tháng 1 06, 2026

Màu Sắc Trong 3D và WebGL: Linear Color Space và PBR
Hướng dẫn Thực hành

Màu Sắc Trong 3D và WebGL: Linear Color Space và PBR

Hiểu màu sắc trong kết xuất 3D—sRGB vs linear RGB, hiệu chỉnh gamma, màu physically-based rendering, quản lý màu Three.js và HDR trong web 3D.

Đã cập nhật Tháng 1 02, 2026

Màu Sắc Trong Kể Chuyện Dữ Liệu: Vượt Ra Ngoài Màu Biểu Đồ Mặc Định
Hướng dẫn Thực hành

Màu Sắc Trong Kể Chuyện Dữ Liệu: Vượt Ra Ngoài Màu Biểu Đồ Mặc Định

Vượt ngoài màu biểu đồ mặc định. Bảng màu tuần tự, phân kỳ và phân loại, tiếp cận trong dataviz và thang màu D3/Chart.js.

Đã cập nhật Tháng 12 29, 2025

Hiệu Ứng Màu Sắc Trong CSS: Transitions và Keyframes
Hướng dẫn Thực hành

Hiệu Ứng Màu Sắc Trong CSS: Transitions và Keyframes

Làm chủ hiệu ứng màu CSS với transitions, keyframe animations, xoay hue HSL và nội suy OKLCH cho sự mượt mà nhận thức.

Đã cập nhật Tháng 12 26, 2025

Hàm CSS light-dark(): Chuyển Đổi Theme Natively
Hướng dẫn Thực hành

Hàm CSS light-dark(): Chuyển Đổi Theme Natively

Dùng CSS light-dark() để chuyển đổi theme natively. Thay thế JavaScript toggles và media queries bằng một hàm CSS duy nhất cho chế độ sáng và tối.

Đã cập nhật Tháng 12 24, 2025

Mô Hình Màu RGB: Cách Màn Hình Hiển Thị Màu Sắc
Hướng dẫn Thực hành

Mô Hình Màu RGB: Cách Màn Hình Hiển Thị Màu Sắc

Mô hình màu RGB—pha trộn ánh sáng đỏ, xanh lá, xanh lam, dải 0-255, hàm CSS rgb() và lý do màn hình hiển thị 16,7 triệu màu.

Đã cập nhật Tháng 12 20, 2025

Quy Trình Quản Lý Màu Sắc: Từ Màn Hình Đến In Ấn
Hướng dẫn Thực hành

Quy Trình Quản Lý Màu Sắc: Từ Màn Hình Đến In Ấn

Làm chủ quản lý màu từ hiệu chỉnh màn hình đến kiểm tra in. ICC profiles, soft proofing và quy trình nhất quán từ màn hình đến in ấn.

Đã cập nhật Tháng 12 14, 2025

Xây Dựng Hệ Thống Màu Cho Design System
Hướng dẫn Thực hành

Xây Dựng Hệ Thống Màu Cho Design System

Xây dựng kiến trúc màu sắc có hệ thống cho design system với quy ước đặt tên, tạo sắc độ, semantic tokens và mô hình triển khai.

Đã cập nhật Tháng 12 09, 2025

Thiết kế API Màu sắc: REST Endpoints cho Dữ liệu Màu
Hướng dẫn Thực hành

Thiết kế API Màu sắc: REST Endpoints cho Dữ liệu Màu

Thiết kế một RESTful API màu sắc với các endpoints để chuyển đổi màu, tìm kiếm, kiểm tra độ tương phản và tạo bảng màu. Tìm hiểu thiết kế schema và các thực hành tốt nhất.

Đã cập nhật Tháng 12 06, 2025

Kỹ Thuật Màu SVG: Fill, Stroke và Gradients
Hướng dẫn Thực hành

Kỹ Thuật Màu SVG: Fill, Stroke và Gradients

Kỹ thuật màu SVG: fill và stroke, gradient tuyến tính và hướng tâm, currentColor và kiểu SVG dựa trên CSS cho phát triển web hiện đại.

Đã cập nhật Tháng 11 29, 2025

Quy Tắc 60-30-10: Tỷ Lệ Màu Sắc Trong Thiết Kế
Hướng dẫn Thực hành

Quy Tắc 60-30-10: Tỷ Lệ Màu Sắc Trong Thiết Kế

Làm chủ quy tắc màu 60-30-10. Cách màu chủ đạo, phụ và điểm nhấn phối hợp, ví dụ thực tế, hex codes và mẹo phá vỡ quy tắc.

Đã cập nhật Tháng 11 24, 2025

Giải Thích Phân Tách Màu: Chuẩn Bị File Cho In Ấn
Hướng dẫn Thực hành

Giải Thích Phân Tách Màu: Chuẩn Bị File Cho In Ấn

Hiểu phân tách màu CMYK, bản màu spot color, trapping và dấu đăng ký. Chuẩn bị file sẵn sàng in với phân tách màu chính xác.

Đã cập nhật Tháng 11 21, 2025

HSL vs HSV: Nên Dùng Mô Hình Màu Nào?
Hướng dẫn Thực hành

HSL vs HSV: Nên Dùng Mô Hình Màu Nào?

Hiểu sự khác biệt giữa mô hình màu HSL và HSV, khi nào mỗi loại phù hợp cho phát triển web hoặc color pickers và cách cả hai so sánh với hàm màu CSS.

Đã cập nhật Tháng 11 19, 2025

Hệ Thống Màu Theo Ngữ Nghĩa: Đặt Tên Màu Theo Mục Đích, Không Phải Màu Sắc
Hướng dẫn Thực hành

Hệ Thống Màu Theo Ngữ Nghĩa: Đặt Tên Màu Theo Mục Đích, Không Phải Màu Sắc

Hệ thống màu ngữ nghĩa đặt tên theo mục đích (thành công, cảnh báo, lỗi). Kiến trúc token và triển khai trong CSS và Tailwind.

Đã cập nhật Tháng 11 14, 2025

CSS Relative Color Syntax: Chuyển Đổi Màu Bất Kỳ Một Cách Động
Hướng dẫn Thực hành

CSS Relative Color Syntax: Chuyển Đổi Màu Bất Kỳ Một Cách Động

Làm chủ CSS relative color syntax để chuyển đổi màu động. Điều chỉnh hue, saturation, lightness và kênh alpha trực tiếp trong stylesheet.

Đã cập nhật Tháng 11 10, 2025

Thiết Kế Cho High Contrast Mode: Windows, macOS và Web
Hướng dẫn Thực hành

Thiết Kế Cho High Contrast Mode: Windows, macOS và Web

Thiết kế cho high contrast mode trên Windows, macOS và web. CSS forced-colors, màu hệ thống, chiến lược kiểm tra và lỗi cần tránh.

Đã cập nhật Tháng 11 06, 2025

Hiểu Mã Màu Hex: Hướng Dẫn Đầy Đủ
Hướng dẫn Thực hành

Hiểu Mã Màu Hex: Hướng Dẫn Đầy Đủ

Làm chủ mã hex từ nền tảng. #RRGGBB có nghĩa gì, cách đọc hex, shorthand, alpha transparency và chuyển đổi giữa các định dạng màu.

Đã cập nhật Tháng 10 29, 2025

Màu Sắc Trong Nghệ Thuật Generative: Thuật Toán Cho Bảng Màu Đẹp
Hướng dẫn Thực hành

Màu Sắc Trong Nghệ Thuật Generative: Thuật Toán Cho Bảng Màu Đẹp

Tạo màu sắc đẹp trong nghệ thuật generative với xoắn ốc HSL, bảng màu dựa trên noise, lấy mẫu tỷ lệ vàng và thuật toán màu p5.js cho thẩm mỹ thủ tục.

Đã cập nhật Tháng 10 26, 2025

Theming Màu Động Trong React: Vượt Ra Ngoài CSS Variables
Hướng dẫn Thực hành

Theming Màu Động Trong React: Vượt Ra Ngoài CSS Variables

Triển khai theming màu động trong React bằng CSS variables, context providers và Tailwind CSS. Xây dựng theme tùy chỉnh bởi người dùng với tạo màu tại runtime.

Đã cập nhật Tháng 10 23, 2025

Hệ Thống Đối Chiếu Màu Pantone: Hướng Dẫn Cho Nhà Thiết Kế
Hướng dẫn Thực hành

Hệ Thống Đối Chiếu Màu Pantone: Hướng Dẫn Cho Nhà Thiết Kế

Tìm hiểu cách Hệ thống Đối chiếu Màu Pantone hoạt động, sự khác biệt giữa sách phủ bóng và không phủ bóng, màu chuyên biệt so với màu quy trình, và giới hạn của việc chuyển đổi Pantone sang hex.

Đã cập nhật Tháng 10 19, 2025

Khả Năng Tiếp Cận Vượt Ra Ngoài Độ Tương Phản: Màu Sắc trong Thiết Kế Bao Hàm
Hướng dẫn Thực hành

Khả Năng Tiếp Cận Vượt Ra Ngoài Độ Tương Phản: Màu Sắc trong Thiết Kế Bao Hàm

Khả năng tiếp cận màu sắc vượt xa tỷ lệ tương phản. Tìm hiểu nguyên tắc 'không chỉ bằng màu sắc' của WCAG, chỉ số tiêu điểm, trạng thái lỗi và các mẫu thân thiện với người mù màu.

Đã cập nhật Tháng 10 17, 2025

Màu Sắc In Lụa: Hướng Dẫn Cho Nhà Thiết Kế
Hướng dẫn Thực hành

Màu Sắc In Lụa: Hướng Dẫn Cho Nhà Thiết Kế

Làm chủ kỹ thuật màu in lụa bao gồm phân tách màu, màn halftone, mực spot color và chuẩn bị thiết kế cho vật liệu in lụa.

Đã cập nhật Tháng 10 14, 2025

Nội Suy Màu Sắc Trong CSS: Tại Sao OKLCH Thắng
Hướng dẫn Thực hành

Nội Suy Màu Sắc Trong CSS: Tại Sao OKLCH Thắng

Nội suy màu CSS quyết định cách gradients và color-mix() pha trộn. OKLCH cho kết quả đều nhận thức trong khi RGB và HSL thất bại.

Đã cập nhật Tháng 10 12, 2025

Danh Sách Kiểm Tra Khả Năng Tiếp Cận Màu Sắc Cho Lập Trình Viên Web
Hướng dẫn Thực hành

Danh Sách Kiểm Tra Khả Năng Tiếp Cận Màu Sắc Cho Lập Trình Viên Web

Danh sách kiểm tra tiếp cận màu cho lập trình viên web: tỷ lệ tương phản WCAG, phụ thuộc màu, chỉ thị focus, công cụ kiểm tra và tự động hóa.

Đã cập nhật Tháng 10 07, 2025

Xử Lý Màu Sắc Với JavaScript: Thư Viện và Kỹ Thuật
Hướng dẫn Thực hành

Xử Lý Màu Sắc Với JavaScript: Thư Viện và Kỹ Thuật

Làm chủ xử lý màu JavaScript với chroma.js, culori và tinycolor2. Phân tích, chuyển đổi và tạo màu theo chương trình cho ứng dụng web.

Đã cập nhật Tháng 10 02, 2025

Màu Sắc Trong Hiệu Ứng Web: GSAP, Framer Motion và CSS
Hướng dẫn Thực hành

Màu Sắc Trong Hiệu Ứng Web: GSAP, Framer Motion và CSS

Làm chủ hiệu ứng màu sắc trong CSS transitions, GSAP và Framer Motion. Tìm hiểu nội suy OKLCH, kỹ thuật keyframe và tối ưu hóa hiệu suất.

Đã cập nhật Tháng 9 29, 2025

Spot Colors vs Process Colors: Hướng Dẫn Màu In Ấn
Hướng dẫn Thực hành

Spot Colors vs Process Colors: Hướng Dẫn Màu In Ấn

Sự khác biệt giữa spot colors và CMYK process colors, khi nào dùng mỗi loại và cách chuẩn bị file đúng cho từng phương pháp in.

Đã cập nhật Tháng 9 27, 2025

Thuật toán Độ tương phản Màu: WCAG 2 so với APCA
Hướng dẫn Thực hành

Thuật toán Độ tương phản Màu: WCAG 2 so với APCA

Hiểu cách WCAG 2 luminance tương đối và APCA (Thuật toán Độ tương phản Tri giác Nâng cao) tính toán độ tương phản. So sánh kết quả và tìm hiểu cái nào dùng cho thiết kế có thể tiếp cận.

Đã cập nhật Tháng 9 25, 2025

Hệ Thống Màu SwiftUI: Xây Dựng Bảng Màu Thích Ứng
Hướng dẫn Thực hành

Hệ Thống Màu SwiftUI: Xây Dựng Bảng Màu Thích Ứng

Xây dựng bảng màu thích ứng trong SwiftUI. Tìm hiểu Color vs UIColor, màu asset catalog, màu dark mode động và mô hình màu tiếp cận.

Đã cập nhật Tháng 9 19, 2025

Design Tokens Cho Màu Sắc: Từ Figma Đến Code
Hướng dẫn Thực hành

Design Tokens Cho Màu Sắc: Từ Figma Đến Code

Triển khai color design tokens từ Figma đến code sản xuất bằng Style Dictionary. Tìm hiểu đặt tên token, chuyển đổi và xuất đa nền tảng.

Đã cập nhật Tháng 9 12, 2025

Quy Ước Đặt Tên Màu Trong CSS và Hệ Thống Thiết Kế
Hướng dẫn Thực hành

Quy Ước Đặt Tên Màu Trong CSS và Hệ Thống Thiết Kế

Màu được đặt tên trong CSS, ngữ nghĩa với custom properties, thang Tailwind và thực hành tốt nhất quản lý tên màu trong design systems.

Đã cập nhật Tháng 9 06, 2025

Màu Sắc Trong Thiết Kế Email: Những Gì Hoạt Động Trên Các Email Client
Hướng dẫn Thực hành

Màu Sắc Trong Thiết Kế Email: Những Gì Hoạt Động Trên Các Email Client

Làm chủ thiết kế màu email trên Outlook, Gmail và Apple Mail. Tìm hiểu chiến lược an toàn, sửa lỗi dark mode và yêu cầu inline style cho kết quả nhất quán.

Đã cập nhật Tháng 9 05, 2025

Tạo Chủ Đề Màu Sắc Trong React: CSS Variables và Context
Hướng dẫn Thực hành

Tạo Chủ Đề Màu Sắc Trong React: CSS Variables và Context

Xây dựng chủ đề màu sắc có thể mở rộng trong React bằng CSS custom properties và Context API. Bao gồm kiến trúc theme, Tailwind CSS themes và chiến lược đa thương hiệu.

Đã cập nhật Tháng 9 03, 2025

Hiệu Suất Màu Web: Gradients, Shadows và Filters
Hướng dẫn Thực hành

Hiệu Suất Màu Web: Gradients, Shadows và Filters

Tối ưu hiệu suất màu web. Tìm hiểu gradients, box-shadows, CSS filters và backdrop-filter ảnh hưởng đến hiệu suất kết xuất và cách GPU-accelerate chúng.

Đã cập nhật Tháng 9 01, 2025

Màu Sắc Responsive: Thích Ứng Màu Cho Các Màn Hình Khác Nhau
Hướng dẫn Thực hành

Màu Sắc Responsive: Thích Ứng Màu Cho Các Màn Hình Khác Nhau

Tìm hiểu cách màu sắc thay đổi qua các màn hình, gamut màu và dark mode. Sử dụng CSS media queries và custom properties để xây dựng hệ thống màu responsive cho bất kỳ màn hình nào.

Đã cập nhật Tháng 8 31, 2025

Tổ Hợp Màu Biển Hiệu Cho Khả Năng Nhìn Thấy Tối Đa
Hướng dẫn Thực hành

Tổ Hợp Màu Biển Hiệu Cho Khả Năng Nhìn Thấy Tối Đa

Tổ hợp màu biển hiệu có khả năng nhìn thấy nhất, đọc từ xa, yêu cầu ADA, LED và cách vật liệu và ánh sáng ảnh hưởng đến màu biển.

Đã cập nhật Tháng 8 30, 2025

Cách Chọn Màu Thương Hiệu: Hướng Dẫn Từng Bước
Hướng dẫn Thực hành

Cách Chọn Màu Thương Hiệu: Hướng Dẫn Từng Bước

Hướng dẫn từng bước chọn màu thương hiệu. Nghiên cứu, phân tích ngành, tâm lý màu, kiểm tra kết hợp và tài liệu hướng dẫn thương hiệu.

Đã cập nhật Tháng 8 29, 2025