Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 12.03.2019, 03:00
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,157

Сообщение от Блондинка
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>
Ответить с цитированием
  #12 (permalink)  
Старый 15.03.2019, 06:24
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 170

laimas, так получается что правильный код зелёного цвета hsl 120,100,25 а не hsl 120,0,50...
Ответить с цитированием
  #13 (permalink)  
Старый 15.03.2019, 08:09
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,157

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

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

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

Последний раз редактировалось laimas, 15.03.2019 в 08:19.
Ответить с цитированием
  #14 (permalink)  
Старый 15.03.2019, 10:25
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 170

laimas, периодически возникает необходимость подобрать несколько(10, 15, 20) оттенков одного цвета, например зелёного, от rgb 0 128 0 до rgb 40 128 40 например, только не могу найти подходящий онлайн сервис
Ответить с цитированием
  #15 (permalink)  
Старый 15.03.2019, 10:35
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 612

Сообщение от 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, а получаем какой-то оттенок серого, или, так сказать чёрный с излучением. (мониторам есть куда развиваться, они явно ещё не удовлетворяют человеческие потребности)
Ответить с цитированием
  #16 (permalink)  
Старый 15.03.2019, 10:41
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,157

Сообщение от Блондинка
не могу найти подходящий онлайн сервис
Где ищем? Их полно, слету, сразу же - 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.
Ответить с цитированием
  #17 (permalink)  
Старый 15.03.2019, 11:22
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 170

Сообщение от laimas
Где ищем? Их полно, слету, сразу же - https://colorscheme.ru/color-converter.html
в гугле ищу сервис, где можно задать первоначальный цвет, конечный цвет и количество шагов, а на выходе получить коды этих 20 цветов где 20 это количество шагов, ну как бы оттенки градиента от и до
Ответить с цитированием
  #18 (permalink)  
Старый 15.03.2019, 11:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,555

Сообщение от Блондинка
где можно задать первоначальный цвет, конечный цвет и количество шагов
https://javascript.ru/forum/jquery/5...tml#post355108
Ответить с цитированием
  #19 (permalink)  
Старый 15.03.2019, 11:39
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,157

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

Сообщение от Malleys
Это скорей влияние культурных традиции
Вы умный человек, ну тут несете какую-то пургу, это обусловлено физиологией, почитайте для интереса об этом.
Ответить с цитированием
  #20 (permalink)  
Старый 15.03.2019, 11:41
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,157

Сообщение от Блондинка
ериодически возникает необходимость подобрать несколько(10, 15, 20) оттенков одного цвета
Может тогда лучше воспользоваться готовыми наборами палитр?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите , элементы массива по порядку из другого массива Rost_shat Javascript под браузер 9 28.07.2018 21:03
Соединение массива Artur_Hopf Общие вопросы Javascript 4 07.06.2018 17:48
Обход многомерного массива с задержкой после каждого цикла Walk Общие вопросы Javascript 2 14.08.2017 17:17
Помогите к js коду, написать html код Modrih Элементы интерфейса 8 16.06.2015 19:08
Сортировка массива по возрастанию другого массива. vas88811 Events/DOM/Window 4 12.01.2014 09:31