Ease Colors

Roda warna

Mulakan dengan satu warna dan jana harmoni pelengkap, analog, triadik dan banyak lagi — kemudian eksport sebagai CSS, Tailwind v4, SVG atau PNG.

Palet

Gradas warna asas

Panduan teori warna

Fahami rodanya, kemudian langgar peraturannya dengan baik

Roda menyusun rona secara membulat supaya hubungan menjadi spatial. Jarak bermakna kontras, kedekatan bermakna tenang. Semua di bawah adalah interaktif — ubah roda di atas dan idea-idea ini lebih cepat difahami.

Cara menggunakan roda ini

  1. Pilih harmoni — geometri palet anda (berlawanan, jiran, segi tiga…).
  2. Seret mana-mana titik pada cakera — sudut menetapkan rona, jarak dari pusat menetapkan ketepuan.
  3. Seret gelang kecerahan luar untuk latar, teks dan aksen.
  4. Salin nilai dalam format anda, kemudian eksport token untuk CSS atau Tailwind.

Petua: kongsi sebarang hasil — URL sentiasa menyimpan warna asas, harmoni dan kecerahan anda.

Enam harmoni

Pelengkap — pasangan berlawanan
Ketegangan maksimum. Rizabkan satu sisi untuk aksen, biarkan sisi lain mendominasi.
Pelengkap terbahagi — asas + dua jiran lawannya
Hampir sama hidup tetapi jauh lebih pemaaf. Lalai yang bagus untuk jenama.
Analog — tiga jiran
Tenang dan kohesif. Tambah aksen pelengkap hanya jika perlu tindakan.
Triadik — segi tiga 120°
Berani dan seimbang. Biarkan satu warna menguasai ~60% UI.
Tetradik — dua pasang pelengkap
Kaya tetapi sibuk. Tetapkan hierarki jelas sebelum warna keempat.
Segi empat — empat penjuru 90°
Tenaga sekata ke semua arah. Terbaik dengan peraturan ketat setiap permukaan.

Gelap, cerah & ton

Satu rona tidak pernah cukup untuk antara muka. Campur dengan hitam untuk tona gelap (pengepala, hover), putih untuk tona cerah (latar, modal) dan kelabu untuk ton (teks malap, sempadan).

Indigo dari gelap ke cerah. Logik yang sama menggerakkan setiap palet di atas.

Primer, sekunder & tertier

Dalam roda RYB klasik, merah, kuning dan biru ialah warna primer; campurannya menghasilkan jingga, hijau dan ungu. Di skrin kita mencampur cahaya (RGB), jadi alat ini mengira dalam HSL/HSV — bulatan yang sama, ditala untuk piksel.

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

Roda warna dalam talian percuma, pemilih warna dan penjana palet

Ease Colors ialah roda warna dalam talian yang percuma untuk pereka dan pembangun yang memerlukan warna yang boleh diharap tanpa meninggalkan pelayar. Pilih warna asas pada pemilih roda warna interaktif, pratonton enam harmoni serentak, kemudian salin kod HEX, RGB, HSL atau OKLCH yang sedia untuk produksi. Tiada apa yang dimuat naik, tiada akaun untuk dibuka, dan setiap hasil mendapat URL yang boleh dikongsi untuk memulihkan warna asas, harmoni dan kecerahan anda dengan tepat. Rampa bayang terbina membentangkan setiap warna asas daripada cerah ke gelap, dan seluruh halaman kekal boleh dikendali dengan papan kekunci — dengan fokus yang jelas pada setiap langkah.

Apakah roda warna?

Roda warna ialah gambar rajah warna membulat tempat rona disusun supaya hubungan menjadi ruang: warna berjiran terasa tenang, warna bertentangan mencipta ketegangan. Roda warna primer klasik dari kelas seni mencampurkan cat merah, kuning dan biru, manakala roda warna RGB pada skrin anda mencampurkan cahaya. Tool ini mengira setiap harmoni dalam ruang warna HSV/HSL — ditala untuk piksel, bukan pigmen. Seret titik pada cakera untuk menetapkan rona, tarik ke tepi untuk ketepuan, dan putar gelang kecerahan luar untuk membawa satu rona dari latar cerah ke teks gelap. Oleh sebab cakera sentiasa dilukis dengan vivid penuh, titik penanda kekal tersebar dan boleh diseret walaupun dengan palet hampir hitam atau hampir putih — geometrinya tidak pernah runtuh pada titik ekstrem.

