Палитры сидс: Палитра цветов (157 фото) »

CSS

Android

Blue 1100

#002138

JS

Sass

CSS

Android

Teal 300

#7dead5

JS

Sass

CSS

Android

Teal 500

#08C4B2

JS

SASS

CSS

Android

Teal 700

#0B968F

JS

SASS

CSS

ивид

TASS

CSS

ивид

CSS

и 2

CSS

и 2

00

#026661

JS

Sass

CSS

Android

purple

Purple 300

#c1c1f7

JS

Sass

CSS

Android

Purple 500

#9180f4

JS

SASS

CSS

Android

Purple 700

#6F5ED3

JS

SASS

CSS

Android

9009

#483A9. 9.9.9.9.9.9.9.9.9.9.9.9.9c

JS

Sass

CSS

Android

yellow

Yellow 300

#ffe16e

JS

Sass

CSS

Android

Yellow 500

#ffcd1c

JS

Sass

CSS

Android

RED 400

#FF7F6E

JS

SASS

CSS

Android

RED 700

#DB3E3E

JS

.0003

Sass

CSS

Android

Pink 300

#ff95c1

JS

Sass

CSS

Android

Pink 500

#ef588b

JS

Sass

CSS

Android

Розовый 800

#b22f5b

JS

Sass

CSS

Android

Основные цвета

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

Помимо зеленого цвета Sprout, наши основные цвета включают белый и темно-синий. Их следует использовать для баланса, контраста и сплоченности.

Зеленый 700 — основа фирменного стиля. Используйте Green 700 для основных действий и кнопок, ссылок, для индикации прогресса и представления аутентификации.

Белый цвет следует использовать по мере необходимости, чтобы обеспечить доступность и простоту связи. Используйте белый цвет для фона, текста и в качестве акцента.

Синий 1100 — базовый цвет, который можно рассматривать как нейтральный. Используйте Blue 1100 для фона, декоративного шрифта и в качестве акцента.

Использование основных цветов

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

до

Стремитесь включить присутствие зеленого цвета Sprout (Green 700) в композиции с помощью цветовой заливки, призыва к действию или логотипа в виде листа.

нет

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

Основные цвета

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

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

Teal 900 является сильным дополнением к Green 700. Его можно использовать, когда вы хотите сильное присутствие зеленого, но Green 700 кажется слишком ярким.

Бирюзовый 500 — это основной цвет, который можно использовать для фона и больших заливок. Он сохраняет контрастность и хорошо сочетается с Teal 900 и Blue 1100.

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

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

Розовый 300 — уверенный основной цвет, который уравновешивает холодные цвета. Розовый 300 хорошо сочетается с Бирюзовым 900 и Красным 700.

Красный 400 — доступный основной цвет, обладающий гостеприимным очарованием. Используйте Red 400 экономно и целенаправленно.

Красный 700 — смелый основной цвет, обладающий мощным эффектом. Используйте Red 700 экономно и целенаправленно.

Использование основного цвета

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

до

Соблюдайте стандарты доступности и поддерживайте надлежащий контраст при наложении цвета на цвет.

нет

Позволяет цвету вибрировать при наложении цвета на цвет.

Примеры палитры бренда

Гуманистическая палитра

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

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

• Загрузите файл .ase здесь.
• Получите доступ к библиотеке Creative Cloud здесь.

База R100

#F5D7CD

JS

База Y100

#F2CDAE

JS

База R300

#F2BD9E

JS

Base P300

#EAADA4

JS

Base P500

#CE979A

JS

Base R500

#CF897C

JS

Base B500

#B58A7C

JS

Base Y500

#8D6A56

JS

Base B700

#725E5F

JS

Base Y700

#784F44

JS

accent

Accent Y300

#F5D58F

JS

Accent R700

#B7574B

JS

Accent B900

#484D5C

JS

Accent P900

#604856

JS

Humanistic color palette usage

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

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

Особые советы по использованию

Цвет кожи

Выберите из палитры основных цветов Humanistic. При использовании определенного базового цвета убедитесь, что вы знаете основной тон (Y-желтый, R-красный, P-розовый или B-синий) и согласуйте его с одеждой, волосами и другими соответствующими цветами на человеке. Например, человек с оттенком кожи с желтым подтоном может выглядеть не очень хорошо в желтой рубашке.

Краска для волос

