{"id":43381,"date":"2026-09-03T11:52:26","date_gmt":"2026-09-03T04:52:26","guid":{"rendered":"https:\/\/interdata.vn\/blog\/?p=43381"},"modified":"2026-09-03T12:02:22","modified_gmt":"2026-09-03T05:02:22","slug":"cach-lay-ma-mau-tu-anh","status":"publish","type":"post","link":"https:\/\/interdata.vn\/blog\/cach-lay-ma-mau-tu-anh\/","title":{"rendered":"C\u00e1ch L\u1ea5y M\u00e3 M\u00e0u T\u1eeb \u1ea2nh &#038; Tr\u00ean Website Chu\u1ea9n HEX, RGB, HSL (8+ C\u00f4ng C\u1ee5 Mi\u1ec5n Ph\u00ed)"},"content":{"rendered":"<p style=\"text-align: justify;\"><span style=\"font-size: 100%;\"><strong>C\u00e1ch l\u1ea5y m\u00e3 m\u00e0u t\u1eeb \u1ea3nh<\/strong> gi\u00fap b\u1ea1n tr\u00edch xu\u1ea5t ch\u00ednh x\u00e1c th\u00f4ng s\u1ed1 HEX, RGB ho\u1eb7c HSL t\u1eeb b\u1ea5t k\u1ef3 b\u1ee9c \u1ea3nh hay giao di\u1ec7n n\u00e0o \u0111\u1ec3 \u00e1p d\u1ee5ng tr\u1ef1c ti\u1ebfp v\u00e0o code CSS, thi\u1ebft k\u1ebf banner ho\u1eb7c x\u00e2y d\u1ef1ng b\u1ed9 nh\u1eadn di\u1ec7n th\u01b0\u01a1ng hi\u1ec7u. Khi ph\u00e1t tri\u1ec3n giao di\u1ec7n web t\u1ea1i <a href=\"https:\/\/interdata.vn\/\">InterData<\/a>, vi\u1ec7c l\u1ea5y chu\u1ea9n m\u00e3 m\u00e0u l\u00e0 b\u01b0\u1edbc b\u1eaft bu\u1ed9c \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o s\u1ef1 \u0111\u1ed3ng nh\u1ea5t hi\u1ec3n th\u1ecb tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-size: 100%;\">Tr\u01b0\u1edbc khi th\u1ef1c hi\u1ec7n, c\u1ea7n ph\u00e2n bi\u1ec7t r\u00f5 hai t\u00e1c v\u1ee5: <strong>l\u1ea5y m\u00e3 m\u00e0u t\u1eeb \u1ea3nh<\/strong> (upload file \u1ea3nh t\u0129nh c\u00f3 s\u1eb5n l\u00ean c\u00f4ng c\u1ee5 \u0111\u1ec3 h\u00fat m\u00e0u t\u1eebng pixel) v\u00e0 <strong>l\u1ea5y m\u00e3 m\u00e0u tr\u00ean website<\/strong> (soi tr\u1ef1c ti\u1ebfp m\u00e3 m\u00e0u c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed HTML\/CSS \u0111ang hi\u1ec3n th\u1ecb tr\u00ean tr\u00ecnh duy\u1ec7t). D\u01b0\u1edbi \u0111\u00e2y l\u00e0 h\u01b0\u1edbng d\u1eabn chi ti\u1ebft t\u1eebng ph\u01b0\u01a1ng ph\u00e1p k\u00e8m c\u00e1c c\u00f4ng c\u1ee5 mi\u1ec5n ph\u00ed chu\u1ea9n x\u00e1c nh\u1ea5t.<\/span><\/p>\n<div style=\"background-color: #eff6ff; padding: 20px; border: 1.5px solid #BFDBFE; border-radius: 12px; margin-bottom: 40px; box-shadow: 0 8px 20px rgba(37,99,235,0.05);\">\n<p style=\"font-family: 'Be Vietnam Pro', sans-serif; font-weight: bold; font-size: 18px; margin: 0 0 15px; color: #1e3a8a;\">N\u1ed8I DUNG B\u00c0I VI\u1ebeT<\/p>\n<ul style=\"list-style-type: none; padding-left: 0; margin: 0;\">\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section1\">1. C\u00e1ch l\u1ea5y m\u00e3 m\u00e0u t\u1eeb \u1ea3nh b\u1eb1ng c\u00f4ng c\u1ee5 online kh\u00f4ng c\u1ea7n c\u00e0i \u0111\u1eb7t<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section2\">2. C\u00e1ch l\u1ea5y m\u00e3 m\u00e0u tr\u00ean website b\u1eb1ng Chrome DevTools v\u00e0 Extension<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section3\">3. L\u1ea5y m\u00e3 m\u00e0u t\u1eeb \u1ea3nh trong ph\u1ea7n m\u1ec1m Photoshop, Canva v\u00e0 Figma<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section4\">4. C\u00e1ch l\u1ea5y m\u00e3 m\u00e0u t\u1eeb \u1ea3nh tr\u00ean \u0111i\u1ec7n tho\u1ea1i iPhone v\u00e0 Android<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section5\">5. L\u1ea5y m\u00e3 m\u00e0u to\u00e0n m\u00e0n h\u00ecnh b\u1eb1ng Windows PowerToys v\u00e0 macOS<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section6\">6. Ph\u00e2n bi\u1ec7t h\u1ec7 m\u00e0u HEX, RGB, HSL, CMYK khi l\u1ea5y m\u00e3 m\u00e0u t\u1eeb \u1ea3nh<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section7\">7. B\u1ea3ng so s\u00e1nh 8+ c\u00f4ng c\u1ee5 l\u1ea5y m\u00e3 m\u00e0u t\u1eeb \u1ea3nh v\u00e0 website<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section8\">8. M\u1eb9o l\u01b0u tr\u1eef v\u00e0 \u00e1p d\u1ee5ng m\u00e3 m\u00e0u v\u00e0o thi\u1ebft k\u1ebf CSS th\u1ef1c t\u1ebf<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#faq\">9. FAQ \u2014 C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p khi l\u1ea5y m\u00e3 m\u00e0u<\/a><\/li>\n<\/ul>\n<\/div>\n\n\n<style>\n.interdata-plan-carousel,.interdata-plan-carousel *{box-sizing:border-box}\n.interdata-plan-carousel{--blue:#005bea;--blue-dark:#004dcc;--text:#071832;--muted:#516173;--border:#d8e6fb;--bg:#f3f8ff;--shadow:0 5px 14px rgba(0,62,145,.08);background:var(--bg);padding:14px 56px 18px;position:relative;overflow:hidden;border-radius:20px;}\n.interdata-carousel-heading{color:#f00;font-family:Roboto,sans-serif;font-size:18px;line-height:1.35;font-weight:800;text-align:center;margin:0 0 14px}\n.interdata-plan-viewport{overflow:hidden;width:100%}\n.interdata-plan-track{display:flex;align-items:stretch;gap:12px;overflow:visible;padding:0 0 4px;transform:translate3d(0,0,0);transition:transform .45s ease;will-change:transform;touch-action:pan-y}\n.interdata-plan-card{flex:0 0 calc((100% - 24px)\/3);min-width:0;min-height:0!important;height:auto;background:#fff;border:1px solid var(--border);border-radius:8px;padding:15px 12px 13px;display:flex;flex-direction:column;box-shadow:var(--shadow)}\n.interdata-plan-title{color:var(--blue-dark);font-size:16px;line-height:1.22;font-weight:800;text-align:center;margin:0 0 7px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.interdata-plan-price{color:var(--blue-dark);font-size:24px;line-height:1;font-weight:900;text-align:center;margin-bottom:12px;white-space:nowrap;letter-spacing:0}\n.interdata-plan-price span{font-size:10px;font-weight:800;margin-left:2px}\n.interdata-plan-badge{align-self:center;display:inline-flex;align-items:center;justify-content:center;background:#ff3934;color:#fff;border-radius:5px;padding:7px 8px;font-size:9px;line-height:1;font-weight:800;margin-bottom:15px;white-space:nowrap;max-width:100%}\n.interdata-plan-features{list-style:none!important;padding:0!important;margin:0!important}\n.interdata-plan-features li{display:flex;gap:7px;align-items:flex-start;color:var(--text);font-size:12px;line-height:1.35;font-weight:700;text-align:left;margin:0 0 10px!important;padding:0!important}\n.interdata-plan-icon{width:14px;min-width:14px;height:14px;color:#0069ff;margin-top:2px}\n.interdata-plan-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}\n.interdata-plan-spacer{flex:1;min-height:16px}\n.interdata-plan-button{display:flex;align-items:center;justify-content:center;min-height:42px;width:100%;margin-top:auto!important;margin-bottom:0!important;background:var(--blue);color:#fff!important;border-radius:5px;font-size:13px;font-weight:800;text-decoration:none!important;box-shadow:0 7px 14px rgba(0,91,234,.24);transition:transform .2s ease,background .2s ease}\n.interdata-plan-button:hover{background:var(--blue-dark);color:#fff!important;transform:translateY(-1px)}\n.interdata-carousel-arrow{position:absolute;top:50%;z-index:5;width:44px;height:54px;border:2px solid #fff!important;border-radius:999px;background:var(--blue)!important;color:#fff!important;box-shadow:0 8px 22px rgba(0,62,145,.32);display:flex!important;align-items:center;justify-content:center;cursor:pointer;transform:translateY(-35%);transition:background .2s ease,color .2s ease,opacity .2s ease,transform .2s ease}\n.interdata-carousel-arrow:hover{background:var(--blue-dark)!important;color:#fff!important;transform:translateY(-35%) scale(1.04)}\n.interdata-carousel-arrow:disabled{opacity:.78;cursor:not-allowed;background:#8aa6cf!important;color:#fff!important}\n.interdata-carousel-arrow:disabled:hover{background:#8aa6cf!important;color:#fff!important;transform:translateY(-35%)}\n.interdata-carousel-arrow svg{display:none!important}\n.interdata-carousel-arrow:before{content:none!important;display:none!important}\n.interdata-carousel-mark{display:block!important;color:#fff!important;font-family:Arial,Helvetica,sans-serif!important;font-size:38px!important;font-weight:900!important;line-height:1!important;text-align:center!important;pointer-events:none!important;transform:translateY(-2px)}\n.interdata-carousel-prev{left:14px}\n.interdata-carousel-prev .interdata-carousel-mark{margin-left:-2px}\n.interdata-carousel-next{right:14px}\n.interdata-carousel-next .interdata-carousel-mark{margin-right:-2px}\n@media (max-width:800px){.interdata-plan-carousel{padding:12px 44px 16px}.interdata-plan-card{flex-basis:calc((100% - 12px)\/2)}.interdata-carousel-heading{font-size:16px}.interdata-carousel-prev{left:6px}.interdata-carousel-next{right:6px}}\n@media (max-width:480px){.interdata-plan-carousel{padding:12px 38px 16px}.interdata-plan-card{flex-basis:100%}.interdata-plan-price{font-size:23px}.interdata-carousel-arrow{width:34px;height:44px}.interdata-carousel-mark{font-size:32px!important}.interdata-carousel-prev{left:3px}.interdata-carousel-next{right:3px}}\n<\/style>\n\n<div class=\"interdata-plan-carousel\" data-interdata-carousel>\n  <div class=\"interdata-carousel-heading\">Si\u00eau \u01afu \u0110\u00e3i <a href=\"https:\/\/interdata.vn\/blog\/vps-la-gi\/\">VPS<\/a> \/ CLOUD SERVER - Ti\u1ebft Ki\u1ec7m \u0110\u1ebfn 70%<\/div>\n\n  <svg width=\"0\" height=\"0\" style=\"position:absolute;visibility:hidden\" aria-hidden=\"true\">\n    <symbol id=\"id-icon-cpu\" viewBox=\"0 0 24 24\"><rect x=\"7\" y=\"7\" width=\"10\" height=\"10\" rx=\"2\"><\/rect><path d=\"M4 9h3M4 15h3M17 9h3M17 15h3M9 4v3M15 4v3M9 17v3M15 17v3\"><\/path><path d=\"M10 10h4v4h-4z\"><\/path><\/symbol>\n    <symbol id=\"id-icon-ram\" viewBox=\"0 0 24 24\"><rect x=\"4\" y=\"8\" width=\"16\" height=\"8\" rx=\"2\"><\/rect><path d=\"M7 16v2M11 16v2M15 16v2M19 16v2M7 11h1M11 11h1M15 11h1\"><\/path><\/symbol>\n    <symbol id=\"id-icon-storage\" viewBox=\"0 0 24 24\"><rect x=\"6\" y=\"3\" width=\"12\" height=\"18\" rx=\"2\"><\/rect><path d=\"M9 7h6\"><\/path><circle cx=\"12\" cy=\"16\" r=\"1.5\"><\/circle><\/symbol>\n    <symbol id=\"id-icon-network\" viewBox=\"0 0 24 24\"><path d=\"M5 12.5a10 10 0 0 1 14 0\"><\/path><path d=\"M8.5 16a5 5 0 0 1 7 0\"><\/path><path d=\"M12 19h.01\"><\/path><\/symbol>\n    <symbol id=\"id-icon-gift\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"8\" width=\"18\" height=\"13\" rx=\"2\"><\/rect><path d=\"M12 8v13M3 12h18\"><\/path><path d=\"M7.5 8C6.1 8 5 6.9 5 5.5S6.1 3 7.5 3C10 3 12 8 12 8\"><\/path><path d=\"M16.5 8C17.9 8 19 6.9 19 5.5S17.9 3 16.5 3C14 3 12 8 12 8\"><\/path><\/symbol>\n  <\/svg>\n\n  <button class=\"interdata-carousel-arrow interdata-carousel-prev\" type=\"button\" aria-label=\"Xem 3 g\u00f3i tr\u01b0\u1edbc\" onclick=\"var r=this.closest('[data-interdata-carousel]');if(!r)return false;var t=r.querySelector('.interdata-plan-track'),c=t?t.querySelectorAll('.interdata-plan-card'):[];if(!t||!c.length)return false;var v=window.matchMedia('(max-width:480px)').matches?1:(window.matchMedia('(max-width:800px)').matches?2:3),m=Math.max(0,c.length-Math.min(v,c.length||1)),s=[],i=0;while(i&lt;m){s.push(i);i+=v}if(!s.length||s[s.length-1]!==m)s.push(m);var p=parseInt(r.getAttribute('data-inline-page')||'0',10);p=(p-1+s.length)%s.length;r.setAttribute('data-inline-page',p);var g=parseFloat(window.getComputedStyle(t).gap)||12,w=c[0].getBoundingClientRect().width;t.style.transition='transform .45s ease';t.style.transform='translate3d('+(-(w+g)*s[p])+'px,0,0)';return false;\">\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M15 18l-6-6 6-6\"><\/path><\/svg>\n    <span class=\"interdata-carousel-mark\" aria-hidden=\"true\">&#8249;<\/span>\n  <\/button>\n\n  <div class=\"interdata-plan-viewport\">\n    <div class=\"interdata-plan-track\">\n      <!-- 7 card d\u1ef1 ph\u00f2ng: JavaScript s\u1ebd \u0111\u1ed3ng b\u1ed9 l\u1ea1i t\u1eeb API portal khi trang t\u1ea3i. -->\n      <article class=\"interdata-plan-card\" data-plan-pid=\"490\">\n        <h3 class=\"interdata-plan-title\">Premium Base<\/h3>\n        <div class=\"interdata-plan-price\">299.000 \u0111<span>\/3 th\u00e1ng<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>2 vCore Intel Xeon Scalable<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>2 GB <a href=\"https:\/\/interdata.vn\/blog\/ram-server\/\">RAM<\/a><\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>30 GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>1 IPv4 Private<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>300Mbps Network Port<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Unlimited <a href=\"https:\/\/interdata.vn\/blog\/bang-thong-la-gi\/\">Bandwidth<\/a><\/li>\n        <\/ul>\n\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/best-value-plans-2026\/best-value-plans-premium-base\" target=\"_blank\" rel=\"noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\" data-plan-pid=\"529\">\n        <h3 class=\"interdata-plan-title\">INTER PLATINUM 1<\/h3>\n        <div class=\"interdata-plan-price\">998.000 \u0111<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>2 vCore<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>3 GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>30 GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>1 IPv4 Private<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>300Mbps Network Port<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Unlimited Bandwidth<\/li>\n        <\/ul>\n\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/inter-platinum-series-2026\/inter-platinum-1\" target=\"_blank\" rel=\"noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\" data-plan-pid=\"530\">\n        <h3 class=\"interdata-plan-title\">INTER PLATINUM 2<\/h3>\n        <div class=\"interdata-plan-price\">2.666.000 \u0111<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>5 vCore<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>8 GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>70 GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>1 IPv4 Private<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>300Mbps Network Port<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Unlimited Bandwidth<\/li>\n        <\/ul>\n\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/inter-platinum-series-2026\/inter-platinum-2\" target=\"_blank\" rel=\"noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\" data-plan-pid=\"531\">\n        <h3 class=\"interdata-plan-title\">INTER PLATINUM 3<\/h3>\n        <div class=\"interdata-plan-price\">5.888.000 \u0111<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>9 vCore<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>16 GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>140 GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>1 IPv4 Private<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>300Mbps Network Port<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Unlimited Bandwidth<\/li>\n        <\/ul>\n\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/inter-platinum-series-2026\/inter-platinum-3\" target=\"_blank\" rel=\"noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\" data-plan-pid=\"521\">\n        <h3 class=\"interdata-plan-title\">BD-Cloud 1<\/h3>\n        <div class=\"interdata-plan-price\">988.000 \u0111<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>3 vCore<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>3 GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>30 GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>1 IPv4 Private<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>300Mbps Network Port<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Unlimited Bandwidth<\/li>\n        <\/ul>\n\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/best-plan-real-cloud\/bd-cloud-1\" target=\"_blank\" rel=\"noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\" data-plan-pid=\"522\">\n        <h3 class=\"interdata-plan-title\">BD-Cloud 2<\/h3>\n        <div class=\"interdata-plan-price\">2.988.000 \u0111<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>4 vCore<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>8 GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>80 GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>1 IPv4 Private<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>300 Mbps Network Port<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Unlimited Bandwidth<\/li>\n        <\/ul>\n\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/best-plan-real-cloud\/bd-cloud-2\" target=\"_blank\" rel=\"noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\" data-plan-pid=\"523\">\n        <h3 class=\"interdata-plan-title\">BD-Cloud 3<\/h3>\n        <div class=\"interdata-plan-price\">5.999.000 \u0111<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>8 vCore<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>16 GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>140 GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>1 IPv4 Private<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>400 Mbps Network Port<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Unlimited Bandwidth<\/li>\n        <\/ul>\n\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/best-plan-real-cloud\/bd-cloud-3\" target=\"_blank\" rel=\"noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n    <\/div>\n  <\/div>\n\n  <button class=\"interdata-carousel-arrow interdata-carousel-next\" type=\"button\" aria-label=\"Xem 3 g\u00f3i ti\u1ebfp theo\" onclick=\"var r=this.closest('[data-interdata-carousel]');if(!r)return false;var t=r.querySelector('.interdata-plan-track'),c=t?t.querySelectorAll('.interdata-plan-card'):[];if(!t||!c.length)return false;var v=window.matchMedia('(max-width:480px)').matches?1:(window.matchMedia('(max-width:800px)').matches?2:3),m=Math.max(0,c.length-Math.min(v,c.length||1)),s=[],i=0;while(i&lt;m){s.push(i);i+=v}if(!s.length||s[s.length-1]!==m)s.push(m);var p=parseInt(r.getAttribute('data-inline-page')||'0',10);p=(p+1)%s.length;r.setAttribute('data-inline-page',p);var g=parseFloat(window.getComputedStyle(t).gap)||12,w=c[0].getBoundingClientRect().width;t.style.transition='transform .45s ease';t.style.transform='translate3d('+(-(w+g)*s[p])+'px,0,0)';return false;\">\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 18l6-6-6-6\"><\/path><\/svg>\n    <span class=\"interdata-carousel-mark\" aria-hidden=\"true\">&#8250;<\/span>\n  <\/button>\n<\/div>\n\n<script>\n(function(){\n  var API_GROUPS=[\n    {url:'https:\/\/support.interdata.vn\/packages.php?gid=89&module',pids:[490]},\n    {url:'https:\/\/support.interdata.vn\/packages.php?gid=100&module',pids:[529,530,531]},\n    {url:'https:\/\/support.interdata.vn\/packages.php?gid=97&module',pids:[521,522,523]}\n  ];\n  var PLAN_CYCLES={\n    490:{key:'quarterly',label:'3 th\u00e1ng'},\n    529:{key:'annually',label:'n\u0103m'},\n    530:{key:'annually',label:'n\u0103m'},\n    531:{key:'annually',label:'n\u0103m'},\n    521:{key:'annually',label:'n\u0103m'},\n    522:{key:'annually',label:'n\u0103m'},\n    523:{key:'annually',label:'n\u0103m'}\n  };\n\n  function fetchPlanData(){\n    if(window.interdataPlanApiPromise)return window.interdataPlanApiPromise;\n\n    window.interdataPlanApiPromise=Promise.all(API_GROUPS.map(function(group){\n      return fetch(group.url,{method:'GET',mode:'cors',cache:'no-store'})\n        .then(function(response){\n          if(!response.ok)throw new Error('API '+response.status);\n          return response.json();\n        })\n        .then(function(data){\n          if(!data||data.success!==true||!Array.isArray(data.products))return [];\n          return data.products.filter(function(product){\n            return group.pids.indexOf(Number(product.pid))!==-1;\n          });\n        })\n        .catch(function(error){\n          console.warn('Kh\u00f4ng th\u1ec3 c\u1eadp nh\u1eadt nh\u00f3m g\u00f3i InterData:',group.url,error);\n          return [];\n        });\n    })).then(function(groups){\n      return groups.reduce(function(all,products){return all.concat(products);},[]);\n    });\n\n    return window.interdataPlanApiPromise;\n  }\n\n  function parseDescription(html){\n    var source=String(html||'')\n      .replace(\/<brs*\/?>\/gi,'n')\n      .replace(\/<\/(p|div|li)>\/gi,'n');\n    var holder=document.createElement('div');\n    holder.innerHTML=source;\n    var strong=holder.querySelector('strong');\n    var badge=strong?strong.textContent.trim():'';\n    var lines=(holder.textContent||'').split(\/r?n\/).map(function(line){\n      return line.trim();\n    }).filter(Boolean);\n    if(badge&&lines[0]===badge)lines.shift();\n    return {badge:badge,features:lines};\n  }\n\n  function iconForFeature(feature){\n    if(\/ram\/i.test(feature))return 'id-icon-ram';\n    if(\/ssd|nvme|storage|disk\/i.test(feature))return 'id-icon-storage';\n    if(\/vcore|vcpu|cpu|xeon|amd\/i.test(feature))return 'id-icon-cpu';\n    if(\/ipv4|network|mbps|gbps|bandwidth\/i.test(feature))return 'id-icon-network';\n    return 'id-icon-gift';\n  }\n\n  function createFeatureItem(feature){\n    var item=document.createElement('li');\n    var icon=document.createElement('span');\n    var svg=document.createElementNS('http:\/\/www.w3.org\/2000\/svg','svg');\n    var use=document.createElementNS('http:\/\/www.w3.org\/2000\/svg','use');\n    icon.className='interdata-plan-icon';\n    use.setAttribute('href','#'+iconForFeature(feature));\n    svg.appendChild(use);\n    icon.appendChild(svg);\n    item.appendChild(icon);\n    item.appendChild(document.createTextNode(feature));\n    return item;\n  }\n\n  function updateCardFromApi(root,product){\n    var pid=Number(product.pid);\n    var cycle=PLAN_CYCLES[pid];\n    var card=root.querySelector('[data-plan-pid=\"'+pid+'\"]');\n    if(!card||!cycle)return;\n\n    var title=card.querySelector('.interdata-plan-title');\n    var priceBox=card.querySelector('.interdata-plan-price');\n    var badgeBox=card.querySelector('.interdata-plan-badge');\n    var featureList=card.querySelector('.interdata-plan-features');\n    var button=card.querySelector('.interdata-plan-button');\n    var description=parseDescription(product.description);\n    var pricing=product.pricing&&product.pricing.VND;\n    var price=pricing?Number(pricing[cycle.key]):-1;\n\n    if(title&&product.name)title.textContent=product.name;\n    if(priceBox&&Number.isFinite(price)&&price>=0){\n      priceBox.textContent=Math.round(price).toLocaleString('vi-VN')+' \u0111';\n      var suffix=document.createElement('span');\n      suffix.textContent='\/'+cycle.label;\n      priceBox.appendChild(suffix);\n    }\n    if(badgeBox&&description.badge)badgeBox.textContent=description.badge;\n    if(featureList&&description.features.length){\n      featureList.textContent='';\n      description.features.forEach(function(feature){\n        featureList.appendChild(createFeatureItem(feature));\n      });\n    }\n    if(button&&product.product_url)button.href=product.product_url;\n  }\n\n  function setupInterDataCarousel(root){\n    var track=root.querySelector('.interdata-plan-track');\n    var prev=root.querySelector('.interdata-carousel-prev');\n    var next=root.querySelector('.interdata-carousel-next');\n    if(!track||!prev||!next||track.dataset.ready==='1')return;\n    track.dataset.ready='1';\n    prev.disabled=false;\n    next.disabled=false;\n    var activePage=0;\n    var touchStartX=null;\n\n    function visibleCards(){\n      if(window.matchMedia&&window.matchMedia('(max-width:480px)').matches)return 1;\n      if(window.matchMedia&&window.matchMedia('(max-width:800px)').matches)return 2;\n      return 3;\n    }\n\n    function pageStarts(){\n      var total=track.querySelectorAll('.interdata-plan-card').length;\n      var visible=Math.min(visibleCards(),total||1);\n      var maxStart=Math.max(0,total-visible);\n      var starts=[];\n      var start=0;\n      while(start<maxStart){\n        starts.push(start);\n        start+=visible;\n      }\n      if(!starts.length||starts[starts.length-1]!==maxStart)starts.push(maxStart);\n      return starts;\n    }\n\n    function renderSlide(animate){\n      var cards=track.querySelectorAll('.interdata-plan-card');\n      var starts=pageStarts();\n      if(!cards.length||!starts.length)return;\n      if(activePage>=starts.length)activePage=starts.length-1;\n      if(activePage<0)activePage=0;\n\n      var cardWidth=cards[0].getBoundingClientRect().width;\n      var trackStyle=window.getComputedStyle?window.getComputedStyle(track):null;\n      var gap=trackStyle?parseFloat(trackStyle.columnGap||trackStyle.gap):12;\n      if(!Number.isFinite(gap))gap=12;\n      if(cardWidth<=0)return;\n\n      track.style.transition=animate?'transform .45s ease':'none';\n      track.style.transform='translate3d('+(-(cardWidth+gap)*starts[activePage])+'px,0,0)';\n      prev.setAttribute('aria-disabled',starts.length>1?'false':'true');\n      next.setAttribute('aria-disabled',starts.length>1?'false':'true');\n    }\n\n    function move(direction){\n      var starts=pageStarts();\n      if(starts.length<=1)return;\n      activePage=parseInt(root.getAttribute('data-inline-page')||activePage,10)||0;\n      activePage=(activePage+direction+starts.length)%starts.length;\n      root.setAttribute('data-inline-page',activePage);\n      renderSlide(true);\n    }\n\n    track.addEventListener('touchstart',function(event){\n      touchStartX=event.touches&&event.touches[0]?event.touches[0].clientX:null;\n    },{passive:true});\n    track.addEventListener('touchend',function(event){\n      if(touchStartX===null)return;\n      var endX=event.changedTouches&&event.changedTouches[0]?event.changedTouches[0].clientX:touchStartX;\n      var distance=endX-touchStartX;\n      touchStartX=null;\n      if(Math.abs(distance)>=40)move(distance<0?1:-1);\n    },{passive:true});\n\n    function resetAfterResize(){\n      activePage=0;\n      root.setAttribute('data-inline-page','0');\n      renderSlide(false);\n    }\n\n    window.addEventListener('resize',resetAfterResize);\n    window.addEventListener('load',resetAfterResize);\n    if('ResizeObserver' in window){\n      var resizeObserver=new ResizeObserver(function(){renderSlide(false);});\n      resizeObserver.observe(root);\n    }\n    window.requestAnimationFrame(function(){renderSlide(false);});\n    window.setTimeout(function(){renderSlide(false);},250);\n    window.setTimeout(function(){renderSlide(false);},1000);\n\n    fetchPlanData().then(function(products){\n      products.forEach(function(product){updateCardFromApi(root,product);});\n      renderSlide(false);\n    });\n  }\n\n  function initInterDataCarousels(){\n    document.querySelectorAll('[data-interdata-carousel]').forEach(setupInterDataCarousel);\n  }\n\n  if(document.readyState==='loading'){\n    document.addEventListener('DOMContentLoaded',initInterDataCarousels);\n  }else{\n    initInterDataCarousels();\n  }\n\n  if('MutationObserver' in window){\n    var initQueued=false;\n    new MutationObserver(function(){\n      if(initQueued)return;\n      initQueued=true;\n      window.requestAnimationFrame(function(){\n        initQueued=false;\n        initInterDataCarousels();\n      });\n    }).observe(document.documentElement,{childList:true,subtree:true});\n  }\n})();\n<\/script>\n\n\t<div id=\"gap-113849043\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-113849043 {\n  padding-top: 15px;\n}\n<\/style>\n\t<\/div>\n\t\n<h2 id=\"section1\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin: 40px 0 20px; line-height: 1.4;\">1. C\u00e1ch l\u1ea5y m\u00e3 m\u00e0u t\u1eeb \u1ea3nh b\u1eb1ng c\u00f4ng c\u1ee5 online kh\u00f4ng c\u1ea7n c\u00e0i \u0111\u1eb7t<\/h2>\n<p style=\"text-align: justify;\">\u0110\u1ec3 l\u1ea5y m\u00e3 m\u00e0u t\u1eeb \u1ea3nh online nhanh nh\u1ea5t, b\u1ea1n ch\u1ec9 c\u1ea7n t\u1ea3i \u1ea3nh l\u00ean c\u00e1c tr\u00ecnh duy\u1ec7t web chuy\u00ean d\u1ee5ng nh\u01b0 ImageColorPicker.com ho\u1eb7c HTML Color Codes, sau \u0111\u00f3 nh\u1ea5p chu\u1ed9t v\u00e0o v\u1ecb tr\u00ed m\u00e0u c\u1ea7n l\u1ea5y. H\u1ec7 th\u1ed1ng s\u1ebd tr\u1ea3 v\u1ec1 ngay l\u1eadp t\u1ee9c gi\u00e1 tr\u1ecb m\u00e3 HEX (#FFFFFF), RGB, HSL t\u01b0\u01a1ng \u1ee9ng v\u1edbi \u0111i\u1ec3m \u1ea3nh \u0111\u00f3.<\/p>\n<p style=\"text-align: justify;\">Ph\u01b0\u01a1ng ph\u00e1p n\u00e0y ph\u00f9 h\u1ee3p cho ng\u01b0\u1eddi c\u1ea7n l\u1ea5y nhanh m\u00e3 m\u00e0u t\u1eeb \u1ea3nh ch\u1ee5p m\u00e0n h\u00ecnh, \u1ea3nh logo ho\u1eb7c \u1ea3nh banner m\u00e0 kh\u00f4ng mu\u1ed1n c\u00e0i \u0111\u1eb7t th\u00eam ph\u1ea7n m\u1ec1m n\u1eb7ng m\u00e1y. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 4 c\u00f4ng c\u1ee5 tr\u1ef1c tuy\u1ebfn chu\u1ea9n x\u00e1c nh\u1ea5t:<\/p>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 18px; font-weight: bold; margin-top: 25px;\">1.1. ImageColorPicker.com (H\u1ed7 tr\u1ee3 zoom pixel chi ti\u1ebft)<\/h3>\n<p style=\"text-align: justify;\">ImageColorPicker cho ph\u00e9p t\u1ea3i \u1ea3nh t\u1eeb m\u00e1y t\u00ednh t\u00ednh b\u1eb1ng \u0111\u1ecbnh d\u1ea1ng PNG, JPG, WEBP ho\u1eb7c d\u00e1n tr\u1ef1c ti\u1ebfp \u0111\u01b0\u1eddng d\u1eabn URL c\u1ee7a h\u00ecnh \u1ea3nh.<\/p>\n<ol>\n<li>Truy c\u1eadp website ImageColorPicker.com.<\/li>\n<li>Nh\u1ea5p v\u00e0o n\u00fat <strong>Upload your image<\/strong> ho\u1eb7c d\u00e1n URL \u1ea3nh v\u00e0o \u00f4 y\u00eau c\u1ea7u.<\/li>\n<li>Di chuy\u1ec3n con tr\u1ecf chu\u1ed9t \u0111\u1ebfn khu v\u1ef1c m\u00e0u mu\u1ed1n tr\u00edch xu\u1ea5t. C\u00f4ng c\u1ee5 t\u00edch h\u1ee3p k\u00ednh l\u00fap ph\u00f3ng to t\u1eebng c\u1ee5m pixel gi\u00fap b\u1ea1n ch\u1ecdn \u0111\u00fang \u0111i\u1ec3m m\u00e0u kh\u00f4ng b\u1ecb nh\u00f2e m\u00e9p.<\/li>\n<li>Nh\u1ea5p chu\u1ed9t tr\u00e1i \u0111\u1ec3 c\u1ed1 \u0111\u1ecbnh \u0111i\u1ec3m ch\u1ecdn. Sao ch\u00e9p m\u00e3 HEX, RGB ho\u1eb7c CMYK hi\u1ec3n th\u1ecb \u1edf khung b\u00ean ph\u1ea3i. B\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ed1i chi\u1ebfu l\u1ea1i c\u00e1c th\u00f4ng s\u1ed1 n\u00e0y tr\u00ean <a href=\"https:\/\/interdata.vn\/blog\/bang-ma-mau\/\">b\u1ea3ng m\u00e3 m\u00e0u HTML, CSS, RGB, CMYK<\/a> \u0111\u1ec3 tra c\u1ee9u bi\u1ebfn th\u1ec3 \u0111\u1eadm nh\u1ea1t ph\u00f9 h\u1ee3p.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-43386\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Imagecolorpicker_com.png\" alt=\"Imagecolorpicker\" width=\"1000\" height=\"544\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Imagecolorpicker_com.png 1000w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Imagecolorpicker_com-300x163.png 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Imagecolorpicker_com-768x418.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 18px; font-weight: bold; margin-top: 25px;\">1.2. HTML Color Codes (Image Color Picker)<\/h3>\n<p style=\"text-align: justify;\">Trang web htmlcolorcodes.com cung c\u1ea5p giao di\u1ec7n tr\u1ef1c quan, tr\u1ea3 v\u1ec1 \u0111\u1ea7y \u0111\u1ee7 c\u00e1c m\u00e3 m\u00e0u \u0111\u1ecbnh d\u1ea1ng CSS nh\u01b0 HEX, RGB, HSL v\u00e0 danh s\u00e1ch c\u00e1c m\u00e0u b\u1ed5 tr\u1ee3 l\u00e2n c\u1eadn.<\/p>\n<ol>\n<li>Truy c\u1eadp m\u1ee5c Image Color Picker tr\u00ean HTML Color Codes.<\/li>\n<li>K\u00e9o th\u1ea3 file \u1ea3nh v\u00e0o khung l\u00e0m vi\u1ec7c ho\u1eb7c nh\u1ea5p n\u00fat t\u1ea3i file.<\/li>\n<li>Ch\u1ea1m ho\u1eb7c nh\u1ea5p v\u00e0o b\u1ea5t k\u1ef3 v\u1ecb tr\u00ed n\u00e0o tr\u00ean \u1ea3nh.<\/li>\n<li>Nh\u1ea5p v\u00e0o \u00f4 m\u00e3 HEX ho\u1eb7c RGB \u0111\u1ec3 t\u1ef1 \u0111\u1ed9ng sao ch\u00e9p m\u00e3 v\u00e0o b\u1ed9 nh\u1edb t\u1ea1m (clipboard).<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-43391\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/HTML-Color-Codes.png\" alt=\"HTML Color Codes\" width=\"1000\" height=\"501\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/HTML-Color-Codes.png 1000w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/HTML-Color-Codes-300x150.png 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/HTML-Color-Codes-768x385.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 18px; font-weight: bold; margin-top: 25px;\">1.3. PineTools &#8211; Color Picker from Image<\/h3>\n<p style=\"text-align: justify;\">PineTools cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng t\u00f9y ch\u1ec9nh \u0111\u1ecbnh d\u1ea1ng hi\u1ec3n th\u1ecb k\u1ebft qu\u1ea3, \u0111\u1ed3ng th\u1eddi hi\u1ec3n th\u1ecb c\u1ea3 \u0111\u1ed9 b\u00e3o h\u00f2a v\u00e0 \u0111\u1ed9 s\u00e1ng c\u1ee7a m\u00e0u v\u1eeba h\u00fat \u0111\u01b0\u1ee3c.<\/p>\n<ul>\n<li><strong>B\u01b0\u1edbc 1:<\/strong> Ch\u1ecdn file \u1ea3nh t\u1eeb thi\u1ebft b\u1ecb t\u1ea1i giao di\u1ec7n PineTools.<\/li>\n<li><strong>B\u01b0\u1edbc 2:<\/strong> Nh\u1ea5p v\u00e0o h\u00ecnh \u1ea3nh, c\u00f4ng c\u1ee5 hi\u1ec3n th\u1ecb \u00f4 m\u00e0u xem tr\u01b0\u1edbc k\u00e8m m\u00e3 HEX, RGB, HSV.<\/li>\n<li><strong>\u01afu \u0111i\u1ec3m:<\/strong> X\u1eed l\u00fd nhanh c\u00e1c file \u1ea3nh k\u00edch th\u01b0\u1edbc l\u1edbn m\u00e0 kh\u00f4ng l\u00e0m lag tr\u00ecnh duy\u1ec7t.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-43395\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/pine-tools.png\" alt=\"pine tools\" width=\"1000\" height=\"479\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/pine-tools.png 1000w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/pine-tools-300x144.png 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/pine-tools-768x368.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 18px; font-weight: bold; margin-top: 25px;\">1.4. Coolors.co (Tr\u00edch xu\u1ea5t b\u1ea3ng m\u00e0u t\u1ef1 \u0111\u1ed9ng t\u1eeb \u1ea3nh)<\/h3>\n<p style=\"text-align: justify;\">N\u1ebfu b\u1ea1n kh\u00f4ng ch\u1ec9 c\u1ea7n m\u1ed9t m\u00e3 m\u00e0u \u0111\u01a1n l\u1ebb m\u00e0 mu\u1ed1n tr\u00edch xu\u1ea5t to\u00e0n b\u1ed9 b\u1ea3ng m\u00e0u (palette) ch\u1ee7 \u0111\u1ea1o t\u1eeb b\u1ee9c \u1ea3nh, Coolors Image Picker l\u00e0 gi\u1ea3i ph\u00e1p t\u1ed1i \u01b0u:<\/p>\n<ul>\n<li>Truy c\u1eadp Coolors.co\/image-picker v\u00e0 t\u1ea3i \u1ea3nh l\u00ean.<\/li>\n<li>H\u1ec7 th\u1ed1ng t\u1ef1 \u0111\u1ed9ng qu\u00e9t v\u00e0 ph\u00e2n t\u00edch \u0111\u1ec3 t\u1ea1o ra 5 m\u00e0u ch\u1ee7 \u0111\u1ea1o nh\u1ea5t c\u1ee7a b\u1ee9c \u1ea3nh.<\/li>\n<li>B\u1ea1n c\u00f3 th\u1ec3 di chuy\u1ec3n c\u00e1c thanh tr\u01b0\u1ee3t \u0111i\u1ec3m h\u00fat m\u00e0u \u0111\u1ec3 tinh ch\u1ec9nh t\u1eebng m\u00e3 m\u00e0u theo \u00fd mu\u1ed1n r\u1ed3i xu\u1ea5t ra danh s\u00e1ch m\u00e3 HEX, code CSS ho\u1eb7c file \u1ea3nh b\u1ea3ng m\u00e0u.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-43387\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/coolors_co.png\" alt=\"coolors_co\" width=\"1000\" height=\"491\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/coolors_co.png 1000w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/coolors_co-300x147.png 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/coolors_co-768x377.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h2 id=\"section2\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin: 40px 0 20px; line-height: 1.4;\">2. C\u00e1ch l\u1ea5y m\u00e3 m\u00e0u tr\u00ean website b\u1eb1ng Chrome DevTools v\u00e0 Extension<\/h2>\n<p style=\"text-align: justify;\">L\u1ea5y m\u00e3 m\u00e0u tr\u00ean website l\u00e0 k\u1ef9 thu\u1eadt tr\u00edch xu\u1ea5t th\u00f4ng s\u1ed1 m\u00e0u tr\u1ef1c ti\u1ebfp t\u1eeb c\u00e1c ph\u1ea7n t\u1eed giao di\u1ec7n \u0111ang ch\u1ea1y th\u1ef1c t\u1ebf (nh\u01b0 n\u1ec1n n\u00fat b\u1ea5m, v\u0103n b\u1ea3n, header) m\u00e0 kh\u00f4ng c\u1ea7n ch\u1ee5p \u1ea3nh m\u00e0n h\u00ecnh. Ph\u01b0\u01a1ng ph\u00e1p n\u00e0y \u0111\u1ea3m b\u1ea3o \u0111\u1ed9 ch\u00ednh x\u00e1c tuy\u1ec7t \u0111\u1ed1i theo code ngu\u1ed3n c\u1ee7a l\u1eadp tr\u00ecnh vi\u00ean.<\/p>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 18px; font-weight: bold; margin-top: 25px;\">2.1. L\u1ea5y m\u00e3 m\u00e0u b\u1eb1ng Chrome DevTools (Kh\u00f4ng c\u1ea7n c\u00e0i ti\u1ec7n \u00edch)<\/h3>\n<p style=\"text-align: justify;\">Tr\u00ecnh duy\u1ec7t Google Chrome, Microsoft Edge hay Firefox \u0111\u1ec1u t\u00edch h\u1ee3p s\u1eb5n c\u00f4ng c\u1ee5 Eyedropper trong b\u1ea3ng \u0111i\u1ec1u khi\u1ec3n d\u00e0nh cho nh\u00e0 ph\u00e1t tri\u1ec3n.<\/p>\n<ol>\n<li>M\u1edf trang web ch\u1ee9a m\u00e0u b\u1ea1n mu\u1ed1n l\u1ea5y. Nh\u1ea5n ph\u00edm <strong>F12<\/strong> (ho\u1eb7c t\u1ed5 h\u1ee3p <strong>Ctrl + Shift + I<\/strong> tr\u00ean Windows, <strong>Cmd + Option + I<\/strong> tr\u00ean Mac). B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 nh\u1ea5p chu\u1ed9t ph\u1ea3i v\u00e0o ph\u1ea7n t\u1eed c\u1ea7n l\u1ea5y m\u00e0u v\u00e0 ch\u1ecdn <strong>Inspect<\/strong> (Ki\u1ec3m tra) \u0111\u1ec3 xem c\u00e2y <a href=\"https:\/\/interdata.vn\/blog\/html-la-gi\/\">c\u1ea5u tr\u00fac HTML c\u1ee7a trang<\/a>.<\/li>\n<li>T\u1ea1i tab <strong>Elements<\/strong>, nh\u00ecn sang b\u1ea3ng <strong>Styles<\/strong> \u1edf c\u1ed9t b\u00ean ph\u1ea3i n\u01a1i hi\u1ec3n th\u1ecb c\u00e1c thu\u1ed9c t\u00ednh <a href=\"https:\/\/interdata.vn\/blog\/css-la-gi\/\">CSS \u0111\u1ecbnh d\u1ea1ng giao di\u1ec7n<\/a>.<\/li>\n<li>T\u00ecm b\u1ea5t k\u1ef3 thu\u1ed9c t\u00ednh n\u00e0o c\u00f3 m\u00e0u s\u1eafc (nh\u01b0 <code>color<\/code>, <code>background-color<\/code>, <code>border-color<\/code>) v\u00e0 nh\u1ea5p v\u00e0o \u00f4 vu\u00f4ng m\u00e0u nh\u1ecf n\u1eb1m ngay tr\u01b0\u1edbc m\u00e3 m\u00e0u.<\/li>\n<li>M\u1ed9t b\u1ea3ng ch\u1ecdn m\u00e0u (Color Picker popup) s\u1ebd hi\u1ec7n ra. Nh\u1ea5p v\u00e0o bi\u1ec3u t\u01b0\u1ee3ng <strong>C\u00e2y b\u00fat h\u00fat m\u00e0u (Eyedropper)<\/strong>.<\/li>\n<li>Di chuy\u1ec3n chu\u1ed9t \u0111\u1ebfn b\u1ea5t k\u1ef3 v\u1ecb tr\u00ed n\u00e0o tr\u00ean trang web \u2014 k\u1ec3 c\u1ea3 ch\u1eef, h\u00ecnh \u1ea3nh hay thanh menu \u2014 r\u1ed3i nh\u1ea5p chu\u1ed9t tr\u00e1i. M\u00e3 m\u00e0u HEX ch\u00ednh x\u00e1c c\u1ee7a \u0111i\u1ec3m \u0111\u00f3 s\u1ebd \u0111\u01b0\u1ee3c ghi nh\u1eadn v\u00e0 sao ch\u00e9p.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-43393\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Lay-ma-mau-bang-Chrome-DevTools.png\" alt=\"L\u1ea5y m\u00e3 m\u00e0u b\u1eb1ng Chrome DevTools\" width=\"1000\" height=\"450\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Lay-ma-mau-bang-Chrome-DevTools.png 1000w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Lay-ma-mau-bang-Chrome-DevTools-300x135.png 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Lay-ma-mau-bang-Chrome-DevTools-768x346.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 18px; font-weight: bold; margin-top: 25px;\">2.2. D\u00f9ng Extension ColorZilla<\/h3>\n<p style=\"text-align: justify;\">ColorZilla l\u00e0 m\u1ed9t trong nh\u1eefng ti\u1ec7n \u00edch m\u1edf r\u1ed9ng ph\u1ed5 bi\u1ebfn nh\u1ea5t tr\u00ean Chrome Web Store v\u00e0 Firefox Add-ons, h\u1ed7 tr\u1ee3 l\u1ea5y m\u00e3 m\u00e0u tr\u1ef1c ti\u1ebfp ch\u1ec9 v\u1edbi m\u1ed9t c\u00fa nh\u1ea5p chu\u1ed9t.<\/p>\n<ul>\n<li>C\u00e0i \u0111\u1eb7t extension ColorZilla t\u1eeb c\u1eeda h\u00e0ng ti\u1ec7n \u00edch tr\u00ecnh duy\u1ec7t.<\/li>\n<li>Nh\u1ea5p v\u00e0o bi\u1ec3u t\u01b0\u1ee3ng ColorZilla tr\u00ean thanh c\u00f4ng c\u1ee5 v\u00e0 ch\u1ecdn <strong>Pick Color From Page<\/strong>.<\/li>\n<li>R\u00ea chu\u1ed9t v\u00e0o \u0111i\u1ec3m c\u1ea7n \u0111o m\u00e0u tr\u00ean trang web. Thanh tr\u1ea1ng th\u00e1i ph\u00eda tr\u00ean c\u00f9ng s\u1ebd hi\u1ec3n th\u1ecb \u0111\u1ed3ng th\u1eddi m\u00e3 HEX, RGB c\u00f9ng t\u1ecda \u0111\u1ed9 pixel.<\/li>\n<li>Nh\u1ea5p chu\u1ed9t tr\u00e1i \u0111\u1ec3 t\u1ef1 \u0111\u1ed9ng sao ch\u00e9p m\u00e3 HEX v\u00e0o clipboard. ColorZilla c\u00f2n l\u01b0u tr\u1eef l\u1ecbch s\u1eed c\u00e1c m\u00e0u v\u1eeba h\u00fat gi\u00fap b\u1ea1n qu\u1ea3n l\u00fd b\u1ea3ng m\u00e0u d\u1ec5 d\u00e0ng.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-43390\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Extension-ColorZilla.png\" alt=\"Extension ColorZilla\" width=\"1000\" height=\"481\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Extension-ColorZilla.png 1000w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Extension-ColorZilla-300x144.png 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Extension-ColorZilla-768x369.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 18px; font-weight: bold; margin-top: 25px;\">2.3. D\u00f9ng Extension ColorPick Eyedropper<\/h3>\n<p style=\"text-align: justify;\">ColorPick Eyedropper ho\u1ea1t \u0111\u1ed9ng t\u01b0\u01a1ng t\u1ef1 ColorZilla nh\u01b0ng b\u1ed5 sung th\u00eam t\u00ednh n\u0103ng k\u00ednh l\u00fap hi\u1ec3n th\u1ecb r\u00f5 l\u01b0\u1edbi pixel khi b\u1ea1n r\u00ea chu\u1ed9t qua c\u00e1c b\u1ee9c \u1ea3nh c\u00f3 chi ti\u1ebft nh\u1ecf ho\u1eb7c \u0111\u01b0\u1eddng vi\u1ec1n m\u1ecfng.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-43389\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Extension-ColorPick-Eyedropper.png\" alt=\"Extension ColorPick Eyedropper\" width=\"1000\" height=\"486\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Extension-ColorPick-Eyedropper.png 1000w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Extension-ColorPick-Eyedropper-300x146.png 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Extension-ColorPick-Eyedropper-768x373.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<div style=\"display: flex; flex-wrap: wrap; background-color: #fff; border: 1.5px solid #BFDBFE; box-shadow: 0 8px 20px rgba(37,99,235,0.08); border-radius: 12px; overflow: hidden; margin: 35px 0;\">\n<div style=\"flex: 1; min-width: 250px; background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%); display: flex; align-items: center; justify-content: center; padding: 30px; text-align: center;\">\n<div>\n<p style=\"color: #fff; font-size: 34px; font-family: 'Be Vietnam Pro', sans-serif; font-weight: bold; margin: 0; line-height: 1.1;\">Thu\u00ea VPS InterData<\/p>\n<p style=\"color: #dbeafe; font-size: 15px; font-weight: 600; margin-top: 12px;\"><a href=\"https:\/\/interdata.vn\/blog\/cpu-server\/\">CPU<\/a> th\u1ebf h\u1ec7 m\u1edbi, SSD NVMe U.2, h\u1ed7 tr\u1ee3 k\u1ef9 thu\u1eadt 24\/7<\/p>\n<\/div>\n<\/div>\n<div style=\"flex: 2; padding: 25px; min-width: 300px;\">\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; margin-top: 0; font-size: 20px;\">\u0110ang t\u1ef1 d\u1ef1ng website v\u00e0 c\u1ea7n hosting \u1ed5n \u0111\u1ecbnh?<\/h3>\n<p style=\"text-align: justify; font-size: 15px; margin-bottom: 15px;\">Khi t\u1ef1 thi\u1ebft k\u1ebf v\u00e0 tri\u1ec3n khai website <a href=\"https:\/\/interdata.vn\/blog\/wordpress-la-gi\/\">WordPress<\/a> hay landing page, vi\u1ec7c s\u1edf h\u1eefu h\u1ea1 t\u1ea7ng m\u00e1y ch\u1ee7 \u1ed5n \u0111\u1ecbnh gi\u00fap giao di\u1ec7n hi\u1ec3n th\u1ecb m\u01b0\u1ee3t m\u00e0, t\u1ed1c \u0111\u1ed9 t\u1ea3i trang nhanh v\u00e0 h\u1ed7 tr\u1ee3 to\u00e0n quy\u1ec1n c\u1ea5u h\u00ecnh m\u00f4i tr\u01b0\u1eddng staging th\u1eed nghi\u1ec7m m\u00e0u s\u1eafc.<\/p>\n<p><a style=\"background: linear-gradient(90deg, #2563EB 0%, #1E3A8A 100%); color: #fff; padding: 12px 25px; text-decoration: none; font-weight: 600; border-radius: 8px; font-size: 15px; display: inline-block; box-shadow: 0 5px 15px rgba(37,99,235,0.3);\" href=\"https:\/\/interdata.vn\/thue-vps\/\" target=\"_blank\" rel=\"noopener\">Xem g\u00f3i VPS cho web designer \u27f6<\/a><\/p>\n<\/div>\n<\/div>\n<h2 id=\"section3\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin: 40px 0 20px; line-height: 1.4;\">3. L\u1ea5y m\u00e3 m\u00e0u t\u1eeb \u1ea3nh trong ph\u1ea7n m\u1ec1m Photoshop, Canva v\u00e0 Figma<\/h2>\n<p style=\"text-align: justify;\">C\u00e1c ph\u1ea7n m\u1ec1m thi\u1ebft k\u1ebf \u0111\u1ed3 h\u1ecda v\u00e0 UI\/UX chuy\u00ean d\u1ee5ng \u0111\u1ec1u trang b\u1ecb s\u1eb5n c\u00f4ng c\u1ee5 Eyedropper gi\u00fap tr\u00edch xu\u1ea5t m\u00e3 m\u00e0u ngay tr\u00ean khung v\u1ebd ho\u1eb7c h\u00ecnh \u1ea3nh \u0111ang bi\u00ean t\u1eadp.<\/p>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 18px; font-weight: bold; margin-top: 25px;\">3.1. H\u00fat m\u00e0u t\u1eeb \u1ea3nh trong Adobe Photoshop<\/h3>\n<p style=\"text-align: justify;\">Trong Photoshop, ph\u00edm t\u1eaft m\u1eb7c \u0111\u1ecbnh cho c\u00f4ng c\u1ee5 h\u00fat m\u00e0u l\u00e0 ph\u00edm <strong>I<\/strong> (Eyedropper Tool).<\/p>\n<ol>\n<li>M\u1edf b\u1ee9c \u1ea3nh c\u1ea7n l\u1ea5y m\u00e0u trong Photoshop.<\/li>\n<li>Nh\u1ea5n ph\u00edm <strong>I<\/strong> \u0111\u1ec3 k\u00edch ho\u1ea1t <strong>Eyedropper Tool<\/strong>.<\/li>\n<li>Tr\u00ean thanh t\u00f9y ch\u1ecdn ph\u00eda tr\u00ean (Options Bar), b\u1ea1n c\u00f3 th\u1ec3 \u0111i\u1ec1u ch\u1ec9nh <strong>Sample Size<\/strong> t\u1eeb <em>Point Sample<\/em> (ch\u00ednh x\u00e1c 1 pixel) sang <em>3 by 3 Average<\/em> ho\u1eb7c <em>5 by 5 Average<\/em> \u0111\u1ec3 l\u1ea5y gi\u00e1 tr\u1ecb m\u00e0u trung b\u00ecnh c\u1ee7a m\u1ed9t v\u00f9ng nh\u1ecf, tr\u00e1nh ch\u1ecdn nh\u1ea7m pixel b\u1ecb nhi\u1ec5u do n\u00e9n \u1ea3nh.<\/li>\n<li>Nh\u1ea5p chu\u1ed9t tr\u00e1i v\u00e0o \u0111i\u1ec3m m\u00e0u tr\u00ean \u1ea3nh. M\u00e0u v\u1eeba ch\u1ecdn s\u1ebd hi\u1ec3n th\u1ecb t\u1ea1i \u00f4 <strong>Foreground Color<\/strong> tr\u00ean thanh c\u00f4ng c\u1ee5.<\/li>\n<li>Nh\u1ea5p \u0111\u00fap v\u00e0o \u00f4 Foreground Color \u0111\u1ec3 m\u1edf b\u1ea3ng <strong>Color Picker<\/strong> v\u00e0 sao ch\u00e9p m\u00e3 <strong>#HEX<\/strong>, RGB ho\u1eb7c CMYK.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-43392\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Hut-mau-tu-anh-trong-Adobe-Photoshop.jpg\" alt=\"H\u00fat m\u00e0u t\u1eeb \u1ea3nh trong Adobe Photoshop\" width=\"744\" height=\"768\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Hut-mau-tu-anh-trong-Adobe-Photoshop.jpg 744w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Hut-mau-tu-anh-trong-Adobe-Photoshop-291x300.jpg 291w\" sizes=\"auto, (max-width: 744px) 100vw, 744px\" \/><\/p>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 18px; font-weight: bold; margin-top: 25px;\">3.2. L\u1ea5y m\u00e3 m\u00e0u t\u1eeb \u1ea3nh trong Figma<\/h3>\n<p style=\"text-align: justify;\">Figma h\u1ed7 tr\u1ee3 thao t\u00e1c h\u00fat m\u00e0u tr\u1ef1c quan ph\u1ee5c v\u1ee5 cho c\u00f4ng vi\u1ec7c thi\u1ebft k\u1ebf UI\/UX:<\/p>\n<ol>\n<li>K\u00e9o th\u1ea3 \u1ea3nh c\u1ea7n l\u1ea5y m\u00e0u v\u00e0o Canvas c\u1ee7a Figma.<\/li>\n<li>Ch\u1ecdn m\u1ed9t h\u00ecnh kh\u1ed1i ho\u1eb7c \u0111o\u1ea1n text b\u1ea5t k\u1ef3.<\/li>\n<li>Nh\u00ecn sang b\u1ea3ng thu\u1ed9c t\u00ednh <strong>Fill<\/strong> \u1edf c\u1ed9t b\u00ean ph\u1ea3i, nh\u1ea5p v\u00e0o \u00f4 m\u00e0u r\u1ed3i ch\u1ecdn bi\u1ec3u t\u01b0\u1ee3ng <strong>Eyedropper<\/strong> (ho\u1eb7c nh\u1ea5n ph\u00edm t\u1eaft <strong>I<\/strong> khi \u0111ang ch\u1ecdn \u0111\u1ed1i t\u01b0\u1ee3ng).<\/li>\n<li>Di chuy\u1ec3n k\u00ednh l\u00fap t\u1edbi v\u1ecb tr\u00ed tr\u00ean \u1ea3nh r\u1ed3i nh\u1ea5p chu\u1ed9t. Gi\u00e1 tr\u1ecb m\u00e0u s\u1ebd l\u1eadp t\u1ee9c \u00e1p d\u1ee5ng cho \u0111\u1ed1i t\u01b0\u1ee3ng k\u00e8m m\u00e3 HEX hi\u1ec3n th\u1ecb r\u00f5 r\u00e0ng.<\/li>\n<\/ol>\n<p style=\"text-align: justify;\">Khi ph\u1ed1i h\u1ee3p m\u00e0u s\u1eafc v\u1edbi ki\u1ec3u ch\u1eef tr\u00ean giao di\u1ec7n, b\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o h\u01b0\u1edbng d\u1eabn <a href=\"https:\/\/interdata.vn\/blog\/cach-chon-va-su-dung-font-chu-website\/\">c\u00e1ch ch\u1ecdn v\u00e0 s\u1eed d\u1ee5ng font ch\u1eef website<\/a> k\u1ebft h\u1ee3p c\u00f9ng <a href=\"https:\/\/interdata.vn\/blog\/google-fonts-la-gi-cach-nhung-toi-uu-font-cho-website\/\">Google Fonts l\u00e0 g\u00ec v\u00e0 c\u00e1ch nh\u00fang font<\/a> \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o \u0111\u1ed9 t\u01b0\u01a1ng ph\u1ea3n th\u1ecb gi\u00e1c \u0111\u1ea1t chu\u1ea9n WCAG.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-43394\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Lay-ma-mau-tu-anh-trong-Figma.jpg\" alt=\"L\u1ea5y m\u00e3 m\u00e0u t\u1eeb \u1ea3nh trong Figma\" width=\"1000\" height=\"667\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Lay-ma-mau-tu-anh-trong-Figma.jpg 1000w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Lay-ma-mau-tu-anh-trong-Figma-300x200.jpg 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Lay-ma-mau-tu-anh-trong-Figma-768x512.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 18px; font-weight: bold; margin-top: 25px;\">3.3. Tr\u00edch xu\u1ea5t m\u00e0u t\u1eeb \u1ea3nh trong Canva<\/h3>\n<p style=\"text-align: justify;\">Canva t\u00edch h\u1ee3p s\u1eb5n <a href=\"https:\/\/interdata.vn\/blog\/thuat-toan-algorithm\/\">thu\u1eadt to\u00e1n<\/a> t\u1ef1 \u0111\u1ed9ng nh\u1eadn di\u1ec7n m\u00e0u s\u1eafc t\u1eeb b\u1ee9c \u1ea3nh \u0111\u01b0\u1ee3c t\u1ea3i l\u00ean:<\/p>\n<ol>\n<li>T\u1ea3i \u1ea3nh l\u00ean b\u1ea3n thi\u1ebft k\u1ebf Canva.<\/li>\n<li>Nh\u1ea5p ch\u1ecdn m\u1ed9t th\u00e0nh ph\u1ea7n \u0111\u1ed3 h\u1ecda ho\u1eb7c n\u1ec1n, sau \u0111\u00f3 nh\u1ea5p v\u00e0o \u00f4 ch\u1ecdn m\u00e0u tr\u00ean thanh c\u00f4ng c\u1ee5.<\/li>\n<li>\u1ede thanh b\u00ean tr\u00e1i, cu\u1ed9n xu\u1ed1ng m\u1ee5c <strong>M\u00e0u \u1ea3nh (Photo Colors)<\/strong>. Canva s\u1ebd t\u1ef1 \u0111\u1ed9ng li\u1ec7t k\u00ea b\u1ea3ng g\u1ed3m 4\u20136 m\u00e0u ch\u1ee7 \u0111\u1ea1o xu\u1ea5t hi\u1ec7n trong b\u1ee9c \u1ea3nh.<\/li>\n<li>N\u1ebfu mu\u1ed1n h\u00fat m\u00e0u th\u1ee7 c\u00f4ng t\u1ea1i m\u1ed9t \u0111i\u1ec3m c\u1ee5 th\u1ec3, nh\u1ea5p v\u00e0o d\u1ea5u <strong>+ (Th\u00eam m\u00e0u m\u1edbi)<\/strong> v\u00e0 ch\u1ecdn bi\u1ec3u t\u01b0\u1ee3ng c\u00e2y b\u00fat h\u00fat m\u00e0u.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-43396\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Trich-xuat-mau-tu-anh-trong-Canva.jpg\" alt=\"Tr\u00edch xu\u1ea5t m\u00e0u t\u1eeb \u1ea3nh trong Canva\" width=\"1000\" height=\"751\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Trich-xuat-mau-tu-anh-trong-Canva.jpg 1000w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Trich-xuat-mau-tu-anh-trong-Canva-300x225.jpg 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Trich-xuat-mau-tu-anh-trong-Canva-768x577.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<div style=\"background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%); border: 1.5px solid #2563EB; border-radius: 12px; padding: 28px; margin: 35px 0; text-align: center;\">\n<p style=\"font-family: 'Be Vietnam Pro', sans-serif; font-size: 22px; font-weight: bold; color: #1e3a8a; margin: 0 0 8px;\">S\u0103n deal VPS &amp; Cloud Server tr\u01b0\u1edbc khi ch\u1ed1t g\u00f3i<\/p>\n<p style=\"font-size: 15px; color: #4b5563; margin-bottom: 20px;\">Canh Me t\u1ed5ng h\u1ee3p khuy\u1ebfn m\u00e3i, m\u00e3 gi\u1ea3m gi\u00e1, th\u1eddi gian \u00e1p d\u1ee5ng v\u00e0 \u0111i\u1ec1u ki\u1ec7n \u0111\u0103ng k\u00fd m\u1edbi nh\u1ea5t \u2014 xem tr\u01b0\u1edbc \u0111\u1ec3 ch\u1ecdn g\u00f3i hosting v\u1edbi chi ph\u00ed t\u1ed1t nh\u1ea5t cho d\u1ef1 \u00e1n thi\u1ebft k\u1ebf c\u1ee7a b\u1ea1n.<\/p>\n<p><a style=\"background: #2563EB; color: #fff; padding: 12px 30px; text-decoration: none; font-weight: 600; border-radius: 8px; display: inline-block;\" href=\"https:\/\/interdata.vn\/canhme\/\" target=\"_blank\" rel=\"noopener\">Xem hot deal t\u1ea1i Canh Me \u27f6<\/a><\/p>\n<\/div>\n<h2 id=\"section4\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin: 40px 0 20px; line-height: 1.4;\">4. C\u00e1ch l\u1ea5y m\u00e3 m\u00e0u t\u1eeb \u1ea3nh tr\u00ean \u0111i\u1ec7n tho\u1ea1i iPhone v\u00e0 Android<\/h2>\n<p style=\"text-align: justify;\">Khi l\u00e0m vi\u1ec7c tr\u00ean smartphone ho\u1eb7c m\u00e1y t\u00ednh b\u1ea3ng, b\u1ea1n v\u1eabn c\u00f3 th\u1ec3 tr\u00edch xu\u1ea5t ch\u00ednh x\u00e1c m\u00e3 m\u00e0u t\u1eeb h\u00ecnh \u1ea3nh ch\u1ee5p m\u00e0n h\u00ecnh m\u00e0 kh\u00f4ng c\u1ea7n m\u1edf m\u00e1y t\u00ednh t\u00ednh.<\/p>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 18px; font-weight: bold; margin-top: 25px;\">4.1. C\u00e1ch l\u1ea5y m\u00e3 m\u00e0u t\u1eeb \u1ea3nh tr\u00ean iPhone b\u1eb1ng t\u00ednh n\u0103ng Markup<\/h3>\n<p style=\"text-align: justify;\">H\u1ec7 \u0111i\u1ec1u h\u00e0nh iOS t\u00edch h\u1ee3p s\u1eb5n c\u00f4ng c\u1ee5 \u0111o m\u00e0u tr\u1ef1c ti\u1ebfp trong \u1ee9ng d\u1ee5ng \u1ea2nh (Photos) t\u1eeb phi\u00ean b\u1ea3n iOS 14 tr\u1edf l\u00ean:<\/p>\n<ol>\n<li>M\u1edf b\u1ee9c \u1ea3nh trong \u1ee9ng d\u1ee5ng <strong>\u1ea2nh (Photos)<\/strong> tr\u00ean iPhone ho\u1eb7c iPad.<\/li>\n<li>Nh\u1ea5n n\u00fat <strong>S\u1eeda (Edit)<\/strong> \u1edf g\u00f3c tr\u00ean b\u00ean ph\u1ea3i, sau \u0111\u00f3 ch\u1ecdn bi\u1ec3u t\u01b0\u1ee3ng <strong>C\u00e2y b\u00fat (Markup)<\/strong>.<\/li>\n<li>Nh\u1ea5n v\u00e0o bi\u1ec3u t\u01b0\u1ee3ng <strong>B\u1ea3ng m\u00e0u tr\u00f2n<\/strong> \u1edf g\u00f3c d\u01b0\u1edbi, ch\u1ecdn bi\u1ec3u t\u01b0\u1ee3ng <strong>C\u00e2y b\u00fat h\u00fat m\u00e0u (Eyedropper)<\/strong> \u1edf g\u00f3c tr\u00ean b\u00ean tr\u00e1i c\u1ee7a b\u1ea3ng m\u00e0u.<\/li>\n<li>K\u00e9o h\u00ecnh tr\u00f2n ph\u00f3ng \u0111\u1ea1i \u0111\u1ebfn \u0111i\u1ec3m m\u00e0u c\u1ea7n l\u1ea5y tr\u00ean \u1ea3nh r\u1ed3i bu\u00f4ng tay.<\/li>\n<li>Chuy\u1ec3n qua tab <strong>Thanh tr\u01b0\u1ee3t (Sliders)<\/strong> ho\u1eb7c <strong>Ph\u1ed5 m\u00e0u (Spectrum)<\/strong> trong b\u1ea3ng ch\u1ecdn m\u00e0u \u0111\u1ec3 xem v\u00e0 sao ch\u00e9p m\u00e3 <strong>HEX (#)<\/strong> hi\u1ec3n th\u1ecb \u1edf d\u01b0\u1edbi c\u00f9ng.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-43385\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Cach-lay-ma-mau-tu-anh-tren-iPhone-bang-tinh-nang-Markup.png\" alt=\"C\u00e1ch l\u1ea5y m\u00e3 m\u00e0u t\u1eeb \u1ea3nh tr\u00ean iPhone b\u1eb1ng t\u00ednh n\u0103ng Markup\" width=\"1000\" height=\"600\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Cach-lay-ma-mau-tu-anh-tren-iPhone-bang-tinh-nang-Markup.png 1000w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Cach-lay-ma-mau-tu-anh-tren-iPhone-bang-tinh-nang-Markup-300x180.png 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Cach-lay-ma-mau-tu-anh-tren-iPhone-bang-tinh-nang-Markup-768x461.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 18px; font-weight: bold; margin-top: 25px;\">4.2. L\u1ea5y m\u00e3 m\u00e0u tr\u00ean Android qua \u1ee9ng d\u1ee5ng v\u00e0 tr\u00ecnh duy\u1ec7t<\/h3>\n<p style=\"text-align: justify;\">Tr\u00ean c\u00e1c thi\u1ebft b\u1ecb Android, b\u1ea1n c\u00f3 hai ph\u01b0\u01a1ng \u00e1n thu\u1eadn ti\u1ec7n:<\/p>\n<ul>\n<li><strong>D\u00f9ng tr\u00ecnh duy\u1ec7t Chrome Mobile:<\/strong> Truy c\u1eadp c\u00e1c c\u00f4ng c\u1ee5 online nh\u01b0 <em>imagecolorpicker.com<\/em> ho\u1eb7c <em>htmlcolorcodes.com<\/em>, t\u1ea3i \u1ea3nh ch\u1ee5p t\u1eeb th\u01b0 vi\u1ec7n v\u00e0 ch\u1ea1m tay v\u00e0o v\u1ecb tr\u00ed m\u00e0u c\u1ea7n l\u1ea5y.<\/li>\n<li><strong>C\u00e0i app chuy\u00ean d\u1ee5ng:<\/strong> T\u1ea3i \u1ee9ng d\u1ee5ng mi\u1ec5n ph\u00ed <em>Color Harmony<\/em> ho\u1eb7c <em>Pixolor &#8211; Live Color Picker<\/em> t\u1eeb Google Play Store. \u1ee8ng d\u1ee5ng Pixolor t\u1ea1o m\u1ed9t v\u00f2ng tr\u00f2n k\u00ednh l\u00fap n\u1ed5i tr\u00ean m\u00e0n h\u00ecnh, gi\u00fap b\u1ea1n di chuy\u1ec3n v\u00e0 l\u1ea5y m\u00e3 m\u00e0u RGB\/HEX c\u1ee7a b\u1ea5t k\u1ef3 \u1ee9ng d\u1ee5ng n\u00e0o \u0111ang m\u1edf.<\/li>\n<\/ul>\n<h2 id=\"section5\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin: 40px 0 20px; line-height: 1.4;\">5. L\u1ea5y m\u00e3 m\u00e0u to\u00e0n m\u00e0n h\u00ecnh b\u1eb1ng Windows PowerToys v\u00e0 macOS<\/h2>\n<p style=\"text-align: justify;\">N\u1ebfu b\u1ea1n mu\u1ed1n l\u1ea5y m\u00e3 m\u00e0u t\u1eeb m\u1ed9t video \u0111ang ch\u1ea1y, m\u1ed9t file PDF ho\u1eb7c b\u1ea5t k\u1ef3 ph\u1ea7n m\u1ec1m n\u00e0o tr\u00ean m\u00e0n h\u00ecnh m\u00e1y t\u00ednh m\u00e0 kh\u00f4ng c\u1ea7n ch\u1ee5p \u1ea3nh r\u1ed3i t\u1ea3i l\u00ean web, c\u00e1c ti\u1ec7n \u00edch h\u1ec7 \u0111i\u1ec1u h\u00e0nh l\u00e0 l\u1ef1a ch\u1ecdn nhanh nh\u1ea5t.<\/p>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 18px; font-weight: bold; margin-top: 25px;\">5.1. Windows PowerToys Color Picker (Ph\u00edm t\u1eaft Win + Shift + C)<\/h3>\n<p style=\"text-align: justify;\">Microsoft PowerToys l\u00e0 b\u1ed9 c\u00f4ng c\u1ee5 ch\u00ednh th\u1ee9c do Microsoft ph\u00e1t tri\u1ec3n d\u00e0nh cho Windows 10 v\u00e0 11. T\u00ednh n\u0103ng Color Picker trong PowerToys cho ph\u00e9p h\u00fat m\u00e0u t\u1ee9c th\u00ec \u1edf m\u1ecdi v\u1ecb tr\u00ed tr\u00ean m\u00e0n h\u00ecnh.<\/p>\n<ol>\n<li>C\u00e0i \u0111\u1eb7t Microsoft PowerToys t\u1eeb Microsoft Store ho\u1eb7c GitHub ch\u00ednh th\u1ee9c c\u1ee7a Microsoft.<\/li>\n<li>B\u1eadt t\u00ednh n\u0103ng <strong>Color Picker<\/strong> trong ph\u1ea7n c\u00e0i \u0111\u1eb7t PowerToys.<\/li>\n<li>Nh\u1ea5n t\u1ed5 h\u1ee3p ph\u00edm <strong>Windows + Shift + C<\/strong> \u1edf b\u1ea5t k\u1ef3 c\u1eeda s\u1ed5 l\u00e0m vi\u1ec7c n\u00e0o.<\/li>\n<li>R\u00ea chu\u1ed9t \u0111\u1ebfn v\u1ecb tr\u00ed m\u00e0u c\u1ea7n l\u1ea5y v\u00e0 nh\u1ea5p chu\u1ed9t tr\u00e1i. M\u1ed9t h\u1ed9p tho\u1ea1i popup s\u1ebd xu\u1ea5t hi\u1ec7n hi\u1ec3n th\u1ecb \u0111\u1ea7y \u0111\u1ee7 m\u00e3 HEX, RGB, CMYK, HSL, HSV.<\/li>\n<li>Nh\u1ea5p v\u00e0o m\u00e3 m\u00e0u \u0111\u1ec3 sao ch\u00e9p t\u1ef1 \u0111\u1ed9ng.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-43397\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Windows-PowerToys-Color-Picker.png\" alt=\"Windows PowerToys Color Picker\" width=\"645\" height=\"499\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Windows-PowerToys-Color-Picker.png 645w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Windows-PowerToys-Color-Picker-300x232.png 300w\" sizes=\"auto, (max-width: 645px) 100vw, 645px\" \/><\/p>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 18px; font-weight: bold; margin-top: 25px;\">5.2. Digital Color Meter tr\u00ean macOS<\/h3>\n<p style=\"text-align: justify;\">H\u1ec7 \u0111i\u1ec1u h\u00e0nh macOS t\u00edch h\u1ee3p s\u1eb5n \u1ee9ng d\u1ee5ng <strong>Digital Color Meter<\/strong> m\u00e0 kh\u00f4ng c\u1ea7n c\u00e0i \u0111\u1eb7t th\u00eam b\u1ea5t k\u1ef3 ph\u1ea7n m\u1ec1m b\u00ean th\u1ee9 ba n\u00e0o:<\/p>\n<ol>\n<li>M\u1edf Spotlight (nh\u1ea5n <strong>Cmd + Space<\/strong>) v\u00e0 g\u00f5 t\u00ecm <strong>Digital Color Meter<\/strong> r\u1ed3i nh\u1ea5n Enter.<\/li>\n<li>Trong menu hi\u1ec3n th\u1ecb, ch\u1ecdn h\u1ec7 m\u00e0u c\u1ea7n l\u1ea5y (Display in sRGB, Generic RGB ho\u1eb7c L*a*b*).<\/li>\n<li>R\u00ea chu\u1ed9t qua \u0111i\u1ec3m c\u1ea7n \u0111o m\u00e0u tr\u00ean m\u00e0n h\u00ecnh. Nh\u1ea5n t\u1ed5 h\u1ee3p ph\u00edm <strong>Cmd + Shift + C<\/strong> \u0111\u1ec3 sao ch\u00e9p gi\u00e1 tr\u1ecb m\u00e0u d\u1ea1ng chu\u1ed7i v\u0103n b\u1ea3n v\u00e0o b\u1ed9 nh\u1edb t\u1ea1m.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-43388\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Digital-Color-Meter-tren-macOS.jpg\" alt=\"Digital Color Meter tr\u00ean macOS\" width=\"1000\" height=\"563\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Digital-Color-Meter-tren-macOS.jpg 1000w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Digital-Color-Meter-tren-macOS-300x169.jpg 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/09\/Digital-Color-Meter-tren-macOS-768x432.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h2 id=\"section6\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin: 40px 0 20px; line-height: 1.4;\">6. Ph\u00e2n bi\u1ec7t h\u1ec7 m\u00e0u HEX, RGB, HSL, CMYK khi l\u1ea5y m\u00e3 m\u00e0u t\u1eeb \u1ea3nh<\/h2>\n<p style=\"text-align: justify;\">Khi l\u1ea5y m\u00e3 m\u00e0u t\u1eeb \u1ea3nh, c\u00e1c c\u00f4ng c\u1ee5 th\u01b0\u1eddng tr\u1ea3 v\u1ec1 nhi\u1ec1u \u0111\u1ecbnh d\u1ea1ng kh\u00e1c nhau. Hi\u1ec3u r\u00f5 m\u1ee5c \u0111\u00edch c\u1ee7a t\u1eebng h\u1ec7 m\u00e0u gi\u00fap b\u1ea1n s\u1eed d\u1ee5ng ch\u00ednh x\u00e1c cho t\u1eebng m\u1ee5c \u0111\u00edch thi\u1ebft k\u1ebf v\u00e0 l\u1eadp tr\u00ecnh:<\/p>\n<ul>\n<li><strong>M\u00e3 HEX (Hexadecimal):<\/strong> B\u1eaft \u0111\u1ea7u b\u1eb1ng d\u1ea5u th\u0103ng <code>#<\/code> theo sau b\u1edfi 6 k\u00fd t\u1ef1 s\u1ed1 v\u00e0 ch\u1eef (t\u1eeb 0 \u0111\u1ebfn 9 v\u00e0 t\u1eeb A \u0111\u1ebfn F), v\u00ed d\u1ee5 <code>#2563EB<\/code>. \u0110\u00e2y l\u00e0 ti\u00eau chu\u1ea9n ph\u1ed5 bi\u1ebfn nh\u1ea5t trong l\u1eadp tr\u00ecnh HTML\/CSS v\u00ec ng\u1eafn g\u1ecdn v\u00e0 d\u1ec5 nh\u00fang v\u00e0o m\u00e3 ngu\u1ed3n.<\/li>\n<li><strong>H\u1ec7 m\u00e0u RGB (Red, Green, Blue):<\/strong> Th\u1ec3 hi\u1ec7n c\u01b0\u1eddng \u0111\u1ed9 \u00e1nh s\u00e1ng c\u1ee7a ba m\u00e0u g\u1ed1c \u0111\u1ecf, l\u1ee5c, lam t\u1eeb 0 \u0111\u1ebfn 255, v\u00ed d\u1ee5 <code>rgb(37, 99, 235)<\/code>. Th\u01b0\u1eddng d\u00f9ng trong thi\u1ebft k\u1ebf m\u00e0n h\u00ecnh k\u1ef9 thu\u1eadt s\u1ed1 v\u00e0 CSS khi c\u1ea7n \u00e1p d\u1ee5ng \u0111\u1ed9 trong su\u1ed1t v\u1edbi <code>rgba(37, 99, 235, 0.8)<\/code>.<\/li>\n<li><strong>H\u1ec7 m\u00e0u HSL (Hue, Saturation, Lightness):<\/strong> Th\u1ec3 hi\u1ec7n t\u00f4ng m\u00e0u (0\u2013360 \u0111\u1ed9), \u0111\u1ed9 b\u00e3o h\u00f2a (%) v\u00e0 \u0111\u1ed9 s\u00e1ng (%), v\u00ed d\u1ee5 <code>hsl(221, 83%, 53%)<\/code>. HSL r\u1ea5t thu\u1eadn ti\u1ec7n cho UI designer khi mu\u1ed1n t\u1ea1o c\u00e1c bi\u1ebfn th\u1ec3 m\u00e0u hover, active (\u0111\u1eadm\/nh\u1ea1t) m\u1ed9t c\u00e1ch khoa h\u1ecdc.<\/li>\n<li><strong>H\u1ec7 m\u00e0u CMYK (Cyan, Magenta, Yellow, Key\/Black):<\/strong> H\u1ec7 4 m\u00e0u m\u1ef1c in c\u00f4ng nghi\u1ec7p. N\u1ebfu l\u1ea5y m\u00e0u t\u1eeb \u1ea3nh m\u00e0n h\u00ecnh (v\u1ed1n thu\u1ed9c h\u1ec7 RGB) \u0111\u1ec3 \u0111\u01b0a \u0111i in \u1ea5n m\u00e0 kh\u00f4ng chuy\u1ec3n \u0111\u1ed5i qua CMYK, m\u00e0u in ra th\u1ef1c t\u1ebf s\u1ebd b\u1ecb x\u1ec9n v\u00e0 sai l\u1ec7ch so v\u1edbi m\u00e0n h\u00ecnh.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Trong qu\u00e1 tr\u00ecnh x\u00e2y d\u1ef1ng giao di\u1ec7n \u0111\u1ed3ng b\u1ed9, m\u00e0u s\u1eafc c\u1ea7n \u0111\u01b0\u1ee3c k\u1ebft h\u1ee3p h\u00e0i h\u00f2a v\u1edbi b\u1ed9 icon tr\u1ef1c quan t\u1eeb c\u00e1c <a href=\"https:\/\/interdata.vn\/blog\/trang-web-icon-mien-phi\/\">trang web icon mi\u1ec5n ph\u00ed<\/a> v\u00e0 c\u00e1ch b\u1ed1 tr\u00ed c\u00e1c kh\u1ed1i \u0111i\u1ec1u h\u01b0\u1edbng qua b\u00e0i vi\u1ebft <a href=\"https:\/\/interdata.vn\/blog\/navigation-la-gi-huong-dan-thiet-ke-toi-uu-va-tranh-loi\/\/\">t\u1ed1i \u01b0u navigation menu<\/a> nh\u1eb1m t\u0103ng tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng tr\u00ean n\u1ec1n t\u1ea3ng <a href=\"https:\/\/interdata.vn\/blog\/responsive-web-design-la-gi\/\">thi\u1ebft k\u1ebf web responsive<\/a>.<\/p>\n<div style=\"display: flex; flex-wrap: wrap; background-color: #fff; border: 1.5px solid #BFDBFE; box-shadow: 0 8px 20px rgba(37,99,235,0.08); border-radius: 12px; overflow: hidden; margin: 35px 0;\">\n<div style=\"flex: 1; min-width: 250px; background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%); display: flex; align-items: center; justify-content: center; padding: 30px; text-align: center;\">\n<div>\n<p style=\"color: #fff; font-size: 34px; font-family: 'Be Vietnam Pro', sans-serif; font-weight: bold; margin: 0; line-height: 1.1;\">Cloud Server InterData<\/p>\n<p style=\"color: #dbeafe; font-size: 15px; font-weight: 600; margin-top: 12px;\">N\u00e2ng\/h\u1ea1 t\u00e0i nguy\u00ean nhanh theo t\u1ea3i, m\u1ea1ng t\u1ed1c \u0111\u1ed9 cao<\/p>\n<\/div>\n<\/div>\n<div style=\"flex: 2; padding: 25px; min-width: 300px;\">\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; margin-top: 0; font-size: 20px;\">Qu\u1ea3n l\u00fd nhi\u1ec1u website kh\u00e1ch h\u00e0ng, traffic bi\u1ebfn \u0111\u1ed9ng?<\/h3>\n<p style=\"text-align: justify; font-size: 15px; margin-bottom: 15px;\">D\u00e0nh cho c\u00e1c agency thi\u1ebft k\u1ebf v\u00e0 \u0111\u1ed9i ng\u0169 ph\u00e1t tri\u1ec3n web c\u1ea7n qu\u1ea3n l\u00fd h\u1ea1 t\u1ea7ng cho h\u00e0ng ch\u1ee5c d\u1ef1 \u00e1n c\u00f9ng l\u00fac. Kh\u1ea3 n\u0103ng scale linh ho\u1ea1t theo t\u1ea3i gi\u00fap x\u1eed l\u00fd dung l\u01b0\u1ee3ng file h\u00ecnh \u1ea3nh, CSS v\u00e0 asset giao di\u1ec7n n\u1eb7ng m\u1ed9t c\u00e1ch \u1ed5n \u0111\u1ecbnh.<\/p>\n<p><a style=\"background: linear-gradient(90deg, #2563EB 0%, #1E3A8A 100%); color: #fff; padding: 12px 25px; text-decoration: none; font-weight: 600; border-radius: 8px; font-size: 15px; display: inline-block; box-shadow: 0 5px 15px rgba(37,99,235,0.3);\" href=\"https:\/\/interdata.vn\/cloud-server\/\" target=\"_blank\" rel=\"noopener\">Xem g\u00f3i Cloud Server \u27f6<\/a><\/p>\n<\/div>\n<\/div>\n<h2 id=\"section7\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin: 40px 0 20px; line-height: 1.4;\">7. B\u1ea3ng so s\u00e1nh 8+ c\u00f4ng c\u1ee5 l\u1ea5y m\u00e3 m\u00e0u t\u1eeb \u1ea3nh v\u00e0 website<\/h2>\n<p style=\"text-align: justify;\">B\u1ea3ng t\u1ed5ng h\u1ee3p d\u01b0\u1edbi \u0111\u00e2y gi\u00fap b\u1ea1n nhanh ch\u00f3ng ch\u1ecdn \u0111\u01b0\u1ee3c c\u00f4ng c\u1ee5 ph\u00f9 h\u1ee3p nh\u1ea5t t\u00f9y theo thi\u1ebft b\u1ecb v\u00e0 ng\u1eef c\u1ea3nh l\u00e0m vi\u1ec7c:<\/p>\n<div style=\"overflow-x: auto; margin: 25px 0;\">\n<table style=\"width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; border: 1px solid #E2E8F0;\">\n<thead>\n<tr style=\"background-color: #1e3a8a; color: #ffffff;\">\n<th style=\"padding: 12px 15px; border: 1px solid #CBD5E1;\">C\u00f4ng c\u1ee5<\/th>\n<th style=\"padding: 12px 15px; border: 1px solid #CBD5E1;\">N\u1ec1n t\u1ea3ng \/ Lo\u1ea1i<\/th>\n<th style=\"padding: 12px 15px; border: 1px solid #CBD5E1;\">Ph\u00f9 h\u1ee3p cho<\/th>\n<th style=\"padding: 12px 15px; border: 1px solid #CBD5E1;\">\u0110\u1eb7c \u0111i\u1ec3m n\u1ed5i b\u1eadt<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr style=\"background-color: #f8fafc;\">\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1; font-weight: 600;\">ImageColorPicker.com<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">Website Online<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">L\u1ea5y m\u00e3 m\u00e0u t\u1eeb file \u1ea3nh<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">C\u00f3 k\u00ednh l\u00fap zoom chi ti\u1ebft t\u1eebng pixel<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1; font-weight: 600;\">Chrome DevTools<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">T\u00edch h\u1ee3p tr\u00ecnh duy\u1ec7t<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">Front-end Dev, s\u1eeda CSS<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">L\u1ea5y ch\u00ednh x\u00e1c m\u00e0u code CSS th\u1ef1c t\u1ebf<\/td>\n<\/tr>\n<tr style=\"background-color: #f8fafc;\">\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1; font-weight: 600;\">ColorZilla<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">Extension Chrome\/Firefox<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">Web Designer, Marketer<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">L\u01b0u l\u1ecbch s\u1eed b\u1ea3ng m\u00e0u, h\u00fat m\u00e0u 1 ch\u1ea1m<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1; font-weight: 600;\">PowerToys Color Picker<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">Ph\u1ea7n m\u1ec1m Windows<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">M\u1ecdi t\u00e1c v\u1ee5 tr\u00ean desktop<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">Ph\u00edm t\u1eaft Win+Shift+C to\u00e0n m\u00e0n h\u00ecnh<\/td>\n<\/tr>\n<tr style=\"background-color: #f8fafc;\">\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1; font-weight: 600;\">Figma Eyedropper<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">App UI\/UX Design<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">UI\/UX Designer<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">\u00c1p m\u00e0u t\u1ee9c th\u00ec v\u00e0o component v\u00e0 vector<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1; font-weight: 600;\">Adobe Photoshop<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">Ph\u1ea7n m\u1ec1m Desktop<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">Graphic Designer<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">H\u1ed7 tr\u1ee3 t\u00ednh m\u00e0u trung b\u00ecnh v\u00f9ng \u0111i\u1ec3m \u1ea3nh<\/td>\n<\/tr>\n<tr style=\"background-color: #f8fafc;\">\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1; font-weight: 600;\">iOS Markup<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">T\u00edch h\u1ee3p iOS<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">Ng\u01b0\u1eddi d\u00f9ng iPhone\/iPad<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">Kh\u00f4ng c\u1ea7n c\u00e0i th\u00eam \u1ee9ng d\u1ee5ng ngo\u00e0i<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1; font-weight: 600;\">Coolors.co<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">Website Online<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">T\u1ea1o palette th\u01b0\u01a1ng hi\u1ec7u<\/td>\n<td style=\"padding: 10px 15px; border: 1px solid #CBD5E1;\">T\u1ef1 \u0111\u1ed9ng ph\u00e2n t\u00edch 5 m\u00e0u ch\u1ee7 \u0111\u1ea1o t\u1eeb \u1ea3nh<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h2 id=\"section8\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin: 40px 0 20px; line-height: 1.4;\">8. M\u1eb9o l\u01b0u tr\u1eef v\u00e0 \u00e1p d\u1ee5ng m\u00e3 m\u00e0u v\u00e0o thi\u1ebft k\u1ebf CSS th\u1ef1c t\u1ebf<\/h2>\n<p style=\"text-align: justify;\">Sau khi \u0111\u00e3 l\u1ea5y \u0111\u01b0\u1ee3c c\u00e1c m\u00e3 m\u00e0u \u01b0ng \u00fd t\u1eeb \u1ea3nh, vi\u1ec7c qu\u1ea3n l\u00fd v\u00e0 \u00e1p d\u1ee5ng ch\u00fang v\u00e0o d\u1ef1 \u00e1n web \u0111\u00f2i h\u1ecfi t\u00ednh h\u1ec7 th\u1ed1ng \u0111\u1ec3 thu\u1eadn ti\u1ec7n b\u1ea3o tr\u00ec v\u00e0 \u0111\u1ed3ng b\u1ed9 th\u01b0\u01a1ng hi\u1ec7u.<\/p>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 18px; font-weight: bold; margin-top: 25px;\">8.1. Khai b\u00e1o bi\u1ebfn to\u00e0n c\u1ee5c b\u1eb1ng CSS Custom Properties (CSS Variables)<\/h3>\n<p style=\"text-align: justify;\">Thay v\u00ec vi\u1ebft tr\u1ef1c ti\u1ebfp m\u00e3 m\u00e0u v\u00e0o t\u1eebng d\u00f2ng l\u1ec7nh CSS, b\u1ea1n n\u00ean gom to\u00e0n b\u1ed9 m\u00e3 m\u00e0u l\u1ea5y \u0111\u01b0\u1ee3c v\u00e0o ph\u1ea7n t\u1eed <code>:root<\/code>. Khi c\u1ea7n \u0111\u1ed5i m\u00e0u th\u01b0\u01a1ng hi\u1ec7u, b\u1ea1n ch\u1ec9 c\u1ea7n ch\u1ec9nh s\u1eeda t\u1ea1i m\u1ed9t n\u01a1i duy nh\u1ea5t:<\/p>\n<pre><code>:root {\r\n  \/* B\u1ea3ng m\u00e0u ch\u00ednh tr\u00edch xu\u1ea5t t\u1eeb Logo th\u01b0\u01a1ng hi\u1ec7u *\/\r\n  --primary-color: #1E3A8A;       \/* Xanh Navy ch\u1ee7 \u0111\u1ea1o *\/\r\n  --accent-color: #2563EB;        \/* Xanh d\u01b0\u01a1ng \u0111i\u1ec3m nh\u1ea5n *\/\r\n  --background-light: #EFF6FF;    \/* N\u1ec1n s\u00e1ng ph\u1ee5 tr\u1ee3 *\/\r\n  --text-main: #1F2937;           \/* M\u00e0u ch\u1eef ch\u00ednh *\/\r\n  --text-muted: #6B7280;          \/* M\u00e0u ch\u1eef ph\u1ee5 *\/\r\n}\r\n\r\n\/* \u00c1p d\u1ee5ng v\u00e0o c\u00e1c th\u00e0nh ph\u1ea7n giao di\u1ec7n *\/\r\n.header-navbar {\r\n  background-color: var(--primary-color);\r\n}\r\n\r\n.btn-cta {\r\n  background-color: var(--accent-color);\r\n  color: #FFFFFF;\r\n}\r\n\r\n.card-box {\r\n  background-color: var(--background-light);\r\n  color: var(--text-main);\r\n}<\/code><\/pre>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 18px; font-weight: bold; margin-top: 25px;\">8.2. L\u01b0u \u00fd tr\u00e1nh sai l\u1ec7ch m\u00e0u khi l\u1ea5y t\u1eeb \u1ea3nh<\/h3>\n<ul style=\"margin-left: 20px; line-height: 1.8;\">\n<li><strong>Tr\u00e1nh v\u00f9ng n\u00e9n \u1ea3nh (Artifacts):<\/strong> C\u00e1c file JPG b\u1ecb n\u00e9n dung l\u01b0\u1ee3ng th\u01b0\u1eddng c\u00f3 c\u00e1c h\u1ea1t nhi\u1ec5u quanh vi\u1ec1n ch\u1eef ho\u1eb7c logo. H\u00e3y ph\u00f3ng to v\u00e0 ch\u1ecdn \u0111\u00fang pixel thu\u1ea7n \u1edf gi\u1eefa kh\u1ed1i m\u00e0u.<\/li>\n<li><strong>Ki\u1ec3m tra kh\u00f4ng gian m\u00e0u (Color Profile):<\/strong> M\u1ed9t s\u1ed1 \u1ea3nh ch\u1ee5p c\u00f3 g\u1eafn profile Display P3 ho\u1eb7c Adobe RGB, khi hi\u1ec3n th\u1ecb tr\u00ean tr\u00ecnh duy\u1ec7t sRGB c\u00f3 th\u1ec3 b\u1ecb l\u1ec7ch nh\u1eb9 s\u1eafc \u0111\u1ed9. Lu\u00f4n ki\u1ec3m tra l\u1ea1i m\u00e3 HEX tr\u00ean m\u00e0n h\u00ecnh chu\u1ea9n tr\u01b0\u1edbc khi \u0111\u00f3ng g\u00f3i s\u1ea3n ph\u1ea9m.<\/li>\n<\/ul>\n<h2 id=\"faq\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin: 40px 0 20px; line-height: 1.4;\">9. FAQ \u2014 C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p khi l\u1ea5y m\u00e3 m\u00e0u<\/h2>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 17px; font-weight: bold; margin-top: 20px;\">L\u1ea5y m\u00e3 m\u00e0u t\u1eeb \u1ea3nh online mi\u1ec5n ph\u00ed \u1edf \u0111\u00e2u nhanh nh\u1ea5t?<\/h3>\n<p style=\"text-align: justify;\">ImageColorPicker.com v\u00e0 HTML Color Codes l\u00e0 hai website ti\u1ec7n l\u1ee3i nh\u1ea5t. B\u1ea1n ch\u1ec9 c\u1ea7n k\u00e9o \u1ea3nh v\u00e0o tr\u00ecnh duy\u1ec7t, c\u00f4ng c\u1ee5 t\u00edch h\u1ee3p k\u00ednh l\u00fap gi\u00fap x\u00e1c \u0111\u1ecbnh ch\u00ednh x\u00e1c t\u1eebng \u0111i\u1ec3m pixel v\u00e0 cung c\u1ea5p m\u00e3 HEX, RGB, HSL ngay l\u1eadp t\u1ee9c m\u00e0 kh\u00f4ng c\u1ea7n \u0111\u0103ng k\u00fd t\u00e0i kho\u1ea3n.<\/p>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 17px; font-weight: bold; margin-top: 20px;\">L\u00e0m sao l\u1ea5y m\u00e3 m\u00e0u tr\u00ean website m\u00e0 kh\u00f4ng c\u1ea7n c\u00e0i ph\u1ea7n m\u1ec1m?<\/h3>\n<p style=\"text-align: justify;\">B\u1ea1n nh\u1ea5n ph\u00edm F12 \u0111\u1ec3 m\u1edf Chrome DevTools, chuy\u1ec3n sang b\u1ea3ng Styles \u1edf c\u1ed9t b\u00ean ph\u1ea3i, nh\u1ea5p v\u00e0o \u00f4 m\u00e0u b\u1ea5t k\u1ef3 \u0111\u1ec3 b\u1eadt Color Picker r\u1ed3i ch\u1ecdn bi\u1ec3u t\u01b0\u1ee3ng Eyedropper. Sau \u0111\u00f3, nh\u1ea5p v\u00e0o b\u1ea5t k\u1ef3 v\u1ecb tr\u00ed n\u00e0o tr\u00ean trang web \u0111\u1ec3 l\u1ea5y m\u00e3 m\u00e0u CSS g\u1ed1c.<\/p>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 17px; font-weight: bold; margin-top: 20px;\">M\u00e3 HEX v\u00e0 RGB kh\u00e1c nhau th\u1ebf n\u00e0o, n\u00ean d\u00f9ng c\u00e1i n\u00e0o cho CSS?<\/h3>\n<p style=\"text-align: justify;\">HEX th\u1ec3 hi\u1ec7n m\u00e0u b\u1eb1ng chu\u1ed7i 6 k\u00fd t\u1ef1 s\u1ed1 v\u00e0 ch\u1eef ng\u1eafn g\u1ecdn, thu\u1eadn ti\u1ec7n cho vi\u1ec7c khai b\u00e1o m\u00e0u c\u01a1 b\u1ea3n trong CSS. RGB th\u1ec3 hi\u1ec7n c\u01b0\u1eddng \u0111\u1ed9 3 k\u00eanh m\u00e0u (0\u2013255), r\u1ea5t h\u1eefu \u00edch khi k\u1ebft h\u1ee3p k\u00eanh Alpha <code>rgba()<\/code> \u0111\u1ec3 t\u00f9y bi\u1ebfn \u0111\u1ed9 m\u1edd trong su\u1ed1t c\u1ee7a th\u00e0nh ph\u1ea7n web.<\/p>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 17px; font-weight: bold; margin-top: 20px;\">C\u00f3 c\u00e1ch n\u00e0o l\u1ea5y m\u00e3 m\u00e0u t\u1eeb \u1ea3nh tr\u00ean iPhone kh\u00f4ng c\u1ea7n c\u00e0i app?<\/h3>\n<p style=\"text-align: justify;\">C\u00f3. B\u1ea1n m\u1edf b\u1ee9c \u1ea3nh trong \u1ee9ng d\u1ee5ng \u1ea2nh (Photos), b\u1ea5m S\u1eeda &gt; ch\u1ecdn bi\u1ec3u t\u01b0\u1ee3ng Markup (C\u00e2y b\u00fat) &gt; ch\u1ecdn B\u1ea3ng m\u00e0u &gt; ch\u1ea1m v\u00e0o bi\u1ec3u t\u01b0\u1ee3ng H\u00fat m\u00e0u (Eyedropper) \u1edf g\u00f3c tr\u00ean. Di chuy\u1ec3n v\u00f2ng tr\u00f2n \u0111\u1ebfn \u0111i\u1ec3m c\u1ea7n \u0111o v\u00e0 chuy\u1ec3n sang m\u1ee5c Thanh tr\u01b0\u1ee3t \u0111\u1ec3 ch\u00e9p m\u00e3 HEX.<\/p>\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 17px; font-weight: bold; margin-top: 20px;\">T\u1ea1i sao m\u00e3 m\u00e0u l\u1ea5y t\u1eeb \u1ea3nh hi\u1ec3n th\u1ecb kh\u00e1c v\u1edbi m\u00e0u khi in ra gi\u1ea5y?<\/h3>\n<p style=\"text-align: justify;\">M\u00e0n h\u00ecnh m\u00e1y t\u00ednh ph\u00e1t quang theo h\u1ec7 m\u00e0u RGB, trong khi m\u00e1y in ph\u1ed1i m\u00e0u v\u1eadt l\u00fd b\u1eb1ng 4 h\u1ed9p m\u1ef1c CMYK. Kh\u00f4ng gian m\u00e0u RGB r\u1ed9ng h\u01a1n CMYK, do \u0111\u00f3 c\u00e1c m\u00e0u r\u1ef1c r\u1ee1 tr\u00ean m\u00e0n h\u00ecnh khi chuy\u1ec3n \u0111\u1ed5i sang in \u1ea5n th\u1ef1c t\u1ebf s\u1ebd c\u00f3 xu h\u01b0\u1edbng t\u1ed1i v\u00e0 k\u00e9m t\u01b0\u01a1i h\u01a1n.<\/p>\n<div style=\"border-top: 2px dashed #BFDBFE; margin-top: 50px; padding-top: 30px;\">\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 22px; font-weight: bold; margin-bottom: 15px;\">K\u1ebft n\u1ed1i m\u00e0u s\u1eafc ho\u00e0n ch\u1ec9nh cho d\u1ef1 \u00e1n website c\u1ee7a b\u1ea1n<\/h3>\n<p style=\"text-align: justify;\">N\u1eafm v\u1eefng <strong>c\u00e1ch l\u1ea5y m\u00e3 m\u00e0u t\u1eeb \u1ea3nh<\/strong> v\u00e0 tr\u00edch xu\u1ea5t m\u00e0u tr\u00ean website gi\u00fap b\u1ea1n l\u00e0m ch\u1ee7 b\u1ea3ng m\u00e0u, duy tr\u00ec t\u00ednh nh\u1ea5t qu\u00e1n cho th\u01b0\u01a1ng hi\u1ec7u v\u00e0 ti\u1ebft ki\u1ec7m th\u1eddi gian vi\u1ebft m\u00e3 CSS. H\u00e3y l\u1ef1a ch\u1ecdn c\u00f4ng c\u1ee5 ph\u00f9 h\u1ee3p v\u1edbi quy tr\u00ecnh l\u00e0m vi\u1ec7c c\u1ee7a b\u1ea1n \u2014 t\u1eeb ti\u1ec7n \u00edch online, ph\u00edm t\u1eaft h\u1ec7 \u0111i\u1ec1u h\u00e0nh cho \u0111\u1ebfn Chrome DevTools chuy\u00ean s\u00e2u \u2014 \u0111\u1ec3 t\u1ed1i \u01b0u h\u00f3a hi\u1ec7u su\u1ea5t thi\u1ebft k\u1ebf ngay h\u00f4m nay.<\/p>\n<\/div>\n<p style=\"text-align: justify; font-size: 13px; font-style: italic; color: #6b7280; margin-top: 30px; border-top: 1px solid #E5E7EB; padding-top: 15px;\"><span style=\"font-size: 100%;\"><em>N\u1ed9i dung mang t\u00ednh tham kh\u1ea3o. Giao di\u1ec7n c\u00f4ng c\u1ee5, v\u1ecb tr\u00ed n\u00fat ch\u1ee9c n\u0103ng c\u00f3 th\u1ec3 thay \u0111\u1ed5i theo phi\u00ean b\u1ea3n ph\u1ea7n m\u1ec1m, tr\u00ecnh duy\u1ec7t v\u00e0 h\u1ec7 \u0111i\u1ec1u h\u00e0nh. M\u00e0u s\u1eafc hi\u1ec3n th\u1ecb ph\u1ee5 thu\u1ed9c v\u00e0o m\u00e0n h\u00ecnh, c\u1ea5u h\u00ecnh color profile v\u00e0 \u0111\u1ecbnh d\u1ea1ng file \u1ea3nh. N\u00ean ki\u1ec3m tra m\u00e3 m\u00e0u tr\u00ean thi\u1ebft b\u1ecb th\u1ef1c t\u1ebf v\u00e0 so s\u00e1nh v\u1edbi b\u1ea3ng m\u00e0u th\u01b0\u01a1ng hi\u1ec7u chu\u1ea9n tr\u01b0\u1edbc khi \u0111\u01b0a v\u00e0o production.<\/em><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>C\u00e1ch l\u1ea5y m\u00e3 m\u00e0u t\u1eeb \u1ea3nh gi\u00fap b\u1ea1n tr\u00edch xu\u1ea5t ch\u00ednh x\u00e1c th\u00f4ng s\u1ed1 HEX, RGB ho\u1eb7c HSL t\u1eeb b\u1ea5t k\u1ef3 b\u1ee9c \u1ea3nh hay giao di\u1ec7n n\u00e0o \u0111\u1ec3 \u00e1p d\u1ee5ng tr\u1ef1c ti\u1ebfp v\u00e0o code CSS, thi\u1ebft k\u1ebf banner ho\u1eb7c x\u00e2y d\u1ef1ng b\u1ed9 nh\u1eadn di\u1ec7n th\u01b0\u01a1ng hi\u1ec7u. Khi ph\u00e1t tri\u1ec3n giao di\u1ec7n web t\u1ea1i InterData, vi\u1ec7c<\/p>\n","protected":false},"author":2,"featured_media":43398,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[100],"tags":[],"class_list":["post-43381","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website"],"_links":{"self":[{"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/posts\/43381","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/comments?post=43381"}],"version-history":[{"count":4,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/posts\/43381\/revisions"}],"predecessor-version":[{"id":43400,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/posts\/43381\/revisions\/43400"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/media\/43398"}],"wp:attachment":[{"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/media?parent=43381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/categories?post=43381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/tags?post=43381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}