Cara menggunakan roda warna dalam talian ini

Roda warna dalam talian ini serentak pemilih warna dalam talian dan alat warna yang lengkap:

  1. Taip nilai HEX, buka pemilih warna sistem, atau ambil sampel mana-mana piksel pada skrin anda.
  2. Pilih analog, komplemen, komplemen terbahagi, triadik, tetradik atau segi empat — atau sunting manual senarai tersuai dua hingga lapan warna.
  3. Laraskan kecerahan dengan gelang luar dan baca setiap contoh sebagai nilai hex, RGB, HSL atau OKLCH.
  4. Salin kod, muat turun SVG/PNG, atau eksport token CSS dan Tailwind.

Meneroka arah? Tekan Shuffle di galeri palet warna untuk putaran rawak merentasi 400+ set pilihan.

Sebelum menerbitkan, jalankan simulasi buta warna untuk mempratonton protanopia, deuteranopia, tritanopia dan akromatopsia, dan pastikan teks kekal terbaca dengan label kontras automatik pada setiap jalur.

Pemilih warna lengkap: HEX, RGB, HSL, OKLCH

Setiap pemilih warna di halaman ini bertutur empat format. Ruangan hex menerima sebarang kod warna seperti #EDEA37, pemilih RGB membaca triplet seperti rgb(99, 102, 241), dan HSL bersama OKLCH merangkumi keseragaman perseptual yang tidak tercapai RGB sahaja. Pasukan front-end mendapat aliran pemilih HTML dan pemilih CSS siap guna: eksport pemboleh ubah CSS, token tema Tailwind v4, objek konfigurasi Tailwind v3, JSON Figma, atau hanya kodnya. Penitis skrin terbina (EyeDropper) mengambil sampel mana-mana piksel pada monitor anda, dan titik-titik roda pemilih kekal boleh diseret pada sebarang kecerahan. Pemilih warna dalam talian ini percuma, dengan eksport ber-alfa yang merangkumi setiap kes RGBA. Mod tersuai membekukan sebarang set menjadi senarai boleh sunting manual: cerahkan atau gelapkan contoh, seret untuk menyusun semula, sisipkan titik tengah campuran, atau panjangkan mana-mana hujung — setiap suntingan serta-merta tercermin dalam URL kongsi.

Pemilih warna daripada gambar

Jurugambar dan pereka jenama bergantung pada pemilih warna gambar untuk meminjam palet dari dunia sebenar. Muat naik foto — atau tampal URL gambar — dan pemilih daripada gambar memaparkan kanta pembesar dengan grid piksel dan bidikan, supaya membaca piksel tepat yang anda tunjuk, walaupun pada zum 800%. Kunci warnanya, salin sebagai HEX, RGB, HSL atau OKLCH, dan hantar ke roda dengan satu klik. Laraskan saiz palet pengekstrakan dari dua hingga sepuluh warna, muat turun jalur sebagai PNG, atau simpan dalam peti besi pelayar untuk dibuka lagi kemudian. Setiap gambar yang anda buka kekal dalam peranti anda — tiada apa yang dimuat naik.

Penjana palet warna dan palet daripada gambar

Apabila satu contoh tidak cukup, penjana palet warna membina palet siap guna daripada gambar dalam beberapa saat. Ia menilai piksel mengikut kekerapan dan ketepuan, menapis hampir-duplikat, kemudian menyusun pemenang mengikut rona — dua hingga sepuluh warna yang boleh disusun semula, dipanjangkan dan dipadam. Penyunting potret akan menghargai set khusus warna kulit, di samping koleksi pastel, biru dan hijau. Simpan kegemaran dalam peti besi pelayar, muat turun sebarang palet warna sebagai PNG atau SVG, dan eksport token untuk serahan. Tombol boleh seret melekat pada gambar di titik sampelnya — mengambil semula warna menjadi soal seret, bukan tekaan.

Warna komplemen tanpa teka-teki

