Hero Background

ColorFont

Упростите свой рабочий процесс веб-разработки

Универсальный набор инструментов для проверки цветов, шрифтов и многого другого.

Скачайте ColorFont для ChromeChrome Logo
Присоединяйтесь к более чем 10 000 веб-разработчиков и дизайнеров.
★ 3,7 (7) в Chrome Web Store

Функции

Оптимизируйте свой рабочий процесс, объединив несколько расширений в одно.

Извлекать цвета и создавать цветовые системы
Извлекать цвета и создавать цветовые системы
Проверьте доступность каждой страницы.
Проверьте доступность каждой страницы.
Экспорт типографических систем в код
Экспорт типографических систем в код
Создание типографических систем
Создание типографических систем
Скачайте ColorFont для ChromeChrome Logo
Присоединяйтесь к более чем 10 000 веб-разработчиков и дизайнеров.
★ 3,7 (7) в Chrome Web Store

Бесплатные инструменты

Конструктор градиентов

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

Генератор теней для блоков

Создавайте потрясающие тени для блоков CSS с помощью нашего бесплатного онлайн-инструмента. Генерируйте пользовательские тени с параметрами смещения, размытия, растяжения, цвета и внутренней тени (inset).

Генератор цветовых оттенков

Создавайте оттенки и полутона из одного цвета. Экспортируйте цветовую шкалу в формате CSS, Tailwind, SwiftUI или в виде переменных CSS. Быстрый инструмент, ориентированный на разработчиков.

Генератор градиентных арок

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

Video Thumbnail

Создано для разработчиков

Перейдите на Pro-версию, чтобы разблокировать больше функций.

Найдите наиболее распространенные цвета на изображении.
Найдите наиболее распространенные цвета на изображении.
Проверьте доступность каждой страницы.
Проверьте доступность каждой страницы.
Проверьте информацию об изображении и теги alt.
Проверьте информацию об изображении и теги alt.
Проверьте наличие ошибок, которые могут негативно повлиять на ваш SEO-рейтинг.
Проверьте наличие ошибок, которые могут негативно повлиять на ваш SEO-рейтинг.
Выделите основные элементы на странице.
Выделите основные элементы на странице.
Проверьте метатеги и информацию из Open Graph.
Проверьте метатеги и информацию из Open Graph.
Lines Image
Всё, что нужно для лучшей веб-разработки
+ инструменты разработчика
Скачайте или скопируйте SVG-файл одним щелчком мыши.
Скачайте или скопируйте SVG-файл одним щелчком мыши.
Преобразование форматов изображений между PNG, JPG и WebP.
Преобразование форматов изображений между PNG, JPG и WebP.
Проверьте заголовки на странице.
Проверьте заголовки на странице.

Pricing

Basic

Free

forever

Install on Chrome

For those getting started and learning ColorFont

  • Color Selector
  • Color System Export
  • Font Selector
  • Manual Color/Font Addition
  • Basic Palette Generation
  • Color/Font Collections
  • Basic Accessibility Checker

🚀 Special Beta Pricing - Save 56%

Pro

$25 $11

billed once yearly

Log in to Manage Your Account

For solo shops wanting all features.

  • Everything in Basic
  • Website Color Scanning
  • Image Color Extraction
  • Advanced Palette Generation
  • Page Accessibility Analysis
  • SEO Analysis & Reports
  • Div/Element Highlighting
  • Image Converter (PNG/JPG/WebP)
  • More Features Coming Soon