Javascript цвет по номеру

Get a color component from an rgb string in Javascript?

I’m using Javascript and Canvas to make a painting app and was using strings in this format to designate chosen colors: «rgb(255,0,0)» Because the canvas context fillStyle property takes in strings of that format. However, I now need to obtain individual components from this string and was wondering if there was a way to do it without messy string manipulation. Possibly some built in way to convert that string to a sort of color object and then access its r, g, and b components? Thanks.

9 Answers 9

NOTE — We’re all on board with the regex ate my brains and kicked my dog attitude, but the regex version just seems the better method. My opinion. Check it out.

var rgb = 'rgb(200, 12, 53)'; rgb = rgb.substring(4, rgb.length-1) .replace(/ /g, '') .split(','); console.log(rgb); 

EDIT: Ooops, had an i in the regex for some reason.

var rgb = 'rgb(200, 12, 53)'; rgb = rgb.replace(/[^\d,]/g, '').split(','); console.log(rgb); 

nice. just need to add a period into the regex to account for rgba float values: rgb.replace(/[^\d,.]/g, »).split(‘,’)

What if we use a malformed input like rgb(234, 789, 999, -3, 2, 0.765, -6.78)? This has both floats, numbers above 255, negatives and has more than 3 values, and it would be parsed like nothing happened

 var rgb = 'rgb(200, 12, 53)'.match(/\d+/g); console.log(rgb); 

and here comes the output as

» simple is always beautiful ! » 🙂

This fails when an alpha channel is present, e.g. rgba(1, 1, 1, 0.6) , in which case it returns [«1», «1», «1», «0», «6»] .

True, however if you use only the first three values in the array you will always get the R, G, B values

My version takes a HEX , RGB or RGBa string as an argument, uses no regEx, and returns an object with red, green, and blue (and alpha for RGBa ) number-values.

var RGBvalues = (function() < var _hex2dec = function(v) < return parseInt(v, 16) >; var _splitHEX = function(hex) < var c; if (hex.length === 4) < c = (hex.replace('#','')).split(''); return < r: _hex2dec((c[0] + c[0])), g: _hex2dec((c[1] + c[1])), b: _hex2dec((c[2] + c[2])) >; > else < return < r: _hex2dec(hex.slice(1,3)), g: _hex2dec(hex.slice(3,5)), b: _hex2dec(hex.slice(5)) >; > >; var _splitRGB = function(rgb) < var c = (rgb.slice(rgb.indexOf('(')+1, rgb.indexOf(')'))).split(','); var flag = false, obj; c = c.map(function(n,i) < return (i !== 3) ? parseInt(n, 10) : flag = true, parseFloat(n); >); obj = < r: c[0], g: c[1], b: c[2] >; if (flag) obj.a = c[3]; return obj; >; var color = function(col) < var slc = col.slice(0,1); if (slc === '#') < return _splitHEX(col); >else if (slc.toLowerCase() === 'r') < return _splitRGB(col); >else < console.log('!Ooops! RGBvalues.color('+col+') : HEX, RGB, or RGBa strings only'); >>; return < color: color >; >()); console.debug(RGBvalues.color('rgb(52, 86, 120)')); //-> < r: 52, g: 86, b: 120 >console.debug(RGBvalues.color('#345678')); //-> < r: 52, g: 86, b: 120 >console.debug(RGBvalues.color('rgba(52, 86, 120, 0.67)')); //-> < r: 52, g: 86, b: 120, a: 0.67 >console.debug(RGBvalues.color('#357')); //->

Might be useful to someone. 🙂

Источник

Таблица HTML цветов

Все стандартные цвета – их названия, HEX коды и RGB значения.

Основные цвета

Черный	Black	#000000	rgb(0,0,0)
Серый	Gray	#808080	rgb(128,128,128)
Серебряный	Silver	#c0c0c0	rgb(192,192,192)
Белый	White	#ffffff	rgb(255,255,255)
Фуксия, Маджента	Fuchsia,Magenta	#ff00ff	rgb(255,0,255)
Пурпурный	Purple	#800080	rgb(128,0,128)
Красный	Red	#ff0000	rgb(255,0,0)
Коричнево-малиновый	Maroon	#800000	rgb(128,0,0)
Жёлтый	Yellow	#ffff00	rgb(205,92,92)
Оливковый	Olive	#808000	rgb(240,128,128)
Лайм	Lime	#00ff00	rgb(250,128,114)
Зелёный	Green	#008000	rgb(233,150,122)
Цвет морской волны	Aqua	#00ffff	rgb(205,92,92)
Окраски птицы чирок	Teal	#008080	rgb(240,128,128)
Синий	Blue	#0000ff	rgb(250,128,114)
Форма морских офицеров	Navy	#000080	rgb(233,150,122)

