Tính nhẩm đổi màu RGB ra Hexadecimal và ngược lại
math
10
frontend
15
White

Huy Trần viết ngày 11/07/2017

Mình có một anh bạn người Pháp tên là Aurelien, anh này có một biệt tài đó là convert được màu RGB sang mã Hex chỉ bằng cách tính nhẩm.

Phương pháp để tính nhẩm rất đơn giản.

Một màu được biểu diễn ở dạng hexadecimal với một bộ 3 cặp số $RR GG BB$ và nó sẽ tương đương với 3 giá trị trong mã màu $(R, G, B)$.

Như vậy ta có thể tham chiếu mỗi cặp số hexa sang hệ quy chiếu từ 0 đến 255:

\begin{align} 00 & \rightarrow 0 \\ FF & \rightarrow 255 \end{align}

Khi thực hiện chuyển đổi, ta sẽ chuyển từng giá trị $R$, $G$ và $B$ tương ứng.

Từ RGB sang Hexadecimal

Với một số thập phân $N$ bất kì, ta chuyển nó về dạng một cặp số hexa $H_1 H_2$ bằng cách:

\begin{align} H_1 & = N \text{ div } 16 \\ H_2 & = N \text{ mod } 16 \end{align}

Giả sử với số $231$, ta có thể tính:

\begin{align} H_1 & = 231 \text{ div } 16 = 14 \approx E \\ H_2 & = 231 \text{ mod } 16 = 7 \end{align}

Như vậy, dạng hexadecimal của $231$ sẽ là $E7$.

Thực hiện thao tác trên cho mỗi số $R$, $G$, $B$ ta có thể tìm được mã màu hexa tương ứng.

Ví dụ:

( 255, 231, 42 ) => #FFE72A

Từ Hexadecimal sang RGB

Để tính ngược lại từ 1 cặp số hexa $H_1 H_2$ sang số thập phân $N$, ta có thể tính:

$
N = H_1 \times 16 + H_2
$

Ví dụ với số $8C$, với $C = 12$, ta có:

$
N = 8 \times 16 + 12 = 140
$

Hoặc một ví dụ khác, khi đọc code, mình thấy có ai đó trong team define một biến thế này:

$color_trout: #4a4e5c;

Không biết truất là màu gì, thì có thể tính nhẩm được bằng cách:

\begin{align} 4a & = 4 \times 16 + 10 = 74 \\ 4e & = 4 \times 16 + 14 = 78 \\ 5c & = 5 \times 16 + 12 = 92 \end{align}

Vậy suy ra #4a4e5c là $(74, 78, 92)$, và chiếu theo thang $0 \rightarrow 255$, theo luật phối màu, các giá trị $R = 74$ và $G = 78$ nằm gần đáy, giá trị $B = 92$ nhỉnh hơn 1 tí, ta có thể kết luận đây là một màu xám đậm hơi ngả sang màu xanh.

Tính nhanh với phép chia cho 16

Để tính nhanh phép chia $a \div b$, ta tách $a$ thành tổng của 2 số nhỏ hơn $a = a_1 + a_2$, chia lần lượt 2 số đó cho $b$, lấy 2 giá trị tìm được cộng lại với nhau ta được kết quả phép chia ban đầu.

\begin{align} a & = a_1 + a_2 \\ c & = a \div b = \displaystyle\frac{a_1}{b} + \displaystyle\frac{a_2}{b} \end{align}

Để chia nhanh cho 16, thì một trong 2 số $a_1$ và $a_2$ nên là bội số lớn nhất của 16 mà ta có thể tìm được.

Nói ra dài dòng, ví dụ cho dễ hiểu, với phép chia $231 \div 16$, ta có thể tách $231 = 128 + 103$. Từ đó ta có:

\begin{align} c_1 & = 128 \div 16 = 8 \\ c_2 & = 103 \div 16 = 6 \\ c & = c_1 + c_2 = 8 + 6 = 14 \end{align}

Nếu thấy số $103$ vẫn còn khó để tính nhẩm quá thì ta có thể chia nhỏ nó ra tiếp, và chỉ cần lấy phần nguyên tìm được. Ví dụ $103 = 96 + 7$. Phần dư tìm được cũng chính là giá trị $H_2$.

Kết luận

Vậy kĩ năng này có cool không? Quá cool luôn. Trong khi thằng bên cạnh lọ mọ copy mã màu ra để tra Google xem nó màu gì thì bạn dễ dàng tính ngay ra giấy và đoán được đặc điểm/màu sắc cần tìm.

Chỉ một vài phép tính đơn giản nhưng đem lại cho bạn rất nhiều lợi ích:

  • Khả năng tính nhẩm tăng lên
  • Kĩ năng phối màu tăng lên
  • Trông bạn cũng ngầu hơn, đâu đó sẽ có người nhìn bạn với ánh mắt nể phục, là trai hay gái thì còn tùy :))

Copy và paste lại từ blog của mình

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Huy Trần

109 bài viết.
1593 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
155 46
Tại sao phải viết blog kĩ thuật? Có rất nhiều bài viết trên mạng nói về vấn đề tại sao một lập trình viên nên thường xuyên viết các bài blog kĩ thu...
Huy Trần viết 3 năm trước
155 46
White
149 39
(Ảnh) Tiếp tục sêri (Link) lần này, chúng ta sẽ cùng tìm hiểu và mô phỏng lại một chức năng mà mọi người đang bắt đầu sử dụng hằng ngày, đó là chứ...
Huy Trần viết 2 năm trước
149 39
White
104 17
Phần 1: Tự truyện Tui và Toán đã từng là hai kẻ thù không đội trời chung trong suốt hơn mười lăm năm ròng rã. Ngay từ ánh nhìn đầu tiên đã ghét nh...
Huy Trần viết 2 năm trước
104 17
Bài viết liên quan
White
49 10
Đây là một câu trả lời cho câu hỏi (Link). Khá là thú vị nên mình trích dẫn lại. Hỏi: Đâu là những kĩ năng toán học cơ bản nhất mà mọi người cần...
Huy Trần viết 10 tháng trước
49 10
White
8 2
(Ảnh) "Mobile first" hay "Think mobile" là một trong những hot trend mà chúng ta thường được nghe gần đây, khi mà số lượng thiết bị di động và số ...
Trần Phong Phú viết 1 tháng trước
8 2
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
109 bài viết.
1593 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!