#EEE8AA · Generator & Picker Kode Warna

Hasilkan kode warna, variasi, harmoni, dan periksa rasio kontras.

Konversi Warna

#eee8aa

Variasi

Tujuan dari bagian ini adalah untuk menghasilkan tint (ditambah putih murni) dan shade (ditambah hitam murni) dari warna yang kamu pilih dalam peningkatan 10%.

Tip Pro: Gunakan shade untuk keadaan hover dan bayangan, tint untuk sorotan dan latar belakang.

Shade

Variasi lebih gelap yang dibuat dengan menambahkan hitam ke warna dasar kamu.

Tint

Variasi lebih terang yang dibuat dengan menambahkan putih ke warna dasar kamu.

Kasus Penggunaan Umum

  • • Keadaan komponen UI (hover, aktif, dinonaktifkan)
  • • Menciptakan kedalaman dengan bayangan dan sorotan
  • • Membangun sistem warna yang konsisten

Tip Sistem Desain

Variasi ini membentuk dasar dari palet warna yang kohesif. Ekspor mereka untuk menjaga konsistensi di seluruh proyek kamu.

Kombinasi Warna

Setiap harmoni memiliki suasana hati sendiri. Gunakan harmoni untuk memikirkan kombinasi warna yang bekerja dengan baik bersama.

Cara Menggunakan

Klik pada warna apa pun untuk menyalin nilai hex-nya. Kombinasi ini terbukti secara matematis menciptakan harmoni visual.

Mengapa Ini Penting

Harmoni warna menciptakan keseimbangan dan membangkitkan emosi tertentu dalam desain kamu.

Komplemen

Sebuah warna dan lawannya pada roda warna, +180 derajat dari rona. Kontras tinggi.

Terbaik untuk: Desain berdampak tinggi, CTA, logo

Komplemen terpisah

Sebuah warna dan dua warna yang berdekatan dengan komplemennya, +/-30 derajat dari rona yang berlawanan dengan warna utama. Berani seperti komplemen langsung, tetapi lebih serbaguna.

Terbaik untuk: Tata letak yang hidup namun seimbang

Triadik

Tiga warna yang tersebar merata di sepanjang roda warna, masing-masing berjarak 120 derajat dari rona. Sebaiknya biarkan satu warna mendominasi dan gunakan yang lain sebagai aksen.

Terbaik untuk: Desain yang ceria dan energik

Analog

Tiga warna dengan luminansi dan saturasi yang sama dengan rona yang berdekatan pada roda warna, berjarak 30 derajat. Transisi yang halus.

Terbaik untuk: Antarmuka yang terinspirasi dari alam, menenangkan

Monokromatik

Tiga warna dengan rona yang sama dengan nilai luminansi +/-50%. Halus dan elegan.

Terbaik untuk: Desain minimalis, canggih

Tetradik

Dua set warna komplementer, dipisahkan oleh 60 derajat hue.

Terbaik untuk: Skema warna yang kaya dan beragam

Prinsip Teori Warna

Keseimbangan

Gunakan satu warna dominan, dukung dengan warna sekunder, dan aksen secara hemat.

Kontras

Pastikan kontras yang cukup untuk keterbacaan dan aksesibilitas.

Harmoni

Warna harus bekerja sama untuk menciptakan pengalaman visual yang terpadu.

Pemeriksa Kontras Warna

Uji kombinasi warna untuk memastikan mereka memenuhi standar aksesibilitas WCAG untuk keterbacaan teks.

Kontras

1.00
common.contrastFail
Sangat buruk
Teks kecil
common.contrastFail
Teks besar
common.contrastFail

Standar WCAG

AA:Rasio kontras minimum 4.5:1 untuk teks normal dan 3:1 untuk teks besar. Diperlukan untuk sebagian besar situs web.
AAA:Rasio kontras yang ditingkatkan 7:1 untuk teks normal dan 4.5:1 untuk teks besar. Direkomendasikan untuk aksesibilitas optimal.
Kontras tidak mencukupi untuk semua ukuran teks - tidak memenuhi standar WCAG.

Pemeriksa Kontras Lanjutan

Sesuaikan dengan slider, pratinjau ganda & lainnya

Semua orang adalah jenius. Tapi jika kamu menilai seekor ikan dari kemampuannya memanjat pohon, ia akan menjalani seluruh hidupnya dengan percaya bahwa ia bodoh.

contrastChecker.quote1Author

Format Teknis

Jelajahi representasi ruang warna lanjutan dan model warna profesional yang digunakan dalam produksi video, fotografi, aplikasi ilmiah, dan sistem manajemen warna. Format teknis ini menyediakan spesifikasi warna yang tepat untuk industri dan aplikasi khusus.

Format Praktis

Konversi warna ke format praktis untuk aplikasi dunia nyata termasuk simulasi cetak, tampilan LED, output terminal, dan pengkodean data. Format ini membantu kamu menerapkan warna di berbagai media, platform, dan perangkat fisik.

Analisis Warna

Analisis properti warna dengan metrik canggih termasuk komposisi spektral, kemurnian warna, efek metamerisme, dan karakteristik perseptual. Alat ini memberikan wawasan mendalam tentang perilaku dan penampilan warna di bawah kondisi tampilan yang berbeda.

Simulator buta warna

Periksa bagaimana warna dipersepsikan oleh orang dengan berbagai jenis buta warna untuk menciptakan desain yang lebih mudah diakses. Memahami persepsi warna membantu memastikan kontenmu dapat diakses oleh semua orang.

Aspek Kreatif

Jelajahi dimensi artistik dan psikologis warna termasuk asosiasi musiman, dampak emosional, kejadian alami, pigmen historis, dan resep pencampuran warna untuk aplikasi kreatif.