Ease Colors

Roda warna

Mulai dari satu warna dan hasilkan harmoni komplementer, analog, triadik, dan lainnya — lalu ekspor sebagai CSS, Tailwind v4, SVG, atau PNG.

Palet

Gradasi warna dasar

Panduan teori warna

Pahami rodanya, lalu langgar aturannya dengan baik

Roda menyusun hue melingkar sehingga hubungan menjadi spasial. Jarak berarti kontras, kedekatan berarti tenang. Semua di bawah ini interaktif — ubah roda di atas dan ide-ide ini lebih cepat dipahami.

Cara memakai roda ini

  1. Pilih harmoni — geometri paletmu (berlawanan, tetangga, segitiga…).
  2. Seret titik mana pun di cakram — sudut mengatur hue, jarak dari pusat mengatur saturasi.
  3. Seret cincin kecerahan luar untuk latar, teks, dan aksen.
  4. Salin nilai dalam formatmu, lalu ekspor token untuk CSS atau Tailwind.

Tips: bagikan hasil apa pun — URL selalu menyimpan warna dasar, harmoni, dan kecerahanmu.

Enam harmoni

Komplementer — pasangan berlawanan
Ketegangan maksimal. Cadangkan satu sisi untuk aksen, biarkan sisi lain dominan.
Komplementer terbagi — dasar + dua tetangga lawannya
Hampir sama hidupnya tapi jauh lebih pemaaf. Default bagus untuk merek.
Analog — tiga tetangga
Tenang dan kohesif. Tambahkan aksen komplementer hanya jika butuh aksi.
Triadik — segitiga 120°
Berani dan seimbang. Biarkan satu warna menguasai ~60% UI.
Tetradik — dua pasang komplementer
Kaya tapi ramai. Tetapkan hierarki jelas sebelum warna keempat.
Persegi — empat sudut 90°
Energi merata ke semua arah. Terbaik dengan aturan ketat per permukaan.

Shade, tint & tone

Satu hue tak pernah cukup untuk antarmuka. Campur dengan hitam untuk shade (header, hover), putih untuk tint (latar, modal), dan abu-abu untuk tone (teks redup, border).

Indigo dari shade ke tint. Logika yang sama menggerakkan setiap palet di atas.

Primer, sekunder & tersier

Di roda RYB klasik, merah, kuning, dan biru adalah warna primer; campurannya menghasilkan oranye, hijau, dan ungu. Di layar kita mencampur cahaya (RGB), jadi alat ini menghitung dalam HSL/HSV — lingkaran yang sama, disetel untuk piksel.

Twelve stops around the disc; every other color contains a trace of a primary.

Roda warna online gratis, pemilih warna, dan generator palet

Ease Colors adalah roda warna online gratis untuk desainer dan developer yang butuh warna andal tanpa meninggalkan browser. Pilih warna dasar pada pemilih roda warna interaktif, pratinjau enam harmoni sekaligus, lalu salin kode HEX, RGB, HSL, atau OKLCH siap produksi. Tidak ada yang diunggah, tidak perlu membuat akun, dan setiap hasil mendapat URL yang bisa dibagikan untuk memulihkan warna dasar, harmoni, dan kecerahan Anda secara tepat. Ramp gradasi bawaan membentangkan setiap warna dasar dari terang ke gelap, dan seluruh halaman tetap bisa dioperasikan dengan keyboard — dengan fokus yang terlihat di setiap langkah.

Apa itu roda warna?

Roda warna adalah diagram warna melingkar tempat rona disusun agar hubungan menjadi spasial: warna bertetangga terasa tenang, warna berlawanan menciptakan ketegangan. Roda warna primer klasik dari pelajaran seni mencampur cat merah, kuning, dan biru, sementara roda warna RGB di layar Anda mencampur cahaya. Tool ini menghitung setiap harmoni dalam ruang warna HSV/HSL — disetel untuk piksel, bukan pigmen. Seret titik pada cakram untuk mengatur rona, tarik ke tepi untuk saturasi, dan putar cincin kecerahan luar untuk membawa satu rona dari latar terang ke teks gelap. Karena cakram selalu digambar dengan vivid penuh, titik penanda tetap tersebar dan bisa diseret bahkan dengan palet nyaris hitam atau nyaris putih — geometrinya tidak pernah runtuh di titik ekstrem.

