Bảng code màu đầy đủ – Bảng mã màu HTML, CSS, RGB, CMYK chuẩn

Bảng mã màu là tập hợp các mã màu chuẩn được sử dụng trong HTML, CSS, RGB và CMYK để định nghĩa màu sắc chính xác trên web và các ấn phẩm in. Việc nắm rõ bảng màu giúp nhà thiết kế, lập trình viên và marketer dễ dàng chọn màu phù hợp, tạo trải nghiệm trực quan, đồng nhất và chuyên nghiệp. Trong bài viết này, mình sẽ tổng hợp bảng màu sắc chuẩn, kèm hướng dẫn cách sử dụng chuẩn cho từng nền tảng để bạn dễ tra mã màu và áp dụng ngay.

Giới thiệu bảng mã màu là gì?

Bảng mã màu là công cụ thiết yếu cho các nhà thiết kế website, đồ họa và in ấn. Nó giúp bạn xác định và sử dụng các màu sắc một cách chính xác và nhất quán trên các nền tảng khác nhau.

Bảng mã màu bao gồm các thông tin sau:

• Tên màu: Tên gọi chung của màu sắc bằng tiếng Việt và tiếng Anh.
• Mã màu HTML: Dùng để hiển thị màu sắc trên trang web.
• Mã màu CSS: Dùng để định dạng màu sắc trong CSS.
• Giá trị RGB: Biểu diễn màu sắc bằng ba thành phần: Red (đỏ), Green (xanh lá cây) và Blue (xanh lam). Mỗi thành phần có giá trị từ 0 đến 255.
• Giá trị CMYK: Biểu diễn màu sắc bằng bốn thành phần: Cyan (lục lam), Magenta (đỏ tươi), Yellow (vàng) và Black (đen). Mỗi thành phần có giá trị phần trăm từ 0% đến 100%.

Ngoài ra, để website của bạn hiển thị màu sắc một cách hoàn hảo, thu hút người dùng và mang lại trải nghiệm tốt nhất, bạn cũng nên cần một nền tảng hạ tầng lưu trữ mạnh mẽ và tốc độ cao. Bạn có thể tham khảo Vietnix với đa dạng giải pháp hosting, VPS chất lượng cao, đáp ứng mọi nhu cầu của website.

Bảng mã màu HTML, CSS, RGB cơ bản

Vietnix sẽ tổng hợp cho bạn bảng mã màu đầy đủ. Bao gồm có mã màu áp dụng cho code HTML, CSS và mã màu RGB, dành cho những nhà thiết kế website, lập trình viên, designer,… Chắc chắn các code màu sẽ rất cần thiết và hỗ trợ nhanh chóng hơn trong công việc. Với bảng mã này, bạn chỉ việc copy mã màu về trực tiếp và sử dụng.

Bảng mã màu phổ biến, thường dùng

Dưới đây là bảng các màu phổ biến dạng mã HEX-16 được sử dụng phổ biến nhất.

#EEEEEE

#DDDDDD

#CCCCCC

#BBBBBB

#AAAAAA

#999999

#888888

#777777

#666666

#555555

#444444

#333333

#222222

#111111

#000000

#FF0000

#EE0000

#DD0000

#CC0000

#BB0000

#AA0000

#990000

#880000

#770000

#660000

#550000

#440000

#330000

#220000

#110000

#FFFFFF

#FFFFCC

#FFFF99

#FFFF66

#FFFF33

#FFFF00

#CCFFFF

#CCFFCC

#CCFF99

#CCFF66

#CCFF33

#CCFF00

#99FFFF

#99FFCC

#99FF99

#99FF66

#99FF33

#99FF00

#66FFFF

#66FFCC

#66FF99

#66FF66

#66FF33

#66FF00

#33FFFF

#33FFCC

#33FF99

#33FF66

#33FF33

#33FF00

#00FFFF

#00FFCC

#00FF99

#00FF66

#00FF33

#00FF00

#FFCCFF

#FFCCCC

#FFCC99

#FFCC66

#FFCC33

#FFCC00

#CCCCFF

#CCCCCC

#CCCC99

#CCCC66

#CCCC33

#CCCC00

#99CCFF

#99CCCC

#99CC99

#99CC66

#99CC33

#99CC00

#66CCFF

#66CCCC

#66CC99

#66CC66

#66CC33

#66CC00

#33CCFF

#33CCCC

#33CC99

#33CC66

#33CC33

#33CC00

#00CCFF

#00CCCC

#33CC66

#33CC33

#00CC99

#00CC66

#00CC33

#00CC00

#FF99FF

#FF99CC

#FF9999

#FF9966

#FF9933

#FF9900

#CC99FF

#CC99CC

#CC9999

#CC9966

#CC9933

#CC9900

#9999FF

#9999CC

#999999

#999966

#999933

#999900

#6699FF

#6699CC

#669999

#669966

#669933

#669900

#3399FF

#3399CC

#339999

#339966

#339933

#339900

#0099FF

#0099CC

#009999

#009966

