|
Статьи: |
В web-дизайне существует несколько способов представления цветаHEX – шестнадцатеричная система представления цвета по основанию 16. Для данной системы используются арабские десятичные цифры от 0 до 9 и латинские буквы от A до F для дополнения цифрового количества до 16. Для web-дизайна взяты 16 основных (ключевых) цветов, так называемый шестнадцатеричный код цвета #RRGGBB, где каждая пара отвечает за свою долю цвета: RR – красный, GG – зеленый и BB – синий. Каждая доля цвета находится в диапазоне от 00 до FF. Два других представления цвета в web-дизайне это: в виде RGB(*,*,*), где каждая «*» доля цвета представлена десятичными цифрами от 0 до 255 и по наименованиям цвета на английском языке. При создании цветного изображения главной проблемой является правильная передача цветов на разных типах компьтеров, мониторов и браузеров. Если браузер не может правильно отобразить цвет, то он подбирает похожий или смешивает несколько цветов. А иногда может заменить на какой-то совсем другой цвет. Таблица 16 основных цветов, которые используются во всех браузерах Таблица пурпурного цвета и его оттенков Таблица серого цвета и его оттенков |
persei100.narod.ru
Нет простой физической модели, которая будет делать это, цвета живописца имеют очень сложные взаимодействия со светом. К счастью, у нас есть компьютеры, которые не ограничиваются моделированием физического мира — мы можем заставить их делать любую произвольную вещь, которая нам нужна!
Первый шаг — создать цветовое колесо с распределением оттенков, которое нам нужно, с красным, желтым и синим с шагом 120 градусов. В Интернете много примеров. Я создал один здесь, который имеет только насыщенные цвета, так что его можно использовать для создания полной гаммы RGB. Цвета на колесе абсолютно произвольны; Я установил оранжевый (60 °) в (255,160,0), потому что средняя точка между красным и желтым была слишком красной, и я переместил чистый синий (от 0,0255) до 250 ° вместо 240 °, так что 240 ° Синий будет выглядеть лучше.
» />
» />Вспоминая эксперименты моего детства, когда вы смешиваете одинаковое количество красного, желтого и синего вместе, вы получаете нечеткий коричневато-серый цвет. Я выбрал подходящий цвет, который вы можете увидеть в центре цветового круга; в коде я ласково называю это «грязью».
Чтобы получить каждый мыслимый цвет, который вам нужен больше, чем красный, желтый и синий, вам также нужно смешать белый и черный. Например, вы получаете Pink, смешивая красный и белый, и вы получаете Brown, смешивая оранжевый (желтый + красный) с черным.
Преобразование работает с отношениями, а не с абсолютными числами. Как и в случае с реальной краской, нет разницы между смешением 1 части красного и 1 части желтого, против 100 частей красного и 100 частей желтого цвета.
Код представлен в Python, но его трудно преобразовать в другие языки. Самая сложная часть — добавление красного, желтого и синего цветов для создания угла оттенка. Я использую векторное сложение и конвертирую обратно в угол с atan2. Почти все остальное выполняется с линейной интерполяцией (lerp).
# elementary_colors.py from math import degrees, radians, atan2, sin, cos red = (255, 0, 0) orange = (255, 160, 0) yellow = (255, 255, 0) green = (0, 255, 0) cyan = (0, 255, 255) blue = (0, 0, 255) magenta = (255, 0, 255) white = (255, 255, 255) black = (0, 0, 0) mud = (94, 81, 74) colorwheel = [(0, red), (60, orange), (120, yellow), (180, green), (215, cyan), (250, blue), (330, magenta), (360, red)] red_x, red_y = cos(radians(0)), sin(radians(0)) yellow_x, yellow_y = cos(radians(120)), sin(radians(120)) blue_x, blue_y = cos(radians(240)), sin(radians(240)) def lerp(left, right, left_part, total): if total == 0: return left ratio = float(left_part) / total return [l * ratio + r * (1.0 - ratio) for l,r in zip(left, right)] def hue_.
* blue_x)) rgb = hue_to_rgb(hue) rgb = lerp(mud, rgb, min(r, y, b), max(r, y, b)) gray = lerp(white, black, w, w+k) rgb = lerp(rgb, gray, r+y+b, r+y+b+w+k) return int_rgb(rgb) qaru.site
4. Цветовой контраст
Существует семь типов цветовых контрастов:
1. Контраст по тону.
2. Контраст светлого и тёмного.
3. Контраст холодных(синий, фиолетовый) и тёплых(оранжевый, красный, желтый) цветов.
(Зеленый цвет может относится и к теплым и к холодным цветам, в зависимости от того,
какого цвета в нем больше, желтого или синего).
4. Контраст дополнительных цветов (противоположные в круге Иттена).
5. Симультанный контраст — это создание иллюзии дополнительного цвета на соседнем
оттенке.
6. Контраст цветового насыщения (один цвет: яркий, а второй блеклый).
7. Контраст количества цвета по соотношению к другому цвету.
5. Как составить свою палитру цветов
Ниже описан лайфхак по выбору цвета от Лауры Элизабет. Всю статью можно прочитать тут.
Выбор основного цвета
В нашем распоряжении имеется 10 миллионов цветов, но нам необходимо выбрать всего один. Этот цвет будет основным для нашего бренда.
Необходимо обосновывать выбор цвета. Несколько советов, как выбрать основной цвет:
Используйте то, что у вас есть. Если у клиента уже есть логотип с установленным цветом, то обычно это и будет начальный цвет.
Ликвидируйте цвета ваших конкурентов. Если у одного из ваших сильных конкурентов есть свой фирменный цвет бренда, то не нужно его копировать. Найдите цвета конкурентов, и удалите их из собственных цветовых схем.
Подумайте о вашей целевой аудитории. Цвета для сайтов похоронного бюро и детского сада, скорее всего, должны очень отличаться. Подумайте, кто будет использовать сайт, и как вы хотите, чтобы они его воспринимали.
Но не становитесь заложником стереотипов. Если вы разрабатываете сайт для молодых девушек, вы не должны использовать розовый. Избегайте клише, чтобы завоевать доверие.
Играйте в «слова». Если вы топчитесь на месте, запишите все слова, которые вы связываете с бизнесом клиента. Подбирайте ассоциации, пока не дойдете до самых простых вещей, которые можно ассоциировать с цветом.
Вам нужно выбрать чистый цвет, такие как красный, синий, зеленый, голубой, розовый и тд.
Далее перейдите на сайт Dribbble или Designspiration и нажмите на “Colors”, перед вами появится палитра цветов.
pikabu.ru