Cara memakai roda warna online ini

Roda warna online ini sekaligus pemilih warna online dan alat warna yang lengkap:

  1. Ketik nilai HEX, buka pemilih warna sistem, atau ambil sampel piksel mana pun di layar Anda.
  2. Pilih analog, komplementer, komplementer terbagi, triadik, tetradik, atau persegi — atau edit manual daftar kustom berisi dua hingga delapan warna.
  3. Atur kecerahan dengan cincin luar dan baca setiap contoh sebagai nilai hex, RGB, HSL, atau OKLCH.
  4. Salin kode, unduh SVG/PNG, atau ekspor token CSS dan Tailwind.

Menjelajahi arah? Tekan Shuffle di galeri palet warna untuk putaran acak melintasi 400+ set pilihan.

Sebelum merilis, jalankan simulasi buta warna untuk mempratinjau protanopia, deuteranopia, tritanopia, dan akromatopsia, dan jaga teks tetap terbaca dengan label kontras otomatis pada setiap strip.

Pemilih warna lengkap: HEX, RGB, HSL, OKLCH

Setiap pemilih warna di halaman ini berbicara empat format. Kolom hex menerima kode warna apa pun seperti #EDEA37, pemilih RGB membaca triplet seperti rgb(99, 102, 241), dan HSL plus OKLCH mencakup keseragaman perseptual yang tak terjangkau RGB saja. Tim front-end mendapat alur pemilih HTML dan pemilih CSS siap pakai: ekspor variabel CSS, token tema Tailwind v4, objek konfigurasi Tailwind v3, JSON Figma, atau hanya kodenya. Pipet layar bawaan (EyeDropper) mengambil sampel piksel mana pun di monitor Anda, dan titik-titik roda pemilih tetap bisa diseret pada kecerahan apa pun. Pemilih warna online ini gratis, dengan ekspor ber-alfa yang mencakup setiap kasus RGBA. Mode kustom membekukan set apa pun menjadi daftar yang bisa diedit manual: cerahkan atau gelapkan contoh, seret untuk menyusun ulang, sisipkan titik tengah campuran, atau perpanjang ujung mana pun — setiap suntingan langsung tercermin di URL bagikan.

Pemilih warna dari gambar

Fotografer dan desainer merek mengandalkan pemilih warna gambar untuk meminjam palet dari dunia nyata. Unggah foto — atau tempel URL gambar — dan pemilih dari gambar menampilkan kaca pembesar dengan kisi piksel dan bidikan, sehingga membaca piksel tepat yang Anda tunjuk, bahkan pada zoom 800%. Kunci warnanya, salin sebagai HEX, RGB, HSL, atau OKLCH, dan kirim ke roda dengan satu klik. Atur ukuran palet ekstraksi dari dua hingga sepuluh warna, unduh strip sebagai PNG, atau simpan di brankas browser untuk dibuka lagi nanti. Setiap gambar yang Anda buka tetap di perangkat Anda — tidak ada yang diunggah.

Generator palet warna dan palet dari gambar

Saat satu contoh tak cukup, generator palet warna membangun palet siap pakai dari gambar dalam hitungan detik. Ia menilai piksel berdasarkan frekuensi dan saturasi, menyaring nyaris-duplikat, lalu mengurutkan pemenang berdasarkan rona — dua hingga sepuluh warna yang bisa disusun ulang, diperpanjang, dan dihapus. Pengedit potret akan menghargai set khusus warna kulit, berdampingan dengan koleksi pastel, biru, dan hijau. Simpan favorit di brankas browser, unduh palet warna mana pun sebagai PNG atau SVG, dan ekspor token untuk serah terima. Kenop yang bisa diseret menempel pada gambar di titik sampelnya — mengambil ulang warna menjadi soal seret, bukan tebak-tebakan.

Warna komplementer tanpa tebak-tebakan

