Generator Skala Warna Tailwind
Generator Skala Warna Tailwind adalah generator warna gratis yang membuat skala kecerahan 50-950 (11 tingkat) ala Tailwind secara otomatis hanya dengan memilih satu warna dasar. Anda dapat membuat skala warna dengan nuansa yang sama seperti palet bawaan Tailwind dari warna merek atau satu warna favorit dalam sekejap, lalu langsung memakainya untuk design system maupun pengaturan tema.
Anda dapat berbagi dan menyimpan skala saat ini melalui URL.
Skala warna yang dihasilkan
- 50#EFF6FE
- 100#DDEBFD
- 200#C1DCFC
- 300#95C4FC
- 400#58A3F8
- 500Dasar#1E90FF
- 600#006BE3
- 700#005BC7
- 800#004AA9
- 900#004185
- 950#04294F
Ekspor
@theme {
--color-brand-50: oklch(0.971 0.013 253.2);
--color-brand-100: oklch(0.936 0.028 253.2);
--color-brand-200: oklch(0.885 0.052 253.2);
--color-brand-300: oklch(0.808 0.094 253.2);
--color-brand-400: oklch(0.704 0.146 253.2);
--color-brand-500: oklch(0.652 0.19 253.2);
--color-brand-600: oklch(0.549 0.201 257.7);
--color-brand-700: oklch(0.494 0.184 258.1);
--color-brand-800: oklch(0.432 0.165 258.7);
--color-brand-900: oklch(0.382 0.128 255.5);
--color-brand-950: oklch(0.281 0.081 253.2);
}
Pembuatan skala berjalan sepenuhnya di browser Anda, dan warna yang Anda masukkan tidak dikirim ke server eksternal.
Alat Terkait
Color Picker
Ambil warna dari gambar dan dapatkan kode HEX, RGB, atau HSL. Perbesar dengan loupe untuk akurasi per piksel dan ekspor palet. Gratis, tanpa daftar.
- Desain & Warna
- Produktivitas
Ekstrak Palet Warna
Ekstrak warna dominan dari gambar/foto dan buat palet warna. Dapatkan HEX/RGB/HSL, porsi tiap warna, ekspor CSS/SCSS/Tailwind/JSON — semua di browser Anda.
- Ekstraksi
- Desain & Warna
Pembuat Palet Warna
Generator skema warna gratis yang membuat palet warna otomatis berdasarkan teori warna (komplementer, analog, triadik, dan lainnya) hanya dari satu warna dasar. Ekspor ke CSS variable, Tailwind, SCSS, dan JSON, lengkap dengan acuan kontras. Berjalan sepenuhnya di browser Anda.
- Generator
- Desain & Warna
Konverter Kode Warna
Konversi kode warna antara HEX, RGB, HSL, HSV, OKLCH, beserta alpha dan referensi CMYK. Salin format apa pun sekali klik. Berjalan sepenuhnya di browser Anda.
- Konverter
- Desain & Warna
Pemeriksa Kontras
Cek rasio kontras warna terhadap WCAG 2.1/2.2 AA dan AAA, dengan saran warna lulus, simulasi buta warna, dan APCA. Berjalan sepenuhnya di browser Anda.
- Pemeriksa
- Desain & Warna
- Aksesibilitas
Generator Gradient CSS
Generator gradient CSS gratis: buat gradien linear, radial, conic via GUI. Atur transparansi/alpha, ekspor CSS variable, Tailwind, SCSS, dan URL berbagi.
- Generator
- Pengembangan
- Desain & Warna
Apa itu alat Generator Skala Warna Tailwind?
Generator Skala Warna Tailwind adalah generator warna gratis yang membuat skala kecerahan 50-950 (11 tingkat) ala Tailwind secara otomatis hanya dengan memilih satu warna dasar. Anda dapat membuat skala warna dengan nuansa yang sama seperti palet bawaan Tailwind dari warna merek atau satu warna favorit dalam sekejap, lalu langsung memakainya untuk design system maupun pengaturan tema.
Warna dasar dapat dimasukkan dalam format HEX seperti #1E90FF, maupun rgb(30, 144, 255) atau oklch(0.65 0.19 253), dipilih melalui color picker bawaan, atau dicari dengan tombol "Acak". Alat ini secara otomatis menentukan tingkat (50-950) yang paling mendekati kecerahan warna yang Anda masukkan, mempertahankan warna masukan apa adanya pada tingkat tersebut, lalu menghasilkan tingkat-tingkat lainnya. Perhitungan warna dilakukan di ruang warna OKLCH yang dipakai Tailwind CSS v4, sehingga kecerahan tiap tingkat terasa merata secara perseptual dan menghasilkan skala warna yang natural.
Skala yang dihasilkan dapat diekspor sekaligus dalam berbagai format: Tailwind v4 (variabel OKLCH pada @theme), Tailwind v3 (theme.extend.colors pada tailwind.config.js), variabel CSS, dan JSON. Jika Anda menentukan nama warna (misalnya brand, primary), nama itu akan tercermin pada nama variabel, sehingga dapat disalin dan langsung ditempel ke tailwind config maupun stylesheet. Nilai tiap tingkat dapat ditampilkan dan disalin dalam HEX, OKLCH, HSL, atau RGB, dan setiap swatch juga menampilkan apakah teks hitam atau teks putih yang lebih mudah dibaca (acuan kontras).
Seluruh perhitungan skala dilakukan langsung di perangkat Anda, dan warna yang Anda masukkan tidak dikirim ke server eksternal. Dapat langsung dipakai tanpa pendaftaran akun maupun klik iklan. Berjalan sepenuhnya di browser Anda.
Cara penggunaan
- Masukkan warna dasar pada kolom input (mendukung HEX, RGB, HSL, OKLCH), atau pilih warna dengan color picker. Saat ingin ide, Anda juga dapat menggunakan tombol "Acak".
- Jika perlu, masukkan nama warna (misalnya brand, primary). Nama ini akan tercermin pada nama variabel saat ekspor.
- Periksa skala 11 tingkat (50-950) yang dihasilkan. Tingkat yang paling mendekati warna masukan diberi badge "Dasar", dan warnanya dipertahankan apa adanya.
- Beralihlah antarformat tampilan (HEX, OKLCH, HSL, RGB), lalu salin nilai tiap tingkat dengan tombol salin.
- Pada "Ekspor", beralihlah antartab Tailwind v4, Tailwind v3, variabel CSS, dan JSON, lalu salin seluruh kode dengan tombol "Salin" untuk ditempel ke tailwind.config atau stylesheet Anda.
- Tekan "Salin URL" untuk memperoleh URL berbagi yang dapat mereproduksi skala saat ini. URL ini berguna untuk berbagi dengan tim maupun menyimpannya sebagai bookmark.
Skenario penggunaan
- Front-end engineer yang ingin membuat skala 50-950 Tailwind dari satu warna merek dan langsung menerapkannya ke tailwind.config.
- Developer yang bermigrasi ke Tailwind CSS v4 dan ingin mendefinisikan warna kustom dengan @theme dan OKLCH.
- Desainer yang ingin menyusun warna dengan kecerahan berbeda secara sistematis untuk status (hover, active) pada tombol maupun tautan dalam design system.
- Pengguna yang ingin menyiapkan skala warna primer sendiri agar selaras dengan komponen seperti shadcn/ui.
- Pengguna yang ingin menyiapkan sekaligus rentang warna dari latar terang (50, 100) hingga teks gelap (900, 950) bertolak dari satu warna yang sudah ada.
- Pengguna yang ingin meneruskan skala warna yang sudah ditentukan kepada tim lewat URL berbagi, atau mereproduksi skala yang sama di kemudian hari.
Hal yang perlu diperhatikan
- Pembuatan skala sepenuhnya dilakukan di dalam browser, dan warna yang Anda masukkan tidak dikirim keluar.
- Warna dasar dapat dimasukkan dalam format HEX, RGB, HSL, maupun OKLCH. Transparansi (alpha) tidak didukung.
- Tingkat yang paling mendekati kecerahan warna masukan ditentukan secara otomatis, dan tingkat tersebut memakai warna masukan apa adanya (misalnya warna terang ditempatkan pada 200, warna gelap pada 800).
- Perhitungan warna menggunakan ruang warna OKLCH yang sama dengan Tailwind CSS v4, dan warna yang melampaui gamut tampilan sRGB akan otomatis disesuaikan ke dalam rentang. Hasilnya tidak persis sama dengan palet standar Tailwind yang sesungguhnya.
- URL berbagi hanya memuat warna dasar, nama warna, dan format tampilan. Membuka URL tersebut akan mereproduksi skala dengan pengaturan yang sama.