Преобразование цветовых кодов в C#

Краткий ответ

Чтобы преобразовать цветовой код в C#, разберите строку цвета CSS с помощью Color.FromString(), а затем выведите значение с помощью ToRgbString(), ToRgbHexString() или ToRgbaHexString(). Этот подход позволяет преобразовывать HEX в RGB, RGB в HEX, HSL в HEX, имена цветов в HEX и приводить цвета SVG к единому формату.

В этой статье показано, как программно преобразовывать цветовые коды с помощью Aspose.SVG for .NET. Класс Color разбирает строки цветов CSS в форматах HEX, RGB, RGBA, HSL, HSLA, HWB, LAB, LCH, OKLAB, OKLCH, CMYK, NCOL и имена цветов, а затем преобразует их в требуемый выходной формат.

Преобразование цветов применяется для сравнения цветов SVG, нормализации значений, извлеченных из файла, подготовки палитры или преобразования форматов CSS для отчетов и проверки данных.

Вы узнаете, как:

преобразовать HEX в RGB в C#;
преобразовать RGB, HSL и имена цветов в HEX;
сохранить альфа-канал при преобразовании RGBA в восьмизначный HEX;
нормализовать несколько цветов SVG в одном формате;
выбрать формат цветового кода для SVG, CSS, дизайна или печати.

Используемые API Aspose.SVG

В примерах используется API рисования Aspose.SVG:

API	Назначение
Color	Представляет разобранный цвет и преобразует его между выходными форматами
Color.FromString()	Разбирает строки цветов CSS, например `#ff31ca`, `rgb(...)`, `hsl(...)`, `black` или `cmyk(...)`
Color.FromRgb()	Создает цвет из значений компонентов RGB
Color.FromHsl()	Создает цвет из значений компонентов HSL
Color.FromCmyk()	Создает цвет из значений компонентов CMYK
ToRgbString()	Выводит цвет в формате `rgb(R, G, B)`
ToRgbHexString()	Выводит цвет в формате `#RRGGBB`
ToRgbaHexString()	Выводит цвет в формате `#RRGGBBAA`
Convert()	Возвращает компоненты цвета в выбранной цветовой модели

Основные задачи преобразования цветов

В таблице перечислены типовые операции преобразования цветов в C#:

Задача	Шаблон C#
Преобразовать HEX в RGB	`Color.FromString("#ff31ca").ToRgbString()`
Преобразовать RGB в HEX	`Color.FromString("rgb(255, 49, 202)").ToRgbHexString()`
Преобразовать HSL в HEX	`Color.FromString("hsl(315, 100%, 60%)").ToRgbHexString()`
Преобразовать имя цвета в HEX	`Color.FromString("black").ToRgbHexString()`
Преобразовать RGBA в восьмизначный HEX	`Color.FromString("rgba(255, 49, 202, 0.5)").ToRgbaHexString()`
Нормализовать цвета SVG	Разберите каждое значение с помощью `Color.FromString()` и выведите его через `ToRgbHexString()`

Примеры преобразования цветов

Следующие примеры охватывают основные задачи преобразования цветов в C#: HEX, RGB, HSL, имена цветов, RGBA, значения компонентов и извлеченные цвета SVG.

Преобразование HEX в RGB

Чтобы преобразовать HEX в RGB, разберите HEX-значение с помощью Color.FromString() и вызовите ToRgbString():

1using Aspose.Svg.Drawing;
2using System;

 1// Convert a HEX color value to RGB format in C#
 2
 3// Parse HEX color from a string
 4Color color = Color.FromString("#ff31ca");
 5
 6// Convert HEX to RGB
 7string rgbColor = color.ToRgbString();
 8
 9// Print result to console
10Console.WriteLine(rgbColor);
11// Result: rgb(255, 49, 202)

Example-ConvertHexToRgb.cs hosted with ❤ by GitHub

Используйте это преобразование, когда цвет задан HEX-кодом CSS, а для отчета, проверки или последующей обработки изображения требуется формат RGB.

Преобразование RGB в HEX

Чтобы преобразовать RGB в HEX, разберите строку RGB и выведите нормализованное шестизначное HEX-значение с помощью ToRgbHexString():

1using Aspose.Svg.Drawing;
2using System;

 1// Convert an RGB color value to HEX format in C#
 2
 3// Parse RGB color from a string
 4Color color = Color.FromString("rgb(255, 49, 202)");
 5
 6// Convert RGB to HEX
 7string hexColor = color.ToRgbHexString();
 8
 9// Print result to console
10Console.WriteLine(hexColor);
11// Result: #FF31CA

Example-ConvertRgbToHex.cs hosted with ❤ by GitHub