Серые тона

Дымчато-белый	WhiteSmoke	#f5f5f5	rgb(245,245,245)
Гейнсборо	Gainsboro	#dcdcdc	rgb(220,220,220)
Светло серый	LightGrey,LightGray	#d3d3d3	rgb(211,211,211)
Серебряный	Silver	#c0c0c0	rgb(192,192,192)
Темно серый	DarkGray,DarkGrey	#a9a9a9	rgb(169,169,169)
Серый	Gray,Grey	#808080	rgb(128,128,128)
Тусклый серый	DimGray,DimGrey	#696969	rgb(105,105,105)
Светлый аспидно-серый	LightSlateGray,LightSlateGrey	#778899	rgb(119,136,153)
Серый шифер	SlateGray,SlateGrey	#708090	rgb(112,128,144)
Аспидно-серый	DarkSlateGray,DarkSlateGrey	#2f4f4f	rgb(47,79,79)
Чёрный	Black	#000000	rgb(0,0,0)

Красные тона

Светло-коралловый	LightCoral	#f08080	rgb(240,128,128)
Лососевый	Salmon	#fa8072	rgb(250,128,114)
Тёмно-лососёвый	DarkSalmon	#e9967a	rgb(233,150,122)
Светло-лососёвый	LightSalmon	#ffa07a	rgb(255,160,122)
Малиновый	Crimson	#dc143c	rgb(220,20,60)
Красный	Red	#ff0000	rgb(255,0,0)
Индийский красный	IndianRed	#cd5c5c	rgb(205,92,92)
Кирпичный	FireBrick	#b22222	rgb(178,34,34)
Коричнево-бордовый	Brown	#a52a2a	rgb(165,42,42)
Тёмно-красный	DarkRed	#8b0000	rgb(139,0,0)
Коричнево-малиновый	Maroon	#800000	rgb(128,0,0)

Оранжевые тона

Цвет морской раковины	Seashell	#fff5ee	rgb(255,245,238)
Бежевый	Beige	#f5f5dc	rgb(245,245,220)
Старое кружево	OldLace	#fdf5e6	rgb(253,245,230)
Цветочный белый	FloralWhite	#fffaf0	rgb(255,250,240)
Белый антик	AntiqueWhite	#faebd7	rgb(250,235,215)
Льняной	Linen	#faf0e6	rgb(250,240,230)
Очищенный миндаль	BlanchedAlmond	#ffebcd	rgb(255,235,205)
Бисквитный	Bisque	#ffe4c4	rgb(255,228,196)
Белый навахо	NavajoWhite	#ffdead	rgb(255,222,173)
Пшеничный	Wheat	#f5deb3	rgb(245,222,179)
Плотная древесина	BurlyWood	#deb887	rgb(222,184,135)
Цвет загара	Tan	#d2b48c	rgb(210,180,140)
Красный песок	SandyBrown	#f4a460	rgb(244,164,96)
Золотисто-березовый	Goldenrod	#daa520	rgb(218,165,32)
Тёмный золотарник	DarkGoldenRod	#b8860b	rgb(184,134,11)
Перу	Peru	#cd853f	rgb(205,133,63)
Шоколадный	Chocolate	#d2691e	rgb(210,105,30)
Кожаного седла для лошади	SaddleBrown	#8b4513	rgb(139,69,19)
Сиена	Sienna	#a0522d	rgb(160,82,45)
Светлый сомон	LightSalmon	#ffa07a	rgb(255,160,122)
Коралловый	Coral	#ff7f50	rgb(255,127,80)
Томатный	Tomato	#ff6347	rgb(255,99,71)
Оранжево-красный	OrangeRed	#ff4500	rgb(255,69,0)
Тёмно-оранжевый	DarkOrange	#ff8c00	rgb(255,140,0)
Оранжевый	Orange	#ffa500	rgb(255,165,0)

Жёлтые тона