Roda warna komplemen memasangkan rona berselisih 180° untuk ketegangan maksimum — jingga melawan biru, ungu melawan kuning. Jalur komplemen menandai warna asas anda dengan titik hitam, supaya jelas contoh mana untuk butang dan pautan sementara rona dominan menerajui susun atur. Putaran terbahagi, triadik, tetradik dan segi empat mendampinginya dalam panel harmoni sebagai alternatif yang lebih lembut atau berani.

Palet bermusim untuk setiap undertone

Dua belas sistem analisis warna bermusim tinggal di galeri — masing-masing tujuh belas palet. Brief hangat dan lembut bermula dengan palet autumn lembut, manakala yang sejuk dan lembut menuju palet musim panas lembut. Set autumn yang amat hangat melayani kempen luruh dan jenama makanan, dan palet musim sejuk pekat menghadirkan kilauan permata di atas hampir-hitam untuk kemewahan dan malam. Reka bentuk terang dan hangat mengambil daripada palet musim bunga cerah, minimalisme lapang daripada palet musim panas sejuk, dan karya gelap mewah daripada palet autumn pekat. Kontras dingin milik palet musim sejuk dingin, kehangatan cerah milik palet musim bunga hangat, rona tengah lembut milik palet musim panas sebenar, dan kemewahan tenang milik palet neutral. Nuansa musim panas, musim sejuk, musim bunga dan luruh yang lebih luas melengkapi 400+ set — masing-masing dengan salinan HEX, RGB, HSL dan OKLCH sekali klik.

Alternatif percuma 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: menukar satu warna jenama menjadi set yang seimbang. Ease Colors merangkumi bidang yang sama — harmoni, kod HEX/RGB/HSL/OKLCH, pengambilan sampel gambar dan eksport palet — percuma dalam pelayar, dengan URL boleh kongsi dan tanpa akaun yang menghalang anda dan contoh warna. Kawalan papan kekunci diutamakan, label pembaca skrin dan mod gerakan dikurangkan disertakan.

Soalan palet, terjawab

Bagaimana cara menyalin warna?

Klik mana-mana swatch. Tukar format kepada HEX, RGB, HSL atau OKLCH sebelum menyalin.

Bagaimana cara berkongsi palet saya?

Tekan “Salin pautan”. URL menyimpan warna asas, harmoni dan kecerahan anda.

Adakah percuma untuk kegunaan komersial?

Ya. Setiap HEX, token dan eksport adalah milik anda — tanpa atribusi.

Soalan roda warna, terjawab

Apakah roda warna?

Roda warna ialah gambar rajah membulat yang menyusun rona supaya hubungannya menjadi ruang: warna berjiran terasa tenang, manakala warna bertentangan mencipta ketegangan. Kelas seni mengajar roda merah-kuning-biru untuk mencampur cat; skrin menggunakan roda RGB yang mencampurkan cahaya. Pereka menggunakannya untuk memilih warna asas, membina harmoni dan menyemak kontras sebelum palet menyentuh susun atur.

Bagaimana cara menggunakan roda warna?

Mula dengan satu warna asas — taip kod HEX, buka pemilih sistem, atau ambil sampel skrin anda. Pilih harmoni seperti analog, komplemen atau triadik, kemudian laraskan kecerahan dengan gelang luar hingga warna latar, teks dan aksen terbentuk. Salin setiap contoh sebagai HEX, RGB, HSL atau OKLCH lalu tampal kodnya ke CSS, Tailwind atau Figma.

Apakah tujuan utama roda warna?

Tujuan utamanya ialah memadankan warna tanpa tekaan. Daripada memasangkan dengan mata, anda membaca geometri: jarak bermakna kontras dan kedekatan bermakna ketenangan. Ini memberi setiap antara muka hierarki yang jelas — satu rona dominan, beberapa penyokong dan satu aksen simpanan — supaya butang, pautan dan tajuk jatuh tepat di tempat mata mencarinya.

Apakah 8 jenis utama skema warna?

Kesusasteraan reka bentuk biasanya menyenaraikan lapan: monokromatik (satu rona, banyak kecerahan), analog (jiran), komplemen (bertentangan), komplemen terbahagi (satu asas plus dua jiran lawannya), triadik (segi tiga), tetradik atau segi empat tepat (dua pasang komplemen), segi empat sama (empat penjuru), dan akromatik atau neutral (hitam, putih, kelabu). Tool ini merangkumi enam secara langsung, plus mod tersuai untuk senarai suntingan manual dua hingga lapan warna.

Bagaimana cara memilih warna dari roda warna?

Seret titik pada cakera: sudut menetapkan rona dan jarak dari pusat menetapkan ketepuan. Seret gelang luar untuk menetapkan kecerahan tanpa menyentuh rona mahupun ketepuan. Anda juga boleh menaip nilai HEX tepat, membuka kotak warna sistem, atau memilih mana-mana piksel pada monitor dengan pemilih skrin — semua jalan menuju warna asas yang sama dan boleh dikongsi.

Apakah gunanya pemilih warna?

Pemilih warna menukar pilihan visual menjadi nilai yang tepat dan boleh guna semula. Ia membaca sebarang warna sebagai kod HEX, RGB, HSL atau OKLCH supaya pereka dan pembangun bertutur bahasa yang sama: yang anda klik serupa tepat dengan yang terpapar dalam CSS, token Tailwind atau gaya Figma — tanpa lagi mengagak tona dengan mata.

Apakah jenis pemilih warna?

Jenis utamanya ialah pemilih roda atau cakera (rona plus ketepuan sepintas lalu), pemilih gelangsar (saluran RGB atau HSL), ruangan HEX (nilai langsung), pipet atau pemilih skrin (mengambil sampel monitor anda), pemilih gambar (kanta pembesar di atas foto), dan pustaka palet (set pilihan seperti galeri 400+ di sini). Tapak ini menggabungkan keenam-enamnya dalam satu aliran.

Apakah kod warna?

Kod warna ialah nilai teks yang memerihalkan tepat satu warna. HEX menulisnya sebagai enam digit heksadesimal (#EDEA37); RGB menyenaraikan saluran merah, hijau dan biru; HSL menyenaraikan rona, ketepuan dan kecerahan; OKLCH ialah format perseptual lebih baharu di mana langkah angka yang sama kelihatan sama bezanya. Keempat-empatnya memerihalkan contoh yang sama — formatnya hanya mengubah cara anda membaca dan menyuntingnya.

Bagaimana cara menggunakan pemilih warna?

Pilih warna dengan roda, penggelangsar, ruangan HEX atau pemilih skrin, kemudian salin dalam format yang diperlukan projek — HEX untuk web, RGB atau RGBA untuk kod aplikasi, HSL untuk usikan pantas, OKLCH untuk keseragaman perseptual. Tampal nilainya ke helaian gaya, konfigurasi Tailwind atau tool reka bentuk, dan simpan pautan kongsi supaya warna tepatnya hanya seklik jauhnya kemudian.

Apakah gunanya palet warna?

Palet warna memastikan semua permukaan produk bertutur bahasa visual yang sama. Ia menetapkan peranan — latar, teks, aksen, status — supaya antara muka terasa kohesif, bukan himpunan contoh rawak. Palet yang bagus menanamkan kontras dan hierarki sejak awal, bermakna kurang pembaikan kebolehbacaan dan jenama yang lebih kuat dan dikenali.

Apakah jenis palet warna?

Jenis lazimnya merangkumi palet monokromatik, analog dan komplemen yang dibina daripada geometri roda; palet pastel dan neon yang ditentukan tenaganya; palet bermusim mengikut undertone kulit (dari soft autumn hingga neutral); palet jenama yang dikunci pada warna syarikat; dan palet pengekstrakan yang disampel dari foto. Galeri di sini menempatkan semuanya — 400+ set dalam 60+ kategori.

Bagaimana cara memilih palet warna?

Mula dari satu warna asas yang sepadan dengan suasana — hangat dan lembut, sejuk dan lapang, atau gelap dan dramatik. Kembangkan dengan harmoni, kemudian uji hasilnya sebagaimana pengguna menemuinya: kontras teks isi, aksen butang dan simulasi buta warna untuk protanopia, deuteranopia dan tritanopia. Jika melepasi ketiganya, kongsi pautannya dan terbitkan.