Как задать цвет в c
Перейти к содержимому

Как задать цвет в c

  • автор:

Как задать цвет в c

За установку цвета фона и текста элементов отвечают свойства BackgroundColor и TextColor соответственно. В качестве значение они принимают объект класса Microsoft.Maui.Graphics.Color :

namespace HelloApp < class StartPage : ContentPage < public StartPage() < Label header = new Label() < Text = "Hello METANIT.COM" >; header.HorizontalTextAlignment = TextAlignment.Center; header.VerticalTextAlignment = TextAlignment.Center; header.BackgroundColor = Colors.LightBlue; // фоновый цвет header.TextColor = Colors.DarkBlue; // цвет текста Content = header; > > >

В данном случае для определения цвета применялись встроенные готовые цвета из статического класса Colors.

Установка цвета в .NET MAUI и C#

Кроме встроенных готовых цветов типа Colors.DarkBlue (так называемых именнованных цветов) также для установки цвета мы можем указать и другие значения, можно использовать один из конструкторов класса Color. Некоторые из них:

  • new Color(float grayShade) : устанавливает тон серого цвета
  • new Color(float r, float g, float b) : устанавливает компоненты красного, зеленого и синего. Каждая компонента должна иметь значения в диапазоне от 0.0 до 1.0
  • new Color(byte r, byte g, byte b) : устанавливает компоненты красного, зеленого и синего. Каждая компонента должна иметь значения в диапазоне от 0 до 255
  • new Color(float r, float g, float b, float a) : добавляет еще один параметр — a , который передает прозрачность и имеет значение от 0.0 (полностью прозрачный) до 1.0 (не прозрачный)
  • new Color(byte r, byte g, byte b, byte a) : устанавливает компоненты красного, зеленого, синего и прозрачности
Label header = new Label() < Text = "Hello METANIT.COM" >; header.BackgroundColor = new Color(178, 223, 219); header.TextColor = new Color(0, 77, 64);

BackgtoundColor и TextColor в .NET MAUI и C#

Также для установки цвета мы можем использовать ряд статических методов:

  • Color.FromArgb(string hex) : возвращает объект Color, созданный по переданному в качестве параметра шестнадцатеричному значению. В качестве значения в метод передается строка в формате «#AARRGGBB», «#RRGGBB», «#ARGB» или «RGB», где A — показатель прозрачности, R — значение для красного цвета, G — значение для зеленого компонента и B — представляет синий цвет
  • Color.FromRgb(double r, double g, double b) : возвращает объект Color, для которого также устанавливаются компоненты красного, зеленого и синего
  • Color.FromRgb(int r, int g, int b) : аналогичен предыдущей версии метода, только теперь компоненты красного, зеленого и синего имеют целочисленные значения от 0 до 255
  • Color.FromRgba(double r, double g, double b, double a) : добавляет параметр прозрачности со значением от 0.0 (полностью прозрачный) до 1.0 (не прозрачный)
  • Color.FromRgba(int r, int g, int b, int a) : добавляет параметр прозрачности со значением от 0 (полностью прозрачный) до 255 (не прозрачный)
  • Color.FromHsla(double h, double s, double l, double a) : устанавливает последовательно параметры h (hue — тон цвета), s (saturation — насыщенность), l (luminosity — яркость) и прозрачность.
Label header = new Label() < Text = "Hello METANIT.COM" >; header.BackgroundColor = Color.FromArgb("#B2DFDB"); header.TextColor = Color.FromArgb("#aa004D40");

В xaml мы можем задавать цвет с помощью шестнадцатеричных значений также, как в HTML/CSS:

Управление цветом

Стоит отметить, что у класса Color определено ряд дополнительных методов, которые позволяют управлять цветом. В частности, ряд методов позволяются выполнять преобразования

  • ToHex : возвращает шестнадцатеричное значение текущего цвета в виде строки.
  • ToArgbHex : возвращает шестнадцатеричное значение текущего цвета в виде строки в формате ARGB
  • ToRgbaHex : возвращает шестнадцатеричное значение текущего цвета в виде строки в формате RGBA
  • ToInt : возвращает числовое ARGB-представление текущего цвета в виде значения int
  • ToUint : возвращает числовое ARGB-представление текущего цвета в виде значения uint
  • ToRgb : преобразует текущей цвет в отдельные компоненты RGB типа byte
  • ToRgba : преобразует текущей цвет в отдельные компоненты RGBA типа byte
  • ToHsl : преобразует текущей цвет в отдельные компоненты HSL типа float

