Tìm tên màu CSS/HTML từ mã hex
R
255
G
107
B
107
Coral
Màu gần nhất (34 units)
Công cụ Color Name Finder của Tấn Phát Digital giúp bạn tìm tên màu CSS/HTML chuẩn từ bất kỳ mã hex nào. Database chứa hơn 140 tên màu CSS được định nghĩa trong W3C specification, từ 'aliceblue' đến 'yellowgreen'. Thuật toán tìm kiếm thông minh sử dụng Euclidean distance trong không gian RGB để tìm màu gần nhất nếu không có exact match. Hiển thị đồng thời CSS name, mã HEX, và giá trị RGB. Color picker trực quan cho phép chọn màu bằng cách click hoặc nhập hex code trực tiếp. Copy nhanh bất kỳ định dạng nào với một click. Công cụ hoàn toàn miễn phí, xử lý offline trên trình duyệt, không cần đăng ký.
Sử dụng tên màu CSS (named colors) mang lại nhiều lợi ích trong web development. Đầu tiên, code trở nên dễ đọc và maintain hơn - 'color: coral' rõ ràng hơn nhiều so với 'color: #FF7F50'. Khi review code hoặc debug, bạn có thể hình dung ngay màu sắc mà không cần tra cứu. Thứ hai, tên màu dễ nhớ hơn mã hex, giúp tăng tốc coding khi bạn đã quen thuộc với các tên phổ biến. Thứ ba, trong team collaboration, tên màu giúp communication rõ ràng hơn - 'dùng màu tomato cho buttons' dễ hiểu hơn 'dùng #FF6347'. Tuy nhiên, named colors có giới hạn (chỉ 140 màu), nên với brand colors hoặc màu custom, bạn vẫn cần dùng hex/rgb. Công cụ này giúp bạn tìm tên màu gần nhất với màu đang dùng.
CSS định nghĩa 140 tên màu chuẩn (CSS Color Level 4), được chia thành các nhóm: Basic colors (16 màu từ HTML 4.0): black, white, red, green, blue, yellow, cyan, magenta, gray, maroon, olive, navy, purple, teal, silver, lime. Extended colors (124 màu thêm): bao gồm các biến thể như lightblue, darkblue, skyblue, steelblue, và các màu đặc biệt như coral, salmon, khaki, lavender, orchid, plum, tomato, wheat, v.v. Tất cả tên màu đều case-insensitive (Coral = coral = CORAL).
Công cụ sử dụng Euclidean distance trong không gian RGB 3D để tìm màu gần nhất. Công thức: distance = √[(R1-R2)² + (G1-G2)² + (B1-B2)²]. Màu có distance = 0 là exact match. Distance càng nhỏ, màu càng giống. Tuy nhiên, Euclidean distance trong RGB không hoàn toàn phản ánh cảm nhận màu của mắt người - hai màu có distance nhỏ trong RGB có thể trông khác nhau đáng kể. Để so sánh màu chính xác hơn theo perception, có thể dùng Delta E trong không gian CIELAB.
Dùng named colors khi: màu là một trong 140 màu chuẩn hoặc rất gần, code cần dễ đọc và self-documenting, làm việc với team và cần communication rõ ràng. Dùng hex/rgb khi: cần màu chính xác theo brand guidelines, màu không có trong danh sách named colors, cần fine-tune màu sắc chính xác, làm việc với design tools export hex codes. Trong thực tế, nhiều developers dùng kết hợp: named colors cho common colors (white, black, gray) và hex cho brand/custom colors.
CSS Color Level 4 định nghĩa 140 tên màu chuẩn. Bao gồm 16 basic colors từ HTML 4.0 (black, white, red, green, blue, yellow, cyan, magenta, gray, maroon, olive, navy, purple, teal, silver, lime) và 124 extended colors. Tất cả tên màu đều case-insensitive và được hỗ trợ bởi mọi trình duyệt hiện đại.
Distance là khoảng cách Euclidean giữa màu bạn chọn và màu CSS gần nhất trong không gian RGB. Distance = 0 nghĩa là exact match (khớp chính xác). Distance càng lớn, màu càng khác biệt. Thông thường, distance dưới 30 là màu rất gần, 30-60 là gần, trên 60 là khác biệt đáng kể.
Vì CSS chỉ định nghĩa 140 tên màu, trong khi có hàng triệu màu có thể biểu diễn bằng hex (16.7 triệu màu với 24-bit color). Nếu màu bạn chọn không nằm trong 140 màu này, công cụ sẽ tìm màu gần nhất. Bạn có thể dùng tên màu gần nhất hoặc giữ nguyên mã hex.
Có, tất cả 140 tên màu CSS được hỗ trợ bởi mọi trình duyệt hiện đại bao gồm Chrome, Firefox, Safari, Edge, và cả IE11. Đây là tiêu chuẩn W3C đã được implement từ lâu.
Bắt đầu với các màu phổ biến: red, blue, green, yellow, orange, purple, pink, gray, black, white. Sau đó học các biến thể: light/dark prefix (lightblue, darkgreen), và các màu đặc biệt hay dùng như coral, salmon, teal, navy, maroon. Sử dụng công cụ này thường xuyên sẽ giúp bạn quen dần với các tên màu.
CSS không cho phép định nghĩa custom color names. Tuy nhiên, bạn có thể dùng CSS Custom Properties (CSS Variables) để tạo 'named colors' riêng: :root { --brand-primary: #FF6B6B; } và sử dụng: color: var(--brand-primary). Đây là best practice cho brand colors.
Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.
