tigtools

Pembuat Palet Warna

Mulai dari satu warna dasar, pilih harmoni warna, lalu salin palet dalam format yang digunakan proyek Anda.

Berjalan di browser Anda Tanpa perlu mendaftar

Palet

  • #3366cc
  • #8c6500

Warna yang dikunci tidak akan berubah saat Anda mengganti warna dasar.

Ekspor sebagai

Cara menggunakan

  1. Masukkan warna dasar atau pilih salah satu. “Warna dasar acak baru” akan memilihkannya untuk Anda.
  2. Pilih harmoni warna. “Nuansa dan rona” membuat skala 11 langkah dari sangat terang hingga sangat gelap.
  3. Kunci warna yang ingin dipertahankan, lalu lanjutkan bereksplorasi dengan warna dasar lainnya.
  4. Pilih HEX, properti khusus CSS, atau JSON, tentukan nama, lalu salin kodenya.

Cara kerja

Harmoni warna dibuat dengan memutar hue pada roda warna: komplementer menambahkan hue berlawanan (180°), analog menambahkan warna di dekatnya yang berjarak 30° dan 60° di setiap sisi, triadik menggunakan tiga hue dengan jarak 120°, tetradik menggunakan empat hue dengan jarak 90°, dan komplementer terpisah menggunakan dua hue di dekat warna komplementer (150° dan 210°).

Rotasi dilakukan dalam OKLCH, bukan HSL. OKLCH menjaga persepsi kecerahan tetap stabil, sehingga warna kuning dan biru dalam palet yang sama tampak sama cerahnya, alih-alih warna kuning terlihat menyilaukan. Jika warna hasil rotasi berada di luar rentang yang dapat ditampilkan layar sRGB, chroma-nya dikurangi hingga sesuai, sementara kecerahan dan hue tetap dipertahankan.

Skala nuansa dan rona menggunakan langkah kecerahan OKLCH tetap bernomor 50 hingga 950, mirip penamaan yang digunakan Tailwind CSS. Chroma dikurangi di dekat putih dan hitam agar rona paling terang tidak tampak neon. Harmoni warna adalah titik awal: periksa pasangan teks dan latar belakang dengan pemeriksa kontras sebelum menggunakannya untuk konten.

Contoh

Warna merek dengan aksen

Warna dasar #3366cc dengan “Komplementer” menambahkan #8c6500, warna oker hangat dengan kecerahan OKLCH yang sama. Pasangan biru dan kuning-oranye sering digunakan sebagai aksen untuk merek berwarna biru.

Token desain untuk pustaka komponen

Pilih “Nuansa dan rona”, tetapkan nama “primary”, lalu ekspor variabel CSS. Anda akan mendapatkan --primary-50 hingga --primary-950, siap digunakan untuk latar belakang (50–100), border (200–300), dan teks (700–900).

Mempertahankan satu warna sambil bereksplorasi

Kunci warna kedua dalam palet triadik, lalu coba warna dasar yang berbeda. Swatch yang dikunci akan mempertahankan nilai HEX-nya sementara warna lainnya berubah.

Pertanyaan yang sering diajukan

Mengapa warna saya berbeda dari alat roda warna HSL?

Alat ini memutar hue dalam OKLCH, ruang warna perseptual. Sudut hue-nya tidak persis sama dengan HSL, jadi warna “berlawanan” bisa sedikit berbeda dari hasil alat roda warna HSL.

Bisakah saya menggunakan JSON di Tailwind CSS?

JSON memetakan nama ke nilai HEX dengan struktur yang sama seperti yang diterima Tailwind untuk warna dalam konfigurasi tema. Di Tailwind 4, Anda juga dapat menempelkan variabel CSS ke dalam blok @theme setelah mengubah namanya menjadi --color-…

Apakah palet yang dihasilkan mudah diakses?

Tidak secara otomatis. Harmoni warna tidak menentukan kontras antara teks dan latar belakang. Periksa setiap pasangan yang ingin Anda gunakan dengan Pemeriksa Kontras.

Privasi

Palet dibuat di browser Anda. Warna Anda tidak dikirim ke mana pun atau disimpan.