#cdb891 схемы шестнадцатеричных кодов цветов, графики, палитры и краски

Цветовая палитра

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

Основной (primary) цвет — для ссылок, фона кнопок и т. п. Призывает к действию

Акцент — для выделения чего-то важного на странице. Не должен быть вариацией основного цвета

Шкала нейтральных цветов — обычно шкала серого тона для шрифтов, рамок, теней и т. п. Цвета для обратной связи с пользователем: успех, ошибка, предупреждение.

Некоторые из этих цветов требуются в разных версиях (более темных/светлых) для обозначения интерактивности элементов, например, при наведении курсора (hover).

CSS

:root {
/* main colors */
–color-primary: #4D84F4;
–color-primary-light: color-mod(var(–color-primary) tint(15%));
–color-primary-dark: color-mod(var(–color-primary) shade(15%));
–color-primary-bg: color-mod(var(–color-primary) alpha(20%));

–color-accent: #f5414f;
–color-accent-light: color-mod(var(–color-accent) tint(15%));
–color-accent-dark: color-mod(var(–color-accent) shade(10%));
–color-accent-bg: color-mod(var(–color-accent) alpha(20%));

// shades – generated using chroma.js – 12 steps
–black: #1d1d21;
–gray-10: #2e2e31;
–gray-6: #7b7a7d;
–gray-4: #a5a5a6;
–gray-3: #bbbbbc;
–gray-2: #d1d0d2;
–gray-1: #e8e7e8;
–white: white;

/* feedback */
–color-success: #88c459;
–color-error: #f5414f;
–color-warning: #ffd137;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

:root {

/* main colors */

–color-primary#4D84F4;

–color-primary-lightcolor-mod(var(–color-primary)tint(15%));

–color-primary-darkcolor-mod(var(–color-primary)shade(15%));

–color-primary-bgcolor-mod(var(–color-primary)alpha(20%));

–color-accent#f5414f;

–color-accent-lightcolor-mod(var(–color-accent)tint(15%));

–color-accent-darkcolor-mod(var(–color-accent)shade(10%));

–color-accent-bgcolor-mod(var(–color-accent)alpha(20%));

//shades-generatedusingchroma.js-12steps

–black#1d1d21;

–gray-10#2e2e31;

–gray-6#7b7a7d;

–gray-4#a5a5a6;

–gray-3#bbbbbc;

–gray-2#d1d0d2;

–gray-1#e8e7e8;

–whitewhite;

/* feedback */

–color-success#88c459;

–color-error#f5414f;

–color-warning#ffd137;

}

Примечание: для перевода цветовых функций в кроссбраузерный RGBA-формат используется плагин postcss-color-mod-function.

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

Как сочетается светло-розовый с другими цветами

Светло-розовый сочетается с другими цветами либо в пастельные гаммы, либо контрастно. Тут может быть и яркостной контраст, тепловой или световой. Для вас представлены таблицы сочетания с этим цветом.
____________________________________

Сочетание светло-розового с розовым – выразительная и эффектная гамма не смотря на то, что это оттенки одного тона. Конечно, предпочтительней фуксия и ее родственники: яркие, насыщенные, но и другие цвета будут кстати. Рассмотрите пары с розово-персиковым, коралловым, фламинговым, фуксией, пурпурно-розовым.

Сочетание: светло-розового и красного — необычное, яркое, удивительное. Женственно-розовый с элегантным красным — контрастная пара по светлоте, яркости. Даже не смотря на то, что цвета имеют общие корни, комбинация выглядит самодостаточной. Палитра составлена из светло-красного, красно-оранжевого, кармина, рубинового, винного.

Светло-розовый и оранжевый сочетается в мягкую, но колоритную пару. Легкие, оранжевые оттенки рядом с нежно-розовыми, как закатный отблеск: ненавязчивый, теплый, сочный.

Рассмотрите комбинации основного тона с персиковым, оранжево-коралловым, медным, темно-оранжевым, рыжим.

Сочетание светло-розового и желтого — чаще всего переплетаются в пастельную гамму: легкую, достойную младенца. Она озарена светом, абсолютно чистая, сладкая, как зефир или сладкая вата. Для создания этой гаммы мы взяли ванильные, кукурузные, пшеничные, ярко-золотые, янтарные цвета.

Сочетание светло-розового и теплого зеленого — еще одно приятное, насыщенное сочетание, подсказанное нам природой: как бутоны яблоневого цвета с первыми листиками согреттых солнцем. В комбинации участвуют: зеленый горошек, лайм, зелено-оливковый, мох, хвойный тон.

Светло-розовый с холодным зеленым – сочетание построенное на контрасте теплого и холодного. Чем светлее изумрудно-зеленый тон, тем нежнее гамма, чем он темнее — тем пара контрастней по светлоте. Очень гармоничная комбинация с такими оттенками, как цвет воды, светлый серо-зеленый, полынь, изумрудный, изумрудно-зеленый.

Сочетание светло-розового и синего, голубого — одно из самых популярных комбинаций. Сочетание голубого с нежно-розовым даже удостоилось представлять цветовое направление 2016 года. Темно-синий, как строгий, серьезный и трепетно-розовый контраст не только теплого — холодного, темного — светлого, но и сильного — слабого. Возможно и вам понравятся пары с небесно-голубым, сизым, джинсовым, темно-сине-зеленым, черничным.

Сочетание светло-розового с фиолетовым — эстетичная, приятная, нежная пара. Она может быть легкой, как, например, с бледно-сиреневым, сине-сиреневым, сиренево-аметистовым цветом, так и дерзкой, как с ежевичным, виноградным. Очень женственная, загадочная, легкая комбинация.

Светло-розовый и коричневый. Мягкие оттенки коричневого подчеркнут колорит основного цвета, темные — вступят в насыщенный контраст. Эта пара, на подобии розово-синего: противопоставление грубого — легкого, приземленного — воздушного. Для примера сочетания с цветом дуба, светло-коричневого,
орехового, сепии, шоколадного.

Светло-розовый сочетается с нейтральными тонами:

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

Сочетание светло-розового в палитрах

Обаятельный ковбой

Ковбойские сапоги из розовой замши, как произведение искусства подчеркивающий этнос и настоящее положение женщины в нем. Особый шик придает потертая поверхность под ними: бежевое дерево, обшарпанная молочная краска, все это вносит винтажный шик. Эта нежная палитра составленная из белого, оттенка сакуры, бледно-фламингового, темно-лилового, светлый-серо-бежевого, темно-коричневого.

Нежный закат

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

Мышиный горошек

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

Яблоневый цвет

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

Чем хороша эта система?

Прежде всего, она опирается всего на два основных цвета: основной и акцентный (и при необходимости дополнительный), которые просто запомнить.

Оттенки серого именуются в зависимости от насыщенности — чем темнее, тем больше число. Если выглядит слишком светлым, можно попробовать . Возможно, вы заметили, что некоторые оттенки отсутствуют (например, ). Они не используются ни в одном компоненте, поэтому их можно просто удалить.

Семантические цвета добавлены по трем основным причинам:

Файл становится центральным пунктом управления всеми цветами. Если вы решили, что заголовки должны быть темнее, просто откройте его и измените переменную .
Если вы устанавливаете цвет рамки, то вам не нужно искать, какой оттенок серого использовался для рамки других компонентов. Аналогично и со всем остальными цветовыми свойствами.
Для простого создания и управления разными цветовыми темами.

Светло-розовый цвет в интерьере

Как уже говорилось в «значении цвета» — этот оттенок истинно женский. Его стоит использовать только «по назначению». Мужчины в помещении светло-розового оттенка будут чувствовать себя краснее не уютно, а жить они там ни за что не согласятся (если только у них нет женских наклонностей). А вот розовенькую спальню посетят с удовольствием. Так же этот цвет прописан для девичьей деткой комнаты. Помимо этого в этот список попадают женские салоны красоты, массажные, женские клубы и т. д.
Рассмотрим женскую спальню.
Маленькая принцесса выросла и превратилась в девушку. Винтажный стиль наиболее приближен к сказочному, но смотрится достаточно взросло.
Золотая кованная кровать с атласным одеялом амарантового цвета и декоративными подушками: с золотыми паетками, белым искусственным мехом и двумя основными – амарантовыми. Основное белье – белое, розовое или бежевое — в мелкий цветочек. Прикроватный столик с гнутыми ножками розовый или белый. Прикроватный светильник с классическим абажуром цвета яйца дрозда, с золотой ножкой.
Занавески из атласной ткани амарантовые (будут хорошо смотреться ламбрикены), тюль в мелкий цветочек.
Напольное покрытие темно-лилового цвета. Шкаф золотой дуб, на крайней случай бук. Кресло на гнутых ножках амарантового цвета с розовой подушкой. В этом же стиле туалетный столик. И, конечно же, винтажные аксессуары, например картина холодных оттенков.

Другие сочетания цвета в светло-розовом интерьере

ПОСМОТРЕТЬ СОЧЕТАНИЯ С ДРУГИМИ ОТТЕНКАМИ СВЕТЛО-РОЗОВОГО (нажать на цвет)

ПОЛЕЗНЫЕ СТАТЬИ НА ЭТУ ТЕМУ (нажать на картинку)

<?php /* the_tags( );*/ ?>

Темизация

Как только появится возможность использовать переменные CSS без плагинов и полифиллов*, создание цветовых тем станет очень простым! Значит ли это, что сейчас мы не можем создавать темы? Не значит. У нас есть два варианта.

*авторы статьи используют плагин postcss-css-variables для компиляции CSS переменных. В настоящее время он не поддерживает обновление переменных в CSS-классах.

Вариант 1 — обновлять переменные в любом случае.

Браузеры, которые не поддерживают переменные, будут показывать цветовую тему «по умолчанию». Это не проблема, пока контент доступен.

Например, дефолтная тема — черный шрифт на белом фоне, а темная тема () — белый шрифт на черном фоне.

CSS

@supports(–css: variables) {
.theme–dark {
–component-background: var(–black);
–color-border: var(–gray-6);
–color-text: var(–gray-4);
–color-text-heading: var(–white);
}
}

1
2
3
4
5
6
7
8
9
10

@supports(–css: variables) {

.theme–dark {

–component-backgroundvar(–black);

–color-bordervar(–gray-6);

–color-textvar(–gray-4);

–color-text-headingvar(–white);

}

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

Вариант 2 ориентирован на все элементы, внешний вид которых зависит от темы.

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

CSS

.theme–dark {
color: var(–gray-1);

h1, h2, h3, h4 {
color: var(–white);
}

.text–subtle {
color: var(–gray-4);
}

a {
color: var(–color-accent);
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.theme–dark {

colorvar(–gray-1);

h1, h2, h3, h4 {

colorvar(–white);

}

.text–subtle {

colorvar(–gray-4);

}

a {

colorvar(–color-accent);

}

Добавление семантических цветов

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

CSS

/* feedback */
–color-success: #88c459;
–color-error: #f5414f;
–color-warning: #ffd137;

/* typography */
–color-text: var(–gray-10);
–color-text-heading: var(–black);
–color-text-subtle: var(–gray-6);
–color-link: var(–color-primary);
–color-link-visited: var(–color-primary-dark);
–color-mark: var(–color-accent-bg);
–color-blockquote-border: var(–gray-2);

/* border */
–color-border: var(–gray-2);

/* body */
–color-body: var(–white);

/* forms */
–form-element-border: var(–color-border);
–form-element-border-focus: var(–color-primary);
–form-element-border-error: var(–color-error);
–form-element-bg: var(–white);
–form-text-placeholder: var(–gray-4);

/* buttons */
–btn-primary-bg: var(–color-primary);
–btn-primary-hover: var(–color-primary-light);
–btn-primary-active: var(–color-primary-dark);
–btn-primary-label: var(–white);

/* icons */
–color-icon-primary: var(–gray-4);
–color-icon-secondary: inherit;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

:root {

/* main colors */

–color-primary#4D84F4;

–color-primary-lightcolor-mod(var(–color-primary)tint(15%));

–color-primary-darkcolor-mod(var(–color-primary)shade(15%));

–color-primary-bgcolor-mod(var(–color-primary)alpha(20%));

–color-accent#f5414f;

–color-accent-lightcolor-mod(var(–color-accent)tint(15%));

–color-accent-darkcolor-mod(var(–color-accent)shade(10%));

–color-accent-bgcolor-mod(var(–color-accent)alpha(20%));

//shades-generatedusingchroma.js-12steps

–black#1d1d21;

–gray-10#2e2e31;

–gray-6#7b7a7d;

–gray-4#a5a5a6;

–gray-3#bbbbbc;

–gray-2#d1d0d2;

–gray-1#e8e7e8;

–whitewhite;

/* feedback */

–color-success#88c459;

–color-error#f5414f;

–color-warning#ffd137;

/* typography */

–color-textvar(–gray-10);

–color-text-headingvar(–black);

–color-text-subtlevar(–gray-6);

–color-linkvar(–color-primary);

–color-link-visitedvar(–color-primary-dark);

–color-markvar(–color-accent-bg);

–color-blockquote-bordervar(–gray-2);

/* border */

–color-bordervar(–gray-2);

/* body */

–color-bodyvar(–white);

/* forms */

–form-element-bordervar(–color-border);

–form-element-border-focusvar(–color-primary);

–form-element-border-errorvar(–color-error);

–form-element-bgvar(–white);

–form-text-placeholdervar(–gray-4);

/* buttons */

–btn-primary-bgvar(–color-primary);

–btn-primary-hovervar(–color-primary-light);

–btn-primary-activevar(–color-primary-dark);

–btn-primary-labelvar(–white);

/* icons */

–color-icon-primaryvar(–gray-4);

–color-icon-secondaryinherit;

}

Светло-розовый цвет в одежде

Этот оттенок розового прекрасно смотрится на блондинках цветотипа «весна». Но стоит аккуратно им пользоваться: не переполнять им гардероб, не ходить в нем на работу, и тем более на деловые встречи. Помните, сексуальность этого оттенка в его непорочности. Светло-розовое платье с грудью на выкат как раз и наводит на мысль о глупой блондинке. В стиле «скромница» юбка должна быть как минимум по колено.

Отдельного внимания стоит светло-розовый оттенок на цветотипе «зима». Если «весне» это цвет идет по «родству»: чистый, теплый, то «зиме» — по контрасту. Этот тон создаст хороший контраст с темными волосами, яркими глазами и губами «зимы». И как не крути, образ наивной девушки не получится, скорее Белоснежки. Сочетать «зима» светло-розовый должна с темными и яркими оттенками, такими как фиолетовый, коричневый, синий, темно-лиловый, черный и т.д.

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

Давайте рассорим подробнее каждый вариант.

Черный цвет придает основному тону не только контраст, но и яркость, даже если это бледный оттенок.

Если добавить к черному еще и белый, пара (то есть трио) станет более гармоничной и менее навязчивой.

Светло-серые оттенки — идеальный компаньон к светло-розовому: выводя его на первый план, он подчеркивает его нежность и легкость.

Белый иллюзорно делает розовый тон светлее, и, в то же время, чище.

Светло бежевый цвет вносит шик, а так же толику надменности, заслоняя собой легкомысленность розового.

Сочные, желто-коричневые тона придают колорита, а более холодные — вносят строгость.

Часто в сочетание с коричневым добавляют джинсово-синий цвет, что делает комбинацию более стильной.

Темно-синие тона — это выгодный контраст и внесение серьезного элемента в образ.

Ярко-синий заставит засиять ваш вид.

Джинсово-голубые, васильково-голубые, небесно-голубые тона — отличный выбор в пару нежно-розовому. Летняя, колоритная, стильная, она вошла в моду и стала романтической классикой.