Серый как у apple код цвета

Apple iPhone Colors

Apple iPhone HTML Hex, RGB and CMYK Color Codes

The Apple iPhone colors are categorized according to their models and series. Use this Apple iPhone color compilation for digital or print projects that need to use specific color values to match their company color palette. Find the rest of your favorite brand color codes on this website.

iPhone 11 Pro Color Values

PANTONE: PMS P 175-14 C (Nearest Match)
Hex Color: #4e5851;
RGB: (78,88,81)
CMYK: (67,51,60,32)
Buy Matching Paint

PANTONE: PMS P 152-1 C (Nearest Match)
Hex Color: #ebebe3;
RGB: (235,235,277)
CMYK: (7,4,9,0)
Buy Matching Paint

PANTONE: PMS P 172-14 C (Nearest Match)
Hex Color: #535150;
RGB: (83,81,80)
CMYK: (63,57,57,34)
Buy Matching Paint

PANTONE: PMS P 34-1 C (Nearest Match)
Hex Color: #fad7bd;
RGB: (250,215,189)
CMYK: (1,17,24,0)
Buy Matching Paint

iPhone 11 Color Values

PANTONE: PMS P 92-9 C (Nearest Match)
Hex Color: #d1cdda;
RGB: (209,205,218)
CMYK: (16,16,6,0)
Buy Matching Paint

PANTONE: PMS 931 C (Nearest Match)
Hex Color: #ffe681;
RGB: (255,230,129)
CMYK: (1,7,60,0)
Buy Matching Paint

PANTONE: PMS P 127-2 C (Nearest Match)
Hex Color: #aee1cd;
RGB: (255,230,129)
CMYK: (1,7,60,0)
Buy Matching Paint

PANTONE: PMS 179-16 C (Nearest Match)
Hex Color: #1f2020;
RGB: (31,32,32)
CMYK: (73,66,65,74)
Buy Matching Paint

PANTONE: PMS P 1-1 C (Nearest Match)
Hex Color: #f9f6ef;
RGB: (249,246,239)
CMYK: (1,2,5,0)
Buy Matching Paint

PANTONE: PMS 200 C (Nearest Match)
Hex Color: #ba0c2e;
RGB: (186,12,46)
CMYK: (18,100,88,9)
Buy Matching Paint

iPhone XR Color Values

PANTONE: PMS 292 C (Nearest Match)
Hex Color: #5eb0e5;
RGB: (174,255,205)
CMYK: (31,0,24,0)
Buy Matching Paint

PANTONE: PMS P 1-1 C (Nearest Match)
Hex Color: #f9f6ef;
RGB: (249,246,239)
CMYK: (1,2,5,0)
Buy Matching Paint

PANTONE: PMS 179-16 C (Nearest Match)
Hex Color: #1f2020;
RGB: (31,32,32)
CMYK: (73,66,65,74)
Buy Matching Paint

PANTONE: PMS 122 C (Nearest Match)
Hex Color: #f3d060;
RGB: (243,208,296)
CMYK: (5,16,74,0)
Buy Matching Paint

PANTONE: PMS 2344 C (Nearest Match)
Hex Color: #ee7762;
RGB: (238,119,98)
CMYK: (2,66,61,0)
Buy Matching Paint

PANTONE: PMS 7628 (Nearest Match)
Hex Color: #a5282c;
RGB: (165,40,44)
CMYK: (24,95,91,19)
Buy Matching Paint

iPhone XS Color Values

PANTONE: PMS 179-16 C (Nearest Match)
Hex Color: #1f2020;
RGB: (31,32,32)
CMYK: (73,66,65,74)
Buy Matching Paint

PANTONE: PMS P 30-1 C (Nearest Match)
Hex Color: #f5ddc5;
RGB: (245,221,197)
CMYK: (3,13,22,0)
Buy Matching Paint

PANTONE: PMS 10101 C (estimated)
Hex Color: #e4e4e2;
RGB: (228,228,226)
CMYK: (9,7,8,0)
Buy Matching Paint

iPhone X Color Values

PANTONE: PMS 10101 C (Nearest Match)
Hex Color: #e4e4e2;
RGB: (228,228,226)
CMYK: (9,7,8,0)
Buy Matching Paint

