Uwaga : obie wersje rgbToHex
oczekują wartości całkowitych dla r
, g
i b
dlatego musisz wykonać własne zaokrąglanie, jeśli masz wartości niecałkowite.
Poniższe czynności dotyczą konwersji RGB na heksadecymalne i dodają wymagane wypełnienie zerowe:
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
Konwersja w drugą stronę:
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";
Wreszcie, alternatywna wersja rgbToHex()
, jak omówiono w odpowiedzi @ casablanca i zasugerowała w komentarzach @cwolves:
function rgbToHex(r, g, b) {
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
alert(rgbToHex(0, 51, 255)); // #0033ff
Aktualizacja 3 grudnia 2012 r
Oto wersja hexToRgb()
tego również analizuje skróconą trójkę szesnastkową, taką jak „# 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";
<<
to bitowo lewy operator zmiany biegów. Zakładając, żeg
jest niezerową liczbą całkowitą,g << 8
dlatego skutecznie mnożyg
przez 256, dodając zera na końcu jego reprezentacji szesnastkowej. Podobnier << 16
dodaje 4 zera. Dodanie1 << 24
(1000000 w postaci szesnastkowej) zapewnia, że reprezentacja szesnastkowa jest uzupełniana lewymi wszystkimi wymaganymi zerami po usunięciu wiodącej1
przy użyciuslice()
. Na przykład, jeśli oba były równe zeror
ig
wynosiłyb
51,((r << 16) + (g << 8) + b).toString(16)
zwróciłoby ciąg „33”; dodaj,1 << 24
a otrzymasz „1000033”. Następnie rozebrać1
i jesteś tam.(r << 16)
) Dałoby taki sam wynik zarówno na dużych, jak i małych komputerach Endian? Edycja: Nie. Oto dlaczego: stackoverflow.com/questions/1041554/...rgbToHex
funkcji. Będziemy chcieli albo rzutować typem przekazane wartości rgb jako liczby całkowite, albo nieznacznie zmodyfikować funkcję rgbToHex. Przykład: jsfiddle.net/cydqo6wj Current:return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
Zmodyfikowany:return "#" + ((1 << 24) + ((+r) << 16) + ((+g) << 8) + (+b)).toString(16).slice(1);
W zmodyfikowanej wersji po prostu zmuszam wartości rgb do oszacowania na liczbach całkowitych przed zmianą na 16 / hex.Alternatywna wersja hexToRgb:
Edycja: 28.03.2017 Oto inne podejście
wydaje się to jeszcze szybszeEdycja: 8/11/2017 Nowe podejście powyżej po kolejnych testach nie jest szybsze :(. Chociaż jest to fajny alternatywny sposób.
źródło
return [r, g, b].join();
.return [(bigint = parseInt(hex, 16)) >> 16 & 255, bigint >> 8 & 255, bigint & 255].join();
#
) przedparseInt
:hex = hex.replace(/[^0-9A-F]/gi, '');
Wersja ECMAScript 6 odpowiedzi Tim Down
Konwersja RGB na hex
Konwersja hex z RGB
Zwraca tablicę
[r, g, b]
. Działa również z krótkimi trojaczkami sześciokątnymi, takimi jak"#03F"
.Bonus: RGB na hex za pomocą
padStart()
metodyPamiętaj, że ta odpowiedź korzysta z najnowszych funkcji ECMAScript, które nie są obsługiwane w starszych przeglądarkach. Jeśli chcesz, aby ten kod działał we wszystkich środowiskach, powinieneś użyć Babel do skompilowania kodu.
źródło
.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b) => '#' + r + r + g + g + b + b)
staje się:.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)
Ale czy istnieje sposób, aby wyrażenie regularne działało z A RGBA jako opcjonalną czwartą wartością szesnastkową? To absolutnie uzupełniłoby funkcjonalność, dzięki czemu jedno wyrażenie regularne będzie działać z hexami RGB i RGBA. W przeciwnym razie są to dwa wyrażenia regularne, jedna z 3 wartościami, a druga z 4. Musisz podzielić 4. wartość przez 255, aby uzyskać 4. argument dla rgba ().Oto moja wersja:
źródło
rgb2hex
metody. Dlaczego dodać0x1000000
dorgb
i dlaczego musimy wywołać.slice(1)
w końcu?Zakładam, że masz na myśli notację szesnastkową w stylu HTML, tj
#rrggbb
. Twój kod jest prawie poprawny, z tym wyjątkiem, że masz odwróconą kolejność. Powinno być:Ponadto użycie przesunięć bitowych może nieco ułatwić czytanie:
źródło
var decColor = (red < 16 ? '0' : '') + (red << 16) + (green << 8) + blue;
red < 16
potrzebujesz przedrostka a0
do wyniku końcowego.var hexColor = ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).substr(1);
źródło
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}}
Ten kod akceptuje warianty i krycie #fff i #ffffff.
źródło
Jednowierszowy funkcjonalny HEX na RGBA
Obsługuje zarówno krótkie, jak
#fff
i długie#ffffff
formy.Obsługuje kanał alfa (krycie).
Nie ma znaczenia, czy hash został określony, czy nie, działa w obu przypadkach.
przykłady:
źródło
Można to wykorzystać do uzyskania kolorów z obliczonych stylów:
Patrz: https://github.com/k-gun/so/blob/master/so_util.js
źródło
(r.length == 1 ? "0" + r : r)
i podobnie dla zieleni i niebieskiego.Bitowe rozwiązanie zwykle jest dziwne. Ale w tym przypadku wydaje mi się, że jest bardziej elegancki 😄
Stosowanie:
źródło
// Ignorując notację hsl, wartości kolorów są zwykle wyrażane jako nazwy, rgb, rgba lub hex-
// Hex może mieć 3 wartości lub 6.
// Rgb może być zarówno wartościami procentowymi, jak i liczbami całkowitymi.
// Najlepiej uwzględnić wszystkie te formaty.
źródło
@ Tim, aby dodać do swojej odpowiedzi (to trochę niezręczne dopasowanie do komentarza).
Jak napisałem, znalazłem, że funkcja rgbToHex zwraca ciąg znaków z elementami po punkcie i wymaga, aby wartości r, g, b były w zakresie 0-255.
Jestem pewien, że może to wydawać się oczywiste dla większości, ale zajęło mi to dwie godziny, zanim doszedłem do wniosku, że oryginalna metoda powiększyła balon do 7 linii, zanim zdałem sobie sprawę, że mój problem był gdzie indziej. Dlatego w celu zaoszczędzenia czasu i problemów innym, oto mój nieznacznie zmieniony kod, który sprawdza wymagania wstępne i obcina zbędne fragmenty łańcucha.
źródło
(2017) Funkcje strzałki składanej SIMPLE ES6
Nie mogę się powstrzymać przed udostępnieniem tego osobom, które mogą pisać współczesne js funkcjonalne / kompozycyjne przy użyciu ES6. Oto kilka zręcznych jedno-linijek, których używam w module kolorów, który interpoluje kolory do wizualizacji danych.
Zauważ, że to wcale nie obsługuje kanału alfa.
źródło
Próbować
Pokaż fragment kodu
źródło
Jeśli potrzebujesz porównać dwie wartości kolorów (podane jako RGB, nazwa koloru lub wartość szesnastkowa) lub przekonwertować na HEX, użyj obiektu płótna HTML5.
źródło
Czy możesz mieć coś takiego?
wyświetla # 9687c8
źródło
W przypadku 3 cyfr funkcję hexToRgb Tim Down można ulepszyć w następujący sposób:
źródło
Natknąłem się na ten problem, ponieważ chciałem zaakceptować dowolną wartość koloru i móc dodać krycie, dlatego stworzyłem tę szybką wtyczkę jQuery, która używa natywnego płótna w nowoczesnych przeglądarkach. Wydaje się, że działa po prostu świetnie.
Edytować
Okazuje się, że nie mogę wymyślić, jak zrobić z niego odpowiednią wtyczkę jQuery, więc przedstawię ją jako zwykłą funkcję.
źródło
Potrzebowałem funkcji, która zbyt podobnie akceptuje nieprawidłowe wartości
rgb (-255, 255, 255) rgb (510, 255, 255)
jest to spin-off odpowiedzi @cwolves
źródło
Użyj tej funkcji, aby osiągnąć wynik bez żadnych problemów. :)
źródło
Skrócona wersja, która akceptuje ciąg znaków:
Aby sprawdzić, czy nie jest jeszcze szesnastkowy
źródło
Chociaż odpowiedź ta raczej nie pasuje idealnie do pytania, może być jednak bardzo przydatna.
var toRgb = document.createElement('div');
toRg.style.color = "hsl(120, 60%, 70%)";
> toRgb.style.color;
< "rgb(133, 225, 133)"
Twój kolor został przekonwertowany na RgbDziała dla: Hsl, Hex
Nie działa w przypadku: Nazwanych kolorów
źródło
Moja wersja hex2rbg:
String.replace, String.split, String.match
itp.może być konieczne usunięcie hex.trim (), jeśli używasz IE8.
na przykład
kod:
źródło
h.join(',')
to to samo, coh.join()
.Ten fragment zamienia hex na rgb i rgb na hex.
Zobacz demo
źródło
Pracuję z danymi XAML, które mają format szesnastkowy #AARRGGBB (alfa, czerwony, zielony, niebieski). Korzystając z powyższych odpowiedzi, oto moje rozwiązanie:
http://jsfiddle.net/kvLyscs3/
źródło
Aby przekonwertować bezpośrednio z jQuery, możesz spróbować:
źródło
źródło
Biorąc pod uwagę wiele odpowiedzi, tylko częściowo odpowiedz na pytanie (z RGB na HEX lub na odwrót). Myślałem, że opublikuję również moją częściową odpowiedź.
Miałem podobny problem i chciałem zrobić coś takiego: wprowadź dowolny prawidłowy kolor CSS (HSL (a), RGB (a), HEX lub nazwę koloru) i 1. móc dodać lub usunąć wartość alfa, 2. zwraca obiekt rgb (a). Napisałem wtyczkę właśnie w tym celu. Można go znaleźć na GitHub (wymaga jQuery, ale jeśli chcesz, możesz go rozwidlić i stworzyć wersję waniliową). Oto strona demonstracyjna . Możesz spróbować sam i zobaczyć wyniki generowane w locie.
Skopiuję i wkleję opcje tutaj:
Generator RGB akceptuje jeden argument, kolor i udostępnia trzy opcje: asObject, addAlpha i removeAlpha. Gdy trzy opcje zostaną pominięte, kolor RGB zostanie zwrócony jako ciąg.
Zauważ, że domyślnie włączone są składniki alfa. Jeśli wartość wejściowa zawiera wartość alfa, dane wyjściowe będą miały format RGBa.
Możesz wyłączyć to zachowanie, ustawiając removeAlpha na true. Spowoduje to usunięcie dowolnej wartości alfa z początkowego koloru HSLa lub RGBa.
Z drugiej strony, jeśli chcesz dodać kanał alfa, możesz to zrobić, ustawiając addAlpha na dowolną wartość z przedziału od 0 do 1. Gdy wejście ma nieprzezroczysty kolor, wartość alfa zostanie dodana. Jeśli jest przezroczysty, podana wartość zastąpi składnik alfa wejścia.
Wreszcie możliwe jest również wyprowadzenie koloru RGB (a) jako obiektu. Będzie się składać z r, g, b i opcjonalnie a.
źródło
Najwyżej oceniana odpowiedź Tim Down stanowi najlepsze rozwiązanie, jakie widzę w przypadku konwersji na RGB. Bardziej podoba mi się to rozwiązanie do konwersji heksów, ponieważ zapewnia najbardziej zwięzłe sprawdzanie granic i zerowanie dopełnienia do konwersji do heksów.
Zastosowanie lewego klawisza Shift „<<” i lub „|” operatorzy również sprawiają, że jest to zabawne rozwiązanie.
źródło
Znalazłem to, a ponieważ uważam, że jest to dość proste i ma testy sprawdzające poprawność oraz obsługuje wartości alfa (opcjonalnie), będzie to pasować do przypadku.
Po prostu skomentuj linię wyrażeń regularnych, jeśli wiesz, co robisz, i to jest trochę szybsze.
źródło