Кроме того, у класса Color есть ряд дополнительных методов для управления отдельными аспектами цвета

  • AddLuminosity : добавляет цвету яркость
  • MultiplyAlpha : умножает альфа-компоненту (прозрачность) цвета на переданное значение типа float
  • WithAlpha : заменяет альфа-компоненту цвета
  • WithHue : заменяет тон цвета
  • WithLuminosity : заменяет яркость цвета
  • WithSaturation : заменяет насыщенность цвета

Применение некоторых методов:

Label header = new Label() < Text = "Hello METANIT.COM" >; Color customColor = Colors.Teal; customColor = customColor.WithAlpha(0.5f); customColor = customColor.WithHue(0.5f); customColor = customColor.WithLuminosity(0.9f); header.BackgroundColor = customColor;

Как изменить цвет для окна консоли c++

Внимание! Представленные ниже способы подходят только для Windows систем! Для Linux используйте библиотеку ncurses .

Можно менять цвет фона окна и символов без дополнительных библиотек, простой функцией system() . Достаточно написать, например, system(«color F0») и будет установлен белый фон (F) и чёрный текст (0). Можно писать и наоборот, например: system(«color 3F»); установит голубой фон и белый текст.

  • 0 — черный
  • 1 — синий
  • 2 — зеленый
  • 3 — голубой
  • 4 — красный
  • 5 — лиловый
  • 6 — желтый
  • 7 — белый
  • 8 — серый
  • 9 — свело-синий
  • A — светло-зеленый
  • B — светло-голубой
  • С — светло-красный
  • E — светло-желтый
  • F — ярко-белый

Можно использовать функцию SetConsoleTextAttribute() из Windows.h:

HANDLE h; h = GetStdHandle(STD_OUTPUT_HANDLE); //получаем наше окно, в котором нужно изменить цвет 

И установим жёлтый цвет на зелёном фоне:

SetConsoleTextAttribute(h, (((2  

Что же это за страшная функция? Если кратко: число смещается на 4 бита влево и объединяется со вторым в результате логического ИЛИ. Эти действия объединят числа, чтобы функция установила нужный цвет и фон. Если интересно, можно взять результат этих операций (в данном случае 46) и скормить их функции:

SetConsoleTextAttribute(h, 46); 

И вы получите такой же результат. Но настраивать гораздо удобнее по двум числа (первая отвечает за фон, вторая за текст).

Вот список цветов для этой функции:

  • Чёрный - 0
  • Синий - 1
  • Зелёный - 2
  • Голубой - 3
  • Красный - 4
  • Пурпурный - 5
  • Коричневый - 6
  • Светло-серый - 7
  • Тёмно-серый - 8
  • Светло-синий - 9
  • Светло-зелёный - 10
  • Светло-голубой - 11
  • Светло-красный- 12
  • Светло-пурпурный - 13
  • Жёлтый - 14
  • Белый - 15

примеры функций

Внимание! Функция system("color . ") устанавливает цвет для всей консоли и всех символов, а SetConsoleTextAttribute(); только для символов и той части консоли, которая находится под ними.

Color Структура

Некоторые сведения относятся к предварительной версии продукта, в которую до выпуска могут быть внесены существенные изменения. Майкрософт не предоставляет никаких гарантий, явных или подразумеваемых, относительно приведенных здесь сведений.

Представляет цвета в терминах каналов альфа, красного, зеленого и синего (ARGB).

public value class Color : IEquatable
public value class Color
[System.ComponentModel.TypeConverter("System.Drawing.ColorConverter, System.Drawing, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a")] public readonly struct Color : IEquatable
public struct Color : IEquatable
public readonly struct Color : IEquatable
[System.ComponentModel.TypeConverter(typeof(System.Drawing.ColorConverter))] [System.Runtime.InteropServices.ComVisible(true)] [System.Serializable] public struct Color
[System.ComponentModel.TypeConverter(typeof(System.Drawing.ColorConverter))] [System.Serializable] public struct Color
public struct Color
[] type Color = struct
type Color = struct
[] [] [] type Color = struct
[] [] type Color = struct
Public Structure Color Implements IEquatable(Of Color)
Public Structure Color

Наследование
Реализации

Примеры

В следующем примере кода демонстрируются Aсвойства Color, R, Gи B элемента .Implicit

Этот пример предназначен для использования с Формой Windows. Вставьте код в форму и вызовите ShowPropertiesOfSlateBlue метод из метода обработки событий формы Paint , передавая e как PaintEventArgs.

void ShowPropertiesOfSlateBlue( PaintEventArgs^ e ) < Color slateBlue = Color::FromName( "SlateBlue" ); Byte g = slateBlue.G; Byte b = slateBlue.B; Byte r = slateBlue.R; Byte a = slateBlue.A; array^temp0 = ; String^ text = String::Format( "Slate Blue has these ARGB values: Alpha:, " "red:, green: , blue ", temp0 ); e->Graphics->DrawString( text, gcnew System::Drawing::Font( this->Font,FontStyle::Italic ), gcnew SolidBrush( slateBlue ), RectangleF(PointF(0.0F,0.0F),this->Size) ); > 
private void ShowPropertiesOfSlateBlue(PaintEventArgs e) < Color slateBlue = Color.FromName("SlateBlue"); byte g = slateBlue.G; byte b = slateBlue.B; byte r = slateBlue.R; byte a = slateBlue.A; string text = String.Format("Slate Blue has these ARGB values: Alpha:, " + "red:, green: , blue ", new object[]); e.Graphics.DrawString(text, new Font(this.Font, FontStyle.Italic), new SolidBrush(slateBlue), new RectangleF(new PointF(0.0F, 0.0F), this.Size)); > 
Private Sub ShowPropertiesOfSlateBlue(ByVal e As PaintEventArgs) Dim slateBlue As Color = Color.FromName("SlateBlue") Dim g As Byte = slateBlue.G Dim b As Byte = slateBlue.B Dim r As Byte = slateBlue.R Dim a As Byte = slateBlue.A Dim text As String = _ String.Format("Slate Blue has these ARGB values: Alpha:, " _ & "red:, green: , blue ", New Object() ) e.Graphics.DrawString(text, New Font(Me.Font, FontStyle.Italic), _ New SolidBrush(slateBlue), _ New RectangleF(New PointF(0.0F, 0.0F), _ Size.op_Implicit(Me.Size))) End Sub 

Комментарии

Именованные цвета представляются с помощью свойств Color структуры .

Цвет каждого пикселя представлен в виде 32-разрядного числа: 8 бит для альфа-, красного, зеленого и синего (ARGB). Каждый из четырех компонентов представляет собой число от 0 до 255, при этом 0 означает отсутствие интенсивности, а 255 — полную интенсивность. Альфа-компонент указывает прозрачность цвета: 0 означает полную прозрачность, а 255 — полную непрозрачность. Чтобы определить альфа-, красный, зеленый или синий компонент цвета, используйте Aсвойство , R, Gили B соответственно. Можно создать пользовательский цвет с помощью одного из FromArgb методов .

Дополнительные сведения об этих цветах см. в разделе Список цветов по имени.

Поля

Представляет цвет, являющийся значением null .

Свойства

Получает значение альфа-компонента этой структуры Color.

Возвращает системный цвет, имеющий ARGB-значение #FFF0F8FF .

Возвращает системный цвет, имеющий ARGB-значение #FFFAEBD7 .

Возвращает системный цвет, имеющий ARGB-значение #FF00FFFF .

Возвращает системный цвет, имеющий ARGB-значение #FF7FFFD4 .

Возвращает системный цвет, имеющий ARGB-значение #FFF0FFFF .

Получает значение синего компонента этой структуры Color.

Возвращает системный цвет, имеющий ARGB-значение #FFF5F5DC .

Возвращает системный цвет, имеющий ARGB-значение #FFFFE4C4 .

Возвращает системный цвет, имеющий ARGB-значение #FF000000 .

Возвращает системный цвет, имеющий ARGB-значение #FFFFEBCD .

Возвращает системный цвет, имеющий ARGB-значение #FF0000FF .

Возвращает системный цвет, имеющий ARGB-значение #FF8A2BE2 .

Возвращает системный цвет, имеющий ARGB-значение #FFA52A2A .

Возвращает системный цвет, имеющий ARGB-значение #FFDEB887 .

Возвращает системный цвет, имеющий ARGB-значение #FF5F9EA0 .

Возвращает системный цвет, имеющий ARGB-значение #FF7FFF00 .

Возвращает системный цвет, имеющий ARGB-значение #FFD2691E .

Возвращает системный цвет, имеющий ARGB-значение #FFFF7F50 .

Возвращает системный цвет, имеющий ARGB-значение #FF6495ED .

Возвращает системный цвет, имеющий ARGB-значение #FFFFF8DC .

Возвращает системный цвет, имеющий ARGB-значение #FFDC143C .

Возвращает системный цвет, имеющий ARGB-значение #FF00FFFF .

Возвращает системный цвет, имеющий ARGB-значение #FF00008B .

Возвращает системный цвет, имеющий ARGB-значение #FF008B8B .

Возвращает системный цвет, имеющий ARGB-значение #FFB8860B .

Возвращает системный цвет, имеющий ARGB-значение #FFA9A9A9 .

Возвращает системный цвет, имеющий ARGB-значение #FF006400 .

Возвращает системный цвет, имеющий ARGB-значение #FFBDB76B .

Возвращает системный цвет, имеющий ARGB-значение #FF8B008B .

Возвращает системный цвет, имеющий ARGB-значение #FF556B2F .

Возвращает системный цвет, имеющий ARGB-значение #FFFF8C00 .

Возвращает системный цвет, имеющий ARGB-значение #FF9932CC .

Возвращает системный цвет, имеющий ARGB-значение #FF8B0000 .

Возвращает системный цвет, имеющий ARGB-значение #FFE9967A .

Возвращает системный цвет, имеющий ARGB-значение #FF8FBC8B .

Возвращает системный цвет, имеющий ARGB-значение #FF483D8B .

Возвращает системный цвет, имеющий ARGB-значение #FF2F4F4F .

Возвращает системный цвет, имеющий ARGB-значение #FF00CED1 .

Возвращает системный цвет, имеющий ARGB-значение #FF9400D3 .

Возвращает системный цвет, имеющий ARGB-значение #FFFF1493 .

Возвращает системный цвет, имеющий ARGB-значение #FF00BFFF .

Возвращает системный цвет, имеющий ARGB-значение #FF696969 .

Возвращает системный цвет, имеющий ARGB-значение #FF1E90FF .

Возвращает системный цвет, имеющий ARGB-значение #FFB22222 .

Возвращает системный цвет, имеющий ARGB-значение #FFFFFAF0 .

Возвращает системный цвет, имеющий ARGB-значение #FF228B22 .

Возвращает системный цвет, имеющий ARGB-значение #FFFF00FF .

Получает значение зеленого компонента этой структуры Color.

Возвращает системный цвет, имеющий ARGB-значение #FFDCDCDC .

Возвращает системный цвет, имеющий ARGB-значение #FFF8F8FF .

Возвращает системный цвет, имеющий ARGB-значение #FFFFD700 .

Возвращает системный цвет, имеющий ARGB-значение #FFDAA520 .

Возвращает системный цвет, имеющий ARGB-значение #FF808080 .

Возвращает системный цвет, имеющий ARGB-значение #FF008000 .

Возвращает системный цвет, имеющий ARGB-значение #FFADFF2F .

Возвращает системный цвет, имеющий ARGB-значение #FFF0FFF0 .

Возвращает системный цвет, имеющий ARGB-значение #FFFF69B4 .

Возвращает системный цвет, имеющий ARGB-значение #FFCD5C5C .

Возвращает системный цвет, имеющий ARGB-значение #FF4B0082 .

Определяет, является ли эта структура Color неинициализированной.

Возвращает значение, показывающее, является ли структура Color предопределенным цветом. Предварительно определенные цвета, представленные элементами перечисления KnownColor.

Получает значение, указывающее, является ли структура Color именованным цветом или элементом перечисления KnownColor.

Возвращает значение, показывающее, является ли структура Color системным цветом. Системным является цвет, который используется в элементе отображения Windows. Системные цвета, представленные элементами перечисления KnownColor.

Возвращает системный цвет, имеющий ARGB-значение #FFFFFFF0 .

Возвращает системный цвет, имеющий ARGB-значение #FFF0E68C .

Возвращает системный цвет, имеющий ARGB-значение #FFE6E6FA .

Возвращает системный цвет, имеющий ARGB-значение #FFFFF0F5 .

Возвращает системный цвет, имеющий ARGB-значение #FF7CFC00 .

Возвращает системный цвет, имеющий ARGB-значение #FFFFFACD .

Возвращает системный цвет, имеющий ARGB-значение #FFADD8E6 .

Возвращает системный цвет, имеющий ARGB-значение #FFF08080 .

Возвращает системный цвет, имеющий ARGB-значение #FFE0FFFF .

Возвращает системный цвет, имеющий ARGB-значение #FFFAFAD2 .

Возвращает системный цвет, имеющий ARGB-значение #FFD3D3D3 .

Возвращает системный цвет, имеющий ARGB-значение #FF90EE90 .

Возвращает системный цвет, имеющий ARGB-значение #FFFFB6C1 .

Возвращает системный цвет, имеющий ARGB-значение #FFFFA07A .

Возвращает системный цвет, имеющий ARGB-значение #FF20B2AA .

Возвращает системный цвет, имеющий ARGB-значение #FF87CEFA .

Возвращает системный цвет, имеющий ARGB-значение #FF778899 .

Возвращает системный цвет, имеющий ARGB-значение #FFB0C4DE .

Возвращает системный цвет, имеющий ARGB-значение #FFFFFFE0 .

Возвращает системный цвет, имеющий ARGB-значение #FF00FF00 .

Возвращает системный цвет, имеющий ARGB-значение #FF32CD32 .

Возвращает системный цвет, имеющий ARGB-значение #FFFAF0E6 .

Возвращает системный цвет, имеющий ARGB-значение #FFFF00FF .

Возвращает системный цвет, имеющий ARGB-значение #FF800000 .

Возвращает системный цвет, имеющий ARGB-значение #FF66CDAA .

Возвращает системный цвет, имеющий ARGB-значение #FF0000CD .

Возвращает системный цвет, имеющий ARGB-значение #FFBA55D3 .

Возвращает системный цвет, имеющий ARGB-значение #FF9370DB .

Возвращает системный цвет, имеющий ARGB-значение #FF3CB371 .

Возвращает системный цвет, имеющий ARGB-значение #FF7B68EE .

Возвращает системный цвет, имеющий ARGB-значение #FF00FA9A .

Возвращает системный цвет, имеющий ARGB-значение #FF48D1CC .

Возвращает системный цвет, имеющий ARGB-значение #FFC71585 .

Возвращает системный цвет, имеющий ARGB-значение #FF191970 .

Возвращает системный цвет, имеющий ARGB-значение #FFF5FFFA .

Возвращает системный цвет, имеющий ARGB-значение #FFFFE4E1 .

Возвращает системный цвет, имеющий ARGB-значение #FFFFE4B5 .

Возвращает имя этого аспекта Color.

Возвращает системный цвет, имеющий ARGB-значение #FFFFDEAD .

Возвращает системный цвет, имеющий ARGB-значение #FF000080 .

Возвращает системный цвет, имеющий ARGB-значение #FFFDF5E6 .

Возвращает системный цвет, имеющий ARGB-значение #FF808000 .

Возвращает системный цвет, имеющий ARGB-значение #FF6B8E23 .

Возвращает системный цвет, имеющий ARGB-значение #FFFFA500 .

Возвращает системный цвет, имеющий ARGB-значение #FFFF4500 .

Возвращает системный цвет, имеющий ARGB-значение #FFDA70D6 .

Возвращает системный цвет, имеющий ARGB-значение #FFEEE8AA .

Возвращает системный цвет, имеющий ARGB-значение #FF98FB98 .

Возвращает системный цвет, имеющий ARGB-значение #FFAFEEEE .

Возвращает системный цвет, имеющий ARGB-значение #FFDB7093 .

Возвращает системный цвет, имеющий ARGB-значение #FFFFEFD5 .

Возвращает системный цвет, имеющий ARGB-значение #FFFFDAB9 .

Возвращает системный цвет, имеющий ARGB-значение #FFCD853F .

Возвращает системный цвет, имеющий ARGB-значение #FFFFC0CB .

Возвращает системный цвет, имеющий ARGB-значение #FFDDA0DD .

Возвращает системный цвет, имеющий ARGB-значение #FFB0E0E6 .

Возвращает системный цвет, имеющий ARGB-значение #FF800080 .

Получает значение красного компонента этой структуры Color.

Возвращает системный цвет, имеющий ARGB-значение #663399 .

Возвращает системный цвет, имеющий ARGB-значение #FFFF0000 .

Возвращает системный цвет, имеющий ARGB-значение #FFBC8F8F .

Возвращает системный цвет, имеющий ARGB-значение #FF4169E1 .

Возвращает системный цвет, имеющий ARGB-значение #FF8B4513 .

Возвращает системный цвет, имеющий ARGB-значение #FFFA8072 .

Возвращает системный цвет, имеющий ARGB-значение #FFF4A460 .

Возвращает системный цвет, имеющий ARGB-значение #FF2E8B57 .

Возвращает системный цвет, имеющий ARGB-значение #FFFFF5EE .

Возвращает системный цвет, имеющий ARGB-значение #FFA0522D .

Возвращает системный цвет, имеющий ARGB-значение #FFC0C0C0 .

Возвращает системный цвет, имеющий ARGB-значение #FF87CEEB .

Возвращает системный цвет, имеющий ARGB-значение #FF6A5ACD .

Возвращает системный цвет, имеющий ARGB-значение #FF708090 .

Возвращает системный цвет, имеющий ARGB-значение #FFFFFAFA .

Возвращает системный цвет, имеющий ARGB-значение #FF00FF7F .

Возвращает системный цвет, имеющий ARGB-значение #FF4682B4 .

Возвращает системный цвет, имеющий ARGB-значение #FFD2B48C .

Возвращает системный цвет, имеющий ARGB-значение #FF008080 .

Возвращает системный цвет, имеющий ARGB-значение #FFD8BFD8 .

Возвращает системный цвет, имеющий ARGB-значение #FFFF6347 .

Получает цвет, определенный системой.

Возвращает системный цвет, имеющий ARGB-значение #FF40E0D0 .

Возвращает системный цвет, имеющий ARGB-значение #FFEE82EE .

Возвращает системный цвет, имеющий ARGB-значение #FFF5DEB3 .

Возвращает системный цвет, имеющий ARGB-значение #FFFFFFFF .

Возвращает системный цвет, имеющий ARGB-значение #FFF5F5F5 .

Возвращает системный цвет, имеющий ARGB-значение #FFFFFF00 .

Возвращает системный цвет, имеющий ARGB-значение #FF9ACD32 .

Методы

Указывает, равен ли текущий объект другому объекту того же типа.

Проверяет, является ли указанный объект структурой Color, эквивалентной структуре Color.

Создает структуру Color из 32-разрядного значения ARGB.

Создает структуру Color из указанной структуры Color, но с новым определенным значением альфа. Хотя и этот метод позволяет передать 32-разрядное значение для значения альфа, оно ограничено 8 разрядами.

Создает структуру Color из указанных 8-разрядных значений цветов (красный, зеленый, синий). Значение альфа неявно определено как 255 (полностью непрозрачно). Хотя и этот метод позволяет передать 32-разрядное значение для каждого компонента цвета, значение каждого из них ограничено 8 разрядами.

Создает структуру Color из четырех значений компонентов ARGB (альфа, красный, зеленый и синий). Хотя и этот метод позволяет передать 32-разрядное значение для каждого компонента, значение каждого из них ограничено 8 разрядами.

Создает структуру Color из указанного, предварительно определенного цвета.

Создает структуру Color из указанного имени предопределенного цвета.

Возвращает значение освещенности (оттенок-насыщенность-освещенность (HSL)) для данной структуры Color.

Возвращает хэш-код для этой структуры Color.

Возвращает значение оттенка (оттенок-насыщенность-освещенность (HSL)) в градусах для данной структуры Color.

Возвращает значение насыщенности (оттенок-насыщенность-освещенность (HSL)) для данной структуры Color.

Возвращает 32-разрядное значение ARGB этой структуры Color.

Возвращает значение KnownColor этой структуры Color.

Преобразует структуру Color в удобную для восприятия строку.

Операторы

Проверяет эквивалентность двух указанных структур Color.

Проверяет различие двух указанных структур Color.

Установка цвета для текста в CSS. Способы представления цветов

В первой части книги, в некоторых примерах мы уже демонстрировали, как установить цвет текста в CSS. Здесь нет ничего сложного: вам понадобится свойство color и значение того цвета, которым вы желаете окрасить текст.

В нашем примере значение #211C18 означает шестнадцатеричный код цвета. Если вы уже знакомы с шестнадцатеричной системой счисления, то можете пропустить чтение следующего абзаца. Также далее мы расскажем о других способах представления цветов в веб – с помощью цветовых моделей (RGB, HSL) и ключевых слов. Эта информация будет полезна новичкам и рекомендуется к прочтению.

Шестнадцатеричные цвета (hex)

Шестнадцатеричная система счисления (hexadecimal, hex) основывается на числе 16. Для записи шестнадцатеричного значения используется 16 символов: арабские цифры от 0 до 9 и первые буквы латинского алфавита (A, B, C, D, E, F). Цвет в шестнадцатеричном формате записывается в виде трех двузначных чисел от 00 до FF (перед ними обязательно ставится символ решетки #), что соответствует трем компонентам: Red, Green, Blue (цветовая модель RGB). Иными словами, запись цвета можно представить как #RRGGBB , где первая пара символов определяет уровень красного, вторая – уровень зеленого, третья – уровень синего цвета. Результирующий цвет является сочетанием этих трех цветов.

Сокращенная запись hex-цветов

Некоторые шестнадцатеричные значения цветов можно записать сокращенно. Для этого следует превратить запись вида #RRGGBB в #RGB . Это можно сделать в том случае, когда в hex-числе имеется три пары одинаковых символов.

Сокращенная форма записи встречается довольно часто, и для вашего ознакомления мы приведем несколько примеров сокращений. К слову, hex-значения цветов не чувствительны к регистру – вы можете использовать как прописные, так и строчные буквы, всё зависит от вашего желания и вкуса.

Примеры сокращенной записи hex-цветов:

HEX-код Сокращенная запись
#FFDD66 #FD6
#8833FF #83F
#333333 #333
#cccccc #ccc

Цветовая модель RGB

Второй способ указания цвета в CSS – использовать десятичные значения RGB (Red, Blue, Green). Для этого необходимо записать после свойства color ключевое слово rgb , а затем в скобках и через запятую – три числа в диапазоне от 0 до 255, каждое из которых означает интенсивность красного, зеленого и синего цветов (r, g, b). Чем больше число, тем более интенсивен цвет. К примеру, чтобы получить ярко-зеленый цвет, нужно записать:

А вот желтовато-горчичный оттенок имеет такое значение:

color: rgb(94, 81, 3); /* ниже – тот же цвет, записанный в шестнадцатеричном виде: */ color: #5E5103;

Значение черного цвета записывается как (0, 0, 0) , а белого – (255, 255, 255) . Также допускается указывать эти значения в процентах. Так, число 255 соответствует 100%, следовательно, белый цвет можно задать следующим образом:

color: rgb(100%, 100%, 100%);
Где искать значения цветов

Возможно, у вас возник вопрос: откуда же брать все эти значения цветов? Существует множество графических редакторов и онлайн-сервисов, с помощью которых можно подбирать цвета и строить цветовые схемы. Одна из наиболее популярных программ, в которой можно выбрать подходящий цвет и получить его значение RGB, hex и не только – Adobe Photoshop. В качестве альтернативы есть специальные сайты, на которых можно легко подобрать не только цвет, но и целую цветовую схему. Отличный пример – сервис Adobe Color CC.

Цветовая модель RGBA

Задать цвет в формате RGBA можно почти так же, как и в RGB. Отличие RGBA от RGB заключается в наличии альфа-канала, который отвечает за прозрачность цвета. Задается прозрачность с помощью числа в диапазоне от 0 до 1, где 0 соответствует полной прозрачности, а 1 , наоборот, означает полную непрозрачность. Промежуточные значения вроде 0.5 позволяют задать полупрозрачный вид (допускается сокращенная запись, без нуля, но с точкой – .5 ). Например, чтобы сделать текст цветным и слегка прозрачным, нужно записать после свойства color ключевое слово rgba и значение цвета:

Минусом RGBA является то, что его не поддерживает браузер Internet Explorer версии 8 и ранее. Специально для IE8 можно применить следующее решение:

Первое свойство в примере предназначено для браузера IE8, который отобразит текст нужным цветом, но без прозрачности. А те браузеры, которые понимают RGBA, применят к элементу второе свойство, с прозрачностью.

Цветовые модели HSL (HSLA)

Задавать цвет в CSS можно также с помощью координат цветовой модели HSL (Hue, Saturation, Lightness – тон, насыщенность, светлота). Записывается это так:

Первое число в скобках означает тон (hue) и задается в градусах (диапазон чисел от 0 до 359). Вам будет легко понять, почему используются именно градусы, если вы вспомните, как выглядит цветовой круг:

Цветовой круг HSL

Второе и третье числа в скобках означают насыщенность (saturation) и светлоту (lightness) соответственно. Их значения устанавливаются в процентах от 0 до 100. Чем ниже значение насыщенности, тем более приглушенным становится цвет. Значение saturation, равное нулю, приведет к серому цвету, при этом неважно, какое значение имеет hue. С помощью значения lightness (светлота) можно указать яркость цвета. Низкие значения приводят к темным оттенкам цвета, высокие – к светлым. Значение 100% для lightness означает белый цвет, 0% – черный.

Цветовая модель HSLA работает почти так же, как и HSL, но в ней, аналогично с RGBA, есть альфа-канал, с помощью которого можно задавать прозрачность цвета, указывая необходимое значение в диапазоне от 0 до 1:

HSL и HSLA поддерживаются всеми браузерами, кроме Internet Explorer версии 8 и ранее.

Стандартные цвета HTML

Еще один способ представления цветов в веб – это ключевые слова, при помощи которых можно указать цвет для элемента. Пример:

Существует 16 стандартных цветов, которые можно записать в значении свойства color :

Ключевое слово цвета HEX-код RGB
red #FF0000 255, 0, 0
maroon #800000 128, 0, 0
yellow #FFFF00 255, 255, 0
olive #808000 128, 128, 0
lime #00FF00 0, 255, 0
green #008000 0, 128, 0
aqua #00FFFF 0, 255, 255
teal #008080 0, 128, 128
blue #0000FF 0, 0, 255
navy #000080 0, 0, 128
fuchsia #FF00FF 255, 0, 255
purple #800080 128, 0, 128
white #FFFFFF 255, 255, 255
silver #C0C0C0 192, 192, 192
gray #808080 128, 128, 128
black #000000 0, 0, 0

Эти цвета поддерживают все браузеры. Кроме них есть еще порядка 130 дополнительных ключевых слов для различных оттенков цветов. Полную таблицу этих цветов можно увидеть в справочнике W3C.

Использование таких ключевых слов допустимо, но есть риск, что какое-нибудь слово не воспримется браузером. Поэтому рекомендуется вместо ключевых слов записывать шестнадцатеричный код цвета.

Итоги

В CSS цвет текста задается с помощью свойства color , а его значение можно записать несколькими способами – в шестнадцатеричном (hex) виде, в формате RGB или HSL либо указав ключевое слово. Во избежание неправильного отображения цвета, заданного при помощи ключевого слова, лучше указывать его hex-значение.

Также есть возможность задать элементу прозрачность с помощью альфа-канала (форматы RGBA и HSLA). При этом стоит учитывать, что браузер IE8 и его ранние версии не поддерживают форматы RGBA, HSL и HSLA.

Далее в книге вы узнаете, как задать размер шрифта CSS.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *