Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   сборка массива цветов и их оттенков!!! (https://javascript.ru/forum/misc/76437-sborka-massiva-cvetov-i-ikh-ottenkov.html)

laimas 12.03.2019 03:00

Цитата:

Сообщение от Блондинка
hex #008000, rgb 0,128,0 hsl 120,0,50

<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>

Блондинка 15.03.2019 06:24

laimas, так получается что правильный код зелёного цвета hsl 120,100,25 а не hsl 120,0,50...

laimas 15.03.2019 08:09

Цитата:

Сообщение от Блондинка
правильный код зелёного цвета

Вам какой зеленый нужен? Зеленый локальный, это #00ff00 или #0f0 из безопасного набора, rgb(0, 255, 0) или в процентах rgb(0%, 100%, 0%), hsl(120, 100%, 50%). А hsl(120, 0%, 50%), это из набора серой палитры будет.

В сети онлайн калькуляторов много, просто в них проверить то не сложно. Ну и формулы перевода цвета из одной цветовой модели в другую в сети описаны неоднократно.

Вряд ли вы на глаз сможете определить при конвертировании цвета погрешность, хотя женщины и видят больше цветовых оттенков чем мужчины. Разница, небольшая, конечно же будет даже при одной цветовой модели, поэтому и существуют безопасные веб цвета.

Блондинка 15.03.2019 10:25

laimas, периодически возникает необходимость подобрать несколько(10, 15, 20) оттенков одного цвета, например зелёного, от rgb 0 128 0 до rgb 40 128 40 например, только не могу найти подходящий онлайн сервис

Malleys 15.03.2019 10:35

Цитата:

Сообщение от laimas
из безопасного набора

Вообще-то эта концепция якобы «безопасных» цветов уже давно не применима на практике... (Это были цвета вида #xxx, где x ∈ { 0, 3, 6, 9, C, F }) В них нет необходимости, поскольку мониторы давным давно поддерживают миллионы цветов.

Конкретно для #008000, он же rgb(0, 128, 0), он же hsl(120, 100%, 25%) вы можете написать — green!

Цитата:

Сообщение от laimas
при конвертировании цвета погрешность

Вы можете использовать дробные значения тоже! (пример ниже)

Цитата:

Сообщение от laimas
женщины... видят больше цветовых оттенков, чем мужчины

Это скорей влияние культурных традиции, сложившиеся в обществе нормы предписывают им выбирать более темные, «скромные» и «солидные» оттенки. Из-за этого может притупляться цветовое восприятие...

Наслаждаясь цветом, наслаждайтесь цветом!

Таблица с оттенками... Вы с лёгкостью можете в этой таблице видеть 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, а получаем какой-то оттенок серого, или, так сказать чёрный с излучением. (мониторам есть куда развиваться, они явно ещё не удовлетворяют человеческие потребности)

laimas 15.03.2019 10:41

Цитата:

Сообщение от Блондинка
не могу найти подходящий онлайн сервис

Где ищем? :) Их полно, слету, сразу же - https://colorscheme.ru/color-converter.html

И почему именно 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.

Блондинка 15.03.2019 11:22

Цитата:

Сообщение от laimas
Где ищем? Их полно, слету, сразу же - https://colorscheme.ru/color-converter.html

в гугле ищу сервис, где можно задать первоначальный цвет, конечный цвет и количество шагов, а на выходе получить коды этих 20 цветов где 20 это количество шагов, ну как бы оттенки градиента от и до

рони 15.03.2019 11:36

Цитата:

Сообщение от Блондинка
где можно задать первоначальный цвет, конечный цвет и количество шагов

https://javascript.ru/forum/jquery/5...tml#post355108

laimas 15.03.2019 11:39

Цитата:

Сообщение от Malleys
Вообще-то эта концепция якобы «безопасных» цветов уже давно не применима на практике...

Да что вы говорите? Ну зачем теорию да к практике, где она ну никак не подтверждается.

Цитата:

Сообщение от Malleys
Это скорей влияние культурных традиции

Вы умный человек, ну тут несете какую-то пургу, это обусловлено физиологией, почитайте для интереса об этом.

laimas 15.03.2019 11:41

Цитата:

Сообщение от Блондинка
ериодически возникает необходимость подобрать несколько(10, 15, 20) оттенков одного цвета

Может тогда лучше воспользоваться готовыми наборами палитр?


Часовой пояс GMT +3, время: 05:18.