Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Generator Skala Warna Tailwind CSS

WarnaPengembang

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

Warna Dasar

Pemilih Warna

kutukan

Nama

Digunakan sebagai kunci palet dalam output Tailwind, CSS, dan JSON.

Pilihan

Gaya

Versi v4 menghasilkan nilai CSS modern oklch(). Versi v3 menghasilkan nilai hex klasik, tetap diinterpolasi dalam ruang OKLCH.

Sertakan hentian 950

Kromatik: 100 Skalakan saturasi setiap hentian. Nilai 100 mempertahankan kromatik warna input.

Format Ekspor

Format

KELUARAN

Sisi klien

IKLAN · HAPUS?

Memandu

Generator Skala Warna Tailwind CSS

Tempel satu nilai warna hex dan segera dapatkan palet lengkap 50 hingga 950 dengan langkah yang seimbang secara persepsi. Skalanya dibangun dalam ruang warna OKLCH, sehingga setiap hentian terasa seperti peningkatan kecerahan yang merata di mata manusia — bukan hanya penurunan linear dalam RGB atau HSL.

Salin hasilnya langsung ke tailwind.config.js, letakkan sebagai properti CSS kustom atau variabel SCSS, atau ekspor sebagai JSON untuk pipeline token desain Anda.

Cara Penggunaan

Pilih warna dasar dengan picker warna, atau tempel nilai hex seperti #464aff.
Berikan nama palet (misalnya primary, brand, atau accent) — ini menjadi kunci objek dalam kode yang dihasilkan.
Pilih Tailwind v4 (OKLCH) untuk modern oklch() CSS, atau Tailwind v3 (hex) untuk output hex klasik.
Toggle hentian 950 on atau off, dan geser slider kromatik ke atas atau ke bawah untuk meningkatkan atau menurunkan saturasi.
Pilih format ekspor — konfigurasi Tailwind, properti CSS kustom, variabel SCSS, atau JSON — lalu salin atau unduh kode yang dihasilkan.
Klik warna apa pun di tampilan pra-visualisasi untuk menyalin nilai hex-nya ke clipboard.

Fitur

Matematika persepsi OKLCH – Menginterpolasi kecerahan dan kromatik dalam ruang warna OKLCH sehingga setiap hentian dalam rentang 50 hingga 950 terasa seperti langkah yang merata di mata manusia.
Skalasi penuh 50 hingga 950 – Menghasilkan palet lengkap 11 hentian, dengan opsi untuk menghilangkan hentian 950 ekstra jika hanya diperlukan 10 klasik.
Tampilan pra-visualisasi langsung – Lihat setiap warna secara langsung, klik warna apa pun untuk menyalin nilai hex-nya, dan sesuaikan skala secara langsung saat Anda mengetik.
Pemeriksa kontras WCAG – Setiap hentian dinilai terhadap latar belakang putih dan hitam dengan badge lulus atau gagal AA dan AAA.
Target ekspor ganda – Ekspor sebagai tailwind.config.js, :root variabel CSS, variabel SCSS, atau token desain biasa.
Kontrol peningkatan kromatik – Slider tunggal mengatur saturasi di semua hentian, sehingga Anda dapat membuat warna lebih terang atau menurunkan intensitas tanpa mengubah nuansa.
Aman dalam ruang warna – Kromatik secara otomatis dibatasi pada setiap tingkat kecerahan sehingga nilai hex yang dihasilkan selalu ditampilkan dalam ruang sRGB.

IKLAN · HAPUS?

 Tanya Jawab Umum

Apa itu ruang warna OKLCH?

OKLCH adalah ruang warna persepsi yang diperoleh dari model Oklab. Warna ini diwakili oleh tiga nilai — L (kecerahan yang dirasakan), C (kromatik, atau kekayaan warna), dan H (sudut nuansa). Berbeda dengan HSL, OKLCH dirancang sehingga perubahan tertentu pada L terasa seperti perubahan kecerahan yang sama terlepas dari nuansa. Hal ini membuatnya sangat ideal untuk menghasilkan skala warna di mana setiap langkah harus terasa merata.
Mengapa OKLCH lebih baik daripada HSL untuk skala warna?

HSL dirancang untuk mudah dihitung, bukan untuk mencerminkan persepsi manusia. Dalam HSL, warna dengan nilai L yang sama bisa terasa sangat berbeda dalam kecerahan — warna kuning pada kecerahan 50% terasa jauh lebih terang daripada warna biru pada kecerahan yang sama. OKLCH memperbaiki hal ini dengan memodelkan cara mata manusia mempersepsikan kecerahan, sehingga skala yang dibangun dalam OKLCH menghasilkan warna yang seimbang secara visual yang tidak dapat dicapai oleh HSL.
Apa arti persepsi yang seragam?

Sebuah ruang warna disebut persepsi seragam ketika jarak numerik yang sama menghasilkan perbedaan persepsi yang sama. Dengan kata lain, jika Anda memindahkan nilai kecerahan sejauh yang sama dua kali, mata Anda harus melihat dua langkah tersebut sebagai ukuran yang sama. OKLCH hampir seragam secara persepsi, yang merupakan alasan mengapa ia menghasilkan gradien yang halus dan skala warna yang merata.
Apa arti angka 50 hingga 950 dalam palet Tailwind?

Tailwind memberi nama setiap warna dalam palet dengan angka dari 50 (tint terang) hingga 950 (warna gelap), dengan 500 biasanya mewakili warna dasar. Angka yang lebih kecil lebih terang, dan angka yang lebih besar lebih gelap. Skala 11 hentian (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) memberikan bahasa yang konsisten bagi para desainer di seluruh sistem warna.