Такой подход полезен, когда все извлеченные цвета SVG или CSS необходимо привести к единому формату.

Преобразование HSL в HEX

Цвета в SVG и CSS могут быть записаны в формате HSL. Строку HSL можно разобрать и преобразовать в HEX:

1using Aspose.Svg.Drawing;
2using System;

 1// Convert an HSL color value to HEX format in C#
 2
 3// Parse HSL color from a string
 4Color color = Color.FromString("hsl(315, 100%, 60%)");
 5
 6// Convert HSL to HEX
 7string hexColor = color.ToRgbHexString();
 8
 9// Print result to console
10Console.WriteLine(hexColor);
11// Result: #FF33CC

Example-ConvertHslToHex.cs hosted with ❤ by GitHub

Используйте этот подход, если инструменты для работы с CSS, дизайн-системы или темы хранят цвета в формате HSL, а приложению нужны HEX-значения для сравнения или вывода.

Преобразование имени цвета в HEX

Метод Color.FromString() разбирает имена цветов CSS. Это позволяет нормализовать именованные значения при обработке атрибутов SVG.

1using Aspose.Svg.Drawing;
2using System;

 1// Convert a named color value to HEX format in C#
 2
 3// Parse a named color from a string
 4Color color = Color.FromString("black");
 5
 6// Convert named color to HEX
 7string hexColor = color.ToRgbHexString();
 8
 9// Print result to console
10Console.WriteLine(hexColor);
11// Result: #000000

Example-ConvertColorNameToHex.cs hosted with ❤ by GitHub

Это особенно полезно для SVG, поскольку графические редакторы и созданные вручную файлы могут одновременно содержать имена цветов, HEX-коды и функциональные значения цветов CSS.

Преобразование RGBA в HEX с сохранением альфа-канала

Если цвет содержит прозрачность, используйте восьмизначный HEX, чтобы сохранить альфа-канал. Альфа-канал важен для прозрачных заливок SVG, обводок, теней, наложений и элементов интерфейса.

1using Aspose.Svg.Drawing;
2using System;

1// Convert an RGBA color value to 8-digit HEX format in C#
2
3// Parse RGBA color from a string
4Color color = Color.FromString("rgba(255, 49, 202, 0.5)");
5
6// Convert RGBA to 8-digit HEX
7Console.WriteLine(color.ToRgbaHexString());
8// Result: #FF31CA7F

Example-ConvertRgbaToHex.cs hosted with ❤ by GitHub

Используйте ToRgbHexString(), если требуется только цвет RGB. Если необходимо сохранить прозрачность в HEX, используйте ToRgbaHexString().

Подробнее о прозрачности SVG см. в статье Прозрачность SVG и цвета с альфа-каналом в C#.

Создание цветов из значений компонентов

Цвет можно создать непосредственно из значений компонентов, не разбирая строку. В следующем примере один и тот же красный цвет создается из компонентов RGB, HSL и CMYK:

1using Aspose.Svg.Drawing;
2using System;

 1// Create the same red color from RGB, HSL, and CMYK components in C#
 2
 3// Create a color from RGB components
 4Color rgbColor = Color.FromRgb(255, 0, 0);
 5
 6// Create a color from HSL components
 7Color hslColor = Color.FromHsl(0, 1, 0.5f);
 8
 9// Create a color from CMYK components
10Color cmykColor = Color.FromCmyk(0, 1, 1, 0);
11
12// Print converted color values to console
13Console.WriteLine(rgbColor.ToRgbHexString());
14Console.WriteLine(hslColor.ToRgbString());
15Console.WriteLine(cmykColor.ToRgbHexString());
16// Result:
17// #FF0000
18// rgb(255, 0, 0)
19// #FF0000

Example-CreateColorsFromComponentValues.cs hosted with ❤ by GitHub

Создание цветов из компонентов удобно для генераторов палитр, процессов импорта и приложений, которые получают значения цветовых каналов из базы данных или элементов управления.

Нормализация цветов SVG в HEX

Эквивалентные цвета в SVG могут быть записаны в разных форматах:

1<rect fill="#808080" />
2<circle fill="rgb(128, 128, 128)" />
3<path stroke="hsl(0, 0%, 50%)" />

Для сравнения, отчетов или удаления дубликатов нормализуйте значения с помощью Color.FromString() и ToRgbHexString():

1using Aspose.Svg.Drawing;
2using System;
3using System.Collections.Generic;

 1// Normalize SVG color values to HEX format in C#
 2
 3
 4// Store equivalent colors written in different formats
 5List<string> sourceColors = new List<string>
 6{
 7    "#808080",
 8    "rgb(128, 128, 128)",
 9    "hsl(0, 0%, 50%)"
10};
11
12foreach (string sourceColor in sourceColors)
13{
14    // Parse each color value from a string
15    Color color = Color.FromString(sourceColor);
16
17    // Convert each color to HEX and print the result
18    Console.WriteLine($"{sourceColor} -> {color.ToRgbHexString()}");
19}

