color в CSS


Содержание

CSS Color Tools

Tools for generating CSS color codes. Generate hex codes, RGB, HSL, and more.

CSS Color Scheme Generator

Displays sample color schemes based on your chosen color. Displays swatches for triad, complementary, split-complementary, analogous, monochromatic, and tetradic color schemes.

CSS Color Picker

Select any color you like from this color picker. Displays the color values in hex, RGB, HSL, HSV, HWB, and CMYK.

CSS Color Converter

Converts your color into various formats that you can use in your web projects. Enter a color and see it instantly converted into hex, RGB, HSL, HSV, as well as its CSS color name where applicable.

CSS Gradient Generator

Create CSS gradients easily with this gradient generator. Choose direction, colors, optional text, etc.

Generates code with or without vendor prefixes — you choose!

Random Color Generator

Stuck for ideas? Use this random color generator to generate a random color for you. Generate as many random colors as you like!

CSS color Property

The color property describes the color of the text content and text decorations. You can find web colors in our HTML colors section and try to choose your preferred colors with our Color Picker tool. The default value of this property varies from one browser to another.

Initial Value Varies from one browser to another.
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited Yes.
Animatable Yes. The color is animatable.
Version CSS1
DOM Syntax object.style.color = «#1c87c9»;

Syntax

Example

You can set hexadecimal, RGB, RGBA, HSL, HSLA or color names as a value for the color property.

Look at a CSS color example where the value is a named color:

Example

See an example where a hexadecimal value is set for the color property:

Example

See an example with the color property using an RGB value:

Example

See an example with the color property using an HSL value:

HTML Цвета

На данной странице представлены специальные ключевые слова, которые можно применять для обозначения того или иного цвета на интернет сайтах, и при разработке на языках программирования для Web, таких как HTML, CSS, JavaScript, Flash, и др.

В ранних спецификациях W3C было определено всего 16 ключевых цветов. В более поздних спецификациях дополнительно было определено ещё 130 различных названий цветов. Следующая таблица содержит имена, и образцы цветов, которые ассоциируются с этими именами.

Таблица HTML цветов

Имена цветов в HTML не чувствительны к регистру, и могут записываться в любой форме

Также стоит отметить, что имея 147 различных ключевых слов (17 старых и 130 новых), не все цвета в этом списке уникальны. Некоторые имена обозначают один и тот же цвет. Так, например, и Grey, и Gray обозначают 50-процентный серый цвет #808080, а Magenta — это лишь синоним HTML цвета Fuchsia, и ссылается на шестнадцатеричный код цвета #FF00FF.


Цвета в CSS (таблица названий с примерами)

Ниже Вы можете найти полную таблицу стандартных цветов, которые работают во всех браузерах.

В качестве цвета можно задать цвет в шестнадцатеричном формате HEX, например #A52A2A или используя CSS название цвета, например: blue .

Цвет текста

Как изменить цвет текста или шрифта в CSS? На самом деле задать нужный цвет или изменить можно простым свойством:

Указываем его для элемента, в котором расположен наш текст. Или Вы можете задать его напрямую, через атрибут:

Цвет ссылок

Цвет ссылки меняется похожим образом, только в качестве селектора нужно указать :

Если нужно менять цвет при наведении, тогда добавляем псевдо-класс :hover:

Цвет фона, кнопки, блока

Меняется свойством background-color или просто background :

Цвет рамки

Цвет рамки задается через свойство border-color :

Илон Маск рекомендует:  Псевдокласс focus в CSS

Таблица цветов

Ниже представлена вся палитра стандартных CSS цветов. Просто нажмите на название цвета или его шестнадцатеричный HEX код.

Изменение цвета шрифта в CSS. Коды цветов HTML и CSS

Приветствую вас, дорогие друзья!

В данной статье я бы хотела более подробно рассказать про то как задать цвет шрифта в css и рассказать про основные форматы задания и коды цветов CSS и HTML.

