Color Key это уникальный инструмент для стеганографии, который позволяет кодировать любой текст в CSS-картины через HEX-цвета. Скрипт преобразует текст в последовательность цветов, которые можно сохранить как CSS-код и затем расшифровать обратно в исходный текст.
Как это работает
Алгоритм кодирования состоит из нескольких этапов:
- Текст → UTF-8 байты: исходный текст преобразуется в байты UTF-8
- UTF-8 → HEX: байты конвертируются в шестнадцатеричное представление
- HEX → блоки по 6 символов: строка разбивается на блоки по 6 символов (стандартная длина HEX-цвета)
- Добавление индекс-префикса: каждому блоку добавляется префикс (00, 02, 04, …) для сохранения порядка
- Блок → цвет: каждый блок с префиксом становится HEX-цветом
- Цвета → CSS-картина: цвета оформляются в CSS с атрибутом
title="#HEX"
Основные возможности
Кодирование текста
Вставьте любой текст в поле ввода, и скрипт автоматически преобразует его в CSS-картину:
div {
background: #0048656C;
title="#0048656C";
}
Каждый цвет содержит зашифрованную часть текста с индексом для восстановления порядка.
Парсинг CSS
Для расшифровки достаточно вставить весь CSS-код картины, скрипт автоматически найдёт все title="#HEX" и восстановит исходный текст:
- Скрипт ищет все атрибуты
titleс HEX-значениями - Извлекает индексы из префиксов цветов
- Сортирует блоки по индексам
- Собирает исходный текст из отсортированных HEX-значений
Автосортировка
Порядок цветов в CSS не важен, индексы внутри цветов позволяют автоматически восстановить правильную последовательность данных.
Преимущества
- Визуальное представление: текст превращается в абстрактную картину из цветов
- Возможность печати: картину можно распечатать и считывать цвета пипеткой
- Чистые HEX-цвета: без прозрачности, только валидные CSS-цвета
- Обратимое преобразование: гарантированное восстановление исходного текста
- Работает в браузере: не требует сервера, всё происходит на клиенте
Пример использования
Кодирование
- Откройте color_key.html
- Введите текст в поле ввода
- Скопируйте сгенерированный CSS-код
Расшифровка
- Откройте color_key.html
- Вставьте CSS-код в поле для парсинга
- Нажмите кнопку расшифровки
- Получите исходный текст
Технические детали
Формат блока
Каждый блок данных имеет формат:
ПРЕФИКС(2 символа) + ДАННЫЕ(6 символов) = 8 символов
- Префикс:
00,02,04,06, … (индекс блока) - Данные: 6 символов HEX (закодированная часть текста)
Пример:
0048656C: индекс 00, данные48656C(соответствует части UTF-8 строки)
Ограничения
- Длина текста ограничена только количеством цветов, которые можно сохранить
- Поддерживаются только символы UTF-8
- CSS-код должен содержать валидные HEX-цветы с атрибутами
title
Применение
- Стеганография: скрытие текста в визуальных данных
- Художественное кодирование: превращение сообщений в абстрактные картины
- Обучение: демонстрация принципов кодирования данных
- Развлечение: создание загадок и криптограмм
Демонстрация
Попробуйте скрипт: страницу подбора цветов
Автор: ordanax.github.io
Не получилось? Поможем настроить
Задай вопрос в чате — отвечаем быстро, по делу и без воды.
Комментарии