Roda warna komplementer memasangkan rona berselisih 180° untuk ketegangan maksimal — oranye melawan biru, ungu melawan kuning. Strip komplementer menandai warna dasar Anda dengan titik hitam, sehingga terlihat jelas contoh mana untuk tombol dan tautan sementara rona dominan memimpin tata letak. Putaran terbagi, triadik, tetradik, dan persegi mendampinginya di panel harmoni sebagai alternatif yang lebih lembut atau berani.

Palet musiman untuk setiap undertone

Dua belas sistem analisis warna musiman tinggal di galeri — masing-masing tujuh belas palet. Brief hangat dan lembut dimulai dengan palet musim gugur lembut, sementara yang sejuk dan lembut menuju palet musim panas lembut. Set musim gugur yang sangat hangat melayani kampanye gugur dan merek makanan, dan palet musim dingin pekat menghadirkan kilau permata di atas nyaris-hitam untuk kemewahan dan malam hari. Desain terang dan hangat mengambil dari palet musim semi terang, minimalisme lapang dari palet musim panas sejuk, dan karya gelap mewah dari palet musim gugur pekat. Kontras dingin milik palet musim dingin menusuk, kehangatan cerah milik palet musim semi hangat, rona tengah lembut milik palet musim panas sejati, dan kemewahan tenang milik palet netral. Nuansa musim panas, musim dingin, musim semi, dan musim gugur yang lebih luas melengkapi 400+ set — masing-masing dengan salin HEX, RGB, HSL, dan OKLCH sekali klik.

Alternatif gratis Adobe color wheel

Jika Anda tiba dengan mencari Adobe color wheel, Adobe color picker, Canva color wheel, atau Google color picker, Anda sudah tahu tugasnya: mengubah satu warna merek menjadi set yang seimbang. Ease Colors mencakup area yang sama — harmoni, kode HEX/RGB/HSL/OKLCH, pengambilan sampel gambar, dan ekspor palet — gratis di browser, dengan URL yang bisa dibagikan dan tanpa akun yang menghalangi Anda dan contoh warna. Kontrol keyboard diutamakan, label pembaca layar, dan mode gerakan yang dikurangi disertakan.

Pertanyaan palet, terjawab

Bagaimana cara menyalin warna?

Klik swatch mana pun. Ganti format ke HEX, RGB, HSL, atau OKLCH sebelum menyalin.

Bagaimana cara membagikan paletku?

Tekan “Salin tautan”. URL menyimpan warna dasar, harmoni, dan kecerahanmu.

Apakah gratis untuk uso komersial?

Ya. Setiap HEX, token, dan ekspor adalah milikmu — tanpa atribusi.

Pertanyaan seputar roda warna, terjawab

Apa itu roda warna?

Roda warna adalah diagram melingkar yang menyusun rona agar hubungannya menjadi spasial: warna bertetangga terasa tenang, sementara warna berlawanan menciptakan ketegangan. Kelas seni mengajarkan roda merah-kuning-biru untuk mencampur cat; layar menggunakan roda RGB yang mencampur cahaya. Desainer memakainya untuk memilih warna dasar, membangun harmoni, dan memeriksa kontras sebelum palet menyentuh tata letak.

Bagaimana cara memakai roda warna?

Mulai dari satu warna dasar — ketik kode HEX, buka pemilih sistem, atau ambil sampel layar Anda. Pilih harmoni seperti analog, komplementer, atau triadik, lalu atur kecerahan dengan cincin luar hingga warna latar, teks, dan aksen terbentuk. Salin setiap contoh sebagai HEX, RGB, HSL, atau OKLCH lalu tempel kodenya ke CSS, Tailwind, atau Figma.

Apa tujuan utama roda warna?

Tujuan utamanya adalah memadukan warna tanpa tebak-tebakan. Alih-alih memasangkan dengan mata, Anda membaca geometri: jarak berarti kontras dan kedekatan berarti ketenangan. Ini memberi setiap antarmuka hierarki yang jelas — satu rona dominan, beberapa pendukung, dan satu aksen cadangan — sehingga tombol, tautan, dan judul jatuh tepat di tempat mata mencarinya.

Apa 8 jenis utama skema warna?

