Membuat Tampilan Pilih Warna dengan Teks Otomatis Kontras (TailwindCSS + Dark Mode)

Pendahuluan

Pernahkah kamu ingin membuat tampilan web di mana background bisa diganti warnanya dan teks otomatis menyesuaikan agar tetap terbaca jelas (hitam atau putih)?
Pada tutorial ini kita akan membuat:

  • Background yang bisa diubah dengan color picker
  • Teks yang otomatis hitam atau putih tergantung kecerahan warna
  • Mendukung Dark Mode otomatis (mengikuti OS)
  • Transisi animasi smooth dan fitur copy-to-clipboard

Kita akan menggunakan TailwindCSS agar styling lebih cepat dan responsif.

Hasil Akhir

  • Sidebar kiri: input color picker + preview kode warna + kode warna teks.
  • Content kanan: background berubah sesuai pilihan, teks otomatis kontras.
  • Dark Mode: mengikuti pengaturan sistem (OS).

Langkah-langkah

1. Siapkan File HTML

Buat file baru, misalnya index.html.

2. Tambahkan TailwindCSS

Kita gunakan CDN (cara cepat untuk demo):

<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    darkMode: 'media' // otomatis mengikuti setting OS
  }
</script>
3. Struktur HTML

Kita buat dua bagian utama:

  • Sidebar untuk color picker dan informasi kode warna.
  • Content untuk background dan teks kontras.
4. Logika JavaScript
  • Ambil kode warna dari color picker.
  • Hitung kecerahan warna (menggunakan algoritma YIQ).
  • Ubah warna teks menjadi hitam atau putih secara otomatis.
  • Tambahkan animasi fade/zoom saat teks berubah.
  • Tambahkan fitur copy-to-clipboard.
Kode Lengkap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Auto Contrast + TailwindCSS + Dark Mode</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'media' // mengikuti OS
    }
  </script>
</head>
<body class="h-screen flex bg-gray-200 dark:bg-gray-900 font-sans transition-colors duration-500">
  <!-- Sidebar -->
  <div class="w-64 bg-gray-50 dark:bg-gray-800 p-5 shadow-md flex flex-col gap-4 transition-colors duration-500">
    <label for="colorPicker" class="font-semibold text-gray-700 dark:text-gray-100 text-lg">Pilih Warna:</label>
    <div class="flex items-center gap-3">
      <input type="color" id="colorPicker" value="#3498db"
        class="w-14 h-14 cursor-pointer rounded-md border border-gray-300 shadow transition-transform hover:scale-110" />
      <div id="hex-value"
        class="px-3 py-2 rounded bg-white dark:bg-gray-700 shadow font-semibold text-center cursor-pointer text-gray-700 dark:text-gray-100 transition hover:bg-gray-100 dark:hover:bg-gray-600"
        title="Klik untuk copy">
        #3498DB
      </div>
    </div>
    <div class="text-sm text-gray-600 dark:text-gray-300">Warna teks: 
      <span id="text-hex" class="font-semibold">#FFFFFF</span>
    </div>
    <p class="text-xs text-gray-500 dark:text-gray-400">Klik pada kode untuk copy ke clipboard</p>
  </div>

  <!-- Content -->
  <div id="main-content"
    class="flex-1 flex justify-center items-center transition-colors duration-700 ease-in-out">
    <div id="text-content"
      class="text-4xl opacity-0 scale-90 transition-all duration-500 ease-in-out">
      Text Selalu Kontras
    </div>
  </div>

  <script>
    function getContrastYIQ(hex) {
      hex = hex.replace("#", "");
      let r = parseInt(hex.substr(0, 2), 16);
      let g = parseInt(hex.substr(2, 2), 16);
      let b = parseInt(hex.substr(4, 2), 16);
      let yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
      return (yiq >= 128) ? '#000000' : '#FFFFFF';
    }

    const colorPicker = document.getElementById('colorPicker');
    const hexValue = document.getElementById('hex-value');
    const textHex = document.getElementById('text-hex');
    const content = document.getElementById('main-content');
    const text = document.getElementById('text-content');

    function updateColor() {
      const color = colorPicker.value.toUpperCase();
      const textColor = getContrastYIQ(color);

      text.classList.remove('opacity-100', 'scale-100');
      text.classList.add('opacity-0', 'scale-90');

      setTimeout(() => {
        content.style.backgroundColor = color;
        text.style.color = textColor;
        hexValue.textContent = color;
        textHex.textContent = textColor;

        text.classList.remove('opacity-0', 'scale-90');
        text.classList.add('opacity-100', 'scale-100');
      }, 200);
    }

    hexValue.addEventListener('click', () => {
      const textToCopy = hexValue.textContent;
      navigator.clipboard.writeText(textToCopy).then(() => {
        hexValue.textContent = "Copied!";
        setTimeout(updateColor, 1000);
      });
    });

    colorPicker.addEventListener('input', updateColor);

    // Set awal
    updateColor();
  </script>
</body>
</html>
Cara Menggunakan
  1. Simpan kode di atas sebagai index.html.
  2. Buka di browser.
  3. Pilih warna menggunakan color picker → background akan berubah, teks akan otomatis menjadi hitam/putih sesuai kecerahan warna.
  4. Klik kode warna hex → otomatis tersalin ke clipboard.
  5. Coba aktifkan dark mode di OS → sidebar akan otomatis menyesuaikan.

Share your love