29 August 2026 tailwind

Tailwind: Cara Membuat dan Menambahkan Color Pallete

Tailwind menyediakan banyak varian warna yang lengkap dan bisa langsung digunakan.

Namun terkadang, website yang akan kita buat memiliki brand warna spesifik yang tidak terlalu cocok dengan warna bawaan tailwind.

Atau kita ingin menggunakan color pallete sendiri agar website kita tidak terlihat generik (mirip-mirip dengan website lain).

Di artikel ini saya akan membagikan cara membuat color pallete dan menambahkannya ke tailwind.

Membuat Color Pallete

Kalau Anda sudah punya color pallete, bisa skip langkah ini.

Membuat Color Pallete dari Gambar

Gunakan tool online berikut untuk membuat color pallete dari gambar:

• Coolors - Image picker
• Adobe - Color palette generator from image

Upload gambar yang diinginkan maka otomatis color pallete akan dihasilkan.

Copy hasil color pallete tersebut.

Mencari Color Pallete

Kalau tidak mempunyai gambar untuk diambil warnanya, gunakan tool online berikut untuk mencari color pallete yang sudah tersedia.

• Color Hunt
• Coolors - Trending Color Palettes

Pilih dan copy color pallete yang paling sesuai dengan website yang akan dibuat.

Membuat Color Pallete Sendiri

Kalau ingin membuat color pallete sendiri, gunakan tool berikut:

• Coolors
• Color Space
• Muzli Colors

Untuk menggunakan Color Space dan Muzli Colors, masukkan satu warna utama, tool tersebut akan membuatkan color pallete lengkap sesuai dengan warna utama tersebut.

Coolors juga bagus kalau ingin membuat color pallete satu per satu warnanya.

Copy hasil color pallete yang sudah dibuat.

Menambahkan Color Pallete ke Tailwind

Buka file css tempat konfigurasi tailwind. Misalnya di src/style.css.

• Tambahkan directive @theme .
• Tambahkan setiap warna menjadi variabel di dalam @theme .
• Setiap warna diberi nama, misalnya primary, secondary , accent , dst.

Syntax variablenya dengan format --color-{nama}.

Contoh:

@theme {
	--color-background: #222831;
	--color-secondary: #393E46;
	--color-primary: #00ADB5;
	--color-light: #EEEEEE;
}

Menggunakan Color Pallete

Cara menggunakan color pallete sama seperti menggunakan warna bawaan tailwind, yaitu dengan syntax utility-color.

Contoh:

<div class="bg-background p-5">
	<h1 class="text-3xl text-primary font-bold">Primary Title</h1>
	<p class="text-light text-lg">Body Text</p>
</div>

Hasilnya:

Bonus: Membuat Color Shade

Color shade adalah variasi warna yang lebih terang atau lebih gelap.

Banyak manfaatnya, misalnya untuk membuat button dengan warna primary, ketika dihover warnanya menjadi lebih gelap.

Untuk membuat color shade, gunakan tool online berikut:

• Tailwind Shades Generator
• UI Colors - Tailwind CSS Color Generator
• Coolors - Tailwind Colors

Masukkan warna yang ingin dibuat shade, maka otomatis daftar shade warna akan dihasilkan.

Copy semua shade lalu paste di file css tailwind, setiap shade diberi angka, misal 100-900 semakin besar semakin gelap.

@theme {
	--color-primary: #00ADB5;
	/* 50 - 500 */
	--color-primary-600: #009CA3;
	/* 700 - 900 */
}

Contoh penggunaan shade pada button:

<button class="
	bg-primary
	hover:bg-primary-600
	text-light
	px-4
	py-2
	rounded-md
">
	Button Primary
</button>