Konversi Warna
#e24826
≈ Cinnabar
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.
Warna
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 ditempatkan secara merata di sepanjang roda warna, masing-masing berjarak 120 derajat rona. Sebaiknya biarkan satu warna mendominasi dan gunakan warna lainnya sebagai aksen.
Sejalan
Tiga warna dengan luminansi dan saturasi yang sama dengan rona yang berdekatan pada roda warna, berjarak 30 derajat. Transisi yang halus.
Monokromatik
Tiga warna dengan rona yang sama dengan nilai luminansi +/-50%. Halus dan elegan.
Tetradik
Dua set warna komplementer, dipisahkan oleh 60 derajat rona.
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
Pemeriksa Kontras Lanjutan
Sempurnakan dengan slider, beberapa pratinjau, dan lainnya
Semua orang jenius. Tapi jika Anda menilai ikan dari kemampuannya memanjat pohon, ia akan menjalani seluruh hidupnya dengan percaya bahwa ia bodoh.