Данные коды цветов вы можете использовать как для задания цвета шрифта, так и фона для сайта, рамок и других элементов дизайна.

Как задать цвет шрифта css?

Для этого вы можете воспользоваться специальным CSS-свойством color

Пример:

Где вместо black указывается значение цвета для шрифта текста.

Более подробно о значении цветов в CSS и их форматах я распишу ниже

Например:

Изменяем цвет текста абзаца и href = ” # ” > ссылки

Форматы задания цветов в CSS

Все цвета шрифта вы можете задавать в различных форматах. Вот наиболее распространённые:

  1. 1. При помощи кодового значения цвета хтмл.


Например:

где black – это черный цвет html.

Примеры конкретных значений цветов HTML и CSS смотрите ниже.

  1. 2. Задание цвета в шестнадцатеричном коде:

Например:

Где #000000; — это код черного цвета.

Например:

#ffffff – это код белого цвета

Его можно записать так: #fff

  1. 1. Задание цвета в формате rgb

Данный формат представляет собой набор трёх числовых значений от 0 до 255.

Он основывается на использовании трёх цветов, путём смешивания которых получаются все остальные оттенки

В CSS это выглядит так:

Где 0, 155, 0 – это код зелёного цвета.

Таблица, в которой представлены основные цвета ргб, приведена ниже

  1. 4. Задание цвета при помощи формата rgba

Здесь принцип использования абсолютно такой же как и в предыдущем случае, но добавляется ещё один параметр – прозрачность. То есть вы можете регулировать не только оттенок, но и его прозрачность

Например:

Где 89, 107, 108 – это ргб код серого цвета, а 0,5 – это уровень прозрачности.

Прозрачность задаётся в виде десятичного значения от 0 до 1, где 0 – цвет совсем не виден, а 1 – цвет максимально непрозрачный

Таблица значений основных цветов HTML, RGB и в шестнадцатеричном коде

Название Цвет HTML Шестнадцатеричный код Цвет в формате RGB
Чёрный black #000000 0, 0, 0
Серый gray #8A8A8A 138, 138, 138
Светло-серый silver #C7C7C7 199, 199, 199
Белый white #FFFFFF 255, 255, 255
Красный red #FF0D0D 255, 0, 0
Розовый fuchsia #FF24FF 255, 36, 255
Сиреневый purple #B300B3 179, 0, 179
Синий blue #0909FF 0, 0, 255
Голубой aqua #15FFFF 20, 255, 255
Зелёный green #009B00 0, 155, 0
Салатовый lime #05FF05 5, 255, 5
Жёлтый yellow #FFFF04 255, 255, 4
Оранжевый orange #FFAD15 255, 173, 21

Инструмент для определения значений цветов онлайн

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

Как изменять цвета с помощью элемента ввода color и переменных CSS

Дата публикации: 2020-08-07

От автора: с помощью переменных CSS и элемента ввода color мы можем легко изменять цвета — а значит, переключать темы пользовательского интерфейса в веб-приложении или на сайте. Ну, веб развивается быстро, поэтому мы можем использовать переменные CSS, которые поддерживают многие современные браузеры.

Переменные CSS — это читаемый код, который обеспечивает простоту изменения больших документов и многое другое. Пример:


С другой стороны, у нас есть , который определяет поле ввода палитры цветов. Оно отображает палитру цветов, из которой мы можем выбрать цвет, в затем передать его в качестве ввода. Пример:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Элемент ввода color

Поскольку это пользовательский элемент ввода, интерфейс палитры цветов может отличаться в разных операционных системах. Пример элемента выбора цвета в демонстрации взят из Mac OS. При этом мы не обязаны использовать плагины javascript, и это здорово.

Итак, давайте создадим тему пользовательского интерфейса.

Во-первых, нам нужно создать кнопки, например, мы можем использовать три элемента span.

Теперь нам нужно сохранить значения цвета по умолчанию для этого мы используем атрибуты data-bg-color и data-color.

Для динамичных цветов

