Konversi Warna
#ca4e4e
≈ Chestnut Rose
Variasi
Tujuan bagian ini adalah menghasilkan rona warna (putih murni yang ditambahkan) dan bayangan (hitam murni yang ditambahkan) secara akurat dari warna yang Anda pilih dengan kenaikan 10%.
Kiat Pro: Gunakan nuansa untuk status hover dan bayangan, warna untuk sorotan dan latar belakang.
Nuansa
Variasi yang lebih gelap dibuat dengan menambahkan warna hitam ke warna dasar Anda.
Tints
Variasi yang lebih ringan dibuat dengan menambahkan warna putih ke warna dasar Anda.
Kasus Penggunaan Umum
- • Status komponen UI (arahkan, aktif, dinonaktifkan)
- • Menciptakan kedalaman dengan bayangan dan sorotan
- • Membangun sistem warna yang konsisten
Tip Sistem Desain
Variasi ini membentuk dasar palet warna yang kohesif. Eksporlah untuk mempertahankan konsistensi di seluruh proyek Anda.
Kombinasi Warna
Setiap harmoni memiliki suasana hati tersendiri. Gunakan harmoni untuk mencari kombinasi warna yang cocok untuk dipadukan.
Bagaimana cara menggunakan
Klik pada warna apa pun untuk menyalin nilai heksanya. Kombinasi ini secara matematis terbukti menciptakan keharmonisan visual.
Mengapa Ini Penting
Harmoni warna menciptakan keseimbangan dan membangkitkan emosi tertentu dalam desain Anda.
Pelengkap
Sebuah warna dan kebalikannya pada roda warna, +180 derajat rona. Kontras tinggi.
Pelengkap terpisah
Satu warna dan dua warna yang berdekatan dengan komplemennya, +/- 30 derajat rona warna dari nilai yang berlawanan dengan warna utama. Berani seperti komplemen lurus, tetapi lebih serbaguna.
Triadik
Tiga warna dengan jarak yang sama di sepanjang roda warna, masing-masing berjarak 120 derajat rona. Sebaiknya biarkan satu warna mendominasi dan gunakan warna lainnya sebagai aksen.
Analog
Tiga warna dengan pencahayaan dan saturasi yang sama dengan rona yang berdekatan pada roda warna, terpisah 30 derajat. Transisi yang mulus.
Monokromatik
Tiga warna dengan rona yang sama dengan nilai pencahayaan +/- 50%. Halus dan halus.
Tetradic
Dua set warna yang saling melengkapi, dipisahkan oleh 60 derajat rona warna.
Prinsip Teori Warna
Keseimbangan
Gunakan satu warna dominan, dukung dengan warna sekunder, dan aksen secukupnya.
Kontras
Pastikan kontras yang memadai untuk keterbacaan dan aksesibilitas.
Harmoni
Warna harus bekerja sama untuk menciptakan pengalaman visual yang terpadu.
Pemeriksa Kontras Warna
Menguji kombinasi warna untuk memastikan kombinasi warna tersebut memenuhi standar aksesibilitas WCAG untuk keterbacaan teks.
Warna Teks
Warna Latar Belakang
Kontras
Standar WCAG
Semua Orang Adalah Jenius. Tetapi Jika Anda Menilai Ikan dari Kemampuannya Memanjat Pohon, Ikan Akan Menjalani Seluruh Hidupnya dengan Percaya Bahwa Ia Bodoh.