Цвета для волос можно получить из базовых цветов, акцентных цветов или стандартной цветовой палитры бренда. Главное — убедиться, что цвет волос достаточно визуально отличается от цвета кожи, чтобы свести к минимуму вибрацию цвета. Если есть сцена с несколькими людьми, обязательно выберите количество разных цветов волос, которые вы используете, потому что это может нарушить целостность цветовой схемы. Попробуйте использовать некоторые из существующих красок бренда в качестве красок для волос, чтобы уменьшить количество одноразовых красок для волос.

Губная помада

Так как губная помада может очень сильно влиять на цвет и визуально представляет собой гораздо меньший пример использования цвета, проще всего взять цвета Brand и Humanistic и использовать напрямую (кто-то с ярко-красной помадой может использовать Accent R300) или наложение существующий цвет палитры Бренда поверх тона кожи, используемого на человеке.

Цвет глаз

Цвета глаз можно легко получить из цветовой палитры Brand для более яркого цвета глаз (зеленые и голубые глаза) или из палитры оттенков кожи для более нейтрального цвета глаз (карие и коричневые). Однако в большинстве случаев из-за масштаба иллюстрации и людей на ней не будет видимой радужной оболочки, а цвет глаз можно просто нарисовать в виде круга.

Цветовая палитра продукта

Действия

Первичный CTA

Вторичный CTA

ПРЕДУПРЕЖДЕНИЕ

Тип

Введите шестнадцатеричное значение цвета, чтобы найти ближайший соответствующий маркер цвета Seeds.

Preview

Hex Color

Полная цветовая палитра

Зеленый 0

#ebf9eb

JS

Sass

CSS

Android

Green 100

#d7f4d7

JS

Sass

CSS

Android

Green 200

#c2f2bd

JS

Sass

CSS

Android

Green 300

#98E58E

JS

SASS

CSS

Android

Green 400

#75DD66

JS

0003

Sass

CSS

Android

Green 500

#59cb59

JS

Sass

CSS

Android

Green 600

#2bb656

JS

Sass

CSS

Android

Green 700

#0CA750

JS

SASS

CSS

Android

Green 800

#008B46

JS

SASS

CSS

0002 Android

Green 900

#006b40

JS

Sass

CSS

Android

Green 1000

#08422f

JS

Sass

CSS

Android

Green 1100

#002b20

JS

SASS

CSS

Android

Blue 0

#E9F8FF

JS

SASS

CSS

Android

Blue 100

JS

Sass

CSS

Android

Blue 200

#c7e4f9

JS

Sass

CSS

Android

Blue 300

#a1d2f8

JS

Sass

CSS

Android

Blue 400

#56ADF5

JS

SASS

CSS

Android

Blue 500

#3896E3

JS

CSS

Android

Blue 600

#2b87d3

JS

Sass

CSS

Android

Blue 700

#2079c3

JS

Sass

CSS

Android

Blue 800

#116DAA

JS

SASS

CSS

Android

Blue 900

#0C5689

JS

SASS

CSS

ивид

CSS

и 2

Blue 1000

#0a3960

JS

Sass

CSS

Android

Blue 1100

#002138

JS

Sass

CSS

Android

Aqua 0

#d9fcfb

JS

SASS

CSS

Android

Aqua 100

#C5F9F9

JS

SASS

CSS

Android

Aqua 200

#5F2F2

Aqua 200

#5F2

#5F2

Aqua 200

#5F2 9000

JS

Sass

CSS

Android

Aqua 300

#76e5e2

JS

Sass

CSS

Android

Aqua 400

#33d6e2

JS

Sass

CSS

Android

Aqua 500

#17B8CE

JS

SASS

CSS

Android

Aqua 600

#0797ae

JS

Sass

CSS

JS

CSS

JS

CSS

JS

. 0003

Android

Aqua 700

#0b8599

JS

Sass

CSS

Android

Aqua 800

#0f6e84

JS

Sass

CSS

Android

Aqua 900

# 035E73

JS

SASS

CSS

Android

Aqua 1000

#083D4F

JS

SASS

CSS

Android

Aqua 11009

CSS

и проушитель

Aqua 11002

CSS

и Произ.0003

#002838

JS

Sass

CSS

Android

purple

Purple 0

#f2f2f9

JS

Sass

CSS

Android

Purple 100

#eaeaf9

JS

SASS

CSS

Android

Purple 200

#D8D7F9

JS

SASS

CSS

Android

Purple 300

#C1C1F7

Purple 300

#C1C1F7

9000

JS

Sass

CSS

Android

Purple 400

#a193f2

JS

Sass

