Вдохновение

Ваша цветовая палитра в реальных интерфейсах

Выберите знакомый архетип интерфейса - GitHub, Stripe, Airbnb и другие - и посмотрите, как палитра выглядит в живом реальном интерфейсе, а не на плоском свотче.

Все продукты
Показаны фирменные цвета этого архетипа.
Живой предпросмотрGitHub
acme/website
Search/+A
acme / websitePublic
Modern marketing website for Acme Inc.
★ Star 128⑂ Fork 34
Code
Issues3
Pull requests2
Actions
Projects
Wiki
◇ main ▾18 branches4 tags
Go to fileAdd file ▾<> Code ▾
A
sergeiUpdate header layout
a3f291c · 2 hours ago
FilesLatest commit
src
Updated dashboard components2h ago
README.md
Update installation docs5h ago
index.tsx
Refactor app entry point1d ago
styles.css
Improve responsive layout1d ago
package.json
Update dependencies2d ago
Asergeiand 11 others184 commits
README.md
Edit
Acme WebsiteA fast, modern marketing website built with React and TypeScript.
build passingTypeScriptMIT
InstallationCopy
$npm install
$npm run dev
TypeScript62%
★ 128 stars◉ 34 forks12 contributors
Палитра вдохновлена GitHub, это не официальные цвета бренда.

Сайдбар с файлами рядом с областью кода, тёмный верхний бар.

Узнать больше

Как цвета выглядят в реальном интерфейсе

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

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

Ищете не продукт, а дизайн-стиль? Посмотрите все дизайн-стили Хотите узнать больше о палитре конкретного продукта? Посмотрите все продукты

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

Это официальные цвета брендов GitHub, Linear, Stripe и других?

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

Смена архетипа меняет мою текущую палитру?

Нет, по умолчанию превью просто подставляет собственные цвета архетипа. Ваша рабочая палитра в панели Color Control не трогается, пока вы не нажмёте «Применить палитру в стиле [название]».

Можно посмотреть свою палитру внутри этих UI-макетов вместо цветов архетипа?

Да. Нажмите «Применить текущую палитру к превью», чтобы увидеть свои цвета внутри макета выбранного архетипа вместо цветов по умолчанию.

Зачем сравнивать палитру с реальными интерфейсами, а не просто со свотчем?

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

Экспорт