Tidadigi Logo

CSS hsla() Function

Hàm hsla() là một hàm dựng sẵn trong CSS. Nó được dùng để định nghĩa màu sắc bằng mô hình Hue Saturation Lightness Alpha (HSLA).

Syntax:

hsla( hue, saturation, lightness, alpha )

Parameters: Hàm này chấp nhận bốn tham số như đã đề cập ở trên và mô tả dưới đây:

  • hue: Tham số này dùng để định nghĩa độ trên bánh xe màu. Giá trị từ 0 đến 360, 0 hoặc 360 là đỏ. 120 là xanh lá cây và 240 là xanh lam.
  • saturation: Tham số này dùng để định nghĩa độ bão hòa. 0% thể hiện sắc thái xám, 100% là màu đầy đủ.
  • lightness: Tham số này dùng để định nghĩa độ sáng. 0% là đen, 50% là bình thường và 100% là trắng.
  • alpha: Tham số này dùng để định nghĩa độ trong suốt. Giá trị nằm giữa 0.0 (hoàn toàn trong suốt) và 1.0 (hoàn toàn непрозрачный).

Example: Chương trình dưới đây minh họa hàm hsla() trong CSS:

html 
<!DOCTYPE html>
<html>

<head>
    <title>hsla function</title>
    <style>
        .gfg1 {
            background-color:
                hsla(120, 100%, 40%, 0.3);
            text-align: center;
        }

        .gfg2 {
            background-color:
                hsla(120, 100%, 75%, 0.3);
            text-align: center
        }

        .gfg3 {
            background-color:
                hsla(120, 100%, 20%, 0.3);
            text-align: center
        }

        .gfg {
            font-size: 40px;
            font-weight: bold;
            color: green;
            text-align: center;
        }

        h1 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="gfg">GeeksforGeeks</div>
    <h1>The hsla() Function</h1>
    <p class="gfg1">Green</p>
    <p class="gfg2">Light green</p>
    <p class="gfg3">Dark green</p>
</body>

</html>

Output: css-hsla-function

Supported Browsers: Các trình duyệt được hỗ trợ bởi hàm hsla() được liệt kê dưới đây:

  • Chrome
  • Edge
  • Firefox
  • Safari
  • Opera

Last Updated : 21/07/2025