Example-NormalizeSvgColorsToHex.cs hosted with ❤ by GitHub

Ожидаемый результат:

1#808080 -> #808080
2rgb(128, 128, 128) -> #808080
3hsl(0, 0%, 50%) -> #808080

Если сначала требуется получить цвета из реального файла SVG, см. статью Извлечение цветов SVG в C#.

Онлайн-конвертер цветов

Цветовые коды можно преобразовывать онлайн или программно. Бесплатный онлайн-инструмент Конвертер цветов поддерживает имена цветов и популярные форматы HEX, RGB, HSL, HSV, LAB, HWB, CMYK, LCH, XYZ и NCOL. Введите цветовой код или выберите цвет визуально, чтобы получить эквивалентные значения в других форматах.

Форматы цветовых кодов

Разные форматы описывают один и тот же видимый цвет по-разному. Одни форматы распространены в CSS и SVG, другие используются в дизайн-системах, печати или цветоведении. Синтаксис цветов CSS определен в спецификации CSS Color Module Level 4.

RGB и RGBA

RGB (Red, Green, Blue) определяет цвет с помощью красного, зеленого и синего каналов в цветовом пространстве sRGB. В CSS и SVG значения обычно записываются как rgb(255, 0, 0) или в процентах, например rgb(100%, 0%, 0%). RGBA (Red, Green, Blue и Alpha) добавляет альфа-канал прозрачности, например rgba(255, 0, 0, 0.5).

RGB подходит для экранных цветов и взаимодействия с API обработки изображений. RGBA следует использовать, если прозрачность должна храниться в самом значении цвета, например для полупрозрачных заливок SVG, обводок, теней или наложений. Альфа-канал цвета и атрибуты прозрачности SVG связаны, но не идентичны: rgba(...) хранит прозрачность в значении цвета, а opacity, fill-opacity и stroke-opacity являются отдельными свойствами SVG.

HEX

HEX – компактная запись цветов sRGB для CSS и SVG. Поддерживаются формы #RGB, #RGBA, #RRGGBB и #RRGGBBAA. В полной форме пары RR, GG и BB задают красный, зеленый и синий каналы значениями от 00 до FF. При наличии альфа-канала пара AA задает прозрачность: 00 означает полную прозрачность, а FF – полную непрозрачность. Подробнее см. в разделе HEX notation спецификации CSS Color Module Level 4 и справочнике MDN <hex-color>.

HEX широко используется в атрибутах SVG, объявлениях CSS, переменных дизайн-систем, наборах иконок и конфигурации веб-интерфейсов. Этот формат также удобен для нормализованного вывода, поскольку он компактен, стабилен и легко сравнивается как текст.

HSL и HSLA

HSL (Hue, Saturation, Lightness) описывает цвет с помощью оттенка, насыщенности и светлоты. Оттенок задается углом на цветовом круге, насыщенность определяет интенсивность цвета, а светлота – близость результата к черному или белому. HSLA (Hue, Saturation, Lightness, Alpha) добавляет альфа-канал прозрачности.

HSL удобен для создания более светлых, темных или насыщенных вариантов цвета. В дизайн-системах изменять светлоту и насыщенность обычно проще, чем отдельные каналы RGB. Для сравнения, отчетов или очистки SVG значения HSL часто нормализуют в RGB или HEX.

HSV и HWB

HSV (Hue, Saturation, Value) хранит оттенок, насыщенность и значение яркости. Эта модель часто используется в средствах выбора цвета и графических редакторах, поскольку позволяет выбрать оттенок, а затем настроить яркость и насыщенность. HWB хранит оттенок, белизну и черноту и подходит для создания светлых и темных вариантов цвета.

Эти форматы реже встречаются в созданных вручную SVG, но могут поступать из конвертеров цветов, графических редакторов или интерфейсов управления палитрами. Перед сравнением с атрибутами SVG значения HSV или HWB следует привести к единому выходному формату.

LAB, LCH, OKLAB и OKLCH

LAB и LCH – перцептивные цветовые пространства, в которых числовые изменения лучше соответствуют воспринимаемым изменениям цвета. OKLAB и OKLCH – более новые перцептивные модели, используемые в современных CSS и процессах дизайна. Они полезны, когда различий между каналами RGB недостаточно, чтобы описать визуальную разницу между цветами.