Цвет пестиков неспелой кукурузы	Cornsilk	#fff8dc	rgb(255,248,220)
Слоновая кость	Ivory	#fffff0	rgb(255,255,240)
Светло-жёлтый	LightYellow	#ffffe0	rgb(255,255,224)
Лимонно-кремовый	LemonChiffon	#fffacd	rgb(255,250,205)
Светло-жёлтый золотистый	LightGoldenrodYellow	#fafad2	rgb(250,250,210)
Побег папайи	PapayaWhip	#ffefd5	rgb(255,239,213)
Мокасиновый	Moccasin	#ffe4b5	rgb(255,228,181)
Тёмно-персиковый	PeachPuff	#ffdab9	rgb(255,218,185)
Бледно-золотистый	PaleGoldenrod	#eee8aa	rgb(238,232,170)
Светлый хаки	Khaki	#f0e68c	rgb(240,230,140)
Тёмный хаки	DarkKhaki	#bdb76b	rgb(189,183,107)
Жёлтый	Yellow	#ffff00	rgb(255,255,0)
Золотой	Gold	#ffd700	rgb(255,215,0)

Зелёные тона

Медовая роса	Honeydew	#f0fff0	rgb(240,255,240)
Мятно-кремовый	MintCream	#f5fffa	rgb(245,255,250)
Зелёно-жёлтый	GreenYellow	#adff2f	rgb(173,255,47)
Шартрёз	Chartreuse	#7fff00	rgb(127,255,0)
Зелёная лужайка	LawnGreen	#7cfc00	rgb(124,252,0)
Лайм	Lime	#00ff00	rgb(0,255,0)
Лаймово-зелёный	LimeGreen	#32cd32	rgb(50,205,50)
Бледный зелёный	PaleGreen	#98fb98	rgb(152,251,152)
Светло-зелёный	LightGreen	#90ee90	rgb(144,238,144)
Умеренный весенний зелёный	MediumSpringGreen	#00fa9a	rgb(0,250,154)
Весенне-зелёный	SpringGreen	#00ff7f	rgb(0,255,127)
Умеренно-зелёное море	MediumSeaGreen	#3cb371	rgb(60,179,113)
Зелёное море	SeaGreen	#2e8b57	rgb(46,139,87)
Лесной зелёный	ForestGreen	#228b22	rgb(34,139,34)
Зелёный	Green	#008000	rgb(0,128,0)
Очень тёмный лимонный зеленый	DarkGreen	#006400	rgb(0,100,0)
Жёлто-зелёный	YellowGreen	#9acd32	rgb(154,205,50)
Нежно-оливковый	OliveDrab	#6b8e23	rgb(107,142,35)
Оливковый	Olive	#808000	rgb(128,128,0)
Тёмный оливково-зеленый	DarkOliveGreen	#556b2f	rgb(85,107,47)
Умеренный аквамариновый	MediumAquamarine	#66cdaa	rgb(102,205,170)
Тёмное зелёное море	DarkSeaGreen	#8fbc8f	rgb(143,188,143)
Светлое зелёное море	LightSeaGreen	#20b2aa	rgb(32,178,170)
Тёмный циан	DarkCyan	#008b8b	rgb(0,139,139)
Окраски птицы чирок	Teal	#008080	rgb(0,128,128)

Синие тона

Небесная лазурь	Azure	#f0ffff	rgb(240,255,255)
Синяя Элис	AliceBlue	#f0f8ff	rgb(240,248,255)
Светлый циан	LightCyan	#e0ffff	rgb(224,255,255)
Циан,цвет морской волны	Cyan,Aqua	#00ffff	rgb(0,255,255)
Аквамариновый	Aquamarine	#7fffd4	rgb(127,255,212)
Светло-бирюзовый	Turquoise	#40e0d0	rgb(64,224,208)
Умеренно-бирюзовый	MediumTurquoise	#48d1cc	rgb(72,209,204)
Тёмно-бирюзовый	DarkTurquoise	#00ced1	rgb(0,206,209)
Бледно-синий	PaleTurquoise	#afeeee	rgb(175,238,238)
Пыльный голубой	PowderBlue	#b0e0e6	rgb(176,224,230)
Светлый синий	LightBlue	#add8e6	rgb(173,216,230)
Светлый стальной синий	LightSteelBlue	#b0c4de	rgb(176,196,222)
Городское небо	SkyBlue	#87ceeb	rgb(135,206,235)
Светло-голубой	LightSkyBlue	#87cefa	rgb(135,206,250)
Морозное небо	DeepSkyBlue	#00bfff	rgb(0,191,255)
Защитно-синий	DodgerBlue	#1e90ff	rgb(30,144,255)
Васильковый	CornflowerBlue	#6495ed	rgb(100,149,237)
Умеренный аспидно-синий	MediumSlateBlue	#7b68ee	rgb(123,104,238)
Кадетский синий	CadetBlue	#5f9ea0	rgb(95,158,160)
Синяя сталь	SteelBlue	#4682b4	rgb(70,130,180)
Королевский синий	RoyalBlue	#4169e1	rgb(65,105,225)
Синий	Blue	#0000ff	rgb(0,0,255)
Средний синий	MediumBlue	#0000cd	rgb(0,0,205)
Тёмный ультрамариновый	DarkBlue	#00008b	rgb(0,0,139)
Формы морских офицеров	Navy	#000080	rgb(0,0,128)
Полуночный чёрный	MidnightBlue	#191970	rgb(25,25,112)
Аспидно-синий	SlateBlue	#6a5acd	rgb(106,90,205)
Тёмный аспидно-синий	DarkSlateBlue	#483d8b	rgb(72,61,139)

