Generator Gradasi Warna

Ubah satu warna menjadi skala 50–950 ala Tailwind plus tint, shade, dan tone. Dihitung dalam OKLCH dan sRGB, diekspor sebagai variabel CSS, Tailwind, atau JSON.

Pengaturan gradasi

#3b82f6rgb(59 130 246)hsl(217 91% 60%)oklch(62.3% 0.188 259.8)

Ekspor

Skala 50–950 mempertahankan warna Anda sebagai 500 dan menyesuaikan kecerahan serta kroma OKLCH langkah lainnya, dengan rona tetap.

Skala 50–950

#eef5ff
oklch(96.8% 0.015 257.2)
#e1edff
oklch(94.3% 0.028 258.4)
#c9deff
oklch(89.6% 0.051 259.4)
#a3c6ff
oklch(82.2% 0.089 260)
#73a8ff
oklch(73.2% 0.139 259.9)
#3b82f6
oklch(62.3% 0.188 259.8)
#266ad8
oklch(54.6% 0.182 259.9)
#1554b8
oklch(47% 0.17 260)
#074095
oklch(39.5% 0.15 259.7)
#002d72
oklch(32% 0.128 259.6)
#012156
oklch(26.5% 0.103 259.7)

Tint, shade, dan tone

Tint (dicampur putih)
Shade (dicampur hitam)
Tone (dicampur abu-abu #808080)

Dicampur di sRGB seperti color-mix(in srgb, …) dengan langkah sama; klik warna untuk menyalinnya.

Kode ekspor
:root {
  --brand-50: #eef5ff;
  --brand-100: #e1edff;
  --brand-200: #c9deff;
  --brand-300: #a3c6ff;
  --brand-400: #73a8ff;
  --brand-500: #3b82f6;
  --brand-600: #266ad8;
  --brand-700: #1554b8;
  --brand-800: #074095;
  --brand-900: #002d72;
  --brand-950: #012156;
}

Alat Terkait

Lihat Semua
Generator CSS Box Shadow Generator CSS Gradient Generator CSS Flexbox Generator CSS Grid Generator Border Radius Generator Glassmorphism Generator Neumorphism Generator Text Shadow

Apa itu Generator Gradasi Warna?

Mengembangkan satu warna menjadi skala 11 langkah 50–950 seperti palet Tailwind, serta baris-baris tint (dicampur putih), shade (dicampur hitam), dan tone (dicampur abu-abu). Semua nilai dapat disalin satu per satu atau diekspor sebagai variabel CSS, SCSS, Tailwind v3/v4, atau JSON.

Cara menggunakan Generator Gradasi Warna

  1. Masukkan Warna dasar.
  2. Baca skala 50–950; warna Anda berada di langkah 500.
  3. Atur jumlah Langkah tint / shade / tone untuk baris campuran.
  4. Klik swatch mana pun untuk menyalinnya.
  5. Pilih Format ekspor dan Nama token, lalu salin skalanya.

Contoh

Masukan
#3b82f6, CSS variables, token name brand
Keluaran
:root {
  --brand-50: #eef5ff;
  --brand-100: #e1edff;
  --brand-200: #c9deff;
  --brand-300: #a3c6ff;
  --brand-400: #73a8ff;
  --brand-500: #3b82f6;
  --brand-600: #266ad8;
  --brand-700: #1554b8;
  --brand-800: #074095;
  --brand-900: #002d72;
  --brand-950: #012156;
}

Kapan menggunakan Generator Gradasi Warna

Gunakan untuk membuat rentang warna lengkap bagi design system atau tema Tailwind dari satu warna merek, atau untuk mendapatkan varian hover/active. Skala ini adalah titik awal algoritmis yang masuk akal; untuk design system produksi, Anda mungkin tetap perlu menyetel langkah tertentu dan memeriksa kontras untuk teks.

Cara kerja Generator Gradasi Warna

Untuk skala, warna dasar dikonversi ke OKLCH dan dipertahankan tanpa perubahan di langkah 500. Langkah yang lebih terang menggeser lightness sebagian tetap ke arah 0,985 (95%, 88%, 75%, 55%, 30% untuk 50–400) dan mengurangi chroma; langkah yang lebih gelap bergerak ke arah 0,2 (18%–85% untuk 600–950) dengan chroma sedikit dikurangi. Rona dipertahankan dan setiap langkah dipetakan ke gamut sRGB. Tint, shade, dan tone adalah campuran dalam sRGB ter-encode gamma, seperti color-mix(in srgb, …), dengan langkah sama besar 1/(n+1).

Kasus Penggunaan Umum

  • Rentang warna kustom Tailwind
  • Token design system dari warna merek
  • Varian status hover dan ditekan
  • Latar dan border pada tema terang/gelap
  • Tone yang lebih kalem untuk ilustrasi

Pertanyaan Umum

Apa bedanya tint, shade, dan tone?

Tint adalah warna yang dicampur putih, shade dicampur hitam, dan tone dicampur abu-abu.

Mengapa warna saya berada di 500?

Seperti palet Tailwind, 500 adalah langkah acuan; langkah yang lebih terang (50–400) dipakai untuk latar, dan langkah yang lebih gelap (600–950) untuk teks dan border.

Apakah hasilnya persis sama dengan warna bawaan Tailwind?

Tidak. Palet Tailwind disetel secara manual; alat ini membuat rentang yang tampak serupa secara algoritmis untuk warna apa pun.

Jelajahi kategori lainnya

CRC
Algoritma Cyclic Redundancy Check untuk deteksi kesalahan
MD
Algoritma Message Digest (MD2, MD4, MD5)
SHA-1
Secure Hash Algorithm 1 - fungsi hash 160-bit
SHA-2
Keluarga Secure Hash Algorithm 2 (SHA-224, SHA-256, SHA-384, SHA-512)