CSS

Android

Purple 500

#9180f4

JS

Sass

CSS

Android

Purple 600

#816FEA

JS

SASS

CSS

Android

Purple 700

#6F5ED3

JS

SASS

#6F5ED3

JS

#6F5ED3

JS

CSS

Android

Purple 800

#5e4eba

JS

Sass

CSS

Android

Purple 900

#483a9c

JS

Sass

CSS

Android

Purple 1000

#2D246B

JS

SASS

CSS

Android

Purple 1100

#1D1D38

JS

SASS

CSS

ивид

CSS

ивид

CSS

ивид

CSS

ивид

0003

neutral

Neutral 0

#FFFFFF

JS

Sass

CSS

Android

Neutral 100

#f3f4f4

JS

Sass

CSS

Android

Neutral 200

# DEE1E1

JS

SASS

CSS

Android

Нейтральный 300

#C8CCCC

JS

SASS

CSS

Android

ГВЕТА 4009

CSS

4009 9003

CSS

4009 9000

#b0b6b7

JS

Sass

CSS

Android

Neutral 500

#929a9b

JS

Sass

CSS

Android

Neutral 600

#6e797a

JS

Sass

CSS

Android

Нейтральный 700

#515E5F

JS

SASS

CSS

Android

Нейтральный 800

#364141

JS

. 0003

Sass

CSS

Android

Neutral 900

#273333

JS

Sass

CSS

Android

Neutral 1000

#162020

JS

Sass

CSS

Android

Нейтральный 1100

#040404

JS

SASS

CSS

Android

Тил 0

#E5F9F5

JS

CSS

Android

Teal 100

#cdf7ef

JS

Sass

CSS

Android

Teal 200

#b3f2e6

JS

Sass

CSS

Android

Teal 300

# 7dead5

JS

SASS

CSS

Android

Тил 400

#24E0C5

JS

SASS

CSS

Android

Teal 500

CSS

Teal 500 9000

#08c4b2

JS

Sass

CSS

Android

Teal 600

#00a99c

JS

Sass

CSS

Android

Teal 700

#0b968f

JS

Sass

CSS

Android

Teal 800

#067c7c

JS

Sass

CSS

Android

Teal 900

#026661

JS

Sass

CSS

Android

Teal 1000

#083f3f

JS

Sass

CSS

Android

Teal 1100

#002528

JS

Sass

CSS

Android

Pink 0

#FFE9F3

JS

SASS

CSS

Android

Pink 100

#FCDBEB

JS

SASS

CSS

ивид

CSS

ивид

0003

Pink 200

#FFB5D5

JS

SASS

CSS

Android

#FF95C1

JS

9 JS

SASS

CSS

Android

Pink 500

#EF588B

JS

SASS

CSS

Android

Pink 600

#E0447C

#E0447C

9000

#E0447C

#E0447C

JS

Sass

CSS

Android

Pink 700

#ce3665

JS

Sass

CSS

Android

Pink 800

#b22f5b

JS

Sass

CSS

Android

Pink 900

#931847

JS

SASS

CSS

Android

PINK 1000

#561231

JS

SASS

JS

CSS

Android

Pink 1100

#2b1721

JS

Sass

CSS

Android

#ffeae9

JS

Sass

CSS

Android

Red 100

#ffd5d2

JS

SASS

CSS

Android

RED 200

#FFB8B1

JS

SASS

CSS

Android

RED 300

#FF1c8f

JS

Sass

CSS

Android

Red 400

#ff7f6e

JS

Sass

CSS

Android

Red 500

#f76054

JS

Sass

CSS

Android

RED 600

#ED4C42

JS

SASS

CSS

Android

RED 700

#DB3E3E

JS

SASS

#db3e3e

JS

#DB3E3E

JS

#DB3E3E

JS

#DB3E3E

. 0002 CSS

Android

Red 800

#c63434

JS

Sass

CSS

Android

Red 900

#9

JS

Sass

CSS

Android

Red 1000

#6D1313

JS

SASS

CSS

Android

RED 1100

#2B1111

JS

SASS

CSS

ивид

Orange

CSS

ивид

Orange

Orange

Orchan0003

Orange 0

#ffede3

JS

Sass

CSS

Android

Orange 100

#fcdccc

JS

Sass

CSS

Android

Orange 200

#ffc6a4

JS

SASS

CSS

Android

Orange 300

#FFB180

JS

SASS

CSS

Android

Orange 400

#FF9.c5d

JS

Sass

