Berikut adalah fungsi yang sedang saya kerjakan untuk secara terprogram mencerahkan atau menggelapkan warna hex dengan jumlah tertentu. Cukup masukkan string seperti "3F6D2A"
untuk warna ( col
) dan integer base10 ( amt
) untuk jumlah yang menjadi terang atau gelap. Untuk menggelapkan, berikan angka negatif (yaitu -20
).
Alasan saya melakukan ini adalah karena semua solusi yang saya temukan, sejauh ini, mereka tampaknya terlalu memperumit masalah. Dan saya merasa itu bisa dilakukan hanya dengan beberapa baris kode. Harap beri tahu saya jika Anda menemukan masalah, atau lakukan penyesuaian apa pun untuk mempercepatnya.
function LightenDarkenColor(col, amt) {
col = parseInt(col, 16);
return (((col & 0x0000FF) + amt) | ((((col >> 8) & 0x00FF) + amt) << 8) | (((col >> 16) + amt) << 16)).toString(16);
}
// TEST
console.log( LightenDarkenColor("3F6D2A",40) );
Untuk Pengembangan, gunakan versi ini yang lebih mudah dibaca:
function LightenDarkenColor(col, amt) {
var num = parseInt(col, 16);
var r = (num >> 16) + amt;
var b = ((num >> 8) & 0x00FF) + amt;
var g = (num & 0x0000FF) + amt;
var newColor = g | (b << 8) | (r << 16);
return newColor.toString(16);
}
// TEST
console.log(LightenDarkenColor("3F6D2A", -40));
Dan akhirnya versi untuk menangani warna yang mungkin (atau mungkin tidak) memiliki "#" di awal. Ditambah penyesuaian untuk nilai warna yang tidak tepat:
function LightenDarkenColor(col,amt) {
var usePound = false;
if ( col[0] == "#" ) {
col = col.slice(1);
usePound = true;
}
var num = parseInt(col,16);
var r = (num >> 16) + amt;
if ( r > 255 ) r = 255;
else if (r < 0) r = 0;
var b = ((num >> 8) & 0x00FF) + amt;
if ( b > 255 ) b = 255;
else if (b < 0) b = 0;
var g = (num & 0x0000FF) + amt;
if ( g > 255 ) g = 255;
else if ( g < 0 ) g = 0;
return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
}
OK, jadi sekarang ini bukan hanya beberapa baris, tetapi tampaknya jauh lebih sederhana dan jika Anda tidak menggunakan "#" dan tidak perlu memeriksa warna di luar jangkauan, itu hanya beberapa baris.
Jika tidak menggunakan "#", Anda bisa menambahkannya dalam kode seperti:
var myColor = "3F6D2A";
myColor = LightenDarkenColor(myColor,10);
thePlaceTheColorIsUsed = ("#" + myColor);
Saya kira pertanyaan utama saya adalah, apakah saya benar di sini? Apakah ini tidak mencakup beberapa situasi (normal)?
sumber
Jawaban:
Nah, jawaban ini sudah menjadi binatang buas sendiri. Banyak versi baru, itu semakin lama bodoh. Terima kasih banyak untuk semua kontributor untuk jawaban ini. Tapi, agar tetap sederhana bagi massa. Saya mengarsipkan semua versi / sejarah evolusi jawaban ini ke github saya . Dan mulai membersihkannya di StackOverflow di sini dengan versi terbaru. Terima kasih khusus kepada Mike 'Pomax' Kamermans untuk versi ini. Dia memberiku matematika baru.
Fungsi ini (
pSBC
) akan mengambil warna web HEX atau RGB.pSBC
dapat menaungi lebih gelap atau lebih terang, atau mencampurnya dengan warna kedua, dan juga bisa meneruskannya melalui tetapi mengubah dari Hex ke RGB (Hex2RGB) atau RGB ke Hex (RGB2Hex). Semua tanpa Anda bahkan tahu format warna apa yang Anda gunakan.Ini berjalan sangat cepat, mungkin yang tercepat, terutama mengingat banyak fiturnya. Sudah lama dalam pembuatan. Lihat keseluruhan cerita di github saya . Jika Anda ingin cara terkecil dan tercepat untuk menaungi atau menyatu, lihat Fungsi Mikro di bawah ini dan gunakan salah satu dari setan kecepatan 2-liner. Mereka bagus untuk animasi yang intens, tetapi versi ini cukup cepat untuk sebagian besar animasi.
Fungsi ini menggunakan Blending Log atau Linear Blending. Namun, itu TIDAK mengkonversi ke HSL untuk benar mencerahkan atau menggelapkan warna. Oleh karena itu, hasil dari fungsi ini akan berbeda dari fungsi yang jauh lebih besar dan lebih lambat yang menggunakan HSL.
Fitur:
"#AA6622"
atau"#bb551144"
."rgb(123,45,76)"
atau"rgba(45,15,74,0.45)"
."#C41"
menjadi"#CC4411"
.c0
(dari) warna atauc1
(ke) warna memiliki saluran alpha, maka warna yang dikembalikan akan memiliki saluran alpha. Jika kedua warna memiliki saluran alfa, maka warna yang dikembalikan akan menjadi campuran linear dari dua saluran alfa menggunakan persentase yang diberikan (sama seperti jika itu merupakan saluran warna normal). Jika hanya satu dari dua warna yang memiliki saluran alpha, alpha ini hanya akan diteruskan ke warna yang dikembalikan. Ini memungkinkan seseorang untuk berbaur / menaungi warna transparan dengan tetap menjaga tingkat transparansi. Atau, jika tingkat transparansi juga harus berbaur, pastikan kedua warna memiliki alfas. Saat shading, itu akan melewati saluran alpha langsung melalui. Jika Anda ingin arsiran dasar yang juga menaungi saluran alpha, maka gunakanrgb(0,0,0,1)
ataurgb(255,255,255,1)
sebagaic1
(untuk) warna (atau setara hex-nya). Untuk warna RGB, saluran alpha warna yang dikembalikan akan dibulatkan ke 3 tempat desimal.c0
(dari) warna; warna yang dikembalikan akan selalu dalam format warna dari warnac1
(ke), jika ada. Jika tidak adac1
warna (untuk), maka lewat'c'
sebagaic1
warna dan itu akan menaungi dan mengubah apapunc0
warnanya. Jika hanya konversi yang diinginkan, maka masukkan0
sebagai persentase (p
) juga. Jikac1
warna dihilangkan atau tidakstring
dilewatkan, itu tidak akan dikonversi.pSBCr
dapat melewati warna Hex atau RGB dan mengembalikan objek yang berisi informasi warna ini. Ini dalam bentuk: {r: XXX, g: XXX, b: XXX, a: X.XXX}. Di mana.r
,,.g
dan.b
memiliki rentang 0 hingga 255. Dan ketika tidak ada alfa:.a
adalah -1. Jika tidak:.a
memiliki rentang 0,000 hingga 1.000.rgba()
berakhirrgb()
ketika warna dengan saluran alpha dilewatkan kec0
(dari) dan / atauc1
(ke).null
. Contoh:,pSBC(0.5,"salt") == null
dimana menurutnya#salt
adalah warna yang valid. Hapus empat baris yang berakhir denganreturn null;
untuk menghapus fitur ini dan membuatnya lebih cepat dan lebih kecil.true
in forl
(parameter ke-4) untuk menggunakan Linear Blending.Kode:
Pemakaian:
Gambar di bawah ini akan membantu menunjukkan perbedaan dalam dua metode pencampuran:
Fungsi Mikro
Jika Anda benar-benar menginginkan kecepatan dan ukuran, Anda harus menggunakan RGB bukan HEX. RGB lebih mudah dan sederhana, HEX menulis terlalu lambat dan terlalu banyak rasa untuk dua-liner sederhana (IE. Ini bisa menjadi kode HEX 3, 4, 6, atau 8 digit). Anda juga perlu mengorbankan beberapa fitur, tidak ada pengecekan kesalahan, tidak ada HEX2RGB atau RGB2HEX. Selain itu, Anda harus memilih fungsi tertentu (berdasarkan nama fungsinya di bawah) untuk matematika pencampuran warna, dan jika Anda ingin shading atau blending. Fungsi-fungsi ini mendukung saluran alfa. Dan ketika kedua warna input memiliki alfas akan Linear Blend mereka. Jika hanya satu dari dua warna yang memiliki alfa, itu akan meneruskannya langsung ke warna yang dihasilkan. Di bawah ini adalah dua fungsi liner yang sangat cepat dan kecil:
Ingin info lebih lanjut? Baca artikel selengkapnya di github .
PT
(Ps Jika ada yang punya matematika untuk metode blending lain, silakan berbagi.)
sumber
tinycolor.darken(color,amount);
function shadeColor2($color, $percent) { $color = str_replace("#", "", $color); $t=$percent<0?0:255; $p=$percent<0?$percent*-1:$percent; $RGB = str_split($color, 2); $R=hexdec($RGB[0]); $G=hexdec($RGB[1]); $B=hexdec($RGB[2]); return '#'.substr(dechex(0x1000000+(round(($t-$R)*$p)+$R)*0x10000+(round(($t-$G)*$p)+$G)*0x100+(round(($t-$B)*$p)+$B)),1); }
8
, tambahkan10%
Anda mendapatkan8.8
putaran ke9
. Kemudian ambil9.09%
dari9
dan Anda dapatkan8.1819
. Yang bulat8
jadi itu contoh yang buruk. Tapi itu masih menggambarkan bahwa Anda mengambil9.09%
dari9
dan tidak8.8
. Jadi mungkin ada beberapa angka di sana yang tidak melengkapi persis sama dengan contoh saya di sini.Saya membuat solusi yang bekerja sangat bagus untuk saya:
Contoh Meringankan:
Contoh Gelap:
sumber
R = ((R<255)?R:255).toString(16);
ituR = R.length==1 ? "0"+R : R
untuk kecepatan. Dan saya tidak yakin titik toUpperCase?var R = parseInt(color.substring(1, 3), 16) var G = parseInt(color.substring(3, 5), 16) var B = parseInt(color.substring(5, 7), 16) if (R == 0) R = 32; if (G == 0) G = 32; if (B == 0) B = 32;
Ini adalah liner super sederhana berdasarkan jawaban Eric
Contoh:
sumber
Inilah yang saya gunakan berdasarkan fungsi Anda. Saya lebih suka menggunakan langkah daripada persentase karena lebih intuitif bagi saya.
Sebagai contoh, 20% dari nilai biru 200 jauh berbeda dari 20% dari nilai biru.
Bagaimanapun, ini modifikasi saya, terima kasih untuk fungsi asli Anda.
sumber
Saya mencoba fungsi Anda dan ada sedikit bug: Jika nilai akhir 'r' hanya 1 digit, hasilnya muncul seperti: 'a0a0a' ketika nilai yang tepat adalah '0a0a0a', misalnya. Saya hanya cepat memperbaikinya dengan menambahkan ini sebagai ganti pengembalian Anda:
Mungkin itu tidak begitu baik tetapi itu berhasil. Fungsi hebat, BTW. Apa yang saya butuhkan. :)
sumber
apakah Anda sudah memikirkan konversi rgb> hsl? lalu pindahkan Luminositas ke atas dan ke bawah? itulah cara saya akan pergi.
Sekilas untuk beberapa algoritma membuat saya situs berikut.
PHP: http://serennu.com/colour/rgbtohsl.php
Javascript: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascriptSunting tautan di atas tidak lagi valid. Anda dapat melihat hub git untuk sumber halaman atau inti
Atau pertanyaan StackOverflow lain mungkin tempat yang baik untuk mencari.
Meskipun ini bukan pilihan yang tepat untuk OP, berikut ini adalah perkiraan kode yang awalnya saya sarankan. (Dengan asumsi Anda memiliki fungsi konversi rgb / hsl)
Ini mengasumsikan:
hslToRgb
danrgbToHsl
.colorValue
adalah string dalam bentuk #RRGGBBMeskipun jika kita membahas css ada sintaks untuk menentukan hsl / hsla untuk IE9 / Chrome / Firefox.
sumber
C # Version ... perhatikan bahwa saya mendapatkan string warna dalam format ini # FF12AE34, dan harus memotong #FF.
sumber
int
dan duavars
untuk tipe data yang sama.Saya ingin mengubah warna ke tingkat kecerahan tertentu - tidak peduli apa kecerahan warna sebelumnya - inilah fungsi JS sederhana yang tampaknya berfungsi dengan baik, meskipun saya yakin itu bisa lebih pendek
sumber
p
memiliki jangkauan0-100
? Saya bahkan tidak tahu cara mendefinisikan kecerahan dengan benar di RGB, itu hal HSL. Misalnya, apakah#FF00FF
lebih terang dari#FF0000
? Jika demikian, itu akan menyiratkan bahwa magenta dua kali lebih terang dari merah. Oleh karena itu, tes merah murni digunakan. Lulus merah murni#FF0000
, atur kecerahan 50%, dan ini dia#FF4040
, benarkah itu? Saya kira akan membuat kecerahan 50% merah, kita akan menjadi lebih gelap, melihat bahwa itu sudah sepenuhnya cerah .. seperti dalam#800000
atau kecerahan 150% akan#FF8080
. Apakah merah muda merah cerah? atau merah sudah sepenuhnya cerah?L
saluran tersebut benar-benar kecerahan. Masalah [mental pribadi] saya di sini adalah, bagi saya,#FF0000
sepenuhnya cerdas. Dan#FF4040
lebih Ringan tetapi tidak lebih cerah .... bagi saya lebih ringan berarti lebih dekat ke putih, seperti merah muda. Dan kecerahan adalah seberapa banyak yang didapat, dan penuh merah, begitu merah, penuh terang. Karena itu,#FF0000
tidak bisa dibuat lebih cerah .. tapi lebih .. lebih ringan ... mungkin aku hanya orang aneh, lol !! Saya benar-benar tidak tahu teori warna, sooo, saya benar-benar hanya berbicara tentang ...Metode berikut ini akan memungkinkan Anda untuk meringankan atau menggelapkan nilai eksposur dari string warna Hexadecimal (Hex):
Untuk nilai parameter terakhir di GetHexFromRGB (), Masukkan nilai ganda di antara -1 dan 1 (-1 berwarna hitam, 0 tidak berubah, 1 berwarna putih):
sumber
Bagaimana warna naungan sederhana dalam PHP?
sumber
Saya membuat port dari pustaka xcolor yang sangat baik untuk menghapus ketergantungan jQuery-nya. Ada banyak fungsi di sana termasuk warna-warna terang dan gelap.
Sungguh, mengubah hex ke RGB adalah fungsi yang sepenuhnya terpisah dari warna-warna cerah atau gelap. Tolong jaga agar tetap KERING. Bagaimanapun, begitu Anda memiliki warna RGB, Anda bisa menambahkan perbedaan antara level cahaya yang Anda inginkan dan level cahaya yang Anda miliki untuk masing-masing nilai RGB:
Lihat https://github.com/fresheneesz/xolor untuk sumber lebih lanjut.
sumber
Saya sudah lama ingin dapat menghasilkan warna / nuansa warna, berikut ini adalah solusi JavaScript saya:
sumber
#
warna hex. Maaf jika sepertinya ... "persetujuan" ... Saya melihatnya sebagai ulasan sejawat. Jika Anda tidak ingin seseorang menganalisis kode Anda, atau menawarkan umpan balik, saya minta maaf.Pendekatan Anda ok :) Saya menyederhanakan versi terpendek Anda sedikit (untuk kontrol saturasi lihat di sini )
Tampilkan cuplikan kode
Dan versi dengan # dan rentang warna memeriksa
Tampilkan cuplikan kode
sumber
Saya membuat paket sederhana juga. Saya menggunakan cembung IR ^ 3, tentu saja, nilai-nilai RGB dalam IN ^ 3 yang tidak cembung jadi ini tidak benar-benar sempurna
Untuk menggelapkan saya menggunakan yang berikut ini
Dan untuk meringankan
Ini paketnya https://github.com/MarchWorks/colortone
Demo https://colortone.now.sh/
dengan cara di mana saya melakukan hal-hal jika Anda lulus rasio -1 Anda akan berakhir dengan hitam, Putih jika rasionya 1. Melewati 0 karena rasio tidak akan mengubah warna
sumber
Saya membutuhkannya di C #, mungkin membantu pengembang .net
sumber