Колір - CSS-хитрощі

Anonim

colorВластивість в CSS встановлює колір тексту і текстових прикрас.

p ( color: blue; )

Цінності

colorВластивість може приймати будь-яке значення CSS кольору.

  • Названі кольори: наприклад, «аква».
  • Шістнадцяткові кольори: наприклад, # 00FFFF або # 0FF.
  • Кольори RGB та RGBa: наприклад, rgb (0, 255, 255) та rgba (0, 255, 255, .5).
  • Кольори HSL та HSLa: наприклад, hsl (180, 100%, 50%) та hsla (180, 100%, 50%, .5).

Названі кольори

p ( color: aqua; )

Іменовані кольори також відомі як кольори ключових слів, кольори X11 або кольори SVG. Усі названі кольори за замовчуванням є непрозорими, за винятком того transparent, який є повністю прозорим або «чітким». Перегляньте наш фрагмент «Іменовані кольори» та «Шістнадцяткові еквіваленти», щоб отримати перелік названих кольорів.

Шістнадцяткові кольори

Шістнадцяткові кольори або шістнадцяткові кольори вказуються з буквено-цифровими значеннями. Перша пара символів представляє червоне значення, друга пара представляє зелене значення, а третя пара представляє синє значення, все в діапазоні від 00 до FF.

p ( color: #00FFFF; )

Якщо пари червоного, синього та зеленого значень подвійні, ви можете скоротити шістнадцяткове значення до 3-значного скорочення - наприклад, # 00FFFF можна скоротити до # 0FF.

.full-hex ( color: #00FFFF; /* aqua */ ) .abbreviated-hex ( color: #0FF; /* also aqua */ )

Кольори RGB та RGBa

Кольори RGB задаються списком із трьох числових значень (від 0 до 255) або відсоткових значень (від 0% до 100%), розділених комами. Перше значення представляє червоне значення, друге - зелене, а третє - синє. За замовчуванням кольори RGB непрозорі.

p ( color: rgb(0, 255, 255); )

RGBa додає четверте значення для альфа-каналу, яке встановлює непрозорість кольору. Значення альфа - це число в діапазоні від 0,0 (повністю прозоре) до 1 (повністю непрозоре).

p ( color: rgba(0, 255, 255, .5); )

Кольори HSL та HSLa

Кольори HSL задаються списком із трьох значень, розділених комами: ступінь відтінку (число від 0 до 360), відсоток насиченості (від 0% до 100%) та відсоток освітленості (від 0% до 100%). Кольори HSL за замовчуванням непрозорі.

p ( color: hsl(180, 100%, 50%); )

HSLa додає четверте значення для альфа-каналу для контролю непрозорості кольору. Значення альфа - це число в діапазоні від 0,0 (повністю прозоре) до 1 (повністю непрозоре).

p ( color: hsla(180, 100%, 50%, .5); )

Демо

Перегляньте значення кольору пера від CSS-Tricks (@ css-tricks) на CodePen.

Примітки щодо використання

У colorвласності каскади. Якщо ви встановите його на тілі, усі нащадні елементи успадкують цей колір, якщо тільки вони не мають власного кольору, встановленого в таблиці стилів агента користувача.

Межі успадковуються, colorякщо в borderдекларації не вказано значення кольору .

colorВластивість застосовується до text-decorationлініях. У браузерах, що підтримують text-decoration-colorвластивість, ви можете вказати різні кольори тексту та його лінії оздоблення.

colorтакож застосовується до маркерів елементів списку (як, наприклад, крапки та цифри). Ви не можете встановити окремий колір для маркера елемента списку, але можете замінити його зображенням із list-styleвластивістю.

Хоча названі кольори та шістнадцяткові кольори не мають альфа-каналів, ви можете встановити їх прозорість за допомогою opacityвластивості у всіх поточних браузерах та IE9 +.

Пов’язані

  • font
  • text-decoration-color
  • opacity

Більше інформації

  • color у специфікації W3C
  • color на MDN
  • Стаття CSS-Tricks Yay для HSLa

Підтримка браузера

Chrome Сафарі Firefox Опера IE Android iOS
Будь-який Будь-який Будь-який Будь-який Будь-який * Будь-який Будь-який

* HSL, HSLa та RGBa підтримуються в IE9 +.