palette-mix()

Cú pháp

/* Pha trộn các bảng màu được định nghĩa trong font */
font-palette: palette-mix(in lch, normal, dark)

/* Pha trộn các bảng màu do tác giả định nghĩa */
font-palette: palette-mix(in lch, --blues, --yellows)

/* Thay đổi tỷ lệ phần trăm của mỗi bảng màu pha trộn */
font-palette: palette-mix(in lch, --blues 50%, --yellows 50%)
font-palette: palette-mix(in lch, --blues 70%, --yellows 30%)

/* Thay đổi phương pháp nội suy màu */
font-palette: palette-mix(in srgb, --blues, --yellows)
font-palette: palette-mix(in hsl, --blues, --yellows)
font-palette: palette-mix(in hsl shorter hue, --blues, --yellows)

Các giá trị

Ký hiệu hàm:

palette-mix(method, palette1 [p1], palette2 [p2])

method

Một <color-interpolation-method> chỉ định không gian màu nội suy.

palette1, palette2

Các giá trị font-palette để pha trộn cùng nhau. Đây có thể là bất kỳ giá trị font-palette nào, bao gồm các hàm palette-mix(), normal, dark, và light.

p1, p2 Optional

Các giá trị <percentage> từ 0% đến 100% chỉ định lượng mỗi bảng màu để pha trộn. Chúng được chuẩn hóa như sau:

• Nếu cả p1 và p2 đều bị bỏ qua, thì p1 = p2 = 50%.
• Nếu p1 bị bỏ qua, thì p1 = 100% - p2.
• Nếu p2 bị bỏ qua, thì p2 = 100% - p1.
• Nếu p1 = p2 = 0%, hàm không hợp lệ.
• Nếu p1 + p2 ≠ 100%, thì p1' = p1 / (p1 + p2) và p2' = p2 / (p1 + p2), trong đó p1' và p2' là kết quả chuẩn hóa.

Cú pháp hình thức

<palette-mix()> = 
  palette-mix( <color-interpolation-method> , [ [ normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2} )  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]  

<palette-identifier> = 
  <dashed-ident>  

<rectangular-color-space> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  lab                |
  oklab              |
  <xyz-space>        

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<custom-color-space> = 
  <dashed-ident>  

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

Ví dụ

Dùng palette-mix() để pha trộn hai bảng màu

Ví dụ này cho thấy cách dùng hàm palette-mix() để tạo bảng màu mới bằng cách pha trộn hai bảng màu khác.

HTML

HTML chứa ba đoạn văn để áp dụng thông tin font:

<p class="yellowPalette">Yellow palette</p>
<p class="bluePalette">Blue palette</p>
<p class="mixedPalette">Mixed palette</p>

CSS

Trong CSS, chúng ta nhập font màu từ Google Fonts, và định nghĩa hai giá trị font-palette tùy chỉnh bằng quy tắc at @font-palette-values. Sau đó chúng ta áp dụng ba giá trị font-palette khác nhau cho các đoạn văn — --yellow, --blue, và một bảng màu xanh lá mới, được tạo bằng palette-mix() để pha trộn bảng màu xanh và vàng lại với nhau.

@import "https://fonts.googleapis.com/css2?family=Nabla&display=swap";

@font-palette-values --blue-nabla {
  font-family: "Nabla";
  base-palette: 2; /* đây là bảng màu xanh của Nabla */
}

@font-palette-values --yellow-nabla {
  font-family: "Nabla";
  base-palette: 7; /* đây là bảng màu vàng của Nabla */
}

p {
  font-family: "Nabla", fantasy;
  font-size: 4rem;
  text-align: center;
  margin: 0;
}

.yellowPalette {
  font-palette: --yellow-nabla;
}

.bluePalette {
  font-palette: --blue-nabla;
}

.mixedPalette {
  font-palette: palette-mix(in lch, --blue-nabla 55%, --yellow-nabla 45%);
}

Kết quả

Kết quả trông như thế này:

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• font-palette
• @font-palette-values
• color-mix()
• Hướng dẫn Giá trị màu CSS
• Color space