Извлечение шестнадцатеричных цветовых кодов из текста

Одним кликом искать и извлекать все шестнадцатеричные коды цветов из текста

Как использовать извлекатель шестнадцатеричных цветовых кодов

Вставьте CSS, HTML, заметки по дизайну или любой текст, содержащий шестнадцатеричные цвета. Инструмент находит такие коды, как #0F5C8C и #abc, а затем перечисляет их для копирования или загрузки. Обработка выполняется в вашем браузере.

  1. Вставьте ваш текст в поле ввода (таблицы стилей, фрагменты HTML или заметки по дизайну).
  2. Выбрать параметры
    • Удалить дублирующиеся цвета — держите каждый цвет один раз.
    • Стандартизировать формат (заглавные буквы) — нормализовать в шестнадцатеричный верхний регистр.
    • Включить цвета в короткой форме (#abc) — также соответствуют 3-значным шестнадцатеричным значениям.
    • Расширьте короткую форму до 6 цифр (#abc → #AABBCC) — превращает #abc в #AABBCC, когда короткая форма включена.
    • Показать предварительный просмотр цветов — отображать образцы рядом со значениями.
  3. Нажмите «Извлечь цветовые коды».
  4. Копировать, скачать или просмотреть извлечённый список и превью.

Hex color extractor example

Распространённые варианты использования

  • Аудит CSS / темы: Извлеките все шестнадцатеричные цвета из файла стилей или файла токенов дизайна.
  • Согласованность бренда: Собирайте используемые цвета в шаблонах HTML или разметке электронной почты.
  • Передача дизайна: Извлеките цвета из заметок или экспортированного CSS перед повторной сборкой UI-кита.
  • Очистка: Найдите оставшиеся или повторяющиеся цвета перед объединением палитры.

Какие форматы обнаруживаются?

  • 6-значный шестнадцатеричный код: #0F5C8C, #ff5733 (с или без # в зависимости от контекста в тексте)
  • 3-значная краткая форма: #abc, #F00 (когда включена опция «Включить краткую форму»)
  • Расширенная краткая форма: #abc → #AABBCC когда включено расширение

Функции RGB/HSL здесь не конвертируются — этот инструмент только извлекает шестнадцатеричные цветовые коды.

Пример: До и После

С включенными параметрами «Включить краткую форму», «Расширить краткую форму», «Удалить дубликаты» и «Стандартизировать формат»:

Ввод CSSИзвлечённые цвета
.btn {
  color: #ff0000;
  background: #abc;
  border-color: #FF0000;
  outline: #0F5C8C;
}
#FF0000
#AABBCC
#0F5C8C

#ff0000 и #FF0000 свести к одному заглавному значению. Коротко #abc расширяется до #AABBCC.

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

Инструмент загружает моё CSS или HTML?

Нет. Извлечение выполняется локально в вашем браузере. Ваш текст не отправляется на наши серверы.

Почему отсутствует короткий цвет вроде #abc?

Включить Включить сокращённые обозначения цветов. Включить при необходимости Расширить краткую форму перечислить эквивалент из 6 цифр.

Может ли он извлекать значения rgb() или hsl()?

Не на этой странице. Используйте специализированный конвертер цветов, если вам нужен перевод RGB ↔ Hex (например Hex в RGB / RGB в Hex).

Требуется ли знак #?

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

Конфиденциальность

Все сопоставления происходят на вашем устройстве с помощью JavaScript. Мы не храним текст, который вы вставляете, или цвета, которые вы извлекаете.