#009933

#009900

#FF66FF

#FF66CC

#FF6699

#FF6666

#FF6633

#FF6600

#CC66FF

#CC66CC

#CC6699

#CC6666

#CC6633

#CC6600

#9966FF

#9966CC

#996699

#996666

#996633

#996600

#6666FF

#6666CC

#666699

#666666

#666633

#666600

#3366FF

#3366CC

#336699

#336666

#336633

#336600

#0066FF

#0066CC

#006699

#006666

#006633

#006600

#FF33FF

#FF33CC

#FF3399

#FF3366

#FF3333

#FF3300

#CC33FF

#CC33CC

#CC3399

#CC3366

#CC3333

#CC3300

#9933FF

#9933CC

#993399

#993366

#993333

#993300

#6633FF

#6633CC

#663399

#663366

#663333

#663300

#3333FF

#3333CC

#333399

#333366

#333333

#333300

#0033FF

#FF3333

#0033CC

#003399

#003366

#003333

#003300

#FF00FF

#FF00CC

#FF0099

#FF0066

#FF0033

#FF0000

#CC00FF

#CC00CC

#CC0099

#CC0066

#CC0033

#CC0000

#9900FF

#9900CC

#990099

#990066

#990033

#990000

#6600FF

#6600CC

#660099

#660066

#660033

#660000

#3300FF

#3300CC

#330099

#330066

#330033

#330000

#0000FF

#0000CC

#000099

#000066

#000033

#00FF00

#00EE00

#00DD00

#00CC00

#00BB00

#00AA00

#009900

#008800

#007700

#006600

#005500

#004400

#003300

#002200

#001100

#0000FF

#0000EE

#0000DD

#0000CC

#0000BB

#0000AA

#000099

#000088

#000077

#000055

#000044

#000022

#000011

Bảng màu RGB đầy đủ trong thiết kế

Tiếp theo là bảng mã màu RGB tổng hợp theo dải màu chủ đạo.

Bảng mã màu RGB đỏ (Red colors)

Color

HTML / CSS - Color Name

Decimal Code -(R,G,B)

lightsalmon

(255,160,122)

salmon

(250,128,114)

darksalmon

(233,150,122)

lightcoral

(240,128,128)

indianred

(205,92,92)

crimson

(220,20,60)

firebrick

(178,34,34)

red

(255,0,0)

dark red

(139,0,0)

Bảng mã màu RGB cam (Orange colors)

Bảng mã màu RGB vàng (Yellow color)

Bảng mã màu RGB xanh lá (Green colors)

Bảng mã màu RGB xanh lục (Cyan colors)

Bảng mã màu RGB xanh dương (Blue colors) - Mã màu xanh dương

Bảng mã màu RGB tím (Purple colors)

Pink colors

Bảng mã màu RGB trắng (White colors)

Bảng mã màu RGB xám (Gray colors)

Bảng mã màu RGB nâu (Brown colors)

Bảng màu CMYK dùng cho in ấn

CMYK là bảng mã màu được sử dụng nhiều trong ngành in ấn. CMYK còn có tên gọi khác four-color process” (quy trình bốn màu). Hệ màu CMYK gồm có:

• C: Cyan (màu lục lam).
• M: Magenta (màu đỏ tươi hay hồng tươi).
• Y: Yellow (màu vàng).
• K: Keyline (màu đen).

Dưới đây là bảng mã màu CMYK thông dụng song song với mã màu RGB vã mã HEX-16 tương ứng.

Tổng hợp mã màu icon mạng xã hội phổ hiện nay

Bảng dưới đây chỉ thể hiện những màu cơ bản đại diện cho logo/icon của từng mạng xã hội, không bao gồm toàn bộ các biến thể màu. Ví dụ, biểu tượng của Facebook thường sử dụng đồng thời hai tông màu chính là #ffffff và #3b5998.

Trong thực tế thiết kế đồ họa và truyền thông hình ảnh, nhiều sản phẩm không chỉ dùng một màu đơn lẻ mà còn kết hợp nhiều tông màu để tạo hiệu ứng nổi bật. Trường hợp này được gọi là màu Gradient, tức là dải màu chuyển tiếp liên tục giữa các gam màu đã được lựa chọn.

Lời kết

Hiểu và nắm vững bảng code màu đầy đủ giúp bạn lựa chọn màu chính xác, phối hợp hài hòa và áp dụng hiệu quả trong thiết kế web, đồ họa hay in ấn. Từ các mã màu HTML, CSS, RGB đến CMYK, mỗi loại đều có vai trò riêng và hỗ trợ tối ưu cho từng mục đích sử dụng. Việc tra cứu nhanh, sử dụng đúng bảng màu không chỉ nâng cao tính thẩm mỹ mà còn đảm bảo tính chuyên nghiệp cho sản phẩm của bạn. Hãy áp dụng bảng màu chuẩn này để thiết kế hiệu quả, tiết kiệm thời gian và tạo ra trải nghiệm trực quan, đồng nhất cho người dùng.