Если добавить белый цвет, получится оттенок. Вот и всё. Розовый — это оттенок красного. Небесно-голубой — это оттенок синего. Пастельные тона — это оттенки чего-то более насыщенного.

Путаница возникает из-за того, что в разговорной речи люди используют термины «оттенок» и «тень» как синонимы. В теории цвета они противоположны. Тень добавляет черный цвет. Тон добавляет серый. Оттенок добавляет белый. Три разных операции, три разных результата. Дизайнер, работающий в HSL, может создать оттенок, повысив значение яркости. Художник добавляет белый пигмент.

Оттенки в системах проектирования

• При наведении курсора на объект, цвет которого будет светлее базового.
• Создавайте фоновые цвета, которые остаются в одной цветовой гамме.
• Создайте ощущение легкости, мягкости или располагающей атмосферы.
• Создайте визуальную иерархию, не меняя оттенок.

Многие дизайн-системы создают шкалу оттенков на основе одного базового цвета, обычно состоящую из десяти ступеней от почти белого до почти черного. Material Design и Руководство по проектированию пользовательского интерфейса Apple используют шкалы оттенков. Преимущество заключается в единообразии. Каждый светло-голубой цвет в системе создается по одному и тому же рецепту. Недостаток — монотонность, если шкала используется без вариаций. Оттенки лучше всего работают в сочетании с сильным опорным цветом в композиции.