Фиолетовые тона

Призрачно-белый	GhostWhite	#f8f8ff	rgb(248,248,255)
Лаванда	Lavender	#e6e6fa	rgb(230,230,250)
Чертополох	Thistle	#d8bfd8	rgb(216,191,216)
Светлая слива	Plum	#dda0dd	rgb(221,160,221)
Розово-фиолетовый	Violet	#ee82ee	rgb(238,130,238)
Орхидея	Orchid	#da70d6	rgb(218,112,214)
Фуксия,Маджента	Fuchsia,Magenta	#ff00ff	rgb(255,0,255)
Умеренный фиолетово-красный	MediumVioletRed	#c71585	rgb(199,21,133)
Умеренный цвет орхидеи	MediumOrchid	#ba55d3	rgb(186,85,211)
Умеренный пурпурный	MediumPurple	#9370db	rgb(147,112,219)
Сине-лиловый	BlueViolet	#8a2be2	rgb(138,43,226)
Тёмно-фиолетовый	DarkViolet	#9400d3	rgb(148,0,211)
Тёмная орхидея	DarkOrchid	#9932cc	rgb(153,50,204)
Тёмный маджента	DarkMagenta	#8b008b	rgb(139,0,139)
Пурпурный	Purple	#800080	rgb(128,0,128)
Индиго	Indigo	#4b0082	rgb(75,0,130)

Розовые тона

Белоснежный	Snow	#fffafa	rgb(255,250,250)
Розово-лавандовый	LavenderBlush	#fff0f5	rgb(255,240,245)
Тускло-розовый	MistyRose	#ffe4e1	rgb(255,228,225)
Розовый	Pink	#ffc0cb	rgb(255,192,203)
Светло-розовый	LightPink	#ffb6c1	rgb(255,182,193)
Ярко-розовый	HotPink	#ff69b4	rgb(255,105,180)
Глубокий розовый	DeepPink	#ff1493	rgb(255,20,147)
Лиловый	PaleVioletRed	#db7093	rgb(219,112,147)
Розово-коричневый	RosyBrown	#bc8f8f	rgb(188,143,143)

Источник

jscolor.js is a JavaScript color picker with opacity channel

jscolor.js is a self-sufficient JavaScript library consisting of only one file of plain JavaScript.

It doesn’t need any frameworks (jQuery, Dojo, MooTools, etc.)
but it is friends with them all.

Cross-browser

Wide compatibilty across modern desktop & mobile browsers, including:

Edge, Firefox, Chrome, Safari, Opera, and others…

Highly customizable

jscolor provides variety of configuration options.

Whether you need to change color picker’s size or colors, or attach a function to its onchange event, the configuration can be fine-tuned for your web project.

Mobile friendly

With a built-in support for touch events, jscolor is designed to be easy to use on touch devices such as tablets and smartphones.

Assistance with implementation

Should you need assistance incorporating color-related features into your project, do not hesitate to email for advice.

Typical scenarios solved:

• Customizing jscolor configuration to suit your project
• Building color-related user interfaces, e.g. for generating colorized prints or product variants
• Dynamic page layouts based on user-specified colors and other parameters
• Color space calculations and conversions
• AJAX integration, server-side processing of color data, etc.

jscolor example

Testimonials

I find JSColor easy to use, easy to integrate and easy to personalize options. I think you did a nice work. Thank you very much.

first I want to thank you for putting such an effort to develop this nice library. I’m very happy that I don’t need to add jQuery to my site — thanks to your independent jscolor…

Источник