PANTONE: PMS 426 C
Hex Color: #25282a;
RGB: (37,40,42)
CMYK: (74,65,62,67)
Buy Matching Paint

iPhone 8 Color Values

PANTONE: PMS 10101 C (Nearest Match)
Hex Color: #e4e4e2;
RGB: (228,228,226)
CMYK: (9,7,8,0)
Buy Matching Paint

PANTONE: PMS 426 C
Hex Color: #25282a;
RGB: (37,40,42)
CMYK: (74,65,62,67)
Buy Matching Paint

PANTONE: PMS P 30-1 C (Nearest Match)
Hex Color: #f5ddc5;
RGB: (245,221,197)
CMYK: (3,13,22,0)
Buy Matching Paint

iPhone 7 Colors

PANTONE: PMS 179-16 C (Nearest Match)
Hex Color: #1f2020;
RGB: (31,32,32)
CMYK: (73,66,65,74)
Buy Matching Paint

PANTONE: PMS 10101 C (Nearest Match)
Hex Color: #e4e4e2;
RGB: (228,228,226)
CMYK: (9,7,8,0)
Buy Matching Paint

PANTONE: PMS 482
Hex Color: #dfccb7;
RGB: (223,204,183)
CMYK: (12,18,26,0)
Buy Matching Paint

PANTONE: PMS 503 C (Nearest Match)
Hex Color: #e6c7c2;
RGB: (230,199,194)
CMYK: (8,22,17,0)
Buy Matching Paint

Источник

Серый как у apple код цвета

Color is a great way to impart vitality, provide visual continuity, communicate status information, give feedback in response to user actions, and help people visualize data. Look to the system’s color scheme for guidance when picking app accent colors that look great individually and in combination, and adapt well to accessibility and appearance modes.

Don’t rely solely on color to differentiate between objects or communicate important information. If your app uses color to convey information, be sure to provide text labels or glyph shapes so users with colorblindness or other visual disabilities can understand it.

Use color judiciously for communication. The power of color to call attention to important information is heightened when used sparingly. For example, a red triangle that warns of a critical problem becomes less effective when red is used elsewhere in an app for noncritical reasons.

Consider choosing a limited color palette that coordinates with your app logo. Subtle use of color is a great way to communicate your brand.

Consider choosing a color to indicate interactivity throughout your app. In Notes, interactive elements are yellow; in Calendar, interactive elements are red. If you define an accent color that denotes interactivity, make sure other colors in your app don’t compete with it.

Provide two versions of your accent color to make sure it looks good in both light and dark modes. When you use a system color for your accent color, you get automatic support for both appearance modes.

Avoid using the same color for interactive and noninteractive elements. If interactive and noninteractive elements have the same color, it’s hard for people to know where to tap.

Consider how artwork and translucency affect nearby colors. Variations in artwork sometimes warrant changes to nearby colors to maintain visual continuity and prevent interface elements from becoming overpowering or underwhelming. Maps, for example, displays a light color scheme when in map mode but switches to a dark color scheme when in satellite mode. Colors can also appear different when placed behind or applied to a translucent element like a toolbar.

Test your app’s color scheme under a variety of lighting conditions. Lighting varies significantly both indoors and outdoors, based on room ambiance, time of day, the weather, and more. Colors you see on your computer won’t always look the same when your app is used in the real world. Always preview your app under multiple lighting conditions, including outdoors on a sunny day, to see how colors appear. If necessary, adjust colors to provide the best possible viewing experience in the majority of use cases.

Consider how the True Tone display affects color. The True Tone display uses ambient light sensors to automatically adjust the white point of the display to adapt to the lighting conditions of the current environment. Apps that focus primarily on reading, photos, video, and gaming can strengthen or weaken this effect by specifying a white point adaptivity style. For developer guidance, see UIWhitePointAdaptivityStyle.

Consider how your use of color might be perceived in other countries and cultures. In some cultures, for example, red communicates danger; in others, red has positive connotations. Make sure the colors in your app send the appropriate message.