CSS

Android

Orange 500

#fc8943

JS

Sass

CSS

Android

Orange 600

#f57d33

JS

Sass

CSS

Android

Orange 700

#ED7024

JS

SASS

CSS

Android

Orange 800

#CE5511

JS

Sass

#CE5511

JS

CSS

Android

Orange 900

#962c0b

JS

Sass

CSS

Android

Orange 1000

#601700

JS

Sass

CSS

Android

Orange 1100

#2D130E

JS

SASS

CSS

Android

Yellow

Yellow 0

#FFF8E2

JS

SASS

CSS

JS

CSS

Android

Yellow 100

#fdefcd

JS

Sass

CSS

Android

Yellow 200

#ffe99a

JS

Sass

CSS

Android

Yellow 300

# FFE16E

JS

SASS

CSS

Android

Yellow 400

#FFD943

JS

SASS

CSS

Android

Желтый 5009

CSS

ЖЕЛЕЙ 500 9000

ЖЕЛЕЙ 500 9000 9000 2

CSS

ЖЕЛЕЙ 500 9000

CSS

Yellow 500 9000

CSS

. 0003

#ffcd1c

JS

Sass

CSS

Android

Yellow 600

#ffbc00

JS

Sass

CSS

Android

Yellow 700

#dd9903

JS

Sass

CSS

Android

Yellow 800

#BA7506

JS

SASS

CSS

Android

Yellow 900

#944C0C

JS

Sass

CSS

Android

Yellow 1000

#542a00

JS

Sass

CSS

Android

Yellow 1100

#2d1a05

JS

Sass

CSS

Android

Magenta

Magenta 0

#Fef0ff

JS

SASS

CSS

Android

Magenta 100

#F9E3FC

JS

SASS

JS

SASS

CSS

Android

Magenta 200

#f4c4f7

JS

Sass

CSS

Android

Magenta 300

#edadf2

JS

Sass

CSS

Android

Magenta 400

#F282F5

JS

SASS

CSS

Android

Magenta 500

#DB61DB

JS

SASS

CSS

ивид

SASS

CSS

ивид

CSS 9000

и Жид. 0003

Magenta 600

#c44eb9

JS

Sass

CSS

Android

Magenta 700

#ac44a8

JS

Sass

CSS

Android

Magenta 800

#8f3896

JS

SASS

CSS

Android

Magenta 900

#6C2277

JS

SASS

CSS

Android

Magenta 1000

#451551

JS

Sass

CSS

Android

Magenta 1100

#29192d

JS

Sass

CSS

Android

network

twitter

#1da1f2

JS

SASS

CSS

Android

Twitter, как

#E0245E

JS

SASS

CSS

Android

Facebook

#217BEE 9bee

Facebook

#217BE0003

JS

Sass

CSS

Android

facebook audience network

#58409B

JS

Sass

CSS

Android

linkedin

#0A66C2

JS

Sass

CSS

Android

Instagram

#E4405F

JS

SASS

CSS

Android

Feedly

#2BB24C

JS

SASS

#2BB24C

JS

0003

CSS

Android

analytics

#ef6c00

JS

Sass

CSS

Android

youtube

#ff0000

JS

Sass

CSS

Android

messenger

# 0084ff

JS

SASS

CSS

Android

Snapchat

#FFFC00

JS

SASS

CSS

0002 pinterest

#E60023

JS

Sass

CSS

Android

reddit

#ff4500

JS

Sass

CSS

Android

tumblr

#35465c

JS

Sass

CSS

Android

Google My Business

#4285F4

JS

SASS

CSS

Android

TripAdvisor

#00b087

0003

JS

Sass

CSS

Android

glassdoor

#0CAA41

JS

Sass

CSS

Android

apple app store

#17C8F5

JS

Sass

CSS

Android

магазин Google Play

#01875F

JS

Sass

CSS

Android

бизнес-сообщения Google

0 J0S7

2 #1A00003

Sass

CSS

Android

salesforce

#1589EE

JS

Sass

CSS

Android

zendesk

#03363D

JS

Sass

CSS

Android

hubspot

#FF7A59

JS

SASS

CSS

Android

Microsoft Dynamics

#002050

JS

SASS

CSS

JS

CSS

0003

Android

shopify

#96bf48

JS

Sass

CSS

Android

#FF1A1A

JS

Sass

CSS

Android

whatsapp

#25D366

JS

SASS

CSS

Android

Tiktok

#000000

JS

SASS

CSS

Android