Mai mult
RGB Hex Hex RGB
Cum de a converti culori în RGB format la format Hex și vice-versa?
De exemplu, pentru a converti '#0080C0' sa
(0, 128, 192)`.
491
45
Următoarele va face să RGB hex de conversie și de a adăuga orice este necesar zero padding:
Conversia la alt mod:
În cele din urmă, o versiune alternativă a
rgbToHex()
, cum s-a discutat în [@casablanca's a răspunde][1] și a sugerat în comentariile de @cwolves:O versiune alternativă a hexToRgb:
Edit: 3/28/2017 Aici este o altă abordare
asta pare a fi chiar mai repedeEdit: 8/11/2017 Noua abordare de mai sus, după mai mult de testare nu este mai repede :(. Deși este o distractiv mod alternativ.
ECMAScript 6 versiune de Tim's a răspunde
Conversia RGB hex
De conversie de la RGB hex
Returnează o matrice
[r, g, b]
. Funcționează, de asemenea, cu prescurtare hex tripleti cum ar fi"#03F"`.Bonus: RGB hex folosind
padStart()
metodaRețineți că acest răspuns foloseste cele mai recente ECMAScript caracteristici, care nu sunt acceptate în browsere mai vechi. Dacă doriți acest cod pentru a lucra în toate mediile, ar trebui să utilizați Babel pentru a compila codul.
Aici's versiunea mea:
Am'm presupunând că vrei să spui HTML-stil de notație hexazecimal, și anume
#rrggbb
. Codul este aproape corectă, în afară de tine'am primit ordinul inversat. Ar trebui să fie:De asemenea, folosind pic-ture s-ar putea face un pic mai ușor de citit:
Acest cod accepta #fff și #ffffff variante și opacitate.
Acest lucru ar putea fi utilizat pentru obtinerea de culori de calculat stil cu proprietăți:
Ref: https://github.com/k-gun/so/blob/master/so_util.js
O-linie funcțională HEX pentru RGBA
Sprijină atât pe termen scurt
#fff
și lung#ffffff
forme. Acceptă canal alfa (opacitate). Nu-i pasă dacă hash specificat sau nu, funcționează în ambele cazuri.exemple:
Bitwise soluție, în mod normal, este ciudat. Dar în acest caz cred că este mult mai elegant 😄
js funcția hexToRGB(hexColor){ întoarcere { red: (hexColor >> 16) & 0xFF, verde: (hexColor >> 8) & 0xFF, albastru: hexColor & 0xFF, } }
Utilizare:
``js const {rosu, verde, albastru } = hexToRGB(0xFF00FF)
console.log(roșu) // 255 console.log(verde) // 0 console.log(albastru) // 255 ``
// Ignorarea hsl notație, valori de culoare sunt de obicei exprimate ca nume, rgb, rgba sau hex-
// Hex poate fi de 3 valori sau 6.
// Rgb poate fi procentele precum și valori întregi.
// Cel mai bun de a ține cont de toate aceste formate, cel puțin.
@ Tim, pentru a adăuga la raspunsul tau (este un pic ciudat care se potrivește într-un comentariu).
Ca de scris, am găsit rgbToHex funcția returnează un șir cu elemente de după punct și se cere ca r, g, b, valorile se încadrează în intervalul 0-255.
Am'sunt sigur că acest lucru poate părea evident pentru cele mai multe, dar acesta a luat două ore să-mi dau seama și de atunci metoda originală s-a umflat la 7 linii înainte de a-am dat seama că problema mea era în altă parte. Atât în interesul de a-i salva pe alții de timp & hassle, aici's my ușor modificat codul care verifică pre-rechizite și ornamente de pe străine bucăți de sfoară.
Dacă aveți nevoie de a compara două valori de culoare (dat fiind ca RGB, nume de culoare sau valoare hex) sau de a converti la HEX folosi HTML5 canvas obiect.
`` var canvas = document.createElement("panza"); var ctx = acest lucru.panza.getContext('2d');
ctx.fillStyle = "rgb(trece,unele,valoare)"; var temp = ctx.fillStyle; ctx.fillStyle = "someColor";
alert(ctx.fillStyle == temp); ``
(2017) SIMPLU ES6 composable săgeată funcții
Pot't rezista schimbul asta pentru cei care ar putea fi scris unele moderne, funcționale/compoziție js folosind ES6. Aici sunt unele slick-garnituri sunt utilizați într-o culoare modulul care are culoare de interpolare pentru vizualizarea datelor.
Rețineți că acest lucru nu se ocupa canalul alfa, la toate.
Poate fi după așa ceva?
afișează #9687c8
Timp de 3 cifre hexToRgb funcție de Tim Jos pot fi îmbunătățite ca mai jos:
Am dat peste această problemă, deoarece am vrut să accepte orice valoare de culoare și de a fi capabil de a adăuga o opacitate, așa că am făcut repede plugin jQuery care utilizează nativ panza pe browserele moderne. Pare să funcționeze de minune.
Edit
Se pare că pot't dau seama cum de a face o buna jQuery plugin, așa că am'll prezintă doar ca o funcție regulate.
Acest fragment convertește hex rgb rgb și hex.
[Vezi demo](https://jsfiddle.net/0cL8d4kf/)
`` funcția hexToRgb(str) { if ( /^#([0-9a-f]{3}|[0-9a-f]{6})$/ig.test(str) ) { var hex = str.substr(1); hex = hex.lungimea == 3 ? hex.replace(/(.)/g, '$1$1') : hex; var rgb = parseInt(hex, 16); reveni 'rgb(' + [(rgb >> 16) & 255, (rgb >> 8) & 255, rgb & 255].alăturați-vă(',') + ')'; }
return false; }
funcția rgbToHex(roșu, verde, albastru) { var afară = '#';
pentru (var i = 0; i < 3; ++i) { var n = typeof argumente[i] == 'număr' ? argumente[i] : parseInt(argumente[i]);
if (isNaN(n) || n < 0 || n > 255) { return false; }
afară += (n < 16 ? '0' : '') + n.toString(16); } profit } ``
Versiunea mea de hex2rbg:
ați putea avea nevoie de a elimina hex.trim() dacă utilizați IE8.
de exemplu
cod:
Utilizați aceste Funcții pentru a atinge rezultatul, fără nici o problemă. :)