Avoid using colors that can make it hard for people to perceive content in your app. For example, a colorblind user might not be able to distinguish some color combinations, and insufficient contrast can cause icons and text to blend with the background and make content hard to read for users with visual disabilities. For guidance, see Color and Contrast.

System Colors

iOS offers a range of system colors that automatically adapt to vibrancy and changes in accessibility settings like Increase Contrast and Reduce Transparency. The system colors look great individually and in combination, on both light and dark backgrounds, and in both light and dark appearances.

Don’t hard-code system color values in your app. The color values provided below are intended for reference during your app design process. The actual color values may fluctuate from release to release, based on a variety of environmental variables. Always use the API to apply system colors; for developer guidance, see UIColor (UIKit) and Color (SwiftUI).

Источник

Разбираемся с цветами, палитрами, фильтрами CSS и не только

Этот материал — карманный справочник о том, как работать с цветом в CSS и вебе в целом. Он начинается с теоретических основ и содержит множество инструментов и примеров работы с градиентами, анимацией, SVG и не только.

Статья будет полезна и новичку, и специалисту с опытом. За подробностями приглашаем под кат, пока у нас начинается курс по Frontend-разработке.

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

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

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

До знаменитого эксперимента Исаака Ньютона считалось, что цвет содержится в объектах, а не отражается или поглощается ими. Ньютон при помощи призмы доказал теорию о том, что солнечный свет состоит из нескольких цветов. Он разделил цвета призмой — получилась радуга.

Затем Ньютон попытался разделить синий цвет, но синий не разделился. Это означало, что цвет не находится внутри призмы, а, скорее, призма разделяет свет. То есть при аддитивном смешивании цветов в мониторе красный, зелёный и синий цвета могут использоваться, чтобы получить все цвета. При таком смешивании красный и зелёный цвета создают жёлтый.

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

Художники использовали этот тип частоты света ещё до того, как у нас появились мониторы. Сёра и пуантилисты использовали красный и зелёный цвета, чтобы получить жёлтый, на таких картинах, как «La Grande Jatte» (хотя сам Сёра предпочитал термин «хромо-люминаризм»). Другие люди называют подход дивизионизмом.

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

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

Битовая глубина 2 даст 4 цвета, и так далее, пока мы не достигнем битовой глубины 32, хотя обычно мониторы, отображающие веб-страницы, имеют плотность 24 битовой глубины и 16 777 216 цветов, — это True Color и альфа-канал.

True Color называется так потому, что наши глаза различают 10 000 000 уникальных цветов, а значит, 24-бит, безусловно, позволяет это. В этой 24-битной глубине по 8 бит отводится на красный, зелёный и синий цвета. Остальные используются для прозрачности или альфа-каналов.

Значения цвета

Последний раздел иллюстрирует, что rbga(x, x, x, y); передаёт информацию, но давайте разберём цветовые значения немного подробнее и покажем некоторые другие свойства и их использование. Цвета в канале RGB задаются в диапазоне 0-255.

Hex (шестнадцатеричные цвета)

Шестнадцатеричные цвета — это немного другой формат для представления значений тем же способом. И это, пожалуй, самый распространённый способ обозначения цвета в Интернете.

Если вы помните, что байт — это 8 бит, каждый цвет или число Hex представляет собой байт. Цвет задаётся в соответствии с интенсивностью его красного, зелёного и синего компонентов. Эти три значения называются триплетом.

Один байт представляет собой число в диапазоне от 00 до FF (в шестнадцатеричной системе счисления) или от 0 до 255 в десятичной системе счисления. Первый байт — красный, творой байт — зелёный, а байт 3 — синий.

Шестнадцатеричная система называется так потому, что в ней используется система оснований 16. В качестве значений используются диапазоны от 0-9 и от A-F, причём 0 — наименьшее значение, а F — наибольшее, то есть #00000 — чёрный, а #FFFFFF — белый.

Для триплетов с повторяющимися значениями можно устранить повторение, написав их сокращённо, например, #00FFFF становится #0FF . Если вы собираетесь работать с цветами глубже, немного лучше читается HSL.

