Как закодировать цвет капучино: таблица кодов и оттенков

Цвет капучино — тёплый бежево-коричневый оттенок, названный в честь популярного кофейного напитка. Его часто используют в дизайне интерьеров, веб-вёрстке, полиграфии и оформлении меню кофеен. Проблема в том, что «капучино» — не официальный стандартизированный цвет, а собирательное название, поэтому в разных источниках ему соответствуют разные коды.

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

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

Таблица кодов цвета капучино

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

Если нужен один «безопасный» вариант, берите классический #C8A165: он достаточно тёплый, хорошо сочетается с белым, кремовым и тёмно-коричневым и не выглядит ни блёклым, ни слишком тяжёлым.

Как выбрать оттенок под задачу

Выбор конкретного кода зависит от контекста. Для фона сайта или стены лучше работают светлые варианты (#E3C9A6): они не перегружают пространство и хорошо читаются с тёмным текстом. Для кнопок, ценников и акцентных блоков подойдут средние тона (#B68D5E, #A67B4F) — они заметны, но не кричат.

Тёмный капучино (#8B5E3C) используйте для текста на светлом фоне, контуров и элементов, где нужен контраст без жёсткости чистого чёрного. В полиграфии — меню, упаковка кофе — средние и тёмные оттенки передают «кофейность» лучше светлых.

Как применить код в CSS и графических редакторах

В веб-вёрстке цвет капучино задаётся напрямую через HEX или RGB. Пример для фона блока и текста:

/ Фон в цвете капучино /
.card {
background-color: #C8A165;
color: #3E2A1A;
}

/ То же через RGB /
.card-alt {
background-color: rgb(200, 161, 101);
}

В Photoshop, Figma или Illustrator откройте палитру цветов и введите HEX-значение в поле с символом # — редактор автоматически пересчитает RGB и CMYK. В Figma поле HEX находится в панели заливки (Fill) под спектром.

.cappuccino { background-color: #C8A165; color: #3E2A1A; }

Перевод между системами: HEX, RGB и CMYK

Перевод HEX в RGB делается просто: разбейте код на три пары символов и переведите каждую из шестнадцатеричной системы в десятичную. Например, C8 = 200, A1 = 161, 65 = 101 — получаем RGB(200, 161, 101). Онлайн-конвертеры делают это мгновенно, но понимать принцип полезно.

С CMYK сложнее: точный перевод зависит от цветового профиля типографии (например, Fogra или GRACoL). Значения в таблице выше — ориентировочные, рассчитанные для стандартного профиля. Перед тиражом обязательно согласуйте профиль с печатником и закажите цветопробу: тёплые бежево-коричневые тона на бумаге часто уходят в жёлтый или серый.

Как получить реальный цвет капучино с фотографии

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

Учтите, что пипетка берёт цвет одного пикселя. Для надёжности усредните значение: в Photoshop это настройка Sample Size 5×5 или 11×11 пикселей. Снимите 3–4 замера с разных участков и возьмите среднее — так код будет ближе к воспринимаемому глазом тону.

1. 1
   Сфотографируйте капучино при естественном освещении без фильтров
2. 2
   Откройте фото в редакторе и выберите инструмент «пипетка»
3. 3
   Установите усреднение замера 5×5 или 11×11 пикселей
4. 4
   Снимите цвет с 3–4 участков смешанной зоны напитка
5. 5
   Усредните полученные HEX-значения и проверьте результат на макете

Сочетания цвета капучино с другими оттенками

Капучино — нейтральный тёплый цвет, поэтому сочетается широко. Классические пары: с белым и кремовым (лёгкая «кофейная» гамма), с тёмно-коричневым #3E2A1A (контраст эспрессо и молока), с оливковым и приглушённым зелёным (природная палитра), с терракотой и карамелью (тёплая осенняя гамма).

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

Типичные ошибки при работе с цветом капучино

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

Вторая ошибка — игнорирование контраста. Светлый капучино с белым текстом нечитаем: по рекомендациям доступности WCAG для обычного текста нужен контраст не ниже 4,5:1. Проверить пару цветов можно в любом онлайн-контрастометре.

Частые вопросы