Code tạo trang lấy mã màu nhanh cực đẹp cho blogspot

Một tiện ích lấy mã màu nhanh để bổ sung cho blog thêm phong phú. Code mấy dạng này trên Google thì thấy có nhiều nhưng code này thấy hay hay nên share lên đây cho mọi người cần thì sử dụng cho blogspot của mình.

Code tạo trang lấy mã màu nhanh cực đẹp cho blogspot.

Live Preview

Code tạo trang lấy mã màu blogspot

Bước 1: đăng nhập Blogger

Bước 2: Trang > Tạo trang mới

Bước 3: Ở mục HTML, copy và dán đoạn code sau vào:

<center>
  <div class="wrap-header">🎨 Tailwind Color Picker</div>
  <div id="colorGrid"></div>

  <div class="kode-warna" id="kode-warna">
    <div class="colorName" id="colorName">Vui lòng chọn màu phía trên</div>
    <div class="colorText" id="colorText">Mã màu sẽ hiển thị ở đây</div>
  </div>
</center>

<style>
.wrap-header {
  text-align:center;
  font-size:22px;
  background:#333;
  color:#fafafa;
  padding:12px;
  font-weight:700;
  border-radius:6px;
  margin-bottom:15px;
}
#colorGrid {
  display:grid;
  grid-template-columns:repeat(auto-fill,40px);
  gap:6px;
  justify-content:center;
  margin-bottom:20px;
}
.colorBox {
  width:40px;
  height:40px;
  border-radius:6px;
  cursor:pointer;
  border:1px solid #ccc;
  transition:transform .2s ease;
}
.colorBox:hover {
  transform:scale(1.15);
}
.kode-warna {
  line-height:normal;
  border:1px solid #ccc;
  padding:30px 20px;
  font-size:26px;
  color:#444;
  width:100%;
  max-width:600px;
  background:#ececec;
  border-radius:8px;
  box-shadow:0 3px 6px rgba(0,0,0,0.1);
}
.colorName {font-weight:700;margin-bottom:8px;}
.colorText {font-size:18px;}
</style>

<script>
// Trọn bộ Tailwind Colors (chọn ~60 màu phổ biến nhất)
const colors = [
  // Gray scale
  {name:"Gray 50", code:"#f9fafb"},
  {name:"Gray 100", code:"#f3f4f6"},
  {name:"Gray 300", code:"#d1d5db"},
  {name:"Gray 500", code:"#6b7280"},
  {name:"Gray 700", code:"#374151"},
  {name:"Gray 900", code:"#111827"},

  // Red
  {name:"Red 100", code:"#fee2e2"},
  {name:"Red 300", code:"#fca5a5"},
  {name:"Red 500", code:"#ef4444"},
  {name:"Red 700", code:"#b91c1c"},
  {name:"Red 900", code:"#7f1d1d"},

  // Yellow
  {name:"Yellow 100", code:"#fef9c3"},
  {name:"Yellow 300", code:"#fde047"},
  {name:"Yellow 500", code:"#eab308"},
  {name:"Yellow 700", code:"#a16207"},
  {name:"Yellow 900", code:"#713f12"},

  // Green
  {name:"Green 100", code:"#dcfce7"},
  {name:"Green 300", code:"#86efac"},
  {name:"Green 500", code:"#22c55e"},
  {name:"Green 700", code:"#15803d"},
  {name:"Green 900", code:"#14532d"},

  // Emerald
  {name:"Emerald 100", code:"#d1fae5"},
  {name:"Emerald 300", code:"#6ee7b7"},
  {name:"Emerald 500", code:"#10b981"},
  {name:"Emerald 700", code:"#047857"},
  {name:"Emerald 900", code:"#064e3b"},

  // Teal
  {name:"Teal 100", code:"#ccfbf1"},
  {name:"Teal 300", code:"#5eead4"},
  {name:"Teal 500", code:"#14b8a6"},
  {name:"Teal 700", code:"#0f766e"},
  {name:"Teal 900", code:"#134e4a"},

  // Cyan
  {name:"Cyan 100", code:"#cffafe"},
  {name:"Cyan 300", code:"#67e8f9"},
  {name:"Cyan 500", code:"#06b6d4"},
  {name:"Cyan 700", code:"#0e7490"},
  {name:"Cyan 900", code:"#164e63"},

  // Blue
  {name:"Blue 100", code:"#dbeafe"},
  {name:"Blue 300", code:"#93c5fd"},
  {name:"Blue 500", code:"#3b82f6"},
  {name:"Blue 700", code:"#1d4ed8"},
  {name:"Blue 900", code:"#1e3a8a"},

  // Indigo
  {name:"Indigo 100", code:"#e0e7ff"},
  {name:"Indigo 300", code:"#a5b4fc"},
  {name:"Indigo 500", code:"#6366f1"},
  {name:"Indigo 700", code:"#4338ca"},
  {name:"Indigo 900", code:"#312e81"},

  // Purple
  {name:"Purple 100", code:"#f3e8ff"},
  {name:"Purple 300", code:"#d8b4fe"},
  {name:"Purple 500", code:"#a855f7"},
  {name:"Purple 700", code:"#7e22ce"},
  {name:"Purple 900", code:"#581c87"},

  // Pink
  {name:"Pink 100", code:"#fce7f3"},
  {name:"Pink 300", code:"#f9a8d4"},
  {name:"Pink 500", code:"#ec4899"},
  {name:"Pink 700", code:"#be185d"},
  {name:"Pink 900", code:"#831843"},
];

const colorGrid = document.getElementById("colorGrid");
const kodeBox = document.getElementById("kode-warna");
const colorName = document.getElementById("colorName");
const colorText = document.getElementById("colorText");

// Tạo ô màu
colors.forEach(c=>{
  const box = document.createElement("div");
  box.className="colorBox";
  box.style.background=c.code;
  box.title=`${c.name} (${c.code})`;
  box.addEventListener("click",()=>{
    kodeBox.style.backgroundColor=c.code;
    colorName.innerText=c.name;
    colorText.innerText=c.code;
    // đổi chữ sáng/tối
    const isLight = tinycolor(c.code).isLight();
    colorName.style.color = isLight ? "#000":"#fff";
    colorText.style.color = isLight ? "#000":"#fff";
  });
  colorGrid.appendChild(box);
});

// Check sáng tối
function tinycolor(hex){
  hex=hex.replace("#","");
  if(hex.length===3) hex=hex.split("").map(x=>x+x).join("");
  const r=parseInt(hex.substr(0,2),16);
  const g=parseInt(hex.substr(2,2),16);
  const b=parseInt(hex.substr(4,2),16);
  const brightness=(r*299+g*587+b*114)/1000;
  return {isLight:()=>brightness>155};
}
</script>
  

Bước 4: Xuất bản Trang và xem kết quả.

Kết luận

Với các bước đơn giản và đoạn code trên bạn có thể dễ dàng tạo một trang lấy mã màu riêng cho blogspot của mình rồi. Thường xuyên ghé Anh Trai Nắng Blog để xem nhiều cái thú vị hơn nhé.

Chúc các bạn thành công.