Generator palet warna
Masukkan warna dasar dalam HEX, RGB atau HSL, atau pilih dengan color picker, lalu tentukan harmoni warnanya. Generator memutar rona (hue) pada roda warna HSL dan menampilkan setiap warna sebagai contoh warna dengan nilai HEX, RGB dan HSL yang siap disalin.
Cara menghitung
Cara harmoni warna dibuat
Generator mengubah warna dasar ke model HSL (rona H dalam derajat, saturasi S dan kecerahan L dalam persen, sesuai CSS Color Module Level 4). Pada setiap harmoni hanya rona yang diputar; saturasi dan kecerahan tetap. Setiap warna lalu dikembalikan ke sRGB dan dibulatkan ke bilangan bulat 0 sampai 255.
Cara membuat palet warna
- Masukkan warna dasar dalam HEX, RGB atau HSL, atau pilih dengan color picker.
- Pilih harmoni warna, misalnya komplementer, analog, triadik atau monokrom.
- Salin warna-warnanya beserta nilai HEX, RGB dan HSL.
Contoh: biru hsl(217, 91%, 60%) yang diputar 180° pada roda warna menghasilkan warna komplementer hsl(37, 91%, 60%) – oranye hangat, sekitar #F6AF3C.
| Harmoni | Putaran rona | Jumlah warna |
|---|---|---|
| Komplementer | 0°, 180° | 2 |
| Analog | −30°, 0°, +30° | 3 |
| Triadik | 0°, 120°, 240° | 3 |
| Split-komplementer | 0°, 150°, 210° | 3 |
| Tetradik (persegi panjang) | 0°, 60°, 180°, 240° | 4 |
| Persegi | 0°, 90°, 180°, 270° | 4 |
| Monokrom | tanpa putaran; kecerahan dalam 5 tingkat | 5 |
Contoh: merah murni #FF0000 memiliki H = 0°, S = 100%, L = 50%. Diputar 180° menjadi H = 180° – yaitu cyan #00FFFF, warna komplementernya. Palet triadik menambahkan 120° (hijau #00FF00) dan 240° (biru #0000FF).
Apa itu warna komplementer?
Warna komplementer adalah pasangan warna yang letaknya berseberangan (180°) pada roda warna. Keduanya saling menonjolkan sehingga cocok untuk aksen yang kuat. Warna analog, sebaliknya, adalah rona yang bersebelahan dan menghasilkan palet yang tenang dan menyatu.
Palet monokrom
Pada “Monokrom” rona tidak berubah. Kecerahan bergeser dalam dua langkah sama besar ke arah hitam dan dua langkah ke arah putih. Untuk warna bawaan #3B82F6 (L ≈ 60%) tingkatnya kira-kira 20%, 40%, 60%, 73% dan 87%.
Teks yang mudah dibaca pada contoh warna
Label di setiap contoh warna berwarna hitam atau putih – mana yang memberi kontras lebih tinggi menurut rumus luminans relatif WCAG. Dengan begitu teks selalu mencapai minimal 4,58:1. Untuk memeriksa apakah dua warna dari palet cocok sebagai teks dan latar belakang, gunakan pemeriksa kontras warna.
Batasan
HSL adalah model geometris sederhana, bukan model yang seragam secara persepsi: pada L yang sama, kuning tampak jauh lebih terang daripada biru. Anggap harmoni hasil hitungan sebagai titik awal dan sesuaikan dengan mata. Abu-abu tidak memiliki rona, jadi memutarnya menghasilkan warna yang sama.
Pertanyaan umum
Apa warna komplementer dari biru?
Warna yang berada 180° di seberangnya pada roda warna HSL. Untuk biru #0000FF (H = 240°) itu kuning #FFFF00 (H = 60°); untuk #3B82F6 (H ≈ 217°) oranye sekitar #F6AF3B.
Format input apa saja yang diterima?
HEX dengan 3, 4, 6 atau 8 digit (dengan atau tanpa #), rgb() dan rgba(), hsl() dan hsla(), hsv()/hsb(), hwb() serta tiga angka biasa seperti “59, 130, 246” (dibaca sebagai RGB). Sintaks koma maupun spasi dari CSS Color 4 sama-sama bisa.
Bagaimana memakai warnanya di CSS atau aplikasi desain?
Setiap contoh warna punya tombol salin untuk nilai HEX-nya. “Salin sebagai variabel CSS” menaruh blok :root berisi --farbe-1, --farbe-2 … ke clipboard. Nilai RGB dan HSL tercantum di tabel di bawahnya.
Mengapa beberapa harmoni tampak tidak seimbang?
Kecerahan HSL murni dihitung secara matematis. Pada nilai L yang sama, kuning dan cyan tampak jauh lebih terang daripada biru atau ungu. Sesuaikan kecerahan warna tertentu bila perlu, atau mulai dari warna dasar yang kurang jenuh.
Warna apa saja yang cocok dipadukan?
Warna dengan jarak tetap pada roda warna tampak harmonis: komplementer (180°) untuk kontras kuat, analog (rona bersebelahan) untuk palet yang tenang, dan triadik (berjarak 120°) untuk kombinasi berwarna yang seimbang.
Sumber dan dasar hukum
- CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors
- CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
- WCAG 2.2: W3C – WCAG 2.2: Definition “relative luminance”
Diperbarui:
Alat terkait
- Konversi warna: HEX, RGB, HSL, HSV, CMYKKonversi kode warna: HEX ke RGB, RGB ke HEX, HSL, HSV, HWB, dan CMYK. Masukkan warna dalam format apa pun atau pilih dari color picker, lalu salin hasilnya.
- Cek kontras warna (WCAG 2.2)Cek kontras warna teks dan latar belakang: rasio kontras WCAG 2.2 dengan penilaian AA/AAA untuk teks normal, teks besar dan komponen UI, plus saran warna.
- Ambil kode warna dari gambar (color picker)Ambil kode warna dari gambar: buka foto, klik satu titik, lalu salin nilai HEX, RGB atau HSL – plus warna utama gambar. Tanpa unggah, semuanya di browser.
- Kalender Cina – konversi tanggal Imlek dan shioKalender Cina online: ubah tanggal Masehi ke kalender Imlek dan sebaliknya, cari tahu shio dan elemen Anda, tahun Kongzili, serta tanggal Tahun Baru Imlek.
- Konversi Kalender Ibrani (Kalender Yahudi)Ubah tanggal Masehi ke kalender Ibrani (Yahudi) dan sebaliknya – dengan nama bulan, tahun kabisat (Adar I/II), dan tanggal Tahun Baru Yahudi Rosh Hashanah.
- Konversi kalender Persia (kalender Iran)Ubah tanggal Masehi ke kalender Persia (kalender Iran, Hijriah Syamsiah) dan sebaliknya – lengkap dengan nama bulan, tahun kabisat, dan tanggal Nowruz.