35 лучших тёмных тем для сайтов

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

Лучшие темные темы сайтов

1. Refraction

Refraction — это инструмент с искусственным интеллектом, который помогает пользователям рефакторить код, генерировать документацию, создавать модульные тесты и многое другое. Он использует чистую темную тему с акцентами фиолетового цвета, включая анимацию на кнопках CTA, которая привносит более яркие цвета.

Что нам нравится:

 

• Яркий фиолетовый анимированный градиент привлекает внимание к кнопкам CTA.
• Темная тема сайта соответствует аудитории Refraction, поскольку многие разработчики используют редакторы кода в темном режиме.

Основные цвета: Черный (#040404), Светло-серый (#F2F1F2), Фиолетовый (#95A1F9)

 

2. Awwwards Conference

The Awwwards Conference — это онлайн-конференция для всех видов цифрового дизайна. Здесь используется черный фон со светло-серым текстом.

Что нам нравится:

 

• Черно-светло-серая тема создает очень классический вид.
• Розовый акцент добавляет ощущение творчества, что соответствует аудитории цифрового дизайна.

Основные цвета: Розовый (#FC93AD), светло-серый (#FEFDFB), черный (#1F1F1F)

 

3. Evervault

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

Что нам нравится:

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

Основные цвета: Темно-фиолетовый (#010314), ярко-фиолетовый (#592DD1), белый (#FFFFFF)

4. Ventriloc

Ventriloc — это агентство, которое помогает компаниям в интеграции и анализе данных.

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

Что нам нравится:

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

Основные цвета: Темно-красный (#401D19), ярко-оранжевый (#F9672C), светло-красно-оранжевый (#ECCFC5)

5. Opera

Opera предлагает вентилируемые варочные панели и вытяжки, которые помогают людям создавать более стильные кухни. На сайте Opera используется темная тема сайта с темно-зеленым фоном (почти черным). Темно-серый и мягкий белый текст выделяются на сайте.

Что нам нравится:

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

Основные цвета: Темно-зеленый (#191A19), мягкий белый (#F2F2F2), темно-серый (#444544)

6. Memo

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

Что нам нравится:

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

Основные цвета: Черный (#000000), светло-серый (#CDCDCD), ярко-зеленый (#5AFE73)

7. Paxafe

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

Что нам нравится:

• Темно-голубой фон мягче, чем прямой черный фон.
• Пастельные зеленые и голубые цвета добавляют энергии в темный дизайн.

Основные цвета: Темно-голубой (#03131A), светло-серый (#F8F8F8), пастельный синий (#8FD6E8), пастельный зеленый (#D4FF9D)

8. Kinsta

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

Что нам нравится:

• Градиент на сине-маджентовом фоне создает привлекательный вид, который привлекает внимание к скриншоту интерфейса.
• Тиловая CTA-кнопка действительно выделяется и побуждает к действию.

Основные цвета: Сине-маджента (#0E0A1B), фиолетовый (#5333EC), тил (#32D3D8)

9. eJeeban Design Agency

EJeeban Design Agency — агентство веб-дизайна, расположенное в Малайзии. На сайте eJeeban Design Agency используется темно-сине-пурпурный фон и светло-серый текст. Затем он добавляет немного энергии и креативности с помощью розово-красного акцента.

Что нам нравится:

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

Основные цвета: Сине-маджента (#121220), светло-серый (#F0EDF2), розово-красный (#EC5A64)

10. Eco

Eco — это финтех-приложение, поддерживаемое многими крупнейшими венчурными фондами. Сайт Eco светлее, чем некоторые другие темные темы сайтов в этом списке, но королевский синий фон все равно создает красивый темный дизайн.

Что нам нравится:

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

Основные цвета: Королевский синий (#18148A), белый (#FFFFFF), тил (#67DEE5)

11. Le Studio Culotté

Le Studio Culotté — это французское дизайнерское агентство, которое работает с предприятиями в сфере вина и алкоголя. На сайте Le Studio Culotté используется темно-пурпурный/маджента фон, более яркий пурпурный цвет для CTA и привлекающие внимание цветовые градиенты.

Что нам нравится:

• Градиенты добавляют немного яркости и энергии в темную тему сайта.
• Ярко-пурпурные CTA по-прежнему достаточно контрастны, чтобы привлечь внимание посетителей.

Основные цвета: Пурпурный (#020021), Ярко-фиолетовый (#5D13F9), Белый (#FFFFFF)

12. Cuberto

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

Что нам нравится:

• Черно-белый — это классическая темная тема сайта.
• Желтый акцент все еще добавляет интерес и энергию в дизайн.

Основные цвета: Черный (#121212), белый (#FFFFFF), желтый (#E0FD60)

13. GetSport

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

Что нам нравится:

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

Основные цвета: Сине-голубой (#162936), белый (#FFFFFF), ярко-зеленый (#8CC92D)

14. Critical Danger

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

Что нам нравится:

• Полностью красная цветовая тема соответствует посланию, которое пытается донести Critical Danger.
• Полностью красный дизайн все еще достаточно контрастен, чтобы текст был читаемым.
• Размытие добавляет размерность тексту, используемому на сайте.
• Многие изображения имеют зеленый фон, так как сайт посвящен природе. Красный и зеленый дополняют друг друга на противоположных сторонах цветового круга, что делает этот выбор гармоничным.

Основные цвета: Темно-бордовый красный (#3B1C1C), ярко-красный (#E41E2D)

15. Daily Gogen

Daily Gogen — это ежедневная игра-головоломка со словами. У нее очень простая темная тема сайта, с темно-синим фоном и зелено-голубыми заголовками, игровым интерфейсом и CTA. Также используется светло-серый текст для текста параграфов.

Что нам нравится:

• Несмотря на темную тему сайта, этот сайт все равно обладает хорошей энергетикой.
• Голубовато-зеленые кнопки CTA действительно выделяются.

Основные цвета: Темно-синий (#2F3B6D), голубовато-зеленый (#2AF6A2), светло-серый (#F2F3F6)

16. GBL Studio

GBL Studio — это дизайнерское агентство полного цикла, расположенное в Кортрейке, Бельгия. На сайте GBL Studio используется классическая черно-белая цветовая схема с яркими желтыми акцентами для придания интереса.

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

Что нам нравится:

• Этот сайт предлагает классическую черно-белую тему сайта.
• Желтые акценты добавляют интерес и энергию в дизайн.

Основные цвета: Черный (#000000), белый (#FFFFFF), желтый (#FBE10F)

17. Made In Evolve

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

Made in Evolve также предлагает светлый и темный режимы, причем светлый режим меняет местами черное и белое (например, фон становится белым, а текст черным, если включить светлый режим).

Что нам нравится:

• Фиолетовые акценты добавляют интерес к дизайну.
• Сохраняя простую цветовую тему, Made in Evolve может предложить светлый и темный режимы.

Основные цвета: Черный (#222222), Белый (#FFFFFF), Фиолетовый (#A09DFF)

18. The Quake

The Quake — это информационный сайт, который рассказывает людям о том, что делать в случае землетрясения. Как и в примере с Critical Danger, здесь используется темно-красный фон и ярко-красный текст заголовка.

Что нам нравится:

• Полностью красная цветовая схема соответствует ощущению «опасности/тревоги», которое хочет создать The Quake.
• Белый текст абзаца хорошо контрастирует с темно-красным фоном.

Основные цвета: Темно-красный (#2B1F17), ярко-красный (#C21814), белый (#FFFFFF)

19. Spectral

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

Что нам нравится:

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

Основные цвета: Черный (#000000), Белый (#FFFFFF)

20. CardioOne

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

Что нам нравится:

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

Основные цвета: Черный (#000000), Белый (#FFFFFF)

21. Web-Systems Solutions

Web-Systems Solutions — это агентство по разработке, которое работает с Shopify (а также WordPress). Web-Systems Solutions в основном использует черно-белые цвета. Однако на сайте присутствуют зеленые акценты, что хорошо сочетается с ориентацией на разработку Shopify.

Что нам нравится: 

• Черно-белый — это классическая темная тема сайта.
• Зеленые акценты помогают усилить основную направленность сайта и его связь с Shopify. Это отличное напоминание о том, как вы можете использовать цвета для достижения чего-то подобного для вашего сайта.

Основные цвета: Черный (#151515), белый (#FFFFFF), зеленый (#67C22F)

22. Aaron McGuire Design

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

Что нам нравится:

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

Основные цвета: Черный (#111013), мягкий белый/желтый (#F5EFDF)

23. Питер Арендт

Питер Арендт — фронтенд веб-разработчик и дизайнер, живущий в Варшаве, Польша. На сайте портфолио Питера используется очень похожая цветовая тема, что и в портфолио Аарона Макгуайра выше. Однако Питер использует желтый цвет немного ярче, чем в портфолио Аарона.Питер также добавляет маленькие цветовые акценты, например, красный на букве «L» в слове «Developer».

Что нам нравится:

• Маленькие цветовые акценты добавляют интерес, особенно потому, что 99% дизайна — это всего два цвета.
• Благодаря использованию мягкого желтого цвета вместо чистого белого, портфолио Питера выделяется на фоне настоящих черно-белых темных тем сайтов.

Основные цвета: Черный (#0F0D0D), Желтый (#FBE094), Красный (#FA2256)

24. Valemtimes

Valemtines использует GPT-3 AI для создания сообщений для вашего любимого человека. Это скорее концепт, чем серьезный инструмент, но у него одна из самых приятных темных тем сайта.Valemtines использует классический черно-белый дизайн с зернистым фоном вместо сплошного черного.

Нам нравится:

• Темный фон не сплошной, что создает визуальную интригу.
• Небольшое использование красного цвета связано с брендингом/посланием инструмента (Валентинов день/любовь).

Основные цвета: Черный (#121212), Белый (#FFFFFF), Красный (#A7445D)

25. Alster

Alster — цифровое агентство, расположенное в Стокгольме, Швеция. На сайте Alster использована классическая черно-белая темная цветовая тема сайта, в некоторых местах (например, в одностраничном навигационном меню в нижней части экрана) добавлен серый цвет.

Что нам нравится:

• Серая строка меню выделяется, сохраняя темную тему сайта.

Основные цвета: Черный (#0F1217), Белый (#FFFFFF), Серый (#3F4246)

26. Дэвид Любофски

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

Что нам нравится:

• Желтые кнопки CTA действительно привлекают внимание и выделяются на фоне черно-белой темы.
• Тема использует темно-серые формы, придавая сайту современный вид.

Основные цвета: Черный (#161617), белый (#FFFFFF), желтый (#FAD700)

27. SunVest

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

Что нам нравится:

• Ярко-желтые акценты добавляют энергии и связаны с идеей солнечного света и солнечной энергии.
• Темно-синий цвет напоминает ночное время и связан с анимированной вращающейся Землей на изображении героя сайта.

Основные цвета: Темно-синий (#0F1625), желтый (#FACE34), белый (#FFFFFF)

28. Шахадат Хуссейн

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

Что нам нравится:

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

Основные цвета: Темно-синий (#0A192F), светло-голубой (#CBD5F5), тил (#64FDDA)

29. Alukaze

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

Что нам нравится:

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

Основные цвета: Черный (#000000), Белый (#FFFFFF), Желтый (#FBFA03)

30. 3AI

3AI — финансовая компания, цель которой — использовать искусственный интеллект и финансовые данные для повышения доходности. На сайте 3AI используется темный голубовато-синий фон с белым текстом.

Что нам нравится:

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

Основные цвета: Голубой (#3D4045), розовый (#ED9B81), белый (#FFFFFF)

31. Flow Ninja

Flow Ninja — агентство по разработке Webflow с офисами в США и Сербии. На сайте Flow Ninja используется темно-синий фон с белым текстом и светло-голубыми акцентами для ключевых элементов, таких как CTA.

Что нам нравится:

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

Основные цвета: Темно-синий (#19224C), светло-синий (#DEE2FF), белый (#FFFFFF)

32. Broadgate Creative

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

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

Что нам нравится:

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

Основные цвета: Сине-маджента (#15151B), светло-серый (#F3F3F3)

33. Regeneration: Black Cinema

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

Что нам нравится:

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

Основные цвета: Черный (#282828), белый (#F9F9F9), желтый (#FCE48B)

34. Lonsdale

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

Что нам нравится:

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

Основные цвета: Черный (#000000), Белый (#FFFFFF)

35. Makers Bolt