Generator Palet Warna

Generator
简 繁 BM BI 日本語 한국어 ไทย EN
Share:
By Checked against sources by , Founder & Architect, RECATOOLS Published Updated Last reviewed

Buat palet lima warna yang harmonis dengan sekali ketuk — acak, komplementer, analog, triadik, atau monokrom. Kunci warna yang Anda suka dan acak ulang sisanya, klik untuk menyalin kode HEX apa pun, dan ekspor kartu palet yang cantik. Hanya di peramban, instan.

RT-FUN-091 · Fun & Misc
Peramban Anda terlalu lama untuk fitur interaktif alat ini. Perbarui ke Safari 13.1, Chrome atau Edge 80, atau Firefox 74 ke atas.

Generator Palet Warna

(atau tekan Spasi)

Cek kontras (WCAG 2.2)

 

WarnaHEXrgb()hsl()Di atas putihDi atas hitam
     
     
     
     
     

Setiap pasangan, kontras tertinggi dulu

  1. Aa
  2. Aa
  3. Aa
  4. Aa
  5. Aa
  6. Aa
  7. Aa
  8. Aa
  9. Aa
  10. Aa

Angka adalah rasio kontras WCAG 2.2, dibulatkan ke bawah, jadi 4.5:1 yang tampil memang mencapai 4.5:1. Teks isi butuh 4.5:1 (AA) atau 7:1 (AAA); teks besar (18pt, atau 14pt tebal) butuh 3:1. Aturan harmoni hanya menentukan hubungan rona, bukan kontras: dua warna berseberangan pada roda bisa punya luminans hampir sama.

Advertisement
After tool · AD-W1 Responsive

Cara pakai

Pilih mode palet

Pilih dari Acak, Komplementer, Analog, Triadik, atau Monokrom. Masing-masing adalah aturan harmoni warna yang menentukan bagaimana kelima warna saling berhubungan.

Tekan Buat, atau tekan Spasi

Setiap penekanan menghasilkan palet harmonis yang baru. Tidak suka? Tekan lagi, atau cukup ketuk bilah spasi untuk mengacak ulang dengan cepat.

Kunci dan salin

