Penjana & Pemetik Kod Warna

Hasilkan kod warna, variasi, harmoni dan semak nisbah kontras.

Penukaran Warna

HEX

#ca4e4e

Chestnut Rose

HEX
#ca4e4e
HSL
0, 54, 55
RGB
202, 78, 78
XYZ
28, 19, 9
CMYK
0, 61, 61, 21
LUV
50,105,21,
LAB
50, 49, 26
HWB
0, 31, 21

Variasi

Tujuan bahagian ini adalah untuk menghasilkan warna dengan tepat (tambah putih tulen) dan lorek (tambah hitam tulen) warna pilihan anda dalam kenaikan 10%.

Petua Pro: Gunakan warna untuk keadaan tuding dan bayang-bayang, warna untuk sorotan dan latar belakang.

Shades

Variasi yang lebih gelap dibuat dengan menambahkan hitam pada warna asas anda.

Tints

Variasi yang lebih ringan dibuat dengan menambahkan putih pada warna asas anda.

Kes Penggunaan Biasa

  • Keadaan komponen UI (tuding, aktif, dilumpuhkan)
  • Mencipta kedalaman dengan bayang-bayang dan sorotan
  • Membina sistem warna yang konsisten

Petua Sistem Reka Bentuk

Variasi ini membentuk asas palet warna yang padu. Eksport mereka untuk mengekalkan konsistensi merentas keseluruhan projek anda.

Kombinasi Warna

Setiap harmoni mempunyai mood tersendiri. Gunakan harmoni untuk sumbang saran kombo warna yang berfungsi dengan baik bersama-sama.

Cara Penggunaan

Klik pada mana-mana warna untuk menyalin nilai heksnya. Gabungan ini terbukti secara matematik untuk mencipta keharmonian visual.

Mengapa Ia Penting

Harmoni warna mencipta keseimbangan dan membangkitkan emosi tertentu dalam reka bentuk anda.

Pelengkap

Warna dan bertentangan pada roda warna, +180 darjah warna. Kontras tinggi.

#ca4e4e
Terbaik untuk: Reka bentuk berimpak tinggi, CTA, logo

Berpecah-pelengkap

Satu warna dan dua bersebelahan dengan pelengkapnya, +/-30 darjah warna daripada nilai bertentangan dengan warna utama. Tebal seperti pelengkap lurus, tetapi lebih serba boleh.

Terbaik untuk: Reka letak yang bertenaga lagi seimbang

Triadic

Tiga warna dijarakkan sama rata di sepanjang roda warna, masing-masing 120 darjah rona. Terbaik untuk membenarkan satu warna menguasai dan menggunakan yang lain sebagai aksen.

Terbaik untuk: Reka bentuk yang menyeronokkan dan bertenaga

Analogi

Tiga warna kecerahan dan ketepuan yang sama dengan warna yang bersebelahan pada roda warna, 30 darjah dipisahkan. Peralihan yang lancar.

Terbaik untuk: Antara muka yang diilhamkan oleh alam semula jadi dan menenangkan

Monokromatik

Tiga warna rona yang sama dengan nilai kecerahan +/-50%. Halus dan halus.

Terbaik untuk: Reka bentuk yang minimalis dan canggih

Tetradic

Dua set warna pelengkap, dipisahkan oleh 60 darjah warna.

Terbaik untuk: Skim warna yang kaya dan pelbagai

Prinsip Teori Warna

Baki

Gunakan satu warna dominan, sokongan dengan sekunder, dan loghat dengan berhati-hati.

Berbeza

Pastikan kontras yang mencukupi untuk kebolehbacaan dan kebolehaksesan.

Harmoni

Warna harus bekerjasama untuk mencipta pengalaman visual yang bersatu.

Penyemak Kontras Warna

Uji kombinasi warna untuk memastikan ia memenuhi piawaian kebolehcapaian WCAG untuk kebolehbacaan teks.

Warna Teks
Warna latar belakang
Berbeza
Fail
Teks kecil
✖︎
Teks besar
✖︎
Piawaian WCAG
AA:Nisbah kontras minimum 4.5:1 untuk teks biasa dan 3:1 untuk teks besar. Diperlukan untuk kebanyakan tapak web.
AAA:Nisbah kontras dipertingkatkan 7:1 untuk teks biasa dan 4.5:1 untuk teks besar. Disyorkan untuk kebolehcapaian yang optimum.

Semua orang adalah Genius. Tetapi Jika Anda Menilai Ikan Berdasarkan Keupayaannya Memanjat Pokok, Ia Akan Menjalani Seumur Hidupnya Dengan Percaya bahawa Ia Bodoh.

- Albert Einstein

Format Teknikal

Format Praktikal

Analisis Warna

Simulator Buta

Aspek Kreatif