Bảng Mã Màu CSS Đầy Đủ & Color Picker Online Tiện Lợi
Bạn đang loay hoay tìm kiếm mã màu cho dự án của mình? Một bảng mã màu CSS đầy đủ và chính xác là ‘bảo bối’ không thể thiếu của mọi lập trình viên và nhà thiết kế web. Bài viết này của Da I Kin sẽ cung cấp cho bạn tất cả mọi thứ, từ công cụ chọn màu trực quan đến danh sách chi tiết các mã màu thông dụng. Cùng Da I Kin tìm hiểu ngay để việc phối màu cho website trở nên dễ dàng hơn bao giờ hết nhé!
Công Cụ Chọn Màu CSS Online
Thay vì dò dẫm trong một danh sách dài, đôi khi bạn chỉ muốn chọn một màu sắc trực quan nhất. Đây chính là lúc công cụ Color Picker phát huy tác dụng. Nó giống như một bảng pha màu kỹ thuật số ngay trên màn hình của bạn.
Công cụ này cho phép bạn tự do di chuyển chuột trên một dải màu quang phổ. Bạn có thể chọn bất kỳ sắc độ nào mình muốn. Ngay lập tức, các mã màu tương ứng như mã màu HEX, bảng màu RGB hay HSL sẽ tự động hiển thị. Việc của bạn chỉ đơn giản là nhấn nút sao chép và dán vào file CSS của mình. Thật tiện lợi phải không nào?
Việc lấy mã màu online qua công cụ này giúp tiết kiệm rất nhiều thời gian và đảm bảo độ chính xác tuyệt đối. Bạn không cần phải nhớ hàng trăm mã màu khác nhau. Hãy để công cụ thông minh này làm trợ thủ đắc lực cho bạn.
Bảng Mã Màu CSS Đầy Đủ (Tên, HEX, RGB)
Dưới đây là một bảng mã màu CSS đầy đủ và chi tiết mà Da I Kin đã tổng hợp. Chúng tôi đã phân loại các màu sắc theo từng nhóm để bạn dễ dàng tra cứu và lựa chọn. Bạn có thể tìm thấy tên màu tiếng Anh (CSS Color Names), mã HEX và mã RGB tương ứng.
Các màu CSS thông dụng
Đây là những màu sắc cơ bản và được sử dụng nhiều nhất trong thiết kế web. Hầu hết các dự án đều không thể thiếu những màu này.
| Tên màu (Color Name) | Mã HEX | Mã RGB |
| Black | #000000 |
rgb(0, 0, 0) |
| White | #FFFFFF |
rgb(255, 255, 255) |
| Red | #FF0000 |
rgb(255, 0, 0) |
| Green | #008000 |
rgb(0, 128, 0) |
| Blue | #0000FF |
rgb(0, 0, 255) |
| Yellow | #FFFF00 |
rgb(255, 255, 0) |
| Orange | #FFA500 |
rgb(255, 165, 0) |
| Purple | #800080 |
rgb(128, 0, 128) |
Bảng mã màu Đỏ (Red)
Các sắc thái của màu đỏ thường thể hiện sự năng lượng, đam mê và cảnh báo.
| Tên màu (Color Name) | Mã HEX | Mã RGB |
| IndianRed | #CD5C5C |
rgb(205, 92, 92) |
| LightCoral | #F08080 |
rgb(240, 128, 128) |
| Salmon | #FA8072 |
rgb(250, 128, 114) |
| Crimson | #DC143C |
rgb(220, 20, 60) |
| FireBrick | #B22222 |
rgb(178, 34, 34) |
| DarkRed | #8B0000 |
rgb(139, 0, 0) |
Bảng mã màu Xanh Lá (Green)
Màu xanh lá mang lại cảm giác tươi mới, tăng trưởng và yên bình.
| Tên màu (Color Name) | Mã HEX | Mã RGB |
| LawnGreen | #7CFC00 |
rgb(124, 252, 0) |
| Lime | #00FF00 |
rgb(0, 255, 0) |
| LimeGreen | #32CD32 |
rgb(50, 205, 50) |
| SpringGreen | #00FF7F |
rgb(0, 255, 127) |
| MediumSeaGreen | #3CB371 |
rgb(60, 179, 113) |
| ForestGreen | #228B22 |
rgb(34, 139, 34) |
Bảng mã màu Xanh Dương (Blue)
Màu xanh dương gợi lên sự tin cậy, chuyên nghiệp và bình tĩnh.
| Tên màu (Color Name) | Mã HEX | Mã RGB |
| LightBlue | #ADD8E6 |
rgb(173, 216, 230) |
| SkyBlue | #87CEEB |
rgb(135, 206, 235) |
| DodgerBlue | #1E90FF |
rgb(30, 144, 255) |
| RoyalBlue | #4169E1 |
rgb(65, 105, 225) |
| Navy | #000080 |
rgb(0, 0, 128) |
| MidnightBlue | #191970 |
rgb(25, 25, 112) |
Bảng mã màu Vàng & Cam (Yellow & Orange)
Nhóm màu này mang lại sự ấm áp, vui vẻ và sáng tạo.
| Tên màu (Color Name) | Mã HEX | Mã RGB |
| Gold | #FFD700 |
rgb(255, 215, 0) |
| LightYellow | #FFFFE0 |
rgb(255, 255, 224) |
| LemonChiffon | #FFFACD |
rgb(255, 250, 205) |
| Coral | #FF7F50 |
rgb(255, 127, 80) |
| Tomato | #FF6347 |
rgb(255, 99, 71) |
| DarkOrange | #FF8C00 |
rgb(255, 140, 0) |
Bảng mã màu Tím (Purple)
Màu tím thường gắn liền với sự sang trọng, hoàng gia và trí tuệ.
| Tên màu (Color Name) | Mã HEX | Mã RGB |
| Lavender | #E6E6FA |
rgb(230, 230, 250) |
| Violet | #EE82EE |
rgb(238, 130, 238) |
| Fuchsia / Magenta | #FF00FF |
rgb(255, 0, 255) |
| MediumOrchid | #BA55D3 |
rgb(186, 85, 211) |
| DarkViolet | #9400D3 |
rgb(148, 0, 211) |
| Indigo | #4B0082 |
rgb(75, 0, 130) |
Bảng mã màu Xám & Đen (Gray & Black)
Đây là các màu trung tính, rất quan trọng trong việc tạo ra sự cân bằng và tương phản cho thiết kế.
| Tên màu (Color Name) | Mã HEX | Mã RGB |
| Gainsboro | #DCDCDC |
rgb(220, 220, 220) |
| LightGray | #D3D3D3 |
rgb(211, 211, 211) |
| Silver | #C0C0C0 |
rgb(192, 192, 192) |
| Gray | #808080 |
rgb(128, 128, 128) |
| DimGray | #696969 |
rgb(105, 105, 105) |
| Black | #000000 |
rgb(0, 0, 0) |
Các Hệ Màu Và Cú Pháp Sử Dụng Trong CSS
Trong CSS, có nhiều cách để bạn định nghĩa một màu sắc. Việc hiểu rõ từng hệ màu sẽ giúp bạn linh hoạt hơn trong quá trình code. Hãy cùng Da I Kin tìm hiểu các hệ màu phổ biến nhất nhé.
Tên màu định sẵn
Đây là cách đơn giản nhất. CSS cung cấp sẵn một danh sách gồm 140 tên màu chuẩn bằng tiếng Anh. Bạn chỉ cần gọi đúng tên là có thể sử dụng. Rất dễ nhớ và tiện lợi cho các màu cơ bản.
- Ví dụ:
color: red;hoặcbackground-color: steelblue;
Mã màu HEX
HEX là viết tắt của Hexadecimal. Đây là hệ màu phổ biến nhất trong thiết kế web. Mã HEX bắt đầu bằng dấu # và theo sau là 6 ký tự (bao gồm số từ 0-9 và chữ từ A-F).
- Cấu trúc:
#RRGGBB. Trong đó, RR đại diện cho màu đỏ (Red), GG cho xanh lá (Green), và BB cho xanh dương (Blue). - Dạng rút gọn: Nếu các cặp ký tự giống nhau, bạn có thể rút gọn thành 3 ký tự. Ví dụ,
#FF0000có thể viết thành#F00. - Ví dụ:
color: #336699;
Hệ màu RGB và RGBA
Bảng màu RGB là một hệ màu cộng, kết hợp từ 3 màu cơ bản: Đỏ (Red), Xanh lá (Green), và Xanh dương (Blue) để tạo ra các màu sắc khác. Mỗi màu có giá trị từ 0 đến 255.
- Cú pháp RGB:
rgb(red, green, blue). - Ví dụ:
color: rgb(255, 0, 0);sẽ cho ra màu đỏ tươi.
RGBA là phiên bản mở rộng của RGB. Chữ A cuối cùng đại diện cho Alpha, tức là độ trong suốt (opacity). Giá trị của Alpha chạy từ 0.0 (trong suốt hoàn toàn) đến 1.0 (không trong suốt).
- Cú pháp RGBA:
rgba(red, green, blue, alpha). - Ví dụ:
background-color: rgba(0, 0, 255, 0.5);sẽ tạo ra một lớp nền màu xanh dương trong suốt 50%.
Hệ màu HSL và HSLA
HSL là một cách biểu diễn màu sắc khác, dựa trên ba thành phần:
- Hue (Tông màu): Giá trị là một góc trên vòng tròn màu, từ 0 đến 360. Ví dụ 0 là đỏ, 120 là xanh lá, 240 là xanh dương.
- Saturation (Độ bão hòa): Giá trị phần trăm, từ 0% (xám) đến 100% (màu đầy đủ).
- Lightness (Độ sáng): Giá trị phần trăm, từ 0% (đen) đến 100% (trắng).
HSL rất hữu ích khi bạn muốn tạo ra các biến thể sáng/tối hoặc bão hòa/nhạt của cùng một màu. Tương tự RGBA, HSLA thêm vào kênh Alpha để điều chỉnh độ trong suốt.
- Ví dụ:
color: hsl(120, 100%, 50%);là màu xanh lá cây.
Hướng Dẫn Cách Áp Dụng Mã Màu Vào CSS
Biết mã màu rồi, nhưng làm thế nào để áp dụng chúng vào website? Phần này cực kỳ đơn giản thôi. Da I Kin sẽ hướng dẫn bạn hai thuộc tính cơ bản nhất: đổi màu chữ và đổi màu nền.
CSS màu chữ là gì? Làm thế nào để đổi màu chữ trong CSS?
Để thay đổi màu sắc cho văn bản, chúng ta sử dụng thuộc tính color. Bạn có thể áp dụng thuộc tính này cho bất kỳ thẻ HTML nào chứa chữ, ví dụ như p, h1, h2, span…
Giả sử bạn muốn đổi màu tất cả các thẻ p (đoạn văn) thành màu xanh navy, bạn có thể viết CSS như sau:
p {
color: #000080; /* Sử dụng mã HEX */
}
Hoặc bạn muốn đổi màu một tiêu đề h2 sang màu đỏ bằng mã RGB:
h2 {
color: rgb(255, 0, 0); /* Sử dụng mã RGB */
}
Cách đổi màu nền với background-color
Để thay đổi màu nền cho một phần tử, bạn hãy dùng thuộc tính background-color. Thuộc tính này có thể áp dụng cho body (toàn trang), div, section, button và nhiều phần tử khác.
Ví dụ, để đổi màu nền của toàn bộ trang web thành màu xám nhạt:
body {
background-color: #f2f2f2;
}
Làm thế nào để lấy mã màu trong CSS từ một website?
Bạn vô tình lướt thấy một trang web có màu sắc rất đẹp và muốn sử dụng nó? Có một cách rất nhanh để lấy mã màu online trực tiếp từ trình duyệt.
- Trên trang web đó, nhấp chuột phải vào vùng có màu bạn thích và chọn Inspect (Kiểm tra).
- Cửa sổ công cụ cho nhà phát triển (DevTools) sẽ hiện ra.
- Ở tab Elements, hãy tìm đến phần tử HTML tương ứng. Bên tab Styles, bạn sẽ thấy các thuộc tính CSS của nó.
- Tìm thuộc tính
colorhoặcbackground-color. Kế bên mã màu thường có một ô vuông màu nhỏ. Nhấp vào đó, một công cụ chọn màu sẽ hiện ra, cho phép bạn xem và sao chép mã màu một cách dễ dàng.
Lời Kết
Việc sử dụng màu sắc một cách hiệu quả là yếu tố then chốt tạo nên một trang web đẹp mắt và chuyên nghiệp. Hi vọng rằng với bảng mã màu CSS đầy đủ và các hướng dẫn chi tiết từ Da I Kin, bạn đã có đủ công cụ để biến những ý tưởng sáng tạo của mình thành hiện thực.
Bảng màu này đã đủ dùng cho dự án của bạn chưa? Hãy chia sẻ màu sắc bạn yêu thích nhất ở phần bình luận nhé!
Nếu bạn đang tìm kiếm một đơn vị thiết kế website chuyên nghiệp để hiện thực hóa những ý tưởng màu sắc này, Da I Kin luôn sẵn sàng đồng hành. Liên hệ với chúng tôi để được tư vấn chi tiết!