Campur warna di layar

Dengan alat ini Anda bisa campur warna dan langsung melihat warna hasilnya dalam HEX, RGB, dan HSL. Warna juga bisa dibuat lebih terang, lebih gelap, atau lebih redup, serta dibuat gradasi hingga 15 tahap.

Sumber: CSS Color 5, W3C – CSS Color Module Level 5: color-mix(). Diperbarui: 1 Oktober 2026.

Apa yang ingin dilakukan?

Warna 1

HEX seperti #E63946, rgb(230, 57, 70), atau hsl(...)

Warna 2

HEX, rgb(), atau hsl()

Porsi warna kedua

0 % = hanya warna 1, 100 % = hanya warna 2; saat menerangkan: porsi putih

Ruang pencampuran

Tahap gradasi

2 sampai 15 warna dari warna 1 ke warna tujuan

Kotak Alat SayaInput Anda hanya disimpan di browser ini.

Hasil

Warna campuran (HEX): #965A72
RGB: rgb(150, 90, 114)
HSL: hsl(336, 25%, 47%)
CSS (color-mix): color-mix(in srgb, #E63946 50%, #457B9D 50%)
Tahap gradasi: #E63946
#BE4A5C
#965A72
#6D6B87
#457B9D

Cara menghitung

Alat ini mencampur warna layar, yaitu nilai cahaya – bukan cat dari pigmen. Karena itu merah dan biru menjadi ungu (#800080), sedangkan biru dan kuning menjadi abu-abu netral, bukan hijau seperti pada cat air.

Cara pencampuran

Untuk setiap kanal warna dihitung nilai tengahnya. Ruang pencampuran menentukan caranya:

sRGB: rata-rata sederhana nilai kanal – begitulah CSS mencampur secara bawaan dan kebanyakan program grafis menghitung.
Cahaya linear: mencampur dalam jumlah cahaya fisik. Hasilnya lebih terang dan sesuai dengan dua sumber cahaya yang bertumpuk.
Oklab: ruang warna yang mendekati persepsi mata. Gradasi tampak lebih merata, tanpa bagian tengah keabu-abuan di antara warna cerah.

Menerangkan, menggelapkan, meredupkan

Warna yang dicampur putih menjadi lebih terang (tint); dengan hitam lebih gelap (shade); dengan abu-abu lebih redup (tone). Persentase mengatur kekuatannya, dan tahap menghasilkan satu deret warna – berguna untuk keadaan hover atau skala warna.

Ekspresi color-mix() dapat disalin langsung ke stylesheet. Palet yang serasi dibuat oleh pembuat palet warna, format diubah dengan konverter warna, dan keterbacaan teks diperiksa pemeriksa kontras.

Pertanyaan umum

Apa hasil campuran biru dan kuning?

Di layar menjadi abu-abu netral (rata-rata sRGB #808080), karena yang dicampur adalah warna cahaya. Pada cat air atau akrilik, biru dan kuning menjadi hijau karena pigmen bekerja secara pengurangan.

Bagaimana mencampur dua warna dengan porsi sama?

Masukkan kedua warna dan biarkan porsi warna kedua di 50 %. Untuk sepertiga warna 2, isi 33.

Bagaimana menerangkan atau menggelapkan warna?

Pilih “Terangkan warna” atau “Gelapkan warna” lalu atur persentasenya: dengan 20 % putih warna menjadi sedikit lebih terang, dengan 80 % hampir putih.

Ruang pencampuran mana yang sebaiknya dipilih?

sRGB sesuai dengan perilaku bawaan CSS dan kebanyakan program. Oklab memberi gradasi lebih merata, dan cahaya linear setara dengan sumber cahaya yang bertumpuk.

Bagaimana memakai hasilnya di CSS?

Salin nilai di bawah “CSS (color-mix)” dan pakai sebagai warna di peramban modern mana pun, atau ambil saja nilai HEX-nya.

Sumber dan dasar hukum

CSS Color 5: W3C – CSS Color Module Level 5: color-mix()
Björn Ottosson – A perceptual color space for image processing (Oklab)
CSS Color 4: W3C – CSS Color Module Level 4: fungsi transfer sRGB dan cahaya linear

Diperbarui: 1 Oktober 2026 · Kebijakan editorial

Warna campuran