𝗙𝗿𝗲𝗲𝗧𝗼𝗼𝗹 DEV

Editor Warna

Sesuaikan dan perbaiki warna dengan presisi. Ubah hue, saturasi, dan kecerahan, buat skala warna, serta periksa kontras aksesibilitas untuk teks.

Penyesuaian Warna

0°
100%
50%

RGB

HSL

HSV

OKLCH

Aksesibilitas & Kontras

Teks Putih

WCAG 2.1

0.00 (Gagal)

APCA

0 (Gagal)

Teks Hitam

WCAG 2.1

0.00 (Gagal)

APCA

0 (Gagal)

Skala Warna (Tints & Shades)

Klik warna mana pun di atas untuk menyalin nilai HEX-nya.

Tentang alat ini

Editor Warna adalah alat lengkap untuk menyesuaikan dan menyempurnakan warna apa pun dengan presisi. Masukkan warna dalam format HEX, RGB, HSL, atau bahkan nama warna, lalu gunakan slider untuk mengubah Hue (nada warna), Saturasi (intensitas warna), dan Kecerahan (seberapa terang atau gelap warna tersebut). Perubahan diterapkan secara real-time sehingga Anda dapat langsung melihat hasilnya dan memverifikasi keterbacaan warna dengan teks terang maupun gelap. Selain itu, alat ini secara otomatis mengonversi warna ke format utama yang digunakan dalam desain dan pengembangan web, termasuk HEX, RGB, HSL, HSV, dan OKLCH.

Fitur Utama

Penyesuaian Hue, Saturasi, dan Kecerahan yang presisi dengan slider real-time
Kalkulator kontras ganda (WCAG 2.1 dan APCA) untuk aksesibilitas teks
Pembuatan skala 11 warna gaya Tailwind (50–950)
Ekspor dalam HEX, RGB, HSL, dan OKLCH untuk CSS, SCSS, JSON, dan Tailwind

Kegunaan Editor Warna

  • Membuat palet yang konsisten untuk design system, komponen, dan antarmuka web
  • Memverifikasi apakah kombinasi warna memenuhi kriteria aksesibilitas WCAG dan APCA sebelum dipublikasikan
  • Menyesuaikan warna merek untuk berbagai konteks seperti mode gelap, hover, dan status nonaktif
  • Membuat skala warna gaya Tailwind untuk diekspor sebagai variabel CSS atau token desain
  • Mengonversi warna antara HEX, RGB, HSL, dan OKLCH saat mengintegrasikan berbagai alat desain dan pengembangan

Cara Menggunakan Editor Warna

1

Masukkan warna dasar

Ketik nilai HEX, RGB, HSL, atau nama warna apa pun di kolom Warna Dasar. Alat ini memuat warna secara otomatis dan mengonversinya ke semua format yang tersedia

2

Sesuaikan dengan slider

Gunakan kontrol Hue, Saturasi, dan Kecerahan untuk mengubah warna secara real-time. Semua output dan skala warna diperbarui secara instan

3

Periksa kontras

Bagian aksesibilitas menampilkan rasio kontras dengan teks putih dan hitam menggunakan model WCAG 2.1 dan APCA, menunjukkan apakah kombinasi tersebut lulus atau gagal kriteria

4

Salin nilainya

Klik blok format mana pun (RGB, HSL, HSV, OKLCH) untuk menyalin nilainya secara langsung. Nilai HEX ditampilkan di preview utama

5

Ekspor skala warna

Di bagian Tints & Shades, pilih format ekspor (CSS, SCSS, JSON, Tailwind) dan format warna (HEX, RGB, HSL, atau OKLCH). Klik Salin untuk digunakan dalam proyek Anda

Pertanyaan yang Sering Diajukan

Apa itu APCA dan apa bedanya dengan WCAG 2.1?

WCAG 2.1 menggunakan formula matematika sederhana untuk menghitung kontras antar warna. APCA (Accessible Perceptual Contrast Algorithm) adalah model yang lebih modern yang mempertimbangkan cara mata manusia mempersepsikan luminositas dalam berbagai konteks membaca. Untuk teks normal, nilai APCA 60 atau lebih dianggap memadai.

Bagaimana cara menggunakan skala warna yang dihasilkan di Tailwind CSS?

Pilih format ekspor Tailwind dan format warna yang diinginkan. Kode yang dihasilkan dapat langsung ditempelkan ke tailwind.config.js atau ke file CSS sebagai custom properties. Jika menggunakan OKLCH, kompatibel secara native dengan Tailwind 4.

Apa itu OKLCH dan mengapa menggunakannya?

OKLCH adalah ruang warna yang seragam secara perseptual — artinya mengubah kecerahan atau chroma menghasilkan perubahan yang dapat diprediksi secara visual. Format ini diadopsi secara internal oleh Tailwind 4 dan CSS Color Level 4, sehingga ideal untuk menghasilkan skala warna yang lebih konsisten daripada HSL.

Lihat juga