сборка массива цветов и их оттенков!!!
Коллеги, доброго времени суток, суть такая, для проекта нужно собрать массив цветов.
Например, берем цвет зеленый, и нужно получить какое-то кол-во его оттенков. на выходе должно быть так:
let colors = {
green: [
// и тут то самое кол-во его оттенков.
]
}
Как собрать массив я в курсе!!! Вопрос именно как получить оттенки? Под оттенками я полагаю изменение черного, типа светлее темнее. Входящий цвет в любом формате hex / rgb. выходной цвет также. Переводить цвета, можно так:
hexToRGB(hex) {
let c;
if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
c = hex.substring(1).split('');
if(c.length == 3){
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
}
c = `0x` + c.join('');
return [(c>>16)&255, (c>>8)&255, c&255];
}
return [];
}
Откопал в сети. Подскажите кто в курсе, или куда смотреть по крайней мере. Заранее благодарю. |
Так?
var colors=[[255,0,0],[0,255,0]],
shades=[];
colors.forEach(function(color,index){
shades[index]=[];
let counter=255;
while(counter){
shades[index][counter--]=color.map(function(val){
return !val?val:val-counter;
});
};
});
console.log(shades);
|
Nexus, минутку!!!
|
Nexus, если поставить например 228,60,30 то дальше будут отрицательные значения
|
Роман Андреевич, скрипт перед вами, поправьте.
|
Nexus, да я просто поделился. Спасибо
|
Nexus, тут еще вопрос в том, я пытаюсь понять как вообще оттенки изменяются??? Темнее, потом еще темнее и так далее.
Как сам процесс происходит |
Цитата:
потом либо конвертить обратно в rgb (если это надо), либо использовать напрямую - background-color: hsl(60,100%,25%); https://webref.ru/css/value/color |
Alexandroppolus, большое спасибо, разобрался!!!
|
Решила воздержаться от создания новой темы, вопрос собсна о том как правильно перевести цвет из rgb в hsl и обратно, например есть зелёный (hex #008000, rgb 0,128,0 hsl 120,0,50) или темно-синий (hex #000080 rgb 0,0,128 hsl 240,0,50) вопрос собсна почему когда на странице прописываешь цвет в rgb, он получается одного оттенка, а когда прописываешь в hsl тот же самый цвет он получается совсем другого оттенка?
|
Цитата:
<html>
<head>
<style>
div {
width: 100px;
height: 40px;
margin: 10px;
}
</style>
</head>
<body>
<div style="background: #008000;"></div>
<div style="background: rgb(0, 128, 0);"></div>
<div style="background: hsl(120, 100%, 25%);"></div>
</body>
</html>
|
laimas, так получается что правильный код зелёного цвета hsl 120,100,25 а не hsl 120,0,50...
|
Цитата:
В сети онлайн калькуляторов много, просто в них проверить то не сложно. Ну и формулы перевода цвета из одной цветовой модели в другую в сети описаны неоднократно. Вряд ли вы на глаз сможете определить при конвертировании цвета погрешность, хотя женщины и видят больше цветовых оттенков чем мужчины. Разница, небольшая, конечно же будет даже при одной цветовой модели, поэтому и существуют безопасные веб цвета. |
laimas, периодически возникает необходимость подобрать несколько(10, 15, 20) оттенков одного цвета, например зелёного, от rgb 0 128 0 до rgb 40 128 40 например, только не могу найти подходящий онлайн сервис
|
Цитата:
Конкретно для #008000, он же rgb(0, 128, 0), он же hsl(120, 100%, 25%) вы можете написать — green! Цитата:
Цитата:
Наслаждаясь цветом, наслаждайтесь цветом! Таблица с оттенками... Вы с лёгкостью можете в этой таблице видеть 500 оттенков цветного...
<body><script>
document.body.style.background =
`linear-gradient(to bottom, ${
Array.from({ length: 5 }, (_, i) => `hsla(0, 0%, ${100-50*(1+Math.abs(i-2.1)/(i-2.1))}%, ${Math.abs(-.33*i+.67)}) 0 ${100*(i+1) / 5}%`).join(", ")
}), linear-gradient(to right, ${
Array.from({ length: 100 }, (_, i) => `hsl(${360 * i / 100}, 100%, 50%) 0 ${i}%`).join(", ")
})`;
</script></body>
Вы видите же все прямоугольники? Это только микроскопическая часть того, что даёт цвет. Даже такой простой материал, как асфальт, переливается миллиардами оттенков синего, фиолетового, красного... даже таких названий не придумано для такого богатства отображения цветов реального мира! (Смотреть на настоящий асфальт, а не на скудную на цвета фотографию, хотя фотография продвинулась далеко вперёд, но ей ещё слишком далеко до полного воспроизведения цветов места съёмки) Однажды мне показывали пластину с супер-супер-супер-супер-супер-чёрным материалом, я теперь думаю, как же это так, мы пишем #000, а получаем какой-то оттенок серого, или, так сказать чёрный с излучением. (мониторам есть куда развиваться, они явно ещё не удовлетворяют человеческие потребности) |
Цитата:
И почему именно hsl, чем не угодил rgb? Цветовые модели, это всего лишь представления, и если не говорить о печати, где главенствует CMYK, а о мониторах, то в конечном итоге это все равно будет 00000000 - FFFFFFFF. Думаете что rgb удобнее потому, что можно задать альфа канал (rgba), ну его можно задать и в HEX представлении, это всего лишь четвертый байт описывающий цвет в 24-ой палитре.
<html>
<head>
<style>
.a {
position: relative;
}
.b {
position: absolute;
top: 0;
left: 60px;
width: 100%;
height: 100%;
background-color: #6aff0054;
z-index: 1;
}
</style>
</head>
<body>
<div class="a"><div class="b"></div><img src="https://vinilable.ru/image/cache/data-fotooboi-priroda-alleya-v-cvetah-128x128.jpg" /></div>
</body>
</html>
А вот оперировать цветом при выполнении некоторых задач удобнее в HSL/HSB. |
Цитата:
|
Цитата:
|
Цитата:
Цитата:
|
Цитата:
|
Цитата:
|
Блондинка,
вам для чего это, для задания градиента или "дизайнерские муки" в подборе палитры? |
И результат выводился в виде кодов цветов в hex формате или в нескольких форматах hex rgb hsl
|
В фотошопе работали с заливками, знаете его инструмент для градиентов? Вот, например, онлайн подобный инструмент, который выдаст и css конечный.
http://flatonika.ru/css-gradient-generator-onlajn/ А вам для чего этот набор? |
laimas,
Образно, есть див с текстом в 20-30 строчек, первая строчка должна быть красной, последняя синей, а промежуточные соответственно каждая своего оттенка от и до |
Цитата:
|
Цитата:
|
laimas, забыл выделить слово образно, перед вставкой в цитату
|
Цитата:
|
Совсем недавно после успешного изменения цвета ссылок и замены одной ссылки на текст в меню, я вручную подбирала зелёные цвета для 20 ссылок, где соседние визуального не отличаются друг от друга, но разница очень заметна между первой и двадцатой
|
Блондинка, если у вас 20 уровней вложенности, значит у вас что-то не то с навигацией, даже для справочника это очень большой уровень вложенности.
|
Все-таки женская логика не поддается логике. :)
Речь идет о каком-то сервисе в котором нужно указать крайние цвета и какие-то шаги. Ладно, для чего-то это надо, допустим. Но как это все вяжется с текстом в меню (количество не важно), если все одни должны в общем-то, по уму, иметь один цвет? Открываем отладчик браузера, выбираем нужный элемент (будем надеяться, что эти ссылки имеет какой либо класс или как-то иначе описаны как группа в css), выбираем определенный цвет и двигаем его ползунки как угодно, пока не получим нужного для всех результата. А вообще, есть готовые наборы палитр, как раз для дизайнеров. |
Nexus,
просто ты не знаком с таксономией нашей флоры и фауны |
Цитата:
Приведите, пожалуйста, пример адреса страницы с 20-м уровнем вложенности. |
Цитата:
|
Цитата:
|
Цитата:
document.querySelectorAll('a').forEach(function(node){
node.style.color='rgb('+[0,0,0].map(function(){
return Math.floor(
Math.random()*256
);
}).join(',')+')';
});
|
Nexus,
Если кратко Kingdom Plantae – plantes, Planta, Vegetal, plants Subkingdom Viridiplantae – green plants Infrakingdom Streptophyta – land plants Superdivision Embryophyta Division Tracheophyta – vascular plants, tracheophytes Subdivision Spermatophytina – spermatophytes, seed plants, phanérogames Class Magnoliopsida Superorder Caryophyllanae Order Caryophyllales Family Cactaceae Juss. – cactus, cacti Genus Mammillaria Haw. – pincushion cactus, globe cactus, fishhook cactus Species Mammillaria elongata DC. Direct Children: Subspecies Mammillaria elongata ssp. echinaria (DC.) D.R. Hunt Subspecies Mammillaria elongata ssp. elongata DC. |
Блондинка, я пример адреса просил.
|
а есть ещё подтрибы, надтрибы, формы, подформы, гибриды и так далее
|
| Часовой пояс GMT +3, время: 19:37. |