COLORS

Colors

Việc lựa chọn màu sắc cho giao diện trang web hoặc ứng dụng có ảnh hưởng lớn đến cách người dùng tương tác với sản phẩm và quyết định họ đưa ra. Màu sắc hài hòa có thể góp phần tạo nên ấn tượng đầu tiên tốt đẹp và khuyến khích người dùng tương tác với sản phẩm của bạn, vì vậy đây là khía cạnh rất quan trọng của một thiết kế thành công, cần được cân nhắc kỹ lưỡng.

Base colors

Chọn một trong những màu có sẵn từ bảng màu cơ bản và làm cho thiết kế của bạn hấp dẫn đối với người dùng. Bạn có thể sử dụng màu sắc để tùy chỉnh thiết kế của các thành phần, chỉ ra các trạng thái khác nhau hoặc gợi ý các hành động bạn muốn người dùng thực hiện.

blue
azure
indigo
purple
pink
red
orange
yellow
lime
green
teal
cyan

Cách sử dụng

Dùng class trực tiếp lên các thẻ muốn đổi màu kèm màu muốn thay đổi

Lưu ý: đối với các thẻ sử dụng màu cơ bản màu chữ đen bình thường sẽ không được nổi bật do đó có thể sử dụng thêm class cho nội được nổi bật hơn.

hello
hello
hello
hello
<div class="row m-0">
  <div class="col-3">
    <div class="bg-blue text-blue-fg p-3 m-2">hello</div>
  </div>
  <div class="col-3">
    <div class="bg-teal text-teal-fg p-3 m-2">hello</div>
  </div>
  <div class="col-3">
    <div class="bg-cyan text-cyan-fg p-3 m-2">hello</div>
  </div>
  <div class="col-3">
    <div class="bg-lime text-lime-fg p-3 m-2">hello</div>
  </div>
</div>

Light colors

blue-lt
azure-lt
indigo-lt
purple-lt
pink-lt
red-lt
orange-lt
yellow-lt
lime-lt
green-lt
teal-lt
cyan-lt

Cách sử dụng

Tương tự cách dùng của những màu cơ bản chỉ cần thêm -lt vào sau class màu cơ bản

hello
hello
hello
hello
<div class="row m-0">
  <div class="col-3">
    <div class="bg-blue-lt p-3 m-2">hello</div>
  </div>
  <div class="col-3">
    <div class="bg-teal-lt p-3 m-2">hello</div>
  </div>
  <div class="col-3">
    <div class="bg-cyan-lt p-3 m-2">hello</div>
  </div>
  <div class="col-3">
    <div class="bg-lime-lt p-3 m-2">hello</div>
  </div>
</div>