Cara menggunakan

1. Klik di mana saja pada roda warna untuk memilih warna, atau sesuaikan slider hue, saturasi, dan lightness.
2. Lihat warna yang dipilih dalam format HEX, RGB, dan HSL di bawah roda.
3. Klik sampel harmoni untuk melihat skema komplementer, analog, triadik, dan split-komplementer.

Pertanyaan umum

Apa itu harmoni warna?

Harmoni warna mengacu pada susunan warna yang menyenangkan berdasarkan posisinya pada roda warna. Harmoni umum meliputi komplementer (berlawanan), analog (bersebelahan), dan triadik (jarak yang sama).

Apa perbedaan antara HEX, RGB, dan HSL?

HEX adalah kode heksadesimal 6 digit (#RRGGBB). RGB menggunakan nilai merah, hijau, dan biru (0-255). HSL menggunakan hue (0-360°), saturasi (0-100%), dan lightness (0-100%).

Bisakah saya menggunakan warna ini dalam desain saya?

Ya! Salin nilai apa pun dan tempel langsung ke CSS, perangkat lunak desain, atau aplikasi web Anda. Semua nilai sesuai dengan standar dan didukung secara luas.

Sejarah singkat roda warna

Isaac Newton menggambar roda warna yang pertama. Dalam Opticks (1704) ia melaporkan percobaan prisma yang pertama kali ia tunjukkan kepada Royal Society pada tahun 1672, mendemonstrasikan bahwa cahaya putih adalah campuran warna spektral, dan mengatur spektrum menjadi lingkaran tertutup agar ujung merah bisa bertemu ujung ungu. Ia menamai tujuh warna (merah, oranye, kuning, hijau, biru, indigo, ungu) berdasarkan analogi dengan tujuh not tangga musik diatonik, karena ia percaya warna dan harmoni memiliki struktur matematis yang sama. Indigo sebagai pita terpisah dari biru adalah korban paling terkenal dari pilihan estetika tersebut.

Theory of Colours karya Goethe (1810) membingkai ulang roda berdasarkan persepsi daripada fisika. Ia mengatur warna secara simetris menjadi separuh hangat «plus» dan separuh dingin «minus» dan mencatat bahwa warna yang berlawanan «saling membangkitkan satu sama lain di mata», artikulasi awal teori proses-oposisi yang mengantisipasi hukum kontras-simultan yang akan diterbitkan Michel Eugène Chevreul pada tahun 1839 dari karya permadani Gobelins.

A Color Notation karya Albert Munsell (1905) adalah roda pertama yang didasarkan pada pengukuran persepsi manusia daripada konvensi, memisahkan hue, value (lightness), dan chroma (saturasi) menjadi dimensi independen, leluhur langsung dari setiap ruang warna perseptual modern, termasuk CIELAB dan OKLCH. Roda yang diajarkan kepada sebagian besar desainer di sekolah lebih muda: Johannes Itten mengkodifikasi roda RYB 12 warna di Bauhaus antara tahun 1919 dan 1922, mengidentifikasi tiga warna primer (merah, kuning, biru), tiga sekunder, enam tersier, dan tujuh jenis kontras warna. Roda yang sebenarnya digunakan di layar berbeda lagi: HSL dan HSV adalah reparameterisasi silindris dari RGB yang ditemukan di PARC dan laboratorium grafis lainnya pada tahun 1970-an, sehingga desainer bisa berpikir dalam tiga slider intuitif («hue ini, lebih vivid, lebih terang») alih-alih tiga channel RGB yang buram. Langkah terbaru adalah OKLCH (Björn Ottosson, Desember 2020), kini ada di CSS Color Module Level 4, sebuah roda di mana langkah sudut yang sama terlihat seperti langkah hue perseptual yang sama.

Tiga keluarga roda

«Color wheel» menyembunyikan fakta bahwa ada tiga jenis yang berbeda, masing-masing benar untuk situasi fisik yang berbeda:

• RYB (merah, kuning, biru), roda pengajaran artistik yang dipopulerkan Itten. Ini adalah konvensi berdasarkan pengalaman dengan pigmen, bukan model fisika. Tidak ada kombinasi cat merah, kuning, dan biru yang bisa mencampurkan setiap warna yang terlihat.
• RGB (merah, hijau, biru) (aditif. Digunakan di mana pun warna dipancarkan: monitor, ponsel, proyektor, pencahayaan panggung. Dijangkarkan dalam fisiologi) retina manusia memiliki tiga jenis sel kerucut yang sensitif terhadap panjang gelombang panjang, menengah, dan pendek. Browser dan CSS bekerja dalam RGB, sehingga roda HSL alat ini adalah reparameterisasi polar dari sRGB.
• CMY / CMYK (sian, magenta, kuning + kunci/hitam), subtraktif. Digunakan di mana pun warna dipantulkan: cetak, tinta, pewarna. Pencampuran mengurangi kecerahan; printer komersial menambahkan hitam untuk hitam sejati dan untuk menghemat tinta.

Konsekuensi praktis: nilai HEX, RGB, dan HSL yang diekspor oleh roda ini akurat untuk layar. Nilai-nilai tersebut tidak akurat untuk cat, dan cetakan CMYK akan memerlukan konversinya sendiri, langkah yang biasanya ditangani oleh printer untuk Anda.

Cara HSL dipetakan ke lingkaran

HSL adalah singkatan dari hue, saturation, lightness. Hue adalah sudut di sekitar sumbu pusat dengan merah pada 0°, hijau pada 120°, biru pada 240°, kembali melingkar ke merah pada 360°. Saturasi berkisar dari 0% (abu-abu) hingga 100% (penuh vivid). Lightness berkisar dari 0% (hitam) melalui hue alami pada 50% hingga putih pada 100%. Secara geometris model ini adalah bicone (dua kerucut tip-to-tip) dengan warna paling tersaturasi di ekuator. HSV serupa tetapi menggunakan Value alih-alih Lightness, dengan warna tersaturasi penuh pada V=100 dan seluruh model berbentuk sebagai kerucut tunggal.

Fungsi hsl() CSS mengambil tiga angka yang sama. Sintaks modern menggunakan spasi sebagai pemisah dengan alpha opsional setelah garis miring:

hsl(210 80% 50%)
hsl(210 80% 50% / 0.5)
hsl(0.5turn 80% 50%)        /* turns also accepted */

Format lama dengan koma hsl(210, 80%, 50%) dan alias hsla() masih didukung untuk kompatibilitas mundur. CSS Color Module Level 4 telah tersedia secara luas di seluruh browser sejak sekitar 2015 untuk HSL dasar, dengan sintaks modern yang hadir belakangan.

Peringatan jujur: HSL tidak seragam secara perseptual. Kuning pada L=50% terlihat jauh lebih terang dari biru pada L=50% meskipun keduanya memiliki angka lightness yang sama, dan roda yang diiris berdasarkan hue pada S dan L konstan akan memiliki kuning yang secara visual berat dan biru yang lemah. Untuk visualisasi data dan palet brand yang dikalibrasi dengan hati-hati, ruang warna oklch() baru adalah pilihan yang lebih baik, langkah sudut yang sama terlihat seperti langkah hue perseptual yang sama. Untuk memilih warna dan mengambil HEX, HSL sudah cukup baik.

Harmoni klasik, beserta matematikanya

Setiap skema harmoni didefinisikan oleh sekumpulan offset sudut dari hue dasar. Misalkan B adalah hue yang Anda pilih:

Skema	Hue	Suasana
Monokromatik	B (variasikan S dan L saja)	Halus, kontras rendah, damai
Analogus	B − 30°, B, B + 30°	Kaya, harmonis, matahari terbenam, dedaunan
Komplementer	B, B + 180°	Dinamis, menarik perhatian
Split-komplementer	B, B + 150°, B + 210°	Kontras kuat tetapi lebih lembut dari komplementer murni
Triadik	B, B + 120°, B + 240°	Kontras tajam dengan keseimbangan dan kekayaan
Tetradik (persegi panjang)	B, B + 60°, B + 180°, B + 240°	Dua pasang komplementer, biarkan satu mendominasi
Persegi	B, B + 90°, B + 180°, B + 270°	Pembagian empat arah yang merata, keseimbangan lebih sulit

Sudut-sudut ini adalah konvensi pengajaran yang diwarisi dari Goethe dan Itten, bukan hukum psikofisika. Sudut-sudut ini secara konsisten menghasilkan kontras dan keseimbangan, itulah mengapa desainer memilihnya, tetapi itu adalah heuristik daripada aturan. Perlakukan swatch harmoni di atas sebagai titik awal untuk diiterasi.

Kapan Anda membutuhkan roda warna

• Desain web dan UI. Pilih brand primer, turunkan komplemen untuk aksen bahaya / call-to-action, turunkan triadik ketiga untuk grafik. Kemudian periksa kontras terhadap latar belakang dan teks Anda.
• Identitas brand. Warna logo ditambah palet harmoni yang terdokumentasi untuk materi pemasaran.
• Visualisasi data. Palet kategorik (10+ hue berbeda pada jarak perseptual yang sama) dan skala sekuensial atau diverging, lebih baik dilakukan dalam OKLCH daripada HSL setelah Anda melewati tiga atau empat seri.
• Desain interior. Warna dinding dasar, trim analogus, aksen komplementer pada bantal atau karya seni.
• Color grading fotografi. Teal-dan-oranye (pasangan komplementer) adalah klise sinema modern karena warna kulit hangat di depan bayangan dingin terlihat sinematik.
• Seni game dan ilustrasi. Penguncian hue karakter terhadap lingkungan, dengan aksen komplementer untuk titik fokus.

Buta warna dan roda warna

Sekitar 8% pria dan 0,5% wanita keturunan Eropa Utara memiliki beberapa bentuk defisiensi penglihatan warna (tingkatnya bervariasi berdasarkan populasi). Gen untuk kerucut L- dan M- berada pada kromosom X, itulah mengapa kondisi ini jauh lebih umum pada pria. Beberapa harmoni (terutama pasangan komplementer merah/hijau) runtuh menjadi hampir monokrom untuk bentuk yang paling umum:

• Deuteranopia / deuteranomali: kerucut panjang gelombang menengah yang tidak berfungsi atau lemah. Bentuk yang paling umum (sekitar 6% pria). Merah dan hijau tertukar.
• Protanopia / protanomali: kerucut panjang gelombang panjang yang tidak berfungsi atau lemah (sekitar 2% pria). Merah tampak redup, kadang-kadang tertukar dengan hitam.
• Tritanopia / tritanomali: kerucut panjang gelombang pendek yang tidak berfungsi atau lemah. Sangat jarang. Biru dan kuning tertukar.

Prinsip «jangan mengandalkan warna saja» dari WCAG 2.1 sangat relevan: jangan pernah menggunakan warna sebagai satu-satunya pembawa informasi. Tambahkan kontras kecerahan di atas kontras hue, gunakan pola atau bentuk di samping warna dalam grafik, dan jalankan setiap harmoni yang Anda buat melalui simulator buta warna sebelum dikunci. Periksa juga kontras WCAG, minimum 4,5:1 untuk teks normal pada AA, 7:1 pada AAA.

Pertanyaan lebih lanjut

Mengapa merah, kuning, dan biru disebut warna «primer»?

Dalam tradisi artistik / RYB (roda yang diajarkan Itten di Bauhaus) ketiganya adalah tiga pigmen dari mana semua warna lainnya diasumsikan dapat dicampurkan. Asumsi tersebut adalah konvensi daripada fisika: tidak ada kombinasi pigmen merah, kuning, dan biru nyata yang bisa mencampurkan setiap warna yang terlihat. Dalam cahaya aditif warna primer sejati adalah merah, hijau, dan biru (RGB); dalam cetak subtraktif adalah sian, magenta, dan kuning (CMY). RYB bertahan dalam pendidikan seni karena secara pedagogis sederhana dan memberikan hasil yang masuk akal saat mencampur cat dunia nyata.

Apakah 16:9 sama dengan rasio emas untuk warna?

Tidak, keduanya adalah konsep yang tidak berkaitan. «Rasio emas» muncul dalam proporsi (persegi panjang, tata letak) dan kira-kira sama dengan 1,618. Harmoni teori warna berasal dari geometri sudut pada lingkaran hue: 180° untuk komplementer, 120° untuk triadik, 90° untuk persegi. Tidak ada harmoni rasio-emas yang dibangun dalam pengajaran roda warna standar.

Apakah warna yang saya lihat di sini akan cocok dengan yang dicetak?

Hampir pasti tidak persis sama. Roda ini adalah HSL di atas sRGB, warna aditif, dirancang untuk layar. Cetak adalah CMYK subtraktif. Biru vivid dan hijau cerah yang terlihat baik di monitor sering mengalami desaturasi dramatis di atas kertas, dan konversi out-of-gamut dapat menggeser hue. Desainer cetak biasanya menyimpan proof yang dikalibrasi di depan mereka atau bekerja langsung di CMYK dalam alat desain. Gunakan roda ini untuk mockup layar, kemudian konversi.

Apakah «psikologi warna» (merah = gairah, biru = tenang) didasarkan pada bukti nyata?

Memiliki kekuatan dalam kepercayaan umum tetapi dukungan empiris yang lemah dan bervariasi secara budaya. Budaya yang berbeda mengasosiasikan warna yang sama dengan ide yang sangat berbeda (putih adalah warna pernikahan di Eropa Barat dan warna pemakaman di sebagian Asia Timur). Gunakan psikologi warna sebagai titik awal desain dan kosakata untuk berbicara dengan klien, bukan sebagai hukum.

Apakah ada yang dikirim ke server?

Tidak. Roda dirender dalam canvas HTML5; sudut harmoni dihitung dalam JavaScript secara lokal; string HEX, RGB, dan HSL ditulis ke clipboard Anda melalui browser API. Halaman ini bekerja offline setelah dimuat.

Alat terkait