Menemukan warna yang Anda sukai? Ketuk 🔓 padanya untuk menguncinya agar tetap pada pembuatan berikutnya. Klik nilai HEX mana pun untuk menyalinnya (mis. #E8622A) langsung ke desain Anda.

Unduh atau bagikan kartu

Ketuk “Unduh palet” untuk menyimpan seluruh set sebagai gambar (lengkap dengan kode HEX), “Bagikan” untuk mengirimnya ke rekan, atau ekspor sebagai PDF.

Generator Palet Warna: warna apik dalam hitungan detik, lewat teori warna

Memilih warna sering jadi bagian desain yang membuat orang mentok: satu warna terlihat oke sendirian, tetapi lima warna yang dicampur asal justru bentrok. Generator ini mengubah aturan di balik harmoni warna menjadi satu tombol — ia tidak menyodorkan lima warna acak, melainkan menyusun satu set yang secara alami terkoordinasi oleh geometri roda warna. Anda tinggal memilih, mengunci, dan menyalin warna yang Anda suka langsung ke desain.

Lima mode, lima hubungan

Alat ini menyediakan aturan harmoni yang paling sering dipakai, masing-masing sebuah hubungan pada roda warna: Monokrom — satu rona, hanya berbeda kecerahan, paling aman dan tak lekang waktu; Analog — rona bertetangga pada roda, lembut dan alami, bagai warna satu pemandangan; Komplementer — dua rona yang berseberangan langsung, kontras tinggi dan menarik perhatian; Triadik — tiga rona berjarak sama, cerah namun seimbang; dan Acak — rona dilepas bebas sambil menjaga rentang kecerahan yang jelas, untuk inspirasi tak terduga. Ganti mode dan seluruh hubungan ikut berubah.

"Palet yang baik bukan dicampur sembarangan — ia disusun berdasarkan hubungan."

Apa itu HEX, dan mengapa ada di mana-mana

Deretan di bawah setiap warna, seperti #E8622A, adalah kode HEX-nya — "kartu identitas" universal untuk warna di seluruh web, perangkat lunak desain, dan hampir setiap alat digital. Berupa # diikuti enam digit heksadesimal, mengkodekan kekuatan kanal merah, hijau, dan biru. Klik satu untuk menyalinnya, lalu tempel ke CSS, Figma, atau slide Anda dan warnanya cocok persis. Setiap warna yang dibuat alat ini disertai HEX-nya, siap pakai.

Sepatah soal kontras

Selain enak dipandang, palet harus berfungsi: teks butuh kontras yang cukup terhadap latarnya agar tetap terbaca (standar aksesibilitas WCAG menyarankan minimal 4.5:1 untuk teks isi). Label HEX pada kartu otomatis beralih antara hitam dan putih bergantung pada terang-gelapnya tiap petak, agar tetap terbaca — pengingat praktis untuk memeriksa kontras setiap kali Anda memakai warna ini untuk teks dan latar. Seluruh alat berjalan secara lokal di peramban Anda, instan, tanpa mengunggah apa pun.

Advertisement
After how-to · AD-W2 Responsive

Lingkaran tujuh warna Newton, 16,7 juta warna HEX, dan mengapa kecerahan HSL menyesatkan

01

Kode HEX mengkodekan merah, hijau, dan biru dalam heksadesimal, tiap kanal 00–FF (0–255) — sekitar 16,7 juta warna secara teori.

02

Opticks karya Newton (terbit pertama 1704; Buku I, Bagian II, Prop. VI) menggambar lingkaran yang dibagi menjadi tujuh warna, merah hingga ungu, dengan panjang busur mengikuti interval tangga nada musik — leluhur roda rona yang diputar alat ini.

03

Mata manusia paling peka terhadap hijau, itulah sebabnya rumus luminans memberi bobot tertinggi pada hijau (sekitar 0,72), jauh di atas merah (0,21) dan biru (0,07).

04

Standar aksesibilitas WCAG meminta kontras minimal 4.5:1 antara teks isi dan latar (3:1 untuk teks besar), demi melayani pengguna dengan penglihatan rendah.

05

Layar memakai RGB (cahaya aditif) dan cetak memakai CMYK (tinta subtraktif); HEX yang sama bisa tampak sedikit berbeda di layar dibanding di kertas.

06

Alat ini membuat palet dalam HSL karena harmoni adalah rotasi sudut rona. Namun kecerahan HSL bukan yang dilihat mata: CSS Color 4 menunjukkan kuning hsl(60 100% 50%) dan biru hsl(240 100% 50%) sama-sama berkecerahan 50%, tetapi luminans relatif WCAG-nya 0,93 dan 0,07 — itulah sebabnya cek kontras di atas mengukur setiap pasangan.

Pertanyaan yang Sering Diajukan

  • Setiap petak menampilkan kode HEX (mis. #E8622A). Klik untuk menyalinnya, lalu tempel ke CSS, Figma, Photoshop, slide, atau mana pun yang menerima HEX — warnanya cocok persis. Anda juga bisa mengunduh kartu palet sebagai rujukan.

  • Masing-masing memetakan geometri pada roda warna: Monokrom = satu rona, kecerahan bervariasi (paling aman); Analog = rona bertetangga (lembut); Komplementer = rona berlawanan (kontras tinggi); Triadik = tiga rona berjarak sama (cerah, seimbang); Acak = rona bebas tetapi rentang kecerahan jelas. Ganti mode, seluruh hubungannya berubah.

  • Ketuk 🔓 pada sebuah warna untuk menguncinya; saat Anda menekan Buat lagi, warna terkunci tetap dan hanya yang tidak terkunci yang berubah. Jadi Anda bisa mempertahankan satu-dua warna favorit dan mengacak ulang sisanya hingga seluruh set pas.

  • Kecuali Anda menetapkan warna dasar, ya — setiap Buat memilih rona, saturasi, dan kecerahan dasar secara acak, lalu menyusun empat warna lainnya dengan aturan tetap mode itu (aturannya tampil di bawah kontrol). Dengan “Mulai dari warna ini” dicentang, warna Anda dipertahankan persis dan hanya mode Acak yang masih memilih sesuatu secara acak.

  • Tidak secara otomatis, dan mode harmoni sendiri tidak menjaminnya: dua rona komplementer bisa punya luminans hampir sama, dan kontras bergantung pada luminans. Yang dilakukan alat ini adalah mengukur. Cek kontras mencantumkan kesepuluh pasangan dengan rasio WCAG 2.2 (4.5:1 adalah ambang AA untuk teks isi, 3:1 untuk teks besar), dan label tiap petak memakai hitam atau putih, mana yang lebih tinggi, jadi selalu mencapai 4.5:1. Alat ini tidak menyimulasikan defisiensi penglihatan warna.

  • Bisa. Pilih warna di “Warna dasar” (atau centang “Mulai dari warna ini”) dan setiap mode menyusun palet di sekitarnya; warna Anda dipertahankan persis, di petak yang ditetapkan aturan untuk warna dasar. Anda juga bisa mengunci petak mana pun dengan 🔒 dan mengacak ulang sisanya.

  • Gambar JPEG resolusi tinggi yang menampilkan lima petak warna dengan nilai HEX masing-masing, cocok untuk dibagikan atau diarsipkan; PDF juga tersedia. Seluruh gambar dibuat di perangkat Anda, tidak lewat server.

  • Ketiganya notasi berbeda untuk warna yang sama. RGB memakai tiga angka 0–255 untuk merah, hijau, biru; HEX adalah RGB yang ditulis dalam heksadesimal (#RRGGBB); HSL menggambarkannya lewat rona, saturasi, dan kecerahan, lebih dekat dengan intuisi manusia. Alat ini menurunkan keselarasan dalam HSL lalu menampilkan HEX universal.

  • Tidak. Setiap palet dibuat seketika di peramban Anda — tidak diunggah, tidak ditulis ke URL, dan tidak dikumpulkan. Muat ulang halaman dan ia mulai dari awal.

Metode & sumber

Cara penghitungan

Five colours from fixed HSL hue rotations of a base (complementary +180°, triadic ±120°, analogous 20° steps, monochromatic lightness ladder); HSL to sRGB by the CSS Color 4 §7.1 algorithm. Every pair's WCAG 2.2 contrast ratio, (L1 + 0.05) / (L2 + 0.05), shown rounded down; swatch labels use black or white, whichever contrasts more (ColourPaletteKernel).

Standar yang diterapkan

  • Colour conversion: HSL to sRGB and back by the W3C CSS Color Module Level 4 sample algorithms (§7.1 hslToRgb, §7.2 rgbToHsl), through the site's shared ColourConvertKernel; HEX as #RRGGBB.
  • Contrast: WCAG 2.2 relative luminance (sRGB linearised at 0.04045; L = 0.2126 R + 0.7152 G + 0.0722 B) and contrast ratio (L1 + 0.05) / (L2 + 0.05). Bands: 7:1 AAA and 4.5:1 AA for body text (SC 1.4.6, SC 1.4.3), 3:1 for large text (18 point, or 14 point bold). Ratios print rounded DOWN to one decimal, so a figure shown as 4.5:1 is never a 4.46 that fails.
  • Harmony rules are this tool's own, stated on the page in degrees and percent: analogous −40° to +40° in 20° steps; complementary three of the base hue and two at +180°; triadic +120° and +240° plus a tint and a shade; monochromatic lightness 88/72/56/40/26%; random five hues over a random 40–160° arc. A base colour the reader enters is kept exactly.
  • HSL lightness is not perceived lightness (CSS Color 4 §7: yellow and blue at 50% have WCAG luminance 0.93 and 0.07), so no harmony is presented as accessible; every pair is measured instead.
  • Corrected 2026-11-03: label ink by luminance < 0.45 (32.5% of 500,000 generated swatches under 4.5:1, worst 2.10:1) replaced by the higher-contrast of black and white (floor 4.58:1); Newton's colour circle dated 1666 corrected to Opticks, 1704.

Sumber rujukan

  • W3C. CSS Color Module Level 4, Candidate Recommendation Draft, 1 November 2026 — §7.1 and §7.2 sample code, and the §7 note on HSL lightness across hues: https://www.w3.org/TR/css-color-4/
  • W3C. Web Content Accessibility Guidelines (WCAG) 2.2 — definitions of relative luminance, contrast ratio and large-scale text; SC 1.4.3 and SC 1.4.6: https://www.w3.org/TR/WCAG22/
  • Newton I. Opticks. 4th ed. London: William Innys; 1730 (first edition 1704). Book I, Part II, Prop. VI, the seven-part colour circle. Project Gutenberg: https://www.gutenberg.org/ebooks/33504

Hal yang dapat membuat ini usang

  • None at runtime: palettes and contrast are computed in the browser and nothing the reader picks is sent or written to the URL.
Advertisement
Pre-footer · AD-W3 728 × 90