Adaptor Warna Mode Gelap

Ubah palet warna mode terang apa pun menjadi padanan mode gelap secara instan. Pilih dari tiga mode adaptasi (perceptual, invert, atau shift) dengan penerapan kontras WCAG otomatis. Ekspor sebagai custom property CSS atau konfigurasi Tailwind. Semua pemrosesan berjalan lokal di browser Anda. Tanpa pendaftaran.

Dark Mode Color Adapter

Enter your light-mode color palette and instantly generate dark-mode equivalents with WCAG contrast checks. Export as CSS custom properties or Tailwind config - all processing runs locally in your browser.

Light Mode Palette

ColorHEXName / CSS Variable

Dark Mode Results

→

background

#828282

4.53:1

→

surface

#708599

4.56:1

→

border

#6485af

4.57:1

→

text

#e5e9f0

14.29:1

→

muted

#818ea2

5.24:1

→

primary

#3780f6

4.63:1

→

accent

#9369f7

4.64:1

Adaptation Settings

Adaptation Mode

Dark BG Lightness10%

Background lightness of the dark theme

Saturation Adjust0%

Boost or reduce saturation in dark mode

Min Contrast4.5:1

WCAG AA = 4.5, AAA = 7.0

Export

:root {
  --background: #ffffff;
  --surface: #f8f9fa;
  --border: #e2e8f0;
  --text: #1a202c;
  --muted: #718096;
  --primary: #3b82f6;
  --accent: #8b5cf6;
}

[data-theme="dark"],
.dark {
  --background: #828282;
  --surface: #708599;
  --border: #6485af;
  --text: #e5e9f0;
  --muted: #818ea2;
  --primary: #3780f6;
  --accent: #9369f7;
}

Contrast ratios are calculated against the dark background lightness you set. WCAG AA requires 4.5:1 for normal text. WCAG AAA requires 7:1. Colors that fail the minimum contrast are automatically nudged toward higher lightness until they pass.

Mengapa menggunakan Adaptor Warna Mode Gelap kami?

Pembuatan mode gelap instan: tempel palet mode terang Anda dan dapatkan padanan mode gelap secara real time. Sesuaikan mode dan pengaturan, semua warna langsung diperbarui.
Aman & privat: semua perhitungan warna berjalan 100 % di sisi klien, di browser Anda. Data palet Anda tidak pernah dikirim ke server, jadi Anda bisa dengan aman mengadaptasi warna merek proprietary.
Pemeriksaan kontras WCAG: setiap warna hasil adaptasi otomatis diperiksa terhadap latar gelap untuk kepatuhan WCAG AA (4,5:1) dan AAA (7:1). Warna yang gagal digeser hingga lolos.
100 % gratis selamanya: sepenuhnya gratis tanpa pendaftaran, batas penggunaan, dan iklan yang menghalangi antarmuka. Adaptasi palet sebanyak yang Anda butuhkan.

Kasus penggunaan umum Adaptor Warna Mode Gelap

Menambahkan mode gelap ke aplikasi yang sudah ada: ubah token desain mode terang menjadi padanan mode gelap dalam hitungan detik. Ekspor sebagai custom property CSS dan masukkan ke stylesheet Anda.
Tema React & Next.js: buat token warna mode gelap untuk konfigurasi Tailwind atau objek tema CSS-in-JS Anda. Ekspor Tailwind siap ditempel ke tailwind.config.js.
Pemeliharaan design system: jaga palet terang dan gelap tetap sinkron seiring berkembangnya design system. Jalankan ulang adaptor setiap kali Anda memperbarui warna mode terang.
Adaptasi warna merek: adaptasi warna merek untuk antarmuka mode gelap sambil mempertahankan hue dan saturasi. Mode perceptual menjaga nada tengah dan aksen tetap konsisten secara visual.
Kepatuhan aksesibilitas: pastikan semua warna mode gelap memenuhi kontras WCAG AA terhadap latar gelap Anda. Warna yang gagal otomatis disesuaikan.
Variabel & token CSS: ekspor palet terang dan gelap sebagai custom property CSS dengan satu klik. Outputnya memakai selektor data-theme="dark" dan .dark untuk kompatibilitas maksimal.