Эти модели применяются для построения палитр, проверки доступности, анализа цветовых различий и создания плавных цветовых шкал. Для вывода SVG итоговые цвета можно преобразовать в HEX или RGB, если средство визуализации, процесс дизайна или правила проверки ожидают традиционный веб-формат.

CMYK и XYZ

CMYK (Cyan, Magenta, Yellow и blacK) – ориентированная на печать модель на основе голубого, пурпурного, желтого и черного компонентов. Она распространена в допечатной подготовке и полиграфическом дизайне, но обычно не применяется для атрибутов представления SVG или CSS в браузере. XYZ – аппаратно-независимое цветовое пространство CIE, используемое в цветоведении и процессах преобразования.

Используйте CMYK для печатных данных, а XYZ – для технических преобразований и взаимодействия с системами управления цветом. Перед записью в fill, stroke или stop-color веб-документа SVG преобразуйте печатные или аппаратно-независимые цвета в RGB-представление, например HEX или RGB.

Распространенные ошибки и решения

Проблема	Причина	Решение
Эквивалентные цвета не совпадают	Один цвет записан именем, другой – в HEX или RGB	Перед сравнением нормализуйте оба значения с помощью `Color.FromString()` и `ToRgbHexString()`
Прозрачность потеряна	Для цвета RGBA код вызывает `ToRgbString()` или `ToRgbHexString()`	Используйте `ToRgbaHexString()`, чтобы сохранить альфа-канал в HEX
Значение SVG не удается разобрать как цвет	Значения `none`, `currentColor` и `url(#id)` не являются непосредственными цветами	Отфильтруйте эти значения перед вызовом `Color.FromString()`
Вывод отличается от исходного текста	Преобразование нормализует значение и может изменить форму записи или регистр	Сохраните исходную строку отдельно, если важно ее форматирование
Ожидается строка CSS в формате CMYK или LAB	Эти модели представлены в API как набор компонентов	Используйте `Convert(ColorModel)`, чтобы получить компоненты выбранной цветовой модели

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

Как преобразовать HEX в RGB в C#?
Разберите HEX-код с помощью Color.FromString("#ff31ca"), затем вызовите ToRgbString(), чтобы получить rgb(255, 49, 202).

Как преобразовать RGB в HEX в C#?
Вызовите Color.FromString("rgb(255, 49, 202)"), а затем ToRgbHexString(), чтобы получить нормализованное значение #RRGGBB.

Можно ли преобразовать HSL в HEX в C#?
Да. Разберите значение HSL с помощью Color.FromString("hsl(315, 100%, 60%)"), затем вызовите ToRgbHexString().

Можно ли разбирать имена цветов CSS в C#?
Да. Метод Color.FromString() поддерживает имена цветов CSS. После разбора выведите значение с помощью ToRgbHexString() или другого метода преобразования. Для примеров с ожидаемым результатом выбирайте однозначные имена, например black.

Как нормализовать цвета SVG в HEX?
Получите непосредственные значения цветов из атрибутов или стилей SVG, пропустите none, currentColor и url(#id), разберите каждый цвет с помощью Color.FromString() и выведите его через ToRgbHexString().

Как сохранить прозрачность при преобразовании цвета?
Используйте ToRgbaHexString() для вывода восьмизначного HEX. RGB и шестизначный HEX не сохраняют альфа-канал.

Может ли Aspose.SVG преобразовывать цвета CMYK, LAB, LCH, OKLAB и OKLCH?
Да. Класс Color поддерживает несколько цветовых пространств и позволяет разбирать или создавать цвета в разных моделях. Используйте Color.FromString() для поддерживаемых строк CSS или специализированные методы FromCmyk(), FromLab(), FromLch(), FromOklab() и FromOklch().

Связанные материалы

Извлечение цветов SVG в C# – Получите уникальные цвета SVG перед преобразованием или нормализацией.
Замена цветов SVG в C# – Заменяйте цвета заливки, обводки, inline-стилей и контрольных точек градиента после нормализации.
Прозрачность SVG и цвета с альфа-каналом – Работайте с RGBA, HSLA, opacity, fill-opacity, stroke-opacity и прозрачным фоном при экспорте.
Как изменить цвет SVG – Изменяйте цвета заливки и обводки элементов SVG.
Цвет SVG – Узнайте, как задаются цвета в SVG.
Заливка и обводка в SVG – Изучите свойства заливки и обводки SVG.
Как запустить примеры – Настройте и запустите примеры Aspose.SVG локально.

Конвертер цветов – бесплатное онлайн-приложение для преобразования значений цвета между форматами. Введите цветовой код, чтобы сразу получить эквивалентные значения.

Работа с цветами SVG Как изменить цвет SVG