-
-
Save mucar/3898821 to your computer and use it in GitHub Desktop.
var colorArray = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', | |
'#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D', | |
'#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', | |
'#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC', | |
'#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC', | |
'#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399', | |
'#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680', | |
'#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933', | |
'#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3', | |
'#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF']; |
and then how to switch color of fonts according to background color
tanks to you all, it's awesome
or do this:
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
for each item in your collection.
Thanks, these are useful
colorshow | colorshow | colorshow | colorshow | colorshow | colorshow | colorshow |
---|---|---|---|---|---|---|
"#63b598", | "#ce7d78", | "#ea9e70", | "#a48a9e", | "#c6e1e8", | "#648177", | "#0d5ac1", |
"#f205e6", | "#1c0365", | "#14a9ad", | "#4ca2f9", | "#a4e43f", | "#d298e2", | "#6119d0", |
"#d2737d", | "#c0a43c", | "#f2510e", | "#651be6", | "#79806e", | "#61da5e", | "#cd2f00", |
"#9348af", | "#01ac53", | "#c5a4fb", | "#996635", | "#b11573", | "#4bb473", | "#75d89e", |
"#2f3f94", | "#2f7b99", | "#da967d", | "#34891f", | "#b0d87b", | "#ca4751", | "#7e50a8", |
"#c4d647", | "#e0eeb8", | "#11dec1", | "#289812", | "#566ca0", | "#ffdbe1", | "#2f1179", |
"#935b6d", | "#916988", | "#513d98", | "#aead3a", | "#9e6d71", | "#4b5bdc", | "#0cd36d", |
"#250662", | "#cb5bea", | "#228916", | "#ac3e1b", | "#df514a", | "#539397", | "#880977", |
"#f697c1", | "#ba96ce", | "#679c9d", | "#c6c42c", | "#5d2c52", | "#48b41b", | "#e1cf3b", |
"#5be4f0", | "#57c4d8", | "#a4d17a", | "#225b8", | "#be608b", | "#96b00c", | "#088baf", |
"#f158bf", | "#e145ba", | "#ee91e3", | "#05d371", | "#5426e0", | "#4834d0", | "#802234", |
"#6749e8", | "#0971f0", | "#8fb413", | "#b2b4f0", | "#c3c89d", | "#c9a941", | "#41d158", |
"#fb21a3", | "#51aed9", | "#5bb32d", | "#807fb", | "#21538e", | "#89d534", | "#d36647", |
"#7fb411", | "#0023b8", | "#3b8c2a", | "#986b53", | "#f50422", | "#983f7a", | "#ea24a3", |
"#79352c", | "#521250", | "#c79ed2", | "#d6dd92", | "#e33e52", | "#b2be57", | "#fa06ec", |
"#1bb699", | "#6b2e5f", | "#64820f", | "#1c271", | "#21538e", | "#89d534", | "#d36647", |
"#7fb411", | "#0023b8", | "#3b8c2a", | "#986b53", | "#f50422", | "#983f7a", | "#ea24a3", |
"#79352c", | "#521250", | "#c79ed2", | "#d6dd92", | "#e33e52", | "#b2be57", | "#fa06ec", |
"#1bb699", | "#6b2e5f", | "#64820f", | "#1c271", | "#9cb64a", | "#996c48", | "#9ab9b7", |
"#06e052", | "#e3a481", | "#0eb621", | "#fc458e", | "#b2db15", | "#aa226d", | "#792ed8", |
"#73872a", | "#520d3a", | "#cefcb8", | "#a5b3d9", | "#7d1d85", | "#c4fd57", | "#f1ae16", |
"#8fe22a", | "#ef6e3c", | "#243eeb", | "#1dc18", | "#dd93fd", | "#3f8473", | "#e7dbce", |
"#421f79", | "#7a3d93", | "#635f6d", | "#93f2d7", | "#9b5c2a", | "#15b9ee", | "#0f5997", |
"#409188", | "#911e20", | "#1350ce", | "#10e5b1", | "#fff4d7", | "#cb2582", | "#ce00be", |
"#32d5d6", | "#17232", | "#608572", | "#c79bc2", | "#00f87c", | "#77772a", | "#6995ba", |
"#fc6b57", | "#f07815", | "#8fd883", | "#060e27", | "#96e591", | "#21d52e", | "#d00043", |
"#b47162", | "#1ec227", | "#4f0f6f", | "#1d1d58", | "#947002", | "#bde052", | "#e08c56", |
"#28fcfd", | "#bb09b", | "#36486a", | "#d02e29", | "#1ae6db", | "#3e464c", | "#a84a8f", |
"#911e7e", | "#3f16d9", | "#0f525f", | "#ac7c0a", | "#b4c086", | "#c9d730", | "#30cc49", |
"#3d6751", | "#fb4c03", | "#640fc1", | "#62c03e", | "#d3493a", | "#88aa0b", | "#406df9", |
"#615af0", | "#4be47", | "#2a3434", | "#4a543f", | "#79bca0", | "#a8b8d4", | "#00efd4", |
"#7ad236", | "#7260d8", | "#1deaa7", | "#06f43a", | "#823c59", | "#e3d94c", | "#dc1c06", |
"#f53b2a", | "#b46238", | "#2dfff6", | "#a82b89", | "#1a8011", | "#436a9f", | "#1a806a", |
"#4cf09d", | "#c188a2", | "#67eb4b", | "#b308d3", | "#fc7e41", | "#af3101", | "#ff065", |
"#71b1f4", | "#a2f8a5", | "#e23dd0", | "#d3486d", | "#00f7f9", | "#474893", | "#3cec35", |
"#1c65cb", | "#5d1d0c", | "#2d7d2a", | "#ff3420", | "#5cdd87", | "#a259a4", | "#e4ac44", |
"#1bede6", | "#8798a4", | "#d7790f", | "#b2c24f", | "#de73c2", | "#d70a9c", | "#25b67", |
"#88e9b8", | "#c2b0e2", | "#86e98f", | "#ae90e2", | "#1a806b", | "#436a9e", | "#0ec0ff", |
"#f812b3", | "#b17fc9", | "#8d6c2f", | "#d3277a", | "#2ca1ae", | "#9685eb", | "#8a96c6", |
"#dba2e6", | "#76fc1b", | "#608fa4", | "#20f6ba", | "#07d7f6", | "#dce77a", | "#77ecca"] |
I think this is awesome more for one that needs it. keep it with you, recorded
colorshow1 | colorshow2 | colorshow3 | colorshow4 | colorshow5 | colorshow6 | colorshow7 |
---|---|---|---|---|---|---|
"#63B598", | "#CE7D78", | "#EA9E70", | "#A48A9E", | "#C6E1E8", | "#648177", | "#0D5AC1", |
"#F205E6", | "#1C0365", | "#14A9AD", | "#4CA2F9", | "#A4E43F", | "#D298E2", | "#6119D0", |
"#D2737D", | "#C0A43C", | "#F2510E", | "#651BE6", | "#79806E", | "#61DA5E", | "#CD2F00", |
"#9348AF", | "#01AC53", | "#C5A4FB", | "#996635", | "#B11573", | "#4BB473", | "#75D89E", |
"#2F3F94", | "#2F7B99", | "#DA967D", | "#34891F", | "#B0D87B", | "#CA4751", | "#7E50A8", |
"#C4D647", | "#E0EEB8", | "#11DEC1", | "#289812", | "#566CA0", | "#FFDBE1", | "#2F1179", |
"#935B6D", | "#916988", | "#513D98", | "#AEAD3A", | "#9E6D71", | "#4B5BDC", | "#0CD36D", |
"#250662", | "#CB5BEA", | "#228916", | "#AC3E1B", | "#DF514A", | "#539397", | "#880977", |
"#F697C1", | "#BA96CE", | "#679C9D", | "#C6C42C", | "#5D2C52", | "#48B41B", | "#E1CF3B", |
"#5BE4F0", | "#57C4D8", | "#A4D17A", | "#225B8", | "#BE608B", | "#96B00C", | "#088BAF", |
"#F158BF", | "#E145BA", | "#EE91E3", | "#05D371", | "#5426E0", | "#4834D0", | "#802234", |
"#6749E8", | "#0971F0", | "#8FB413", | "#B2B4F0", | "#C3C89D", | "#C9A941", | "#41D158", |
"#FB21A3", | "#51AED9", | "#5BB32D", | "#807FB", | "#21538E", | "#89D534", | "#D36647", |
"#7FB411", | "#0023B8", | "#3B8C2A", | "#986B53", | "#F50422", | "#983F7A", | "#EA24A3", |
"#79352C", | "#521250", | "#C79ED2", | "#D6DD92", | "#E33E52", | "#B2BE57", | "#FA06EC", |
"#1BB699", | "#6B2E5F", | "#64820F", | "#1C271", | "#21538E", | "#89D534", | "#D36647", |
"#7FB411", | "#0023B8", | "#3B8C2A", | "#986B53", | "#F50422", | "#983F7A", | "#EA24A3", |
"#79352C", | "#521250", | "#C79ED2", | "#D6DD92", | "#E33E52", | "#B2BE57", | "#FA06EC", |
"#1BB699", | "#6B2E5F", | "#64820F", | "#1C271", | "#9CB64A", | "#996C48", | "#9AB9B7", |
"#06E052", | "#E3A481", | "#0EB621", | "#FC458E", | "#B2DB15", | "#AA226D", | "#792ED8", |
"#73872A", | "#520D3A", | "#CEFCB8", | "#A5B3D9", | "#7D1D85", | "#C4FD57", | "#F1AE16", |
"#8FE22A", | "#EF6E3C", | "#243EEB", | "#1DC18", | "#DD93FD", | "#3F8473", | "#E7DBCE", |
"#421F79", | "#7A3D93", | "#635F6D", | "#93F2D7", | "#9B5C2A", | "#15B9EE", | "#0F5997", |
"#409188", | "#911E20", | "#1350CE", | "#10E5B1", | "#FFF4D7", | "#CB2582", | "#CE00BE", |
"#32D5D6", | "#17232", | "#608572", | "#C79BC2", | "#00F87C", | "#77772A", | "#6995BA", |
"#FC6B57", | "#F07815", | "#8FD883", | "#060E27", | "#96E591", | "#21D52E", | "#D00043", |
"#B47162", | "#1EC227", | "#4F0F6F", | "#1D1D58", | "#947002", | "#BDE052", | "#E08C56", |
"#28FCFD", | "#BB09B", | "#36486A", | "#D02E29", | "#1AE6DB", | "#3E464C", | "#A84A8F", |
"#911E7E", | "#3F16D9", | "#0F525F", | "#AC7C0A", | "#B4C086", | "#C9D730", | "#30CC49", |
"#3D6751", | "#FB4C03", | "#640FC1", | "#62C03E", | "#D3493A", | "#88AA0B", | "#406DF9", |
"#615AF0", | "#4BE47", | "#2A3434", | "#4A543F", | "#79BCA0", | "#A8B8D4", | "#00EFD4", |
"#7AD236", | "#7260D8", | "#1DEAA7", | "#06F43A", | "#823C59", | "#E3D94C", | "#DC1C06", |
"#F53B2A", | "#B46238", | "#2DFFF6", | "#A82B89", | "#1A8011", | "#436A9F", | "#1A806A", |
"#4CF09D", | "#C188A2", | "#67EB4B", | "#B308D3", | "#FC7E41", | "#AF3101", | "#FF065", |
"#71B1F4", | "#A2F8A5", | "#E23DD0", | "#D3486D", | "#00F7F9", | "#474893", | "#3CEC35", |
"#1C65CB", | "#5D1D0C", | "#2D7D2A", | "#FF3420", | "#5CDD87", | "#A259A4", | "#E4AC44", |
"#1BEDE6", | "#8798A4", | "#D7790F", | "#B2C24F", | "#DE73C2", | "#D70A9C", | "#25B67", |
"#88E9B8", | "#C2B0E2", | "#86E98F", | "#AE90E2", | "#1A806B", | "#436A9E", | "#0EC0FF", |
"#F812B3", | "#B17FC9", | "#8D6C2F", | "#D3277A", | "#2CA1AE", | "#9685EB", | "#8A96C6", |
"#DBA2E6", | "#76FC1B", | "#608FA4", | "#20F6BA", | "#07D7F6", | "#DCE77A", | "#77ECCA"] |
this is uppercase version of my initial post, for most of us that prefered it uppercase .
thank you,
Happy coding.
Thank you... Didn't want to start generating random colours with JS
Lol.
@Givemo
thanks man !
Thx!
very handy, thank you!😄
Yeap, just what I needed. Thanks
Yo.... reduce a lot code
Thanks
Thank bro 😄
Thanks bro. useful
Thanks so much
Hello All,
I am new to Javascript, I have gone past the initial stage. I am trying out some simple JS projects to improve my knowledge and I want to create a simple app that will allow me to display different colors by clicking a button. I plan on doing this by using an array. I want to display the actual colors, not the hex codes.
I would be forever grateful if anyone can come to my aid.
Thanks.
Hello All,
I am new to Javascript, I have gone past the initial stage. I am trying out some simple JS projects to improve my knowledge and I want to create a simple app that will allow me to display different colors by clicking a button. I plan on doing this by using an array. I want to display the actual colors, not the hex codes.
I would be forever grateful if anyone can come to my aid.
Thanks.
Javascript is used to manipulate data.
Use html/css to display the data for example: https://www.w3schools.com/cssref/pr_background-color.asp
'#'+(Math.random()*0xFFFFFF<<0).toString(16)
Nice. Love it.
wow, thanks a lot for. very handy!
Excellent, thanks!
thanks, so helpful!
Wow, Thx this is so helpful.❤️
@Saadlulu here is a version without the 10 invalid hex :
[
"#63b598", "#ce7d78", "#ea9e70", "#a48a9e", "#c6e1e8", "#648177", "#0d5ac1",
"#f205e6", "#1c0365", "#14a9ad", "#4ca2f9", "#a4e43f", "#d298e2", "#6119d0",
"#d2737d", "#c0a43c", "#f2510e", "#651be6", "#79806e", "#61da5e", "#cd2f00",
"#9348af", "#01ac53", "#c5a4fb", "#996635", "#b11573", "#4bb473", "#75d89e",
"#2f3f94", "#2f7b99", "#da967d", "#34891f", "#b0d87b", "#ca4751", "#7e50a8",
"#c4d647", "#e0eeb8", "#11dec1", "#289812", "#566ca0", "#ffdbe1", "#2f1179",
"#935b6d", "#916988", "#513d98", "#aead3a", "#9e6d71", "#4b5bdc", "#0cd36d",
"#250662", "#cb5bea", "#228916", "#ac3e1b", "#df514a", "#539397", "#880977",
"#f697c1", "#ba96ce", "#679c9d", "#c6c42c", "#5d2c52", "#48b41b", "#e1cf3b",
"#5be4f0", "#57c4d8", "#a4d17a", "#be608b", "#96b00c", "#088baf", "#f158bf",
"#e145ba", "#ee91e3", "#05d371", "#5426e0", "#4834d0", "#802234", "#6749e8",
"#0971f0", "#8fb413", "#b2b4f0", "#c3c89d", "#c9a941", "#41d158", "#fb21a3",
"#51aed9", "#5bb32d", "#21538e", "#89d534", "#d36647", "#7fb411", "#0023b8",
"#3b8c2a", "#986b53", "#f50422", "#983f7a", "#ea24a3", "#79352c", "#521250",
"#c79ed2", "#d6dd92", "#e33e52", "#b2be57", "#fa06ec", "#1bb699", "#6b2e5f",
"#64820f", "#21538e", "#89d534", "#d36647", "#7fb411", "#0023b8", "#3b8c2a",
"#986b53", "#f50422", "#983f7a", "#ea24a3", "#79352c", "#521250", "#c79ed2",
"#d6dd92", "#e33e52", "#b2be57", "#fa06ec", "#1bb699", "#6b2e5f", "#64820f",
"#9cb64a", "#996c48", "#9ab9b7", "#06e052", "#e3a481", "#0eb621", "#fc458e",
"#b2db15", "#aa226d", "#792ed8", "#73872a", "#520d3a", "#cefcb8", "#a5b3d9",
"#7d1d85", "#c4fd57", "#f1ae16", "#8fe22a", "#ef6e3c", "#243eeb", "#dd93fd",
"#3f8473", "#e7dbce", "#421f79", "#7a3d93", "#635f6d", "#93f2d7", "#9b5c2a",
"#15b9ee", "#0f5997", "#409188", "#911e20", "#1350ce", "#10e5b1", "#fff4d7",
"#cb2582", "#ce00be", "#32d5d6", "#608572", "#c79bc2", "#00f87c", "#77772a",
"#6995ba", "#fc6b57", "#f07815", "#8fd883", "#060e27", "#96e591", "#21d52e",
"#d00043", "#b47162", "#1ec227", "#4f0f6f", "#1d1d58", "#947002", "#bde052",
"#e08c56", "#28fcfd", "#36486a", "#d02e29", "#1ae6db", "#3e464c", "#a84a8f",
"#911e7e", "#3f16d9", "#0f525f", "#ac7c0a", "#b4c086", "#c9d730", "#30cc49",
"#3d6751", "#fb4c03", "#640fc1", "#62c03e", "#d3493a", "#88aa0b", "#406df9",
"#615af0", "#2a3434", "#4a543f", "#79bca0", "#a8b8d4", "#00efd4", "#7ad236",
"#7260d8", "#1deaa7", "#06f43a", "#823c59", "#e3d94c", "#dc1c06", "#f53b2a",
"#b46238", "#2dfff6", "#a82b89", "#1a8011", "#436a9f", "#1a806a", "#4cf09d",
"#c188a2", "#67eb4b", "#b308d3", "#fc7e41", "#af3101", "#71b1f4", "#a2f8a5",
"#e23dd0", "#d3486d", "#00f7f9", "#474893", "#3cec35", "#1c65cb", "#5d1d0c",
"#2d7d2a", "#ff3420", "#5cdd87", "#a259a4", "#e4ac44", "#1bede6", "#8798a4",
"#d7790f", "#b2c24f", "#de73c2", "#d70a9c", "#88e9b8", "#c2b0e2", "#86e98f",
"#ae90e2", "#1a806b", "#436a9e", "#0ec0ff", "#f812b3", "#b17fc9", "#8d6c2f",
"#d3277a", "#2ca1ae", "#9685eb", "#8a96c6", "#dba2e6", "#76fc1b", "#608fa4",
"#20f6ba", "#07d7f6", "#dce77a", "#77ecca"
]
here is an extended version :)
colors: [ "#63b598", "#ce7d78", "#ea9e70", "#a48a9e", "#c6e1e8", "#648177" ,"#0d5ac1" , "#f205e6" ,"#1c0365" ,"#14a9ad" ,"#4ca2f9" ,"#a4e43f" ,"#d298e2" ,"#6119d0", "#d2737d" ,"#c0a43c" ,"#f2510e" ,"#651be6" ,"#79806e" ,"#61da5e" ,"#cd2f00" , "#9348af" ,"#01ac53" ,"#c5a4fb" ,"#996635","#b11573" ,"#4bb473" ,"#75d89e" , "#2f3f94" ,"#2f7b99" ,"#da967d" ,"#34891f" ,"#b0d87b" ,"#ca4751" ,"#7e50a8" , "#c4d647" ,"#e0eeb8" ,"#11dec1" ,"#289812" ,"#566ca0" ,"#ffdbe1" ,"#2f1179" , "#935b6d" ,"#916988" ,"#513d98" ,"#aead3a", "#9e6d71", "#4b5bdc", "#0cd36d", "#250662", "#cb5bea", "#228916", "#ac3e1b", "#df514a", "#539397", "#880977", "#f697c1", "#ba96ce", "#679c9d", "#c6c42c", "#5d2c52", "#48b41b", "#e1cf3b", "#5be4f0", "#57c4d8", "#a4d17a", "#225b8", "#be608b", "#96b00c", "#088baf", "#f158bf", "#e145ba", "#ee91e3", "#05d371", "#5426e0", "#4834d0", "#802234", "#6749e8", "#0971f0", "#8fb413", "#b2b4f0", "#c3c89d", "#c9a941", "#41d158", "#fb21a3", "#51aed9", "#5bb32d", "#807fb", "#21538e", "#89d534", "#d36647", "#7fb411", "#0023b8", "#3b8c2a", "#986b53", "#f50422", "#983f7a", "#ea24a3", "#79352c", "#521250", "#c79ed2", "#d6dd92", "#e33e52", "#b2be57", "#fa06ec", "#1bb699", "#6b2e5f", "#64820f", "#1c271", "#21538e", "#89d534", "#d36647", "#7fb411", "#0023b8", "#3b8c2a", "#986b53", "#f50422", "#983f7a", "#ea24a3", "#79352c", "#521250", "#c79ed2", "#d6dd92", "#e33e52", "#b2be57", "#fa06ec", "#1bb699", "#6b2e5f", "#64820f", "#1c271", "#9cb64a", "#996c48", "#9ab9b7", "#06e052", "#e3a481", "#0eb621", "#fc458e", "#b2db15", "#aa226d", "#792ed8", "#73872a", "#520d3a", "#cefcb8", "#a5b3d9", "#7d1d85", "#c4fd57", "#f1ae16", "#8fe22a", "#ef6e3c", "#243eeb", "#1dc18", "#dd93fd", "#3f8473", "#e7dbce", "#421f79", "#7a3d93", "#635f6d", "#93f2d7", "#9b5c2a", "#15b9ee", "#0f5997", "#409188", "#911e20", "#1350ce", "#10e5b1", "#fff4d7", "#cb2582", "#ce00be", "#32d5d6", "#17232", "#608572", "#c79bc2", "#00f87c", "#77772a", "#6995ba", "#fc6b57", "#f07815", "#8fd883", "#060e27", "#96e591", "#21d52e", "#d00043", "#b47162", "#1ec227", "#4f0f6f", "#1d1d58", "#947002", "#bde052", "#e08c56", "#28fcfd", "#bb09b", "#36486a", "#d02e29", "#1ae6db", "#3e464c", "#a84a8f", "#911e7e", "#3f16d9", "#0f525f", "#ac7c0a", "#b4c086", "#c9d730", "#30cc49", "#3d6751", "#fb4c03", "#640fc1", "#62c03e", "#d3493a", "#88aa0b", "#406df9", "#615af0", "#4be47", "#2a3434", "#4a543f", "#79bca0", "#a8b8d4", "#00efd4", "#7ad236", "#7260d8", "#1deaa7", "#06f43a", "#823c59", "#e3d94c", "#dc1c06", "#f53b2a", "#b46238", "#2dfff6", "#a82b89", "#1a8011", "#436a9f", "#1a806a", "#4cf09d", "#c188a2", "#67eb4b", "#b308d3", "#fc7e41", "#af3101", "#ff065", "#71b1f4", "#a2f8a5", "#e23dd0", "#d3486d", "#00f7f9", "#474893", "#3cec35", "#1c65cb", "#5d1d0c", "#2d7d2a", "#ff3420", "#5cdd87", "#a259a4", "#e4ac44", "#1bede6", "#8798a4", "#d7790f", "#b2c24f", "#de73c2", "#d70a9c", "#25b67", "#88e9b8", "#c2b0e2", "#86e98f", "#ae90e2", "#1a806b", "#436a9e", "#0ec0ff", "#f812b3", "#b17fc9", "#8d6c2f", "#d3277a", "#2ca1ae", "#9685eb", "#8a96c6", "#dba2e6", "#76fc1b", "#608fa4", "#20f6ba", "#07d7f6", "#dce77a", "#77ecca"]
wow this came in really handy! thanks man :) @Saadlulu
This is nice: https://medialab.github.io/iwanthue/palettes/
There is also a newer version: https://medialab.github.io/iwanthue/
Thats super nice thanks 👍
thanks for array of colors dueds
Thank's a lot 🚀
I just need only 30 colors 😢