Apa itu adaptor warna mode gelap?

Adaptor warna mode gelap mengubah palet mode terang menjadi padanan yang tepat untuk mode gelap dengan menyesuaikan kecerahan setiap warna dalam ruang HSL. Sekadar membalik warna (100 − L) sering memberi hasil buruk: warna sangat terang menjadi sangat gelap dan nada tengah menjadi keruh. Adaptor kami memakai tiga algoritma lebih cerdas (perceptual, invert, dan shift) untuk menghasilkan warna mode gelap yang konsisten secara visual dan mudah diakses. Semua pemrosesan berjalan instan di browser Anda tanpa unggahan ke server.

Cara kerja Adaptor Warna Mode Gelap kami

Masukkan palet mode terang Anda: tambahkan setiap warna dengan nama (dipakai sebagai nama variabel CSS) dan nilai HEX-nya. Gunakan tombol preset untuk memuat contoh palet secara instan.
Pilih pengaturan adaptasi: pilih mode (perceptual, invert, atau shift), setel kecerahan latar gelap, sesuaikan saturasi, dan tentukan rasio kontras WCAG minimum. Warna mode gelap diperbarui secara real time.
Ekspor CSS atau konfigurasi Tailwind: salin custom property CSS yang dihasilkan (dengan selektor :root dan .dark) atau cuplikan konfigurasi Tailwind langsung ke proyek Anda.

Tiga mode adaptasi

Mode perceptual: memakai pemetaan kurva S yang mempertahankan hubungan kontras relatif antawarna. Warna terang (L tinggi) menjadi sedikit lebih terang di latar gelap, warna gelap (L rendah) menjadi jauh lebih terang. Mode yang direkomendasikan untuk sebagian besar design system.
Mode invert: mencerminkan kecerahan di sekitar 50 % (gelap = 100 − terang). Sederhana dan mudah diprediksi, tetapi bisa menghasilkan nada tengah yang pucat. Terbaik untuk palet minimalis berkontras tinggi.
Mode shift: menggeser semua warna ke ujung terang rentang tema gelap. Warna gelap mendapat dorongan lebih besar daripada warna terang. Baik untuk palet dengan banyak nada gelap.
Penerapan kontras: setelah adaptasi, setiap warna diperiksa terhadap latar gelap memakai rumus kontras WCAG. Warna di bawah rasio minimum otomatis digeser ke kecerahan lebih tinggi hingga lolos.

Pertanyaan yang Sering Diajukan

Adaptor warna mode gelap mengubah palet mode terang menjadi padanan mode gelap dengan menyesuaikan kecerahan HSL, memeriksa kontras WCAG, dan otomatis memperbaiki warna yang gagal. Adaptor kami berjalan sepenuhnya di browser Anda.

Pembalikan kecerahan sederhana sering memberi hasil buruk: warna sangat terang menjadi sangat gelap dan nada tengah menjadi keruh. Mode perceptual dan shift memakai algoritma lebih cerdas yang mempertahankan hierarki visual.

Setiap warna hasil adaptasi diperiksa terhadap latar gelap memakai rumus rasio kontras WCAG 2.1. Warna di bawah rasio minimum otomatis digeser ke kecerahan lebih tinggi hingga lolos.

Ya. Semua perhitungan berjalan 100 % di sisi klien. Tidak ada data warna yang pernah dikirim ke server mana pun.

Tempel output CSS ke stylesheet Anda. Blok :root mendefinisikan warna mode terang dan blok .dark warna mode gelap. Alihkan kelas dark pada elemen root untuk berganti tema.

Gabungkan cuplikan konfigurasi Tailwind ke bagian theme.extend.colors pada tailwind.config.js Anda. Warnanya merujuk ke custom property CSS dan berganti otomatis bersama kelas dark.

Ya. 100 % gratis, tanpa pendaftaran, tanpa batas penggunaan. Adaptasi palet sebanyak yang Anda butuhkan.