Значения hsl работают с диапазонами, как и RGB, но вместо того, чтобы работать со значениями, соответствующими логике интерпретации монитора, значения hsl — это оттенок, насыщенность, светлота. Похоже на значения RGB, но диапазоны отличаются. Эта система основана на колориметрической системе Манселла (он был первым, кто разделил цвет на эти три канала, или создал трёхмерную систему, основанную на математических принципах, привязанных к человеческому зрению).

Трёхмерное представление HSL

Оттенок вращается на 360 градусов, полный круг, а насыщенность и светлота — это проценты от 0 до 100. Представьте себе колесо, в центре которого находится плотное и насыщенное содержимое. Эта демонстрация довольно хорошо отражает систему.

https://css-tricks.com/examples/HSLaExplorer/

Если вы не особенно опытны в работе с цветом, hsla() позволяет использовать некоторые довольно простые правила для приятных эффектов для разработчиков. Подробнее об этом — в разделе “Генеративный цвет”.

Именованные цвета

Именованные цвета имеют репутацию неудобных из-за неточных названий.

Самые яркие, «знаменитые» примеры: тёмно-серый на самом деле светлее серого, а лайм и лайм-грин — совершенно разные цвета. Есть даже игра, где нужно угадать название цвета в вебе, созданная Крисом Хеилманном.

В давние времена chucknorris был кроваво-красным цветом (сейчас он поддерживается только в HTML, насколько я могу судить), это был мой любимый цвет.

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

Переменные цвета

Хорошая практика — хранить переменные цвета и никогда не использовать их напрямую, вместо этого отображая их на переменные с более осмысленными именами, вот так:

На момент написания этой статьи в браузерах Microsoft переменных не было. Препроцессоры CSS тоже поддерживают переменные, поэтому вы можете установить переменные типа $brandPrimary или отображение:

Помните, что именование здесь очень важно. Абстрактное именование иногда полезно, чтобы при изменении переменной, которая представляла синий цвет, на оранжевый, вам не пришлось переименовывать все значения цвета. Или, что хуже, повесить табличку с надписью «$blue теперь оранжевый».

currentColor

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

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

Препроцессоры

Для настройки цветов отлично подходят препроцессоры CSS. Вот несколько ссылок на документацию по цветовым функциям различных препроцессоров:

А ниже несколько интересных вещей, которые мы можем сделать с помощью Sass:

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

Свойства цвета

Как свойство CSS color относится к цвету шрифта. Если вы задаёте цвет для большой области, то используете background-color , а в случае SVG-элемент работаете с fill . Border — это граница вокруг элемента HTML, а stroke — аналог этой границы в SVG.

Прямоугольник и тень текста

Свойства box-shadow и text-shadow принимают значение цвета. Тени текста принимают 2 или 3 значения, h-shadow (горизонтальная тень), v-shadow (вертикальная тень) и необязательный радиус размытия.

Тени прямоугольника принимают 2 или 4 значения, h-shadow , v-shadow , дополнительное расстояние размытия и дополнительное расстояние распространения. Вы также можете обозначить вставку в начале, чтобы создать перевёрнутую тень. На этом сайте есть отличная демонстрация с простым, легко вставляемым кодом.

Градиенты

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

Синтаксис градиентов не так уж сложно написать, но мне очень нравится работать с этим генератором градиентов, потому что он создаёт сложное свойство фильтра, поддерживая IE6-9. Есть ещё один очень красивый Open Source генератор.

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

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

Градиентный текст возможен только в webkit. Вот простой код на CSS-Tricks.

Генеративные цвета

В пределах указанных ранее диапазонов вы можете использовать циклы for в любом препроцессоре, или же JavaScript функцию Math.random() и Math.floor() . Здесь нам нужны Math.floor() или Math.ceil() , потому что если не вернуть полные целые числа, то вместо значения цвета получим ошибку. Хорошее эмпирическое правило: не следует обновлять все три значения.

При помощи HSL очень легко переходить от одного цвета к другому, потому что вы знаете, что перебор оттенков от 0 до 360 даст вам полный диапазон. Ещё одна приятная особенность hue-rotate в градусах заключается в том, что поскольку это полный круг, вам не нужно придерживаться диапазона 0–360, можно написать даже -480 или 600 — браузер вас поймёт.

Я использую его, чтобы сгенерировать эти цвета:

