Desain / Warna

Generator Skala Warna Tailwind

Ubah satu warna merek menjadi palet Tailwind CSS lengkap dari 50 hingga 950, dibuat dalam OKLCH seperti warna bawaan Tailwind, lalu salin sebagai CSS tema Tailwind 4, konfigurasi Tailwind 3, atau variabel CSS.

Generator Skala Warna Tailwind: Setiap tingkat warna menggunakan lightness, chroma, dan sedikit pergeseran hue seperti pada palet bawaan Tailwind di tingkat tersebut, yang diukur dalam ruang warna OKLCH, lalu digeser agar warna Anda tepat berada pada tingkat yang dipilih. Warna abu-abu mengikuti keluarga warna abu-abu Tailwind. Warna yang tidak dapat ditampilkan oleh gamut sRGB disesuaikan menggunakan metode gamut mapping CSS Color 4, seperti yang dilakukan browser; output Tailwind 4 mempertahankan nilai OKLCH, sedangkan format lainnya menggunakan hex. Berjalan 100% lokal di browser Anda tanpa upload file ke server.

Kategori
Tools sehari-hari
Dijalankan
Di browser Anda
Biaya
Gratis · tanpa daftar
Ketersediaan
Siap digunakan
Generator skala warna TailwindPemrosesan lokal

Berjalan sepenuhnya di browser Anda

50#f2f8ffoklch(97.6% 0.012 250.3)
100#dfecffoklch(93.9% 0.029 258.1)
200#bcd9ffoklch(87.6% 0.061 255.8)
300#8fbeffoklch(79.3% 0.106 256.6)
400#5e9cffoklch(69.6% 0.16 259.5)
500#3b82f6oklch(62.3% 0.188 259.8)
600#2668daoklch(54.2% 0.187 260.6)
700#1f57b6oklch(47.7% 0.163 260.6)
800#1f4997oklch(42.3% 0.137 261.4)
900#20417coklch(38.4% 0.109 261.4)
950#15274coklch(27.9% 0.073 263.2)

CSS (@theme)

@theme {
  --color-brand-50: oklch(97.6% 0.012 250.3);
  --color-brand-100: oklch(93.9% 0.029 258.1);
  --color-brand-200: oklch(87.6% 0.061 255.8);
  --color-brand-300: oklch(79.3% 0.106 256.6);
  --color-brand-400: oklch(69.6% 0.16 259.5);
  --color-brand-500: oklch(62.3% 0.188 259.8);
  --color-brand-600: oklch(54.2% 0.187 260.6);
  --color-brand-700: oklch(47.7% 0.163 260.6);
  --color-brand-800: oklch(42.3% 0.137 261.4);
  --color-brand-900: oklch(38.4% 0.109 261.4);
  --color-brand-950: oklch(27.9% 0.073 263.2);
}

Nuansa mengikuti perubahan lightness, chroma, dan hue pada palet Tailwind, yang diukur dalam OKLCH, sehingga skala yang dibuat dari blue-500 milik Tailwind hanya berbeda beberapa just-noticeable difference dari warna biru Tailwind. Warna di luar rentang sRGB disesuaikan menggunakan metode gamut mapping CSS Color 4.

Menggunakan skala

Pola yang umum menggunakan 50–100 untuk latar belakang halaman dan kartu, 200–300 untuk border, 500–600 untuk tombol dan link, 700 untuk status hover, serta 800–950 untuk teks pada latar belakang terang. Periksa pasangan teks dan latar belakang dengan pemeriksa kontras warna.

Untuk mengonversi satu warna antara hex, RGB, HSL, dan OKLCH, gunakan konverter warna; untuk memulai dari foto, gunakan pengekstrak palet warna.

Tailwind 4 dan OKLCH

Tailwind CSS 4 mendefinisikan warnanya dalam OKLCH, yang dapat menjelaskan warna di luar sRGB pada layar dengan gamut lebar. Output Tailwind 4 di sini tetap berada dalam sRGB, sehingga warnanya terlihat sama di setiap layar.

Cara menggunakannya

  1. Pilih warna, atau tempel kode hex-nya.
  2. Tentukan tingkat warna yang sesuai, biasanya 500, atau biarkan generator menentukannya.
  3. Salin kode untuk Tailwind 4, Tailwind 3, atau variabel CSS biasa.

Privasi & batasan

Semua proses dilakukan di browser Anda.

Alat terkait

Konverter WarnaPemeriksa KontrasPengekstrak Palet

Pertanyaan umum

Mengapa OKLCH?

Perubahan lightness yang sama dalam OKLCH terlihat sebagai perubahan yang sama bagi mata, pada semua hue. Jadi, skala kuning dan biru yang dibuat dengan cara yang sama memiliki kontras yang seimbang—sesuatu yang tidak dapat dilakukan HSL.

Tingkat warna mana yang sebaiknya digunakan untuk warna merek saya?

Biasanya 500 atau 600, karena Tailwind menyimpan warna terkuatnya di tingkat tersebut. Warna yang sangat terang seperti pastel lebih cocok di 200 atau 300; pilih Automatic agar penempatannya ditentukan berdasarkan lightness.

Apakah teks akan mudah dibaca pada tingkat warna ini?

Biasanya, teks putih membutuhkan 600 atau lebih gelap, sedangkan teks gelap membutuhkan 400 atau lebih terang. Namun, periksa setiap pasangan dengan contrast checker.

Alat gratis · berjalan di browser anda · tanpa perlu akun