Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Mencerahkan atau Menggelapkan Kod Warna Hex?

Bagaimana untuk Mencerahkan atau Menggelapkan Kod Warna Hex?

DDD
DDDasal
2024-11-08 05:06:01210semak imbas

How to Lighten or Darken a Hex Color Code?

Sampel kod ini menunjukkan atur cara yang membolehkan anda mencerahkan atau menggelapkan warna heks dengan jumlah tertentu. Anda boleh memberikan warna heks sebagai rentetan, seperti "3F6D2A," dan integer yang mewakili jumlah yang anda mahu laraskan warna, sama ada mencerahkan atau menggelapkannya.

Begini cara program ini berfungsi:

  1. Ia mengambil rentetan warna heks dan menukarnya kepada integer.
  2. Integer kemudiannya dilaraskan mengikut jumlah yang ditentukan, yang boleh menjadi positif untuk mencerahkan warna atau negatif untuk menggelapkannya.
  3. Integer yang dilaraskan ditukar kembali kepada rentetan warna heks menggunakan formula khusus yang memastikan warna kekal dalam julat yang sah.

Berikut ialah coretan kod ringkas yang menerangkan cara warna pelarasan dilakukan:

function LightenDarkenColor(col, amt) {
  col = parseInt(col, 16); // Convert hex color to integer
  col = col + amt; // Adjust the integer by the specified amount
  col = col.toString(16); // Convert the adjusted integer back to hex color
  return col;
}

Dalam fungsi yang disediakan, terdapat berbilang versi kod, setiap satu dengan sedikit variasi. Perbezaan yang paling ketara ialah antara fungsi yang menggunakan pengadunan log dan pengadunan linear. Pengadunan log biasanya menghasilkan pelarasan warna yang lebih halus dan kelihatan semula jadi berbanding dengan pengadunan linear.

Untuk menggunakan program ini, anda boleh memanggil fungsi LightenDarkenColor dengan warna hex yang dikehendaki dan jumlah pelarasan. Contohnya, untuk mencerahkan warna "3F6D2A" sebanyak 40, anda akan memanggil:

LightenDarkenColor("3F6D2A", 40)

Ini akan mengembalikan warna hex baharu yang 40 unit lebih terang daripada warna asal.

Atas ialah kandungan terperinci Bagaimana untuk Mencerahkan atau Menggelapkan Kod Warna Hex?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn