⌨️ Цвета ✓ Бесплатно

Цвет
для кода

Один цвет в синтаксисе восемнадцати платформ — от CSS до Delphi. Копируйте готовую строку прямо в исходник. Форматы с необычным порядком компонентов помечены, чтобы на них не попасться.

📦18 форматов
⚠️Пометки о ловушках
🫧Учёт альфы
Копирование в клик
Цвет
A100

Форматы без поддержки альфа-канала её просто игнорируют.

Готовые цвета:
Порядок компонентов совпадает не везде. Android и Flutter ставят альфу первой, а Delphi и Win32 хранят каналы в обратном порядке — синий, зелёный, красный. Такие форматы помечены отдельно.
Выбранный цвет#4F8EF7
Веб
  • CSS — HEX#4F8EF7
  • CSS — rgbrgb(79, 142, 247)
  • CSS-переменная--color: #4F8EF7;
  • Tailwind — произвольное значениеbg-[#4F8EF7]
Мобильные
  • SwiftUIColor(red: 0.310, green: 0.557, blue: 0.969, opacity: 1.000)
  • UIKit — SwiftUIColor(red: 0.310, green: 0.557, blue: 0.969, alpha: 1.000)
  • Android — XMLальфа записывается первой#FF4F8EF7
  • Jetpack Composeальфа перваяColor(0xFF4F8EF7)
  • Flutter — Dartальфа перваяColor(0xFF4F8EF7)
Десктоп и игры
  • C# — .NETColor.FromArgb(255, 79, 142, 247)
  • Unity — Color32new Color32(79, 142, 247, 255)
  • GLSL — vec4vec4(0.310, 0.557, 0.969, 1.000)
  • Qt — C++QColor(79, 142, 247)
  • Delphi — TColorпорядок BGR, а не RGB$00F78E4F
  • Win32 — COLORREFпорядок BGR0x00F78E4F
Прочее
  • Java — AWTnew Color(79, 142, 247)
  • Python — кортеж(79, 142, 247)
  • Целое число5213943

Три способа записать одно и то же

Платформы делятся на три лагеря. Одни хранят каналы целыми числами от 0 до 255 — так работают CSS, C#, Qt и Unity в варианте Color32. Другие используют дробные значения от нуля до единицы: Swift, SwiftUI, GLSL и Unity в обычном Color. Третьи упаковывают всё в одно целое число — Flutter, Compose, Android XML.

Внутри третьего лагеря и прячется главная ловушка. У Android и Flutter альфа стоит первой: 0xFF4F8EF7, где FF это непрозрачность. А Delphi и Win32 API хранят каналы задом наперёд — сначала синий, потом зелёный, потом красный. Тот же цвет там записывается как $00F78E4F, и подставленный «как есть» HEX даст совсем другой оттенок.

  • CSS — #4F8EF7
  • Flutter — 0xFF4F8EF7, альфа первая
  • Swift — 0.310, 0.557, 0.969
  • Delphi — $00F78E4F, порядок BGR
  • Целое число — 5213943
Где альфа первая Осторожно
Android XML #AARRGGBB
Jetpack Compose 0xAARRGGBB
Flutter 0xAARRGGBB
CSS — наоборот #RRGGBBAA
Где порядок BGR Совсем наоборот
Delphi TColor $00BBGGRR
Win32 COLORREF 0x00BBGGRR
Причина порядок байт x86
Симптом ошибки синий вместо красного

Частые вопросы

Скорее всего перепутан порядок компонентов. В Android XML и в Compose альфа записывается первой: 0xFF4F8EF7 — это непрозрачный #4F8EF7. Если подставить HEX без ведущих FF, первые два знака цвета будут восприняты как прозрачность, и результат окажется совсем другим.
Это внутренний формат TColor, где каналы идут в обратном порядке — сначала синий, затем зелёный, затем красный. Причина историческая: так значение ложится в память на процессорах x86. Если вставить туда обычный HEX, красный и синий поменяются местами.
Дробными числами от нуля до единицы, а не байтами. Значение 79 превращается в 0.310, потому что 79 делится на 255. И UIColor, и SwiftUI Color принимают именно такие числа, а не целые от 0 до 255.
Форматом хранения. Color использует дробные значения от нуля до единицы, Color32 — байты от 0 до 255. Второй компактнее и удобнее, когда цвет пришёл из графического редактора; движок конвертирует их между собой автоматически.
Функцией rgba с четвёртым числом от 0 до 1 либо восьмизначным HEX, где альфа идёт последней: #4F8EF780. Обратите внимание, что порядок противоположен принятому в Android — там альфа первая.
Это те же три канала, упакованные в целое: красный сдвинут на шестнадцать бит, зелёный на восемь, синий остаётся как есть. Формат встречается в старых API и при хранении цвета в базе данных, где заводить отдельные поля неудобно.