Бесплатные ресурсы для дизайна
Цветовые палитры, градиенты, фавиконки, шрифты с кириллицей и шаблоны сайтов. Всё работает прямо в браузере: выбрали, скопировали, готово.
Инструменты
Цветовые палитры
36 готовых сочетаний с HEX, RGB, HSL, CSS-переменными и примером на кнопках и тексте.
Генератор палитр
Новая гармоничная палитра по пробелу.
CSS-градиенты
24 градиента и редактор с готовым кодом.
Генератор фавиконок
ICO, PNG, SVG и код для сайта одним архивом.
Проверка контраста
Читается ли текст: WCAG AA и AAA.
Шрифты с кириллицей
Подборки для Word, Photoshop, открыток и логотипов на 7fonts.ru.
Шаблоны сайтов
8 готовых шаблонов: сайт за пять минут без программиста.
Популярные палитры
Все 36 палитр →Морской бриз
#03045E #0077B6 #00B4D8 #90E0EF #CAF0F8
Осенний лес
#2D3A1F #6B4E16 #B5651D #E09F3E #F3D9A4
Весенняя пастель
#FFD6E0 #FFEFCF #D7F9D3 #C9E4FF #E5D4FF
Ночной город
#0B0C10 #1F2833 #45A29E #66FCF1 #C5C6C7
Закат
#355070 #6D597A #B56576 #E56B6F #EAAC8B
Скандинавский минимализм
#F4F1EC #D9D2C5 #A39E93 #5C5A57 #2B2B2B
Кофе с молоком
#3E2723 #6D4C41 #A1887F #D7CCC8 #F5EFE6
Лимонад
#FFF275 #FFCF56 #FF8C42 #FF3C38 #A23E48
Градиенты
Все градиенты →Рассвет
#ff9a8b → #ff6a88 → #ff99ac
Океан
#2e3192 → #1bffff
Персик
#ffecd2 → #fcb69f
Мохито
#a8e063 → #56ab2f
Статьи
Все статьи →
Как подобрать цвета для сайта
Чтобы сайт выглядел аккуратно, достаточно трёх-пяти цветов и одного правила. Разбираем, как их выбрать и проверить, без дизайнерского образования.
Фавиконка для сайта: размеры и код
Фавиконка видна во вкладке браузера, в закладках, в выдаче Яндекса и Google и на экране телефона. Хватит пяти файлов и пяти строк кода.
Как выбрать шрифт для сайта
Шрифт сильнее всего влияет на то, как сайт читается и каким кажется. Семь правил, которые спасают от большинства ошибок.
Градиенты в CSS: как сделать и где использовать
Градиент оживляет плоский фон и делает кнопку заметнее. Разбираем три вида градиентов в CSS, готовый код и ошибки, из-за которых градиент выглядит грязно.
Контраст текста по WCAG простыми словами
Бледный текст красиво смотрится в макете и плохо читается на телефоне под солнцем. Стандарт WCAG даёт простые числа, по которым можно проверить любую пару цветов.
Цветовой круг и сочетания цветов
Цветовой круг помогает подобрать цвета, которые смотрятся вместе, без долгих проб. Четыре схемы покрывают почти все задачи.
Цвета HEX, RGB и HSL: в чём разница
Один и тот же цвет можно записать тремя способами. Объясняем, что значат цифры, как переводить вручную и какой формат удобнее для какой задачи.
Психология цвета: какой цвет выбрать для бизнеса
Цвет первым сообщает посетителю, что за место перед ним: банк, пекарня или детский клуб. Но значения цветов не законы, а привычки, и ими можно пользоваться с умом.
Нужен сайт, а не только цвета?
Соберите сайт бесплатно в конструкторе Okis: готовые шаблоны, свой домен, мобильная версия. Без программиста.