Cara membuat warna yang lebih terang / lebih gelap dari warna untuk keadaan tombol melayang


14

Saya telah merancang tombol untuk sementara waktu sekarang tetapi ketika datang untuk memilih warna (s) untuk melayang-layang baik gradien atau padat yang sebagian besar menjadi masalah eyeballing nada yang lebih gelap.

Apakah ada teori warna terstruktur di luar sana yang akan membantu menilai dengan lebih baik nada yang lebih tepat untuk digunakan?

Seberapa gelap saya harus pergi dari aslinya?

Bagaimana saya bisa mendefinisikan warna yang lebih terang atau lebih gelap dari warna "sama"?


Itu akan tergantung pada warna yang digunakan dalam desain. Saya akan menyarankan bereksperimen karena akan tergantung pada desain akhir.
DᴀʀᴛʜVᴀᴅᴇʀ

Jawaban:


10

Ketika mencari sedikit perubahan dalam cahaya saya biasanya melakukan matematika - penghitungan sederhana benar-benar.

Format hex untuk warna adalah RRGGBB, artinya merah, hijau dan biru. Heksadesimal dihitung dari 0-F (jadi setelah 9 datang A).

Jika saya memiliki #191970warna tombol utama saya, saya akan menambahkan 1 atau 2 untuk setiap nilai warna, menghasilkan warna yang serupa tetapi lebih terang. Menambahkan 1 ke masing-masing akan menghasilkan #1A1A71.

Hal yang sama dapat dilakukan untuk menemukan warna yang lebih gelap. Mengurangi 1 dari setiap nilai warna #191970akan menghasilkan #18186F.

Namun, menambah atau mengurangi 1 atau 2 dari setiap nilai warna cenderung menghasilkan perbedaan yang tidak bisa dibedakan, jadi Anda mungkin perlu menambah atau mengurangi setidaknya 10 dari masing-masing warna.

Jika Anda menggunakan format angka (255, 255, 255), Anda bisa menambahkan ke setiap nomor menggunakan operasi basis 10 normal.

Menambahkan jumlah yang sama untuk setiap nilai warna memastikan bahwa rona dan saturasi tetap konsisten dan warna yang dihasilkan berbaur secara harmonis dalam desain.


Ini adalah teknik yang cukup pintar, terima kasih telah berbagi! Karena penasaran, apakah ini sebuah konvensi yang Anda buat sendiri atau sesuatu yang mendasar?
Carl Edwards

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.