Испытание: палитра [14/14]

Курсы §28. Знакомство с LESS
1

Созрел вопрос.Цвета в нижнем окошке и верхнем у меня отличаются. Но это меня не удивляет. Но все же интересует, есть ли какой-то математический подход к определению цвета, ибо подбирать наугад с учетом того, что монитор цвет передает по-разному, очень долго. Допустим, с цветом 3 и 6 еще хоть более-менее понятно (я думаю, тут spin требуется). А вот, например, цвет 1 и 2. Первый цвет
rgb(0,116,217), второй rgb(90,178,217). Вот по этим цифрам я могу по какой-либо математической формуле понять, что нужно делать с цветом (осветлять или затемнять, делать насыщеннее) и на сколько %? Если с 1и 2 еще более-менее понятно, что надо осветлять, то с 4 и 5 мне не понятно что делать.

И еще вопрос: можно ли использовать такую комбинацию: background-color: darken(spin(@color-3,260),20%);

1 лайк
2

Комбинировать можно по разному, формула наверное есть, но я делал подбором по своим ощющениям, плюс бесконечные проверки дажт преимущество, сделали проверили различия посмотрели, сходится значит все супер:clap::slight_smile:

3

я вот тут подбирала цвета и случайно нажала на проверку. результат правильный (не подчеркивается красным), но при этом я вижу АБСОЛЮТНО разные цвета. Надо искать формулку таки, а то вырви-глаз какой-то получается.

4

Потому что там картинка вставлена, а вас веб паллитра, поэтом все выглядит не одинаково, что шрифты что цвета:)

5

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

6

Ну к этому уроку я уже свыкся с этой мыслью:smile:

1 лайк
7

94% выполнения - кто подскажет как сделать 100%

@color-1: #0074d9;
@color-2: lighten(@color-1, 30);
@color-3: #ff4136;
@color-4: desaturate(@color-5, 40%);
@color-5: #2ecc40;
@color-6: spin(@color-3, 270);
@color-7: #ffdc00;
@color-8: desaturate(@color-7, 40%);
@color-9: darken(spin(@color-6, -5), 30);
8

А какие конкретно цвета не сходятся?

9

мне кажется что последний 9 блок

10

Посмотрите вкладку “Различия”.

11

@color-1: #0074d9;
@color-2: lighten(@color-1, 25%);
@color-3: #ff4136;
@color-4: desaturate(@color-5, 30%);
@color-5: #2ecc40;
@color-6: spin(@color-3, -100);
@color-7: #ffdc00;
@color-8: darken(@color-7, 15%);
@color-9: darken(spin(@color-3, -100), 20%);

(исправил на spin без %)

12

решение, конечно интересное, но угол поворота у spin - он в градусах измеряется, а не в процентах

13

опс…спасибо за важное замечание)

а не знаете, почему тогда компилируется?

14

просто в этом случае значение вообще указывается без единиц измерения (но подразумеваются все же градусы) - так что ваш значок процентов, очевидно, препроцессором просто проигнорировался :slight_smile:

15

да, вполне логично) запомню)

16

@color-1: #0074d9;
@color-2: lighten(@color-1, 25%);
@color-3: #ff4136;
@color-4: desaturate(@color-5, 30%);
@color-5: #2ecc40;
@color-6: spin(@color-3, 260);
@color-7: #ffdc00;
@color-8: darken(@color-7, 15%);
@color-9: darken(@color-6, 20%);

1 лайк
17

У меня что-то странное с 9-м квадратом: вместо затемнения 6-го цвета я получаю светло-серый квадрат! Который, по мере увеличения %, становится тёмно-серым. А функция spin (ради теста) на нём вообще не работает! Подскажите, пожалуйста, что не так? Некоторое время назад я уже делал его, было всё нормально!
UPD: понял свою ошибку, спасибо! :slight_smile:

18

Один из вариантов, в браузере можно вызвать панель разработчика (F12). А в ней есть пипетка для захвата цвета со страницы.

http://s018.radikal.ru/i526/1710/5d/b3c18a9fe085t.jpg

19

у меня тоже цвета не совпадают, открыл инструменты разработчика
открыл картинку в новой вкладке
пипеткой определил цвет, поставил его в соседнию ячейку и быстрее подобрал код чем с первыми 2мя

20

Вот на 100

@color-1: #0074d9;
@color-2: lighten(@color-1, 25%);
@color-3: #ff4136;
@color-4: desaturate(@color-5, 30%);
@color-5: #2ecc40;
@color-6: spin(@color-3, -100);
@color-7: #ffdc00;
@color-8: darken(@color-7, 15%);
@color-9: darken(@color-6, 20%);