Чтобы получить определяемые пользователем цвета темы, мы используем элемент input с типом color. Это позволяет нам получить полнофункциональную палитру цветов.

Настройка переменных CSS

Мы устанавливаем переменные CSS и их значения по умолчанию. Для этого мы используем псевдо-класс :root.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Мы установили две переменные primary-bg-color и primary-color. По умолчанию тема имеет темно-синий цвет фона и цвет текста — белый.

Использование CSS-переменных

Теперь, если мы хотим изменить background-color и color элемента, CSS выглядит следующим образом:

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

Илон Маск рекомендует:  Что такое код mysql_field_name

Javascript в действии

Таким образом, используя javascript, мы можем достичь общей функциональности динамического переключения тем пользовательского интерфейса. Поэтому, когда пользователь меняет цвет из поля ввода выбора цвета, свойство переменных CSS должно изменяться автоматически.

Во-первых, давайте создадим функцию обновления темы:

Эта функция принимает объект в качестве параметра, и для каждого ключа обновляется соответствующая переменная CSS, определенная в псевдоклассе :root. Чтобы достичь этого, нам нужно определить объект таким образом, чтобы каждый ключ представлял имя переменной CSS, а каждое значение ключа представляло фактическое значение CSS, которое мы хотим применить.

Теперь нам нужно найти элементы и прикрепить обработчики событий:

Теперь, когда пользователь нажимает на элемент span, значения атрибутов данных сохраняются и устанавливаются для соответствующих им переменных CSS.

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

Заключение

Теперь, я надеюсь, что вы получили представление о том, как мы можем динамически изменять цвет темы на веб-сайте. Я предлагаю вам поэкспериментировать с этой функцией в вашем проекте и наслаждаться! Я надеюсь, что вы нашли этот пост очень полезным. Не стесняйтесь поделиться своими мыслями и мнениями и оставить мне комментарий, если у вас есть какие-либо проблемы или вопросы.

Автор: Nirazan Basnet

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Цвета в CSS (таблица названий с примерами)


Ниже Вы можете найти полную таблицу стандартных цветов, которые работают во всех браузерах.

В качестве цвета можно задать цвет в шестнадцатеричном формате HEX, например #A52A2A или используя CSS название цвета, например: blue .

Цвет текста

Как изменить цвет текста или шрифта в CSS? На самом деле задать нужный цвет или изменить можно простым свойством:

Указываем его для элемента, в котором расположен наш текст. Или Вы можете задать его напрямую, через атрибут:

Цвет ссылок

Цвет ссылки меняется похожим образом, только в качестве селектора нужно указать :

Если нужно менять цвет при наведении, тогда добавляем псевдо-класс :hover:

Цвет фона, кнопки, блока

Меняется свойством background-color или просто background :

Цвет рамки

Цвет рамки задается через свойство border-color :

Таблица цветов

Ниже представлена вся палитра стандартных CSS цветов. Просто нажмите на название цвета или его шестнадцатеричный HEX код.

Про CSS

Цвета в Css

Мне очень нравится возможность задавать цвета в коде несколькими разными способами, в зависимости от цели использования. Всего таких способов 7.

1. Именованные цвета.

Их достаточно много, все цвета можно найти тут: w3.org/TR/css3-color/#svg-color

Для себя я отсортировала их по оттенкам, моя таблица цветов лежит тут: Handy colors.

Преимущество: через некоторое время использования всегда знаешь как называется нужный цвет или наоборот — как выглядит на странице цвет, имя которого видишь в коде. Очень удобно для экспериментов с CSS.

Недостаток: их всего 147, и не всегда можно подобрать нужный набор оттенков.

2. RGB.

Red, Green, Blue.

Можно задавать двумя способами:

Преимущество: значения цвета можно брать из фотошопа.

Недостаток: неудобно подбирать значения руками, а также нельзя задавать значения числами с плавающей точкой. Например, если захочется задать какой-нибудь цвет через 25%, в цифрах это будет 63.75 — строка с таким значением работать не будет.

