Cach chuyen doi mau HEX sang RGB va nguoc lai: huong dan cho designer va developer

Mo hinh mau la he thong toan hoc de bieu dien mau sac ky thuat so. Neu ban lam viec trong phat trien web, thiet ke do hoa, xay dung thuong hieu hay bat ky linh vuc truc quan nao, ban can hieu it nhat ba mo hinh: HEX, RGB va HSL. Moi mo hinh co uu diem rieng tuy theo boi canh.

CSS hien dai chap nhan ca ba dinh dang. Ban co the viet cung mot mau do nhu sau:

• HEX: #FF0000
• RGB: rgb(255, 0, 0)
• HSL: hsl(0, 100%, 50%)

Ca ba tao ra chinh xac cung mot mau, nhung tien ich khac nhau. HEX ngan gon cho CSS. RGB truc quan khi nghi ve pha tron anh sang. HSL ly tuong khi ban muon dieu chinh do sang hoac do bao hoa ma khong thay doi sac do.

Voi cong cu chuyen doi mau NexTools, ban co the chuyen doi giua tat ca cac dinh dang ngay lap tuc va xem truoc mau theo thoi gian thuc.

Dinh dang HEX (thap luc phan) bieu dien mau bang ky hieu # theo sau la 6 chu so thap luc phan (0-9, A-F). Cac chu so duoc nhom thanh cap: hai chu so dau cho do, hai chu so tiep theo cho xanh la, va hai chu so cuoi cho xanh duong.

Cau truc: #RRGGBB

Moi cap tu 00 (thap phan 0, khong co mau do) den FF (thap phan 255, cuong do toi da):

HEX viet tat: Neu moi cap co cac chu so giong nhau, co the viet tat: #FF0000 = #F00.

HEX voi do trong suot: Them hai chu so cho alpha (do duc): #FF000080 la mau do voi 50% do duc.

Mo hinh RGB dua tren tong hop anh sang cong. Moi thanh phan tu 0 den 255, pha tron tao ra hang trieu mau (chinh xac 16.777.216 to hop).

Trong CSS: rgb(do, xanh_la, xanh_duong)

Vi du thuc te:

• rgb(255, 165, 0) = cam
• rgb(128, 0, 128) = tim
• rgb(0, 128, 128) = xanh mong set

Voi do trong suot (RGBA): rgba(255, 0, 0, 0.5) = do voi 50% do duc.

Chuyen doi HEX sang RGB: Chuyen moi cap thap luc phan sang thap phan. #3A7BF2: 3A=58, 7B=123, F2=242. Ket qua: rgb(58, 123, 242).

Chuyen doi RGB sang HEX: Chuyen moi gia tri thap phan sang thap luc phan 2 chu so. rgb(58, 123, 242): 58=3A, 123=7B, 242=F2. Ket qua: #3A7BF2.

Mo hinh HSL tach mau thanh ba chieu de hieu:

• Hue (Sac do): Mau co ban theo do, 0-360. 0°/360°=do, 120°=xanh la, 240°=xanh duong.
• Saturation (Do bao hoa): Mau "song dong" the nao, 0% (xam) den 100% (mau thuan).
• Lightness (Do sang): Sang hay toi, 0% (den) den 100% (trang). 50% la mau thuan.

Tai sao HSL manh me: Neu ban co nut xanh hsl(220, 80%, 50%) va muon phien ban sang hon khi hover, chi can tang do sang: hsl(220, 80%, 60%).

Thu nghiem bang mau voi cong cu tao bang mau.

Cac mau ban se gap nhieu nhat trong thiet ke web:

Su dung cong cu chon mau de tim mau chinh xac cua bat ky trang web nao.

Trong khi RGB va HEX danh cho man hinh (anh sang), CMYK (Cyan, Magenta, Yellow, Key/Black) la mo hinh cho in an (muc).

Tai sao mau in khac mau man hinh: Man hinh phat sang (RGB), giay phan chieu anh sang (CMYK). Dai mau (gamut) cua CMYK nho hon RGB, nen mot so mau tuoi tren man hinh khong the tai hien chinh xac tren giay.

• Xanh dien va xanh neon mat do tuoi trong CMYK
• Do va cam thuong giu duoc tot
• Mau den thuan trong CMYK la C:75 M:68 Y:67 K:90 (goi la "rich black")

Chon mau khong chi la van de tham my. WCAG 2.1 thiet lap ty le tuong phan toi thieu giua van ban va nen:

• AA (toi thieu): Ty le tuong phan 4,5:1 cho van ban thuong, 3:1 cho van ban lon
• AAA (toi uu): Ty le tuong phan 7:1 cho van ban thuong, 4,5:1 cho van ban lon

Luon kiem tra do tuong phan cua cac to hop mau voi cong cu kiem tra tuong phan.

Du lieu: Khoang 8% nam gioi va 0,5% nu gioi co mot muc do mu mau nao do. Khong bao gio chi dung mau sac de truyen dat thong tin quan trong.

Trong phat trien web hien dai, mau sac duoc quan ly bang CSS Custom Properties (bien CSS) de ho tro theme va dark mode:

:root {
  --color-primary: #C75B39;
  --color-background: #FFFFFF;
  --color-text: #1A1A1A;
}
.dark {
  --color-primary: #E8956E;
  --color-background: #1A1A1A;
  --color-text: #F5F5F5;
}

Voi cach tiep can nay, thay doi toan bo bang mau cua trang web chi can chinh sua cac bien.

Meo: Khi tao theme toi, dung chi don gian dao nguoc mau. Giam nhe do bao hoa va dung mau xam am thay vi den thuan (#1A1A1A thay vi #000000).

Tao gradient CSS tuy chinh cho theme voi cong cu tao gradient.