Generator Palet Warna
BaruHasilkan palet komplementer, analog, triadik, dan monokromatik.
Tint & shade scales (50–900)
WCAG contrast check
Contrast ratio of each color against white and black. AA needs 4.5:1 for normal text, AAA needs 7:1.
| Color | vs White | vs Black | Best text |
|---|
Runs entirely in your browser. Nothing is uploaded.
Buat palet warna dengan lima cara berbeda
Generator palet warna ini menggantikan sederet alat terpisah. Tekan Generate untuk mendapatkan palet warna acak, susun harmoni warna dari sebuah warna dasar, tarik warna dari gambar atau foto, kembangkan satu kode hex menjadi skema lengkap, atau ubah nama warna atau sebuah kata menjadi palet yang selalu bisa direproduksi. Atur jumlah warna dari 3 sampai 10, kunci warna yang Anda suka, lalu regenerasi sisanya — tanpa akun dan tidak ada data yang keluar dari browser Anda.
Klik swatch mana pun untuk menyalin nilainya, ganti tampilan antara HEX, RGB, dan HSL, dan seret swatch untuk mengubah urutan. Tekan Spasi untuk langsung membuat palet baru — alur kerja yang dipopulerkan Coolors, tersedia di sini tanpa paywall. Untuk pengguna sentuh, tombol Generate melakukan hal yang sama, dan seluruh fitur berjalan penuh di iPhone Safari maupun Android Chrome tanpa perlu memasang aplikasi.
Ekstrak warna dari gambar, kode hex, atau nama
Dari gambar: Jatuhkan sebuah foto dan alat ini akan mengambil sampelnya di canvas HTML5 tersembunyi menggunakan algoritma median-cut untuk mengekstrak warna-warna dominan — berguna untuk mencocokkan palet dengan foto produk, foto brand, atau mood board. Foto pantai bisa menghasilkan beige pasir, biru air, dan teal pekat; foto produk bisa mengekstrak warna brand Anda, latar netral, dan nada highlight. Gambar tetap berada di perangkat Anda dan tidak pernah diunggah ke mana pun. Coolors mengenakan biaya langganan Pro untuk fitur ini; di sini gratis.
Dari kode hex: Tempel warna brand Anda dan jadikan ia jangkar, sementara generator membangun warna analog, komplementer, serta pendamping tint/shade di sekitarnya. Dari nama: Ketik kata apa pun dan sebuah hash deterministik akan menjadi benih palet, sehingga nama yang sama selalu menghasilkan warna yang sama — alternatif offline yang andal dibandingkan generator palet berbasis AI yang memberi hasil berbeda setiap kali dijalankan.
Harmoni warna berdasarkan teori warna yang sesungguhnya
Pada 1704, Isaac Newton menyusun spektrum tampak menjadi sebuah lingkaran — roda warna pertama — dan menetapkan bahwa hubungan antar hue adalah jarak sudut pada lingkaran itu. Setiap harmoni warna pada dasarnya hanyalah aturan tentang sudut mana yang dikombinasikan. Warna komplementer berjarak 180° dan menghasilkan kontras maksimum — biru dan oranye, merah dan hijau. Brand olahraga memanfaatkan ini secara agresif: ungu dan emas LA Lakers adalah warna yang nyaris komplementer, dipilih agar masing-masing membuat warna lainnya terlihat lebih terang di bawah pencahayaan arena.
Warna analog bertetangga dalam rentang ±30° sehingga berbagi komponen spektral yang tumpang tindih dan tidak pernah bertabrakan — dedaunan musim gugur berjalan dari oranye → amber → kuning, terumbu tropis dari cyan → teal → biru-hijau. Triadik menempatkan tiga hue berjarak 120° untuk skema yang seimbang namun hidup; tetradik memakai empat warna pada interval 90° dan memberi rentang terkaya, tetapi menuntut satu hue mendominasi agar hasilnya tidak ramai. Split-complementary mengapit lawan pada 150°/210° untuk melunakkan benturan kontras, dan monokromatik mempertahankan satu hue dengan variasi lightness — skema paling aman karena semua warna otomatis selaras. Memahami aturan ini mengubah cara Anda memakai generator: alih-alih meregenerasi sampai kebetulan bagus, Anda memilih tipe harmoni yang sesuai nuansa proyek — tenang dan natural (analog), berani dan sporty (komplementer), ceria dan playful (triadik) — lalu beriterasi di dalam struktur itu. Setiap warna yang dihasilkan juga dilengkapi skala tint dan shade penuh dari 50 hingga 900 untuk state hover, warna border, dan varian latar pada sistem desain UI.
Bagaimana algoritma pembuatan palet sebenarnya bekerja
Di balik layar, setiap generator harmoni warna melakukan matematika rotasi hue. Mulai dari sudut hue dasar H (0–360°), terapkan offset rotasi milik harmoni untuk mendapatkan hue pendamping, lalu berikan tiap warna saturasi dan lightness sendiri dalam model HSL atau OKLCH sesuai perannya — primer, sekunder, aksen, netral. Untuk pasangan komplementer, generator menetapkan H dan H+180. Untuk triadik: H, H+120, H+240. Menurunkan saturasi menciptakan warna pendukung yang kalem; menurunkan lightness menghasilkan shade gelap untuk teks atau latar. Inilah inti dari setiap alat, dari Coolors hingga Adobe Color.
Skala warna sistematis — yang dikirimkan design system — dibuat lewat tinting dan shading: mencampur hue dengan putih untuk langkah lebih terang, dengan hitam untuk langkah lebih gelap, dan dengan abu-abu untuk tone. Tailwind CSS memakai skala 10 langkah bernama 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, dan 950; langkah 500 biasanya hue murni. Masalah penting pada skala berbasis HSL: kanal L tidak perceptually uniform — kuning pada L=60 terlihat jauh lebih terang daripada biru pada L=60 meski angkanya identik. Itulah sebabnya kuning 500 dan biru 500 Tailwind terlihat tidak seimbang secara optik pada elemen UI yang sama. OKLCH — model warna di balik CSS Color Level 4 — memisahkan lightness, chroma, dan hue dalam ruang yang seragam secara persepsi, sehingga alat seperti sistem warna Radix UI menghasilkan ramp yang tampak merata di semua hue.
Kunci warna favorit, lalu ekspor ke format apa pun
Palet yang bagus lahir dari iterasi, bukan sekali generate. Klik ikon gembok pada swatch mana pun untuk menyematkannya; tekan Generate atau Spasi dan hanya swatch yang tidak terkunci yang berubah. Anda bisa mengunci beberapa warna sekaligus — kunci warna primer dan sekunder brand, biarkan alat mencari aksen dan netral yang cocok, lalu regenerasi nada pendukungnya. Ini meniru cara desainer menyusun palet secara manual, hanya jauh lebih cepat — dan fitur ini gratis di sini, sementara Coolors menempatkan ekspor tingkat berbayarnya di balik akun Pro.
Saat palet siap, ekspor sesuai kebutuhan proyek. CSS menghasilkan blok :root berisi custom properties. Tailwind memberi objek theme.extend.colors siap tempel untuk tailwind.config.js. SCSS memberi deklarasi $variables yang kompatibel dengan Sass. JSON mencantumkan tiap warna dalam HEX, RGB, dan HSL untuk JavaScript atau pipeline design token. Unduh lembar swatch PNG untuk dokumen brand atau presentasi, atau salin tautan berbagi yang menyandikan seluruh palet dalam URL sehingga rekan tim membuka persis apa yang Anda lihat.
Sistem warna brand dan design token: dari swatch ke stylesheet
Satu kode hex hanyalah awal dari sistem warna brand. Di dunia cetak, warna ditentukan dalam Pantone Matching System (PMS) — standar tinta fisik di mana PMS 286 C adalah biru spesifik pada truk UPS apa pun mesin cetak dan kertasnya. Untuk layar digital, padanannya adalah hex sRGB atau triplet RGB: #0032A0 untuk biru royal yang sama. Untuk cetak offset non-Pantone, warna dikonversi ke CMYK — dan karena gamut CMYK lebih sempit dari sRGB, biru, oranye, atau hijau yang sangat jenuh bisa bergeser drastis. Memeriksa palet terhadap peta gamut CMYK sebelum memfinalkan pedoman brand mencegah kejutan buruk saat naik cetak.
Arsitektur design token mengubah warna palet menjadi variabel semantik. Google Material Design 3 mendefinisikan peran seperti primary, on-primary, primary-container, secondary, tertiary, error, surface, dan outline. Dalam kode, ini terpetakan ke CSS custom properties seperti --color-primary: #3b82f6; yang dirujuk komponen alih-alih menuliskan hex secara langsung — saat warna brand berubah, satu pembaruan token merambat ke mana-mana. Alat seperti Style Dictionary dan Theo mengompilasi berkas token menjadi keluaran spesifik platform dari satu sumber JSON. Palet dark mode adalah bukti paling jelas mengapa token penting: --color-surface bisa bernilai #ffffff di tema terang dan #1a1a1a di tema gelap, dialihkan oleh satu blok @media (prefers-color-scheme: dark). Ekspor CSS dari generator ini memberi Anda fondasi token persis seperti itu.
Aksesibilitas warna: rasio kontras WCAG dan buta warna
Palet belum selesai sebelum teks di atasnya terbaca. WCAG 2.1 menetapkan rasio kontras minimum antara teks dan latarnya: 4,5:1 untuk teks ukuran normal pada level AA, 3:1 untuk teks besar (18pt+ atau 14pt+ tebal) atau batas komponen UI, dan 7:1 untuk AAA. Rasio ini dihitung dari relative luminance kedua warna. Biru sedang (#2563EB) di atas putih terukur sekitar 5,17:1 — lolos AA. Amber (#F59E0B) di atas putih hanya sekitar 1,97:1 — gagal AA dan harus memakai teks gelap. Algoritma APCA yang diusulkan untuk WCAG 3.0 menggantikan formula saat ini dengan model yang memperhitungkan ketebalan font dan polaritas (terang-di-gelap versus gelap-di-terang), sehingga menghasilkan lebih sedikit kelolosan palsu untuk warna bersaturasi sedang.
Sekitar 8% pria dan 0,5% wanita memiliki bentuk defisiensi penglihatan warna. Tipe paling umum adalah buta warna merah-hijau (deuteranopia atau protanopia), di mana mata tidak bisa membedakan merah dari hijau lewat hue saja dan bergantung pada perbedaan luminansi — palet yang menempatkan status error merah di sebelah status sukses hijau dengan lightness serupa menjadi ambigu total bagi pengguna ini. Desain palet aman-buta-warna memastikan setiap pembedaan bermakna dapat dipersepsi lewat perbedaan luminansi atau isyarat bentuk, bukan warna semata; alur audit standarnya adalah menjalankan palet melalui simulator deuteranopia dan protanopia (tersedia di banyak devtools browser). Aturan praktis: setidaknya 60–70% pasangan warna di palet Anda sebaiknya lolos ambang AA saat satu dipakai sebagai latar dan lainnya sebagai teks. Panel kontras bawaan pada generator ini menampilkan rasio tersebut secara real time — tanpa daftar akun, tanpa upload, dan semua kalkulasi berjalan sebagai JavaScript lokal di browser Anda.
Frequently asked questions
Apa generator palet warna gratis terbaik?
Generator terbaik melakukan semua yang Anda butuhkan tanpa akun, langganan, atau pemrosesan di server. Alat ini membuat palet dengan lima cara — acak, harmoni roda warna, dari gambar, dari kode hex, dan dari nama warna — memungkinkan Anda mengunci warna dan meregenerasi sisanya, memeriksa rasio kontras WCAG, dan mengekspor ke CSS, Tailwind, SCSS, JSON, dan PNG. Coolors mencakup generasi acak dan penguncian tetapi mensyaratkan akun Pro ($4/bulan) untuk ekstraksi gambar dan ekspor lanjutan. Adobe Color bagus untuk harmoni tetapi mengunci penyimpanan palet di balik login Creative Cloud. UtiloKit menggabungkan keduanya, berjalan sepenuhnya offline, dan tanpa keharusan akun.
Bagaimana cara membuat palet warna dari nol?
Pilih titik awal — masukkan gambar, ketik kode hex, masukkan nama warna, pilih tipe harmoni, atau tekan Generate (atau tombol Spasi) untuk set acak. Atur ukuran palet 3–10 warna, kunci swatch yang ingin dipertahankan, dan regenerasi sisanya sampai palet terasa pas. Klik swatch mana pun untuk menyalin nilainya dalam format HEX, RGB, atau HSL, lalu ekspor seluruh set ke CSS, Tailwind, atau lembar swatch PNG. Palet yang solid biasanya terdiri dari 1 warna dominan, 1–2 warna pendukung, dan 1–2 warna aksen.
Bagaimana cara membuat palet warna dari gambar atau foto?
Beralih ke mode 'Image' dan masukkan sebuah foto (atau klik browse untuk memilihnya). Alat ini menggambar gambar ke canvas HTML5 tersembunyi, mengambil sampel data piksel, dan menjalankan algoritma kuantisasi median-cut untuk mengekstrak warna paling dominan dan paling berbeda secara visual. Foto pantai mungkin menghasilkan beige pasir, biru air, dan teal pekat. Foto produk mungkin mengekstrak warna brand Anda, latar netral, dan nada highlight. Semuanya terjadi secara lokal dengan Canvas API — foto tidak pernah menyentuh server. Coolors mensyaratkan langganan Pro untuk ekstraksi gambar; di sini gratis.
Apa perbedaan warna komplementer, analog, dan triadik?
Ketiganya adalah hubungan berdasarkan posisi pada roda warna, diukur dalam derajat hue. Warna komplementer berjarak 180° untuk kontras maksimum — biru dan oranye, merah dan hijau. Warna analog bertetangga dalam ±30° untuk kesan tenang dan kohesif — biru, biru-hijau, dan teal. Warna triadik adalah tiga hue berjarak sama 120° untuk skema yang seimbang dan hidup. Mode Harmony menghasilkan semuanya — plus tetradik (empat warna pada 90°), split-complementary (150°/210°), dan monokromatik (satu hue dengan lightness bervariasi) — dari warna dasar apa pun yang Anda pilih.
Berapa banyak warna yang sebaiknya ada dalam sebuah palet?
Sebagian besar palet kerja memakai 3 sampai 5 warna: satu warna dominan, satu atau dua warna pendukung, dan satu aksen. Aturan 60-30-10 menyarankan 60% dominan, 30% sekunder, dan 10% aksen dalam sebuah desain. Untuk desain UI, hasilkan 5 warna dasar dan gunakan skala tint dan shade per warna (langkah 50–900) untuk state hover, border, dan latar belakang. Alat ini memungkinkan ukuran palet dari 3 hingga 10 swatch. Untuk identitas brand, 3 warna sering lebih rapi. Untuk ilustrasi atau visualisasi data, 5–8 warna bisa lebih baik.
Bagaimana cara membuat palet untuk website atau brand saya?
Mulai dari warna primer brand Anda: tempel kode hex-nya di mode 'From hex' untuk membangun set yang terkoordinasi, atau gunakan mode Harmony untuk menghasilkan skema komplementer atau analog di sekitarnya. Hasilkan skala tint/shade (50–900) untuk tiap warna agar Anda punya state hover, warna border, dan varian latar. Periksa panel kontras untuk memastikan kombinasi teks-di-latar lolos WCAG AA (rasio 4,5:1 untuk teks normal). Lalu ekspor ke variabel CSS atau konfigurasi Tailwind. Tautan berbagi memungkinkan Anda mengirim palet ke rekan tim untuk ditinjau.
Bagaimana cara mengekspor palet ke CSS, Tailwind, atau SCSS?
Gunakan tombol Export setelah palet dibuat. 'CSS' menyalin blok :root berisi custom properties seperti --color-1: #2563EB; siap ditempel ke stylesheet. 'Tailwind' menyalin objek theme.extend.colors dengan kunci palette-1 sampai palette-n, siap untuk tailwind.config.js. 'SCSS' menyalin deklarasi variabel $color-n. 'JSON' mengekspor tiap warna sebagai objek dengan nilai HEX, RGB, dan HSL untuk JavaScript atau pipeline design token. Anda juga bisa menyalin URL berbagi yang menyandikan seluruh palet sehingga kolaborator membuka persis apa yang Anda lihat.
Bagaimana cara memeriksa apakah palet saya aksesibel menurut WCAG?
Panel kontras bawaan menampilkan rasio kontras tiap warna terhadap teks putih dan hitam, lengkap dengan lencana AA dan AAA. WCAG 2.1 mensyaratkan rasio minimal 4,5:1 untuk teks ukuran normal (AA), 3:1 untuk teks besar (AA), dan 7:1 untuk kepatuhan AAA yang lebih ketat. Contohnya, #2563EB (biru sedang) di atas putih adalah 5,17:1 — lolos AA. #F59E0B (amber) di atas putih sekitar 1,97:1 — gagal AA dan butuh teks gelap. Pemeriksaan ini terpasang langsung di generator palet, jadi Anda tidak butuh alat aksesibilitas terpisah. Adobe Color punya pemeriksa serupa tetapi mensyaratkan login untuk menyimpan hasil.
Bagaimana perbandingannya dengan Coolors dan Adobe Color?
Coolors adalah generator palet paling populer dengan alur kunci/regenerasi yang solid, pintasan keyboard, dan bagian explore yang luas. Kendala utamanya: fitur inti seperti ekstraksi gambar dan ekspor Tailwind mensyaratkan akun Coolors Pro ($4/bulan). Adobe Color unggul dalam harmoni warna dan pemeriksaan WCAG tetapi mensyaratkan akun Adobe untuk menyimpan palet, dan antarmukanya lebih lambat untuk mencapai ekspor. UtiloKit memberi Anda alur kerja bergaya Coolors (kunci, Spasi untuk generate) plus ekstraksi gambar, mode harmoni, pemeriksaan kontras WCAG, dan ekspor Tailwind/SCSS — semuanya tanpa akun atau pembayaran.
Apa itu palet monokromatik dan kapan sebaiknya digunakan?
Palet monokromatik memakai satu hue dengan saturasi dan lightness yang divariasikan untuk menciptakan tint (lebih terang) dan shade (lebih gelap). Contohnya, #1E3A8A, #2563EB, #60A5FA, dan #BFDBFE semuanya berbagi hue biru yang sama pada tingkat lightness berbeda. Ini skema warna paling aman karena setiap warna otomatis selaras — tidak ada risiko bertabrakan. Gunakan untuk desain minimal dan elegan, untuk komponen yang butuh kehadiran satu brand, atau sebagai basis ramp warna primer sebuah UI. Pilih Monochromatic di mode Harmony untuk membuatnya dari warna dasar apa pun.
Bisakah saya mengunci sebuah warna dan meregenerasi sisanya, seperti di Coolors?
Bisa — ini persis alur kerja gaya Coolors. Klik ikon gembok pada swatch mana pun untuk menyematkan warna itu. Lalu tekan Generate (atau tombol Spasi) dan hanya swatch yang tidak terkunci yang berubah. Terus kunci swatch yang Anda suka dan regenerasi sisanya sampai palet lengkap terasa pas, lalu ekspor. Anda bisa mengunci beberapa swatch sekaligus — misalnya kunci warna primer dan sekunder brand, dan biarkan alat menemukan aksen serta netral yang cocok. Fitur ini gratis di sini; Coolors mengunci ekspor tingkat berbayarnya di balik akun Pro.
Apakah generator palet warna ini berfungsi di iPhone dan Android?
Ya — sepenuhnya responsif dan berfungsi di iPhone Safari, Android Chrome, dan semua browser mobile modern. Swatch warna, mekanisme kunci, dan tombol ekspor semuanya ramah sentuhan dengan target ketuk yang besar. Ekstraksi gambar dari galeri foto berfungsi di mobile lewat pemilih file. Pintasan tombol Spasi untuk regenerasi juga punya tombol Generate untuk layar sentuh. Pemeriksaan kontras WCAG, mode harmoni, dan semua format ekspor bekerja identik di mobile maupun desktop — tidak ada fitur yang dihapus atau disembunyikan di balik instalasi aplikasi.
Related tools
Lihat semua perkakas
Baru Playground Grid CSS
Atur kolom, gap, dan perataan grid dengan pratinjau langsung dan CSS.
Baru Generator Glassmorphism
Rancang kartu kaca buram dan salin CSS-nya, dengan pratinjau langsung.
Baru Generator Text-Shadow CSS
Sesuaikan bayangan teks CSS dengan pratinjau langsung dan salin kodenya.
Baru Pencampur Warna
Campur dua warna pada rasio apa pun dan salin hasilnya atau langkah mana pun.
Baru Pemilih Warna Gambar
Pilih warna apa pun dari gambar dan ekstrak palet dominannya sebagai HEX, RGB, dan HSL.
Baru Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.