3. HEX.

Это тот же RGB, но записанный в шестнадцатеричной системе счисления. Каждая пара знаков означает в той же последовательности красный, зеленый и синий цвета в диапазоне от 00 до FF. Если в парах оба знака одинаковые, можно использовать короткую запись. Например: #FFFFFF → #FFF.

Преимущество: значения удобно брать из фотошопа. Недостаток: неудобно подбирать значения руками, хотя распространенные сочетания легко запоминаются, например #F00 или #DDD или #F90 .

4. RGBA.


RGB с параметром прозрачности (alpha).

Преимущество: наличие прозрачности и возможности гибко ею управлять.

Недостатки: те же, что и для rgb. Так же не поддерживается в IE8 и ниже.

5. HSL.

Hue — цвет. Задается в диапазоне от 0 до 360, означает угол цветового круга (радуги, представленной в виде круга). Saturation — насыщеность цвета, задается в процентах. Lightness — яркость цвета, задается в процентах.

Этот пример дает представление о соответствии цветов градусам:

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

Здесь посередине исходный цвет, слева — с повышенной яркостью, справа — с пониженной насыщенностью:

С помощью HSL удобно подбирать подходящие оттенки не используя графические редакторы:

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

6. HSLA.

Как HSL, но с прозрачностью.

7. Ключевые слова.

transparent — для обозначения полной прозрачности.

currentColor — текущий цвет текста ( color ) для элемента.

Например, можно написать:

И задавая каждому элементу свой цвет текста получить рамки разного цвета:

Можно даже совсем опустить ключевое слово, и цвет текста будет унаследован автоматически:

Илон Маск рекомендует:  Использование класса ctabctrl

Свойство color

Cвойство color определяет цвет текста элемента. Дополнительно, это свойство используется чтобы косвенно установить значение ключевого слова (currentColor) для любых других свойств, которые принимают цветовые значения. Если ключевое слово ‘currentColor’ используется, чтобы установить цвет непосредственно для свойства ‘color’, то оно трактуется как наследование цвета, т.е: ‘color: inherit’.

Допустимые значения

  • Численное представление цветов
    • CSS2 CSS3 RGB формат — rgb(r, g, b)
      • шестнадцатиричная запись — #RRGGBB
      • шестнадцатиричная запись (сокращенная) — #RGB
    • CSS3 RGBa формат — rgba(r, g, b, a)
    • CSS3 HSL формат — hsl(h, s, l)
    • CSS3 HSLa формат — hsla(h, s, l, a)
  • Ключевые слова
    • CSS3 currentColor
    • CSS2 CSS3 transparent — полностью прозрачный цвет, сокращенная запись для прозрачного черного rgba(0,0,0,0).

  • Именованные цвета
    • CSS2 CSS3 Базовые названия цветов: aqua, black, blue, fuchsia, gray (серый), green (зеленый), lime (лайм), maroon (темно-бордовый), navy (темно-синий), olive (оливковый), purple (фиолетовый), red (красный), silver (серебряный), teal (зеленовато-голубой), white (белый), и yellow (желтый))
    • CSS3 Расширенные названия цветов: aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, black, blanchedalmond, blue, blueviolet, brown, burlywood, cadetblue, chartreuse, chocolate, coral, cornflowerblue, cornsilk, crimson, cyan, darkblue, darkcyan, darkgoldenrod, darkgray, darkgreen, darkgrey, darkkhaki, darkmagenta, darkolivegreen, darkorange, darkorch >CSS2 CSS3 Системные цвета: ActiveBorder, ActiveCaption, AppWorkspace, Background, ButtonFace, ButtonHighlight, ButtonShadow, ButtonText, CaptionText, GrayText, Highlight, HighlightText, InactiveBorder, InactiveCaption, InactiveCaptionText, InfoBackground, InfoText, Menu, MenuText, Scrollbar, ThreeDDarkShadow, ThreeDFace, ThreeDHighlight, ThreeDLightShadow, ThreeDShadow, Window, WindowFrame, WindowText
    • Системные цвета (браузеры на движке Gecko): -moz-ButtonDefault, -moz-ButtonHoverFace, -moz-ButtonHoverText, -moz-CellHighlight, -moz-CellHighlightText, -moz-Combobox, -moz-ComboboxText, -moz-Dialog, -moz-DialogText, -moz-dragtargetzone, -moz-EvenTreeRow, -moz-Field, -moz-FieldText, -moz-html-CellHighlight, -moz-html-CellHighlightText, -moz-mac-accentdarkestshadow, -moz-mac-accentdarkshadow, -moz-mac-accentface, -moz-mac-accentlightesthighlight, -moz-mac-accentlightshadow, -moz-mac-accentregularhighlight, -moz-mac-accentregularshadow, -moz-mac-chrome-active, -moz-mac-chrome-inactive, -moz-mac-focusring, -moz-mac-menuselect, -moz-mac-menushadow, -moz-mac-menutextselect, -moz-MenuHover, -moz-MenuHoverText, -moz-MenuBarText, -moz-MenuBarHoverText, -moz-nativehyperlinktext, -moz-OddTreeRow, -moz-win-communicationstext, -moz-win-mediatext
    • Системные цвета (браузеры на движке WebKit):-webkit-activelink, -webkit-focus-ring-color, -webkit-link, -webkit-text

Свойство color относится к спецификации CSS, применяется к всем элементам, и действует на всех визуальные носителях, его значение наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение по спецификации CSS уровень 2.1, и ‘currentColor’ по спецификации CSS уровень 3. На данный момент свойство поддерживается во всех основных браузерах.

CSS Colors: How to Use Color Names, RGB, HEX and HSL Value Indicators

TL;DR — You can set CSS colors to HTML elements by using keywords, an RGB functional notation, a hexadecimal string notation, and HSL functional notation.

Contents

Defining colors

  • Describing a color in CSS means giving instructions that computers will be able to convert to a specific color.
  • You can indicate CSS colors with the RGB model (referring to RED/GREEN/BLUE and related tones).
  • There are 4 value types for CSS colors:
    • Color names — blue
    • RGB values — rgb(0, 0, 250)
    • HEX values — #0000FF
    • HSL values — hsl(240, 90%, 78%)

Color keywords

There is a list of keywords referring to available color names. Using them is the simplest method for setting colors in CSS and HTML instead of numeric codes of colors.

All you need to do is choose a styling property and then assign a color name which acts as a value.

Color name declaration is not case-sensitive. Blue is the same as blue or BLUE.

Tip: there are no color names for unique or rarer colors. Keywords stand for standard and secondary colors, shades of gray, and some blends of colors.

The following example shows that an HTML element

Using color codes

It is possible to express RGB colors in three ways:

  • RGB
  • RGBA
  • Hexadecimal (with # at the beginning)

Note: learn about color blindness and style websites accordingly. Avoid using color as indicators of failure or success.

RGB and RGBA

RGB is a CSS rgb() function that has parameter values of red, green, and blue colors.

In this example, we use RGB colors:

The following example applies RGBA color values:

Note: since CSS Colors Level 4, CSS rgba() is the same as rgb(). Browsers supporting the Level 4 standard interpret these functions in the same way.

RGB and RGBA work similarly, but RGBA has the fourth parameter of the opacity.

  • Red, green, and blue values have to be between 0 and 255 inclusively. As an alternative, you can write values in percentages from 0% to 100%.
  • In RGBA, write 0.0 value for opacity when you want the color to be completely transparent. For solid colors, write 1.0. In percentages, 0% represents 0.0 value and 100% refers to 1.0.

For example, rgb(0, 0, 255, 0.3) CSS color codes represent blue color that is 30% transparent.

This example uses an HTML element

This example is very much like the others. It uses the same element and style property. However, now we’re using the rgba value indicator, so we will be able to set the opacity and color tone at the same time.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL