Catatan : kedua versi rgbToHex
nilai integer harapan untuk r
, g
dan b
, jadi Anda harus melakukan pembulatan Anda sendiri jika Anda memiliki nilai non-integer.
Hal berikut akan dilakukan untuk konversi RGB ke hex dan menambahkan padding nol yang diperlukan:
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
alert(rgbToHex(0, 51, 255)); // #0033ff
Mengubah dengan cara lain:
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
alert(hexToRgb("#0033ff").g); // "51";
Akhirnya, versi alternatif rgbToHex()
, seperti yang dibahas dalam jawaban @ casablanca dan disarankan dalam komentar oleh @cwolves:
function rgbToHex(r, g, b) {
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
alert(rgbToHex(0, 51, 255)); // #0033ff
Pembaruan 3 Desember 2012
Berikut adalah versi hexToRgb()
yang juga mem-parsing hex triplet steno seperti "# 03F":
function hexToRgb(hex) {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
alert(hexToRgb("#0033ff").g); // "51";
alert(hexToRgb("#03f").g); // "51";
<<
adalah operator shift kiri bitwise. Dengan asumsig
adalah bilangan bulat bukan nol,g << 8
maka secara efektif dikalikang
dengan 256, menambah nol ke akhir representasi hex-nya. Demikian jugar << 16
menambahkan 4 nol. Menambahkan1 << 24
(1000000 dalam hex) memastikan bahwa representasi hex kiri-empuk dengan nol yang diperlukan sekali pemimpin1
dilucuti menggunakanslice()
. Misalnya, jikar
dang
keduanya nol danb
51,((r << 16) + (g << 8) + b).toString(16)
akan mengembalikan string "33"; tambahkan1 << 24
dan Anda mendapatkan "1000033". Kemudian cabut1
dan Anda di sana.(r << 16)
) memberikan hasil yang sama pada komputer endian besar dan kecil? Sunting: Tidak. Inilah alasannya: stackoverflow.com/questions/1041554/...rgbToHex
fungsi terbaru . Seseorang akan ingin salah mengetik nilai rgb yang Anda lewati sebagai integer, atau sedikit memodifikasi fungsi rgbToHex. Contoh: jsfiddle.net/cydqo6wj Sekarang:return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
Dimodifikasi:return "#" + ((1 << 24) + ((+r) << 16) + ((+g) << 8) + (+b)).toString(16).slice(1);
Dalam versi modifikasi, saya cukup memaksakan nilai rgb untuk dievaluasi pada bilangan bulat sebelum perubahan ke 16 / hex.Versi alternatif hexToRgb:
Sunting: 3/28/2017 Berikut adalah pendekatan lain
yang tampaknya lebih cepatSunting: 8/11/2017 Pendekatan baru di atas setelah pengujian lebih lanjut tidak lebih cepat :(. Meskipun itu cara alternatif yang menyenangkan.
sumber
return [r, g, b].join();
.return [(bigint = parseInt(hex, 16)) >> 16 & 255, bigint >> 8 & 255, bigint & 255].join();
#
) sebelumparseInt
:hex = hex.replace(/[^0-9A-F]/gi, '');
Versi ECMAScript 6 dari jawaban Tim Down
Mengubah RGB menjadi hex
Mengubah hex ke RGB
Mengembalikan array
[r, g, b]
. Bekerja juga dengan kembar tiga hex steno seperti"#03F"
.Bonus: RGB to hex menggunakan
padStart()
metodePerhatikan bahwa jawaban ini menggunakan fitur ECMAScript terbaru, yang tidak didukung di browser lama. Jika Anda ingin kode ini bekerja di semua lingkungan, Anda harus menggunakan Babel untuk mengkompilasi kode Anda.
sumber
.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b) => '#' + r + r + g + g + b + b)
menjadi:.replace(/^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b, a) => '#' + r + r + g + g + b + b + a + a)
Tetapi apakah ada cara untuk membuat regexp bekerja dengan A of RGBA sebagai nilai hex 4 opsional? Itu benar-benar akan melengkapi fungsionalitas, membuat satu regexp bekerja dengan hex RGB dan RGBA. Kalau tidak, itu dua regexps, satu dengan 3 nilai, yang lain dengan 4. Anda harus membagi nilai ke-4 dengan 255 untuk mendapatkan arg ke-4 untuk rgba ().Ini versi saya:
sumber
rgb2hex
metode ini. Mengapa kita tambahkan0x1000000
kergb
, dan mengapa kita perlu menelepon.slice(1)
pada akhirnya?Saya berasumsi maksud Anda notasi heksadesimal gaya-HTML, yaitu
#rrggbb
. Kode Anda hampir benar, kecuali pesanan Anda terbalik. Harus:Juga, menggunakan bit-shift mungkin membuatnya sedikit lebih mudah dibaca:
sumber
var decColor = (red < 16 ? '0' : '') + (red << 16) + (green << 8) + blue;
red < 16
Anda perlu awalan a0
ke hasil akhir.var hexColor = ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).substr(1);
sumber
r
,g
,b
:function hex2rgb(hex){return{r:'0x'+hex[1]+hex[2]|0,g:'0x'+hex[3]+hex[4]|0,b:'0x'+hex[5]+hex[6]|0}}
Kode ini menerima varian dan opacity #fff dan #ffffff.
sumber
HEX fungsional satu garis ke RGBA
Mendukung bentuk pendek
#fff
dan panjang#ffffff
.Mendukung saluran alpha (opacity).
Tidak peduli apakah hash yang ditentukan atau tidak, berfungsi dalam kedua kasus.
contoh:
sumber
Ini dapat digunakan untuk mendapatkan warna dari properti gaya yang dihitung:
Ref: https://github.com/k-gun/so/blob/master/so_util.js
sumber
(r.length == 1 ? "0" + r : r)
dan juga untuk hijau dan biru.Solusi bitwise biasanya aneh. Tetapi dalam hal ini saya rasa itu lebih elegan 😄
Pemakaian:
sumber
// Mengabaikan notasi hsl, nilai warna biasanya dinyatakan sebagai nama, rgb, rgba atau hex-
// Hex dapat berupa 3 nilai atau 6.
// Rgb bisa berupa persentase dan juga nilai integer.
// Paling baik memperhitungkan semua format ini, setidaknya.
sumber
@ Tim, untuk menambahkan jawaban Anda (agak canggung pas ini menjadi komentar).
Seperti yang ditulis, saya menemukan fungsi rgbToHex mengembalikan sebuah string dengan elemen setelah titik dan itu mengharuskan nilai r, g, b jatuh dalam kisaran 0-255.
Saya yakin ini mungkin tampak jelas bagi kebanyakan orang, tetapi butuh dua jam bagi saya untuk mencari tahu dan pada saat itu metode asli telah menggelembung menjadi 7 baris sebelum saya menyadari masalah saya ada di tempat lain. Jadi, demi menghemat waktu & kerumitan orang lain, inilah kode saya yang sedikit diubah yang memeriksa prasyarat dan memotong bit-bit string yang asing.
sumber
(2017) fungsi panah SIMPLE ES6 SIMPLE
Saya tidak bisa menolak berbagi ini untuk mereka yang mungkin menulis beberapa fungsional / komposisi modern menggunakan ES6. Berikut adalah beberapa liner apik yang saya gunakan dalam modul warna yang melakukan interpolasi warna untuk visualisasi data.
Perhatikan bahwa ini sama sekali tidak menangani saluran alpha.
sumber
Mencoba
Tampilkan cuplikan kode
sumber
Jika Anda perlu membandingkan dua nilai warna (diberikan sebagai RGB, warna nama atau nilai hex) atau mengonversi ke HEX menggunakan objek kanvas HTML5.
sumber
Mungkinkah Anda mengejar sesuatu seperti ini?
menampilkan # 9687c8
sumber
Untuk fungsi hexToRgb 3 digit Tim Down dapat ditingkatkan seperti di bawah ini:
sumber
Saya menemukan masalah ini karena saya ingin menerima nilai warna apa pun dan dapat menambahkan opacity, jadi saya membuat plugin jQuery cepat ini yang menggunakan kanvas asli pada browser modern. Tampaknya bekerja dengan baik.
Edit
Ternyata saya tidak tahu cara menjadikannya plugin jQuery yang tepat, jadi saya hanya akan menampilkannya sebagai fungsi biasa.
sumber
saya membutuhkan fungsi yang menerima nilai yang tidak valid juga
rgb (-255, 255, 255) rgb (510, 255, 255)
ini adalah spin-off dari jawaban @cwolves
sumber
Gunakan Fungsi ini untuk mencapai hasil tanpa masalah. :)
sumber
Versi singkat yang menerima string:
Untuk memeriksa apakah itu belum heksadesimal
sumber
Meskipun jawaban ini tidak cocok dengan pertanyaan dengan sempurna, namun mungkin sangat bermanfaat.
var toRgb = document.createElement('div');
toRg.style.color = "hsl(120, 60%, 70%)";
> toRgb.style.color;
< "rgb(133, 225, 133)"
Warna Anda telah dikonversi ke RgbBekerja untuk: Hsl, Hex
Tidak berfungsi untuk: Warna yang dinamai
sumber
Versi hex2rbg saya:
String.replace, String.split, String.match
dll.Anda mungkin perlu menghapus hex.trim () jika Anda menggunakan IE8.
misalnya
kode:
sumber
h.join(',')
adalah hal yang sama denganh.join()
.Cuplikan ini mengubah hex ke rgb dan rgb ke hex.
Lihat demo
sumber
Saya sedang bekerja dengan data XAML yang memiliki format hex #AARRGGBB (Alpha, Red, Green, Blue). Menggunakan jawaban di atas, inilah solusi saya:
http://jsfiddle.net/kvLyscs3/
sumber
Untuk mengkonversi langsung dari jQuery Anda dapat mencoba:
sumber
sumber
Mempertimbangkan banyak jawaban hanya sebagian menjawab pertanyaan (baik dari RGB ke HEX atau sebaliknya) saya pikir saya akan memposting jawaban parsial saya juga.
Saya memiliki masalah serupa dan saya ingin melakukan sesuatu seperti ini: masukan warna CSS yang valid (HSL (a), RGB (a), HEX atau nama warna) dan 1. dapat menambah atau menghapus nilai alfa, 2. mengembalikan objek rgb (a). Saya menulis sebuah plugin persis untuk tujuan ini. Ini dapat ditemukan di GitHub (membutuhkan jQuery, tetapi jika mau, Anda dapat menggunakan garpu dan membuat versi vanilla). Ini halaman demo . Anda bisa mencoba sendiri dan melihat output yang dihasilkan dengan cepat.
Saya akan salin-tempel opsi di sini:
RGB Generator menerima satu argumen, warnanya, dan menyediakan tiga opsi: asObject, addAlpha, dan removeAlpha. Ketika tiga opsi dihilangkan, warna RGB akan dikembalikan sebagai string.
Perhatikan bahwa secara default komponen alpha disertakan. Jika nilai input berisi nilai alpha, output akan dalam format RGBa.
Anda dapat menonaktifkan perilaku ini dengan mengatur hapusAlpha menjadi true. Ini akan menghapus nilai alfa apa pun dari warna HSLa atau RGBa awal.
Di lain pihak, jika Anda ingin menambahkan saluran alpha, Anda dapat melakukannya dengan mengatur addAlpha ke nilai antara 0 dan 1. Ketika input adalah warna yang tidak transparan, nilai alpha akan ditambahkan. Jika itu transparan, nilai yang diberikan akan menimpa komponen alfa input.
Akhirnya, dimungkinkan juga untuk menampilkan warna RGB (a) sebagai objek. Ini akan terdiri dari r, g, b dan opsional a.
sumber
Jawaban berperingkat teratas oleh Tim Down memberikan solusi terbaik yang dapat saya lihat untuk konversi ke RGB. Saya suka solusi ini untuk konversi Hex lebih baik karena ia memberikan batas memeriksa paling singkat dan nol padding untuk konversi ke Hex.
Penggunaan shift kiri '<<' dan atau '|' operator membuat ini solusi yang menyenangkan juga.
sumber
Saya menemukan ini dan karena saya pikir itu cukup lurus ke depan dan memiliki tes validasi dan mendukung nilai alpha (opsional), ini akan sesuai dengan kasusnya.
Komentari saja garis regex jika Anda tahu apa yang Anda lakukan dan ini sedikit lebih cepat.
sumber