А также этот, с другим диапазоном (прокрутите очень быстро):

Ниже я использую Math.random() в значениях rgb, чтобы получить множество цветов в одном диапазоне. Демонстрация написана на React, создаётся впечатление трёхмерности. Я могла бы пройти по нему при помощи for , но хотелось, чтобы цвет был случайным, отражал движение. Здесь нет предела совершенству.

JavaScript

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

Смешение цветов и режимы смешения фонов

Если вы использовали эффекты слоёв в Photoshop, то, вероятно, знакомы с режимами смешивания (наложения). Почти каждый сайт в 90-е годы использовал их (мой тоже). Режимы смешивания и фонового наложения позволяют соединить два разных многослойных изображения, при этом доступно 16 режимов.

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

Если вы хотите прослыть настоящим занудой, знайте, что формулы для режимов наложения зависят от типа эффекта. Например, multiply — это destination source = backdrop. Другие эффекты — это вариации простой математики с вычитанием, умножением, сложением и делением. Формула линейного эффекта — A+B-1, а эффекта Color Burn — это 1-(1-B)*A.

Вот более обширная документация, а ниже простая демонстрация, иллюстрирующая работу цвета в таких эффектах:

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

Фильтры

Фильтры CSS предоставляют множество классных цветовых эффектов, а также возможность взять цветное изображение и сделать его серым. На CSS-Tricks есть замечательный ресурс, который показывает, как они работают, и хорошо поддерживается браузерами. У Беннета Фили вы найдёте хорошую галерею фильтров.

Фильтры и режимы размытия могут работать вместе! Уна Кравец создала этот классный инструмент под названием CSS Gram, комбинируя некоторые эффекты, чтобы создать фильтры из Instagram. В конце есть хорошая документация.

feColorMatrix

В другой статье Уна исследует создание этих изображений через feColorMatrix, — примитива фильтра в SVG, который также может применяться к элементам HTML. Он очень мощный и позволяет точно настроить цвет. Как следует из названия, базовая разметка feColorMatrix использует матрицу значений, а применяется она через её относительный id.

Матрицу можно расширить и отрегулировать оттенок, насыщенность и так далее:

В статье Уны подробно рассматриваются все возможности этого инструмента. Ещё больше информации об этом и многих других сумасшедших цветах SVG, а также об инструментах градиента в книге Амелии Белами-Ройд от O’Reilly или в исследовательской демонстрации Майка Муллани.

Доступность и другие замечания

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

Доступность цвета можно измерить многими инструментами. Ниже некоторые из моих любимых:

Также очень хорошо с самого начала настроить свою палитру так, чтобы она была доступной [контрастной].

Color Safe — отличный инструмент, который помогает в этом. Как только вы всё подготовите, WAVE (Web Accessibility Tool) поможет оценить веб-страницу.

Цвет и атмосфера

Атмосфера влияет на цвет. Знать это довольно важно, если вы собираетесь создать хоть какую-то иллюзию глубины. Предметы ближе к вам более насыщены и контрастны. Предметы дальше более размыты.

Ландшафт подчёркивает зависимость контраста от расстояния

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

Нативный ввод цвета

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

Отобразит элемент выбора цветов, например такой:

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

Этот пен Ноя Блона показывает, как использовать его в сочетании с цветовым фильтром hue в CSS, чтобы выбирать части изображения динамически и изменять цвета. Оставшаяся часть изображения — это градации серого, поэтому она не затрагивается, что довольно умно.

Полезное

Color Highlighter Plugin для Sublime Text я использую, чтобы увидеть, какой цвет интерпретирует браузер. Мне нравится использовать <"ha_style": "outlined">.

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

Бенджамин Найт написал аналог Adobe Color при помощи d3 на CodePen, инструмент довольно крут и заслуживает внимания.

Если вы хотите, чтобы веб делал за вас тяжёлую работу (а кто этого не хочет?), посмотрите на Coolors, настолько простой, насколько это возможно.

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

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

Продолжить изучение цветов, чтобы стать профессиональным веб-разработчиком, вы можете на наших курсах:

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

Профессии и курсы

Data Science и Machine Learning

Источник