HTML Color Codes

Trình Chọn Màu HTML cho các định dạng RGB HEX HSL

Dễ dàng lấy mã màu HTML CSS cho trang web của bạn bằng trình chọn màu, chuyển đổi định dạng màu giữa HEX, RGB, HSL, HSV.

Chọn Màu

Nhập giá trị màu

Hoặc sử dụng trình chọn HTML5

Màu Đã Chọn

Đỏ: 0
Xanh: 255
Xanh: 255
HUE (Độ): 180
Độ Sáng: 0.7
Alpha: 1
Hex: #00ffff
RGB: rgb(0, 255, 255)
HSL: hsl(180, 100%, 50%)
Nhóm Màu: Cyan
Chia sẻ:
Ví dụ về màu CSS3

<style>
  div {
    color: #00ffff;
    color: rgb(0, 255, 255);
    color: hsl(180, 100%, 50%);
  }
</style>
Phong cách tối nhất và sáng nhất

<style>
  .darken {
    color: rgb(0, 230, 230);
  }
  .lighten {
    color: rgb(25, 255, 255);
  }
</style>

Lấy màu từ hình ảnh

get pixel color from pic

Chọn Màu và tạo Bảng màu

select color and create palette

Mã Màu HTML là gì?

Mã màu HTML là cách để xác định màu sắc trong thiết kế web. Các mã này được sử dụng trong HTML và CSS để xác định màu sắc của các phần tử như văn bản, nền, viền và nhiều hơn nữa. Hiểu mã màu HTML là điều cần thiết để tạo ra các trang web hấp dẫn và nhất quán về mặt thị giác.

Ví dụ, màu đỏ có thể được nhận diện bằng các định dạng sau:

Các loại mã màu HTML


Mã Màu Hexadecimal:
  • Cách phổ biến nhất để xác định màu trong HTML và CSS là sử dụng mã màu hexadecimal (hex). Mã màu hex là sự kết hợp sáu chữ số của các số và chữ cái được xác định bởi sự pha trộn của các thành phần đỏ, xanh lá cây và xanh dương (RGB).
  • Định dạng: #RRGGBB
  • Ví dụ: #FF5733 đại diện cho một sắc cam.
  • Mỗi cặp chữ số tương ứng với cường độ của màu đỏ, xanh lá cây và xanh dương, tương ứng, trên thang điểm từ 00 (không có cường độ) đến FF (cường độ đầy đủ).
Mã Màu RGB:
  • Mã màu RGB xác định màu sắc dựa trên các thành phần đỏ, xanh lá cây và xanh dương của chúng.
  • Định dạng: rgb(đỏ, xanh lá cây, xanh dương)
  • Ví dụ: rgb(255, 87, 51) là tương đương RGB của #FF5733.
  • Mỗi thành phần (đỏ, xanh lá cây và xanh dương) được chỉ định là một số từ 0 đến 255
Mã Màu RGBA:
  • Tương tự như RGB, nhưng bao gồm một thành phần alpha cho độ mờ.
  • Định dạng: rgba(đỏ, xanh lá cây, xanh dương, alpha)
  • Ví dụ: rgba(255, 87, 51, 0.5) xác định cùng một màu với độ mờ 50%.
Mã Màu HSL:
  • HSL là viết tắt của Hue, Saturation và Lightness.
  • Định dạng: hsl(hue, saturation%, lightness%)
  • Ví dụ: hsl(9, 100%, 60%) là một cách khác để biểu thị màu #FF5733
  • Hue là độ trên bánh xe màu (từ 0 đến 360), độ bão hòa là phần trăm (0% là thang độ xám, 100% là màu đầy đủ), và độ sáng cũng là phần trăm (0% là màu đen, 100% là màu trắng).
Mã Màu HSLA:
  • Tương tự như HSL, nhưng bao gồm một thành phần alpha cho độ mờ.
  • Định dạng: hsla(hue, saturation%, lightness%, alpha)
  • Ví dụ: hsla(9, 100%, 60%, 0.5) xác định cùng một màu với độ mờ 50%.
Sử Dụng Mã Màu HTML:

Mã màu HTML có thể được sử dụng trong các thuộc tính CSS khác nhau để tạo kiểu cho các phần tử web. Ví dụ:

<style>
    .text-color {
        color: #FF5733;
    }
    .background-color {
        background-color: rgb(255, 87, 51);
    }
    .border-color {
        border: 2px solid hsl(9, 100%, 60%);
    }
</style>
<p class="text-color">This text is orange.</p>
<div class="background-color">This background is orange.</div>
<div class="border-color">This border is orange.</div>

Trong ví dụ này văn bản, nền và viền được tạo kiểu bằng các loại mã màu HTML khác nhau, tất cả đều biểu thị cùng một sắc thái cam.

Mã màu HTML là một khía cạnh cơ bản của thiết kế web, cho phép các nhà phát triển xác định và thao tác màu sắc chính xác. Bằng cách hiểu các mã màu hex, RGB, RGBA, HSL và HSLA, bạn có thể tạo ra các trang web trực quan và hấp dẫn nâng cao trải nghiệm người dùng.