Literatur desain biasanya mendaftar delapan: monokromatik (satu rona, banyak kecerahan), analog (tetangga), komplementer (berlawanan), komplementer terbagi (satu dasar plus dua tetangga lawannya), triadik (segitiga), tetradik atau persegi panjang (dua pasang komplementer), persegi (empat sudut), dan akromatik atau netral (hitam, putih, abu-abu). Tool ini mencakup enam secara langsung, plus mode kustom untuk daftar edit manual berisi dua hingga delapan warna.

Bagaimana cara memilih warna dari roda warna?

Seret titik pada cakram: sudut menentukan rona dan jarak dari pusat menentukan saturasi. Seret cincin luar untuk mengatur kecerahan tanpa menyentuh rona maupun saturasi. Anda juga bisa mengetik nilai HEX persis, membuka kotak warna sistem, atau memilih piksel mana pun di monitor dengan pemilih layar — semua jalan menuju warna dasar yang sama dan bisa dibagikan.

Apa gunanya pemilih warna?

Pemilih warna mengubah pilihan visual menjadi nilai yang tepat dan bisa dipakai ulang. Ia membaca warna apa pun sebagai kode HEX, RGB, HSL, atau OKLCH agar desainer dan developer berbicara bahasa yang sama: yang Anda klik identik secara byte dengan yang tampil di CSS, token Tailwind, atau gaya Figma — tanpa lagi menaksir corak dengan mata.

Apa saja jenis pemilih warna?

Jenis utamanya adalah pemilih roda atau cakram (rona plus saturasi sekilas), pemilih geser (kanal RGB atau HSL), kolom HEX (nilai langsung), pipet atau pemilih layar (mengambil sampel monitor Anda), pemilih gambar (kaca pembesar di atas foto), dan pustaka palet (set pilihan seperti galeri 400+ di sini). Situs ini menggabungkan keenamnya dalam satu alur.

Apa itu kode warna?

Kode warna adalah nilai teks yang menggambarkan tepat satu warna. HEX menulisnya sebagai enam digit heksadesimal (#EDEA37); RGB mendaftar kanal merah, hijau, dan biru; HSL mendaftar rona, saturasi, dan kecerahan; OKLCH adalah format perseptual yang lebih baru di mana langkah angka yang sama terlihat sama bedanya. Keempatnya menggambarkan contoh yang sama — formatnya hanya mengubah cara Anda membaca dan mengeditnya.

Bagaimana cara memakai pemilih warna?

Pilih warna dengan roda, penggeser, kolom HEX, atau pemilih layar, lalu salin dalam format yang dibutuhkan proyek — HEX untuk web, RGB atau RGBA untuk kode aplikasi, HSL untuk utak-atik cepat, OKLCH untuk keseragaman perseptual. Tempel nilainya ke stylesheet, konfigurasi Tailwind, atau tool desain, dan simpan tautan bagikan agar warna persisnya hanya seklik jauhnya nanti.

Apa gunanya palet warna?

Palet warna menjaga semua permukaan produk berbicara bahasa visual yang sama. Ia menetapkan peran — latar, teks, aksen, status — agar antarmuka terasa kohesif, bukan rakitan contoh acak. Palet yang bagus menanamkan kontras dan hierarki sejak awal, artinya lebih sedikit perbaikan keterbacaan dan merek yang lebih kuat dan dikenali.

Apa saja jenis palet warna?

Jenis umumnya mencakup palet monokromatik, analog, dan komplementer yang dibangun dari geometri roda; palet pastel dan neon yang ditentukan energinya; palet musiman menurut undertone kulit (dari soft autumn hingga netral); palet merek yang dikunci pada warna perusahaan; dan palet ekstraksi yang disampel dari foto. Galeri di sini menampung semuanya — 400+ set dalam 60+ kategori.

Bagaimana cara memilih palet warna?

Mulai dari satu warna dasar yang cocok dengan suasana — hangat dan lembut, sejuk dan lapang, atau gelap dan dramatis. Kembangkan dengan harmoni, lalu uji hasilnya sebagaimana pengguna menemukannya: kontras teks isi, aksen tombol, dan simulasi buta warna untuk protanopia, deuteranopia, dan tritanopia. Jika lolos ketiganya, bagikan tautannya dan rilis.