JSON.FORMATПолный набор для форматирования, валидации, сжатия, сравнения и конвертации JSON.//REGEX.TESTERТестирование регулярных выражений в реальном времени с объяснением и заменой.//PDF.SUITEОбъединение, разделение, извлечение текста, поворот и конвертация PDF в картинки.//IMAGE.STUDIOРедактор изображений в браузере: обрезка, фильтры, WebP, PNG и Base64.//HTML.BEAUTIFYФорматирование HTML кода, сжатие для продакшена и кодирование сущностей.//CSS.MINIFYФорматирование CSS, сжатие стилей для продакшена и конвертация CSS в SCSS.//SQL.FORMATTERФорматирование SQL запросов, транслятор диалектов и минификатор.//SVG.EXCALIDRAWИнтерактивный векторный редактор на базе Excalidraw и форматтер SVG.//TEXT.DIFFПодсчет слов, символов, оценка времени чтения и сравнение текстов Diff.//YAML.CONVERTДвусторонний валидатор и форматтер YAML и JSON с проверкой синтаксиса.//XML.PARSERФорматтер XML-документов, инспектор дерева элементов и конвертер в JSON.//GRAPHQL.STUDIOФорматтер запросов и схем SDL, минификатор и сортировка полей AST.//BASE64.CODECКодирование и декодирование Base64 и URL-Safe с поддержкой UTF-8.//LOREM.IPSUMГенератор текста-рыбы для макетов, прототипов и тестирования интерфейсов.//PASSWORD.GENГенератор криптографически стойких случайных паролей с оценкой энтропии.//URL.STUDIOНабор из 8 инструментов: encode, decode, валидатор, парсер и конструктор.//QR.STUDIOГенератор персонализированных QR-кодов с логотипами, цветами и градиентами.//ASCII.EXPLORERИнтерактивная таблица ASCII 0-255, Alt-коды и символы CP437.//KEYCODES.LIVEДетектор событий KeyboardEvent в реальном времени и таблица кодов JS.//JWT.DEBUGGERДекодер токенов JWT, инспектор claims и проверка подписи через Web Crypto.//BINARY.CODECДвусторонний конвертер текста в двоичный код с эффектом Matrix и таблицей ASCII.//CHARTS.STUDIOГенератор интерактивных графиков (столбцы, линии, круговая) из данных CSV.//UUID.V7Генератор партий UUID v4, v7 с сортировкой по времени, v1 и валидатор.//CSV.JSONДвусторонний конвертер CSV в JSON с настройкой разделителей и табличной сеткой.//COLORS.STUDIOКонвертер HEX/RGB/HSL/CMYK, цветовые гармонии и проверка контраста WCAG 2.1.//SEO.METAГенератор мета-тегов SEO, карточек Open Graph и предпросмотр в Google SERP.//SCHEMA.JSONLDГенератор микроразметки Schema.org JSON-LD для Google Rich Snippets.//SITEMAP.XMLГенератор стандартных XML-карт сайта (Протокол 0.9) для Google и Яндекс.//ROBOTS.TXTГенератор robots.txt, шаблоны блокировки ИИ-ботов и тестер URL-правил.//FAKE.DATAГенератор синтетических тестовых данных: экспорт в JSON, CSV, SQL и TypeScript.//CLOCK.WORLDМировое время в реальном времени с 3D глобусом и часовыми поясами 174 стран.//DATE.CALCДней между датами, точный возраст, рабочие дни, Unix timestamp и парсер cron.//CALC.SUITEНабор из 56+ онлайн-калькуляторов: проценты, ипотека, кредиты, НДС, ИМТ и зарплата.//JSON.FORMATПолный набор для форматирования, валидации, сжатия, сравнения и конвертации JSON.//REGEX.TESTERТестирование регулярных выражений в реальном времени с объяснением и заменой.//PDF.SUITEОбъединение, разделение, извлечение текста, поворот и конвертация PDF в картинки.//IMAGE.STUDIOРедактор изображений в браузере: обрезка, фильтры, WebP, PNG и Base64.//HTML.BEAUTIFYФорматирование HTML кода, сжатие для продакшена и кодирование сущностей.//CSS.MINIFYФорматирование CSS, сжатие стилей для продакшена и конвертация CSS в SCSS.//SQL.FORMATTERФорматирование SQL запросов, транслятор диалектов и минификатор.//SVG.EXCALIDRAWИнтерактивный векторный редактор на базе Excalidraw и форматтер SVG.//TEXT.DIFFПодсчет слов, символов, оценка времени чтения и сравнение текстов Diff.//YAML.CONVERTДвусторонний валидатор и форматтер YAML и JSON с проверкой синтаксиса.//XML.PARSERФорматтер XML-документов, инспектор дерева элементов и конвертер в JSON.//GRAPHQL.STUDIOФорматтер запросов и схем SDL, минификатор и сортировка полей AST.//BASE64.CODECКодирование и декодирование Base64 и URL-Safe с поддержкой UTF-8.//LOREM.IPSUMГенератор текста-рыбы для макетов, прототипов и тестирования интерфейсов.//PASSWORD.GENГенератор криптографически стойких случайных паролей с оценкой энтропии.//URL.STUDIOНабор из 8 инструментов: encode, decode, валидатор, парсер и конструктор.//QR.STUDIOГенератор персонализированных QR-кодов с логотипами, цветами и градиентами.//ASCII.EXPLORERИнтерактивная таблица ASCII 0-255, Alt-коды и символы CP437.//KEYCODES.LIVEДетектор событий KeyboardEvent в реальном времени и таблица кодов JS.//JWT.DEBUGGERДекодер токенов JWT, инспектор claims и проверка подписи через Web Crypto.//BINARY.CODECДвусторонний конвертер текста в двоичный код с эффектом Matrix и таблицей ASCII.//CHARTS.STUDIOГенератор интерактивных графиков (столбцы, линии, круговая) из данных CSV.//UUID.V7Генератор партий UUID v4, v7 с сортировкой по времени, v1 и валидатор.//CSV.JSONДвусторонний конвертер CSV в JSON с настройкой разделителей и табличной сеткой.//COLORS.STUDIOКонвертер HEX/RGB/HSL/CMYK, цветовые гармонии и проверка контраста WCAG 2.1.//SEO.METAГенератор мета-тегов SEO, карточек Open Graph и предпросмотр в Google SERP.//SCHEMA.JSONLDГенератор микроразметки Schema.org JSON-LD для Google Rich Snippets.//SITEMAP.XMLГенератор стандартных XML-карт сайта (Протокол 0.9) для Google и Яндекс.//ROBOTS.TXTГенератор robots.txt, шаблоны блокировки ИИ-ботов и тестер URL-правил.//FAKE.DATAГенератор синтетических тестовых данных: экспорт в JSON, CSV, SQL и TypeScript.//CLOCK.WORLDМировое время в реальном времени с 3D глобусом и часовыми поясами 174 стран.//DATE.CALCДней между датами, точный возраст, рабочие дни, Unix timestamp и парсер cron.//CALC.SUITEНабор из 56+ онлайн-калькуляторов: проценты, ипотека, кредиты, НДС, ИМТ и зарплата.//

МОДУЛЬ 05 · ДИЗАЙН И ПАЛИТРЫ

Color Studio и гармонии

Продвинутая студия цвета: конвертер HEX, RGB, HSL, CMYK, валидатор контраста WCAG 2.1 и генератор гармоничных палитр.

ВЫБРАТЬ ЦВЕТ

Alpha: 100%

КИБЕРПАНК ПРЕСЕТЫ:

HEX#00F6FF

RGBrgb(0, 246, 255)

RGBArgba(0, 246, 255, 1)

HSLhsl(182, 100%, 50%)

HSLAhsla(182, 100%, 50%, 1)

CMYKcmyk(100%, 4%, 0%, 0%)

ЦВЕТОВЫЕ ГАРМОНИИ

КОМПЛЕМЕНТАРНЫЙ (180°)

АНАЛОГИЧНЫЕ (±30°)

ТРИАДА (120°)

ТЕТРАДА (90°)

ШКАЛА ЯРКОСТИ (15% - 90%)

ВАЛИДАТОР КОНТРАСТА WCAG 2.1

НА БЕЛОМ ФОНЕ (#FFFFFF)

1.34:1

Aa Text Preview Sample

AA Normal FAILAAA Normal FAIL

НА ТЕМНОМ ФОНЕ (#0E0C1A)

14.39:1

Aa Text Preview Sample

AA Normal PASSAAA Normal PASS

Руководство: Цветовые пространства и веб-доступность

1. Что такое цветовые пространства (HEX, RGB, HSL, CMYK)?

RGB и HEX для цифровых дисплеев, HSL для человеческого восприятия, CMYK для печати.

2. Стандарты доступности WCAG 2.1

WCAG требует контраст от 4.5:1 для обычного текста (AA) и 7:1 для AAA.

3. Цветовые гармонии

Геометрические соотношения на 360-градусном цветовом круге.

4. Современный CSS: OKLCH и color-mix()

OKLCH обеспечивает равномерную воспринимаемую яркость в градиентах.

Часто задаваемые вопросы (FAQs)

Зачем использовать HSL в CSS?

Упрощает создание темной/светлой темы путем изменения только яркости.

Как рассчитывается контраст?

Отношением относительной яркости (L1 + 0.05) / (L2 + 0.05) по формуле W3C.

СВЯЗАННЫЕ ИНСТРУМЕНТЫ ДИЗАЙНА:

CSS Formatter & Minifier →SVG Studio & Excalidraw →Image Editor & Converter →