Chuyển đổi hệ màu

Trần Đức Lĩnh

Chuyển đổi hệ màu rất quan trọng trong việc tính toán, kiểm soát màu sắc trong CSS, nắm vững hệ màu giúp việc phối màu thông qua việc tăng giảm từng hệ màu một cách hiệu quả hơn.

Bài viết liên quan Khái niệm màu sắc trong thiết kếRegular Expression là gì?.

Bài viết trợ lực SASS-SCSS.

Ôn lại khái niệm 2 hệ màu rgb()HEX.

Hệ màu rgb() được tính toán dựa theo 3 cặp số (RR,GG,BB), tương ứng với (red, green, blue).

Trong khi đó hệ màu HEX được tính toán dựa vào biểu diễn giá trị rgb gồm một chuỗi 6 ký tự hoặc 3 ký tự đồng dạng theo hệ thập lục phân (cơ số 16).

Tham số hệ chiếu của cơ số 16 sẽ từ:

  • 0 -> 00
  • FF -> 255

Hệ cơ số 16 từ: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

1) Chuyển đổi rgb() sang HEX.

Ghi chú ký tự:

  • (int) = interger.
  • (div) = division.
  • (mod) = modulo

    • Number(1) mod Number(2) => Number(1) / Number(2).
    • => allNumber = Result(1-2) - int(Result(1-2)).
    • => allNumber * Number(2).
    • => (Result Modulo).

HEX có 3 cặp mã cơ số 16, tính tổng sẽ là 6 ký tự.

  • Hex1 = int(Number(1) div Number(2)).
  • Hex2 = Number(1) mod Number(2).

Ví dụ chuyển đổi.

  • rgb(244,10,198).

    • 244: Hex(1) = 244 / 16 => 15.25 ~ 15 (F).
    • 244: Hex(2) = 244 / 16 => 15.25.

      • 15.25 - 15 = 0.25.
      • 0.25 * 16 = 4 (4).
    • (F4).

    • 10: Hex(1) = 10 / 16 => 0.625 ~ 0 (0).
    • 10: Hex(2) = 10 / 16 => 0.625.

      • 0.625 - 0 = 0.625.
      • 0.625 * 16 = 10 (A).
    • (0A).

    • 198: Hex(1) = 198 / 16 => 12.375 ~12 (C).
    • 198: Hex(2) = 198 / 16 => 12.375.

      • 12.375 - 12 = 0.375.
      • 0.375 * 16 = 6 (6).
    • (C6).

Kết quả là: #F40AC6.

2) Chuyển đổi HEX sang rgb().

rgb(RR,GG,BB) là 3 cặp mã cần phải chuyển. Mỗi cặp mã đều quy các hệ ký tự A, B, C, D, E, F thành các số tương ứng là 10, 11, 12, 13, 14, 15.

Ghi chú ký tự:

  • (mul) = multiplication.
  • (sum) = summation
  • XX tượng trưng cho 1 cặp hệ màu (RR, GG, BB).

Có 3 cặp hệ màu, mỗi hệ màu sẽ tính theo từng cặp giá trị đã tách trước đó.

  • XX = Hex1 mul (Number) sum Hex2.

Ví dụ chuyển đổi.

  • #F40AC6.

    • F4: 15; 4 => 15 * 16 + 4 = 244.
    • 0A: 0; 10 => 0 * 16 + 10 = 10.
    • C6: 12; 6 => 12 * 16 + 6 = 198.

Kết quả là: rgb(244,10,198).