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"?

Carl Edwards
sumber
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.

Dom
sumber
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
3

Atau, Anda dapat membiarkan beberapa generator daring melakukan pilihan warna untuk Anda, dan cukup beri kode yang Anda butuhkan: CSS gradient Button hanyalah satu contoh.

benteh
sumber