Cho HTML sau gồm 5 thẻ <div class="swatch"> với class riêng L20, L40, L60, L80, L95 nằm trong .palette (dùng display: flex trên .palette, mỗi swatch flex: 1, height 60px).

Viết CSS: tất cả dùng chung hue 210 (xanh dương) với saturation 80%, chỉ đổi lightness theo class:

L20 dùng hsl(210,80%,20%)
L40 dùng hsl(210,80%,40%)
L60 dùng hsl(210,80%,60%)
L80 dùng hsl(210,80%,80%)
L95 dùng hsl(210,80%,95%)

Ba ô đầu (L20, L40, L60) chữ màu trắng vì nền tối/trung bình; hai ô sau (L80, L95) chữ màu đen vì nền sáng. Căn giữa chữ trong mỗi ô theo cả hai chiều bằng display: flex; align-items: center; justify-content: center trên .swatch.

Đề bài: [Thiết kế Web] Bảng màu 5 sắc độ cùng tông

Thư Mục

Console