HTML Color Codes

HTML Вибір Кольору для форматів RGB HEX HSL

Легко отримуйте HTML CSS коди кольорів для вашого веб-сайту, використовуючи вибір кольору, конвертуйте формат кольорів між HEX, RGB, HSL, HSV.

Виберіть колір

Введіть значення кольору

Або використовуйте HTML5 вибір

Вибраний колір

Червоний: 0
Зелений: 255
Синій: 255
HUE (Градус): 180
Яскравість: 0.7
Alpha: 1
Hex: #00ffff
RGB: rgb(0, 255, 255)
HSL: hsl(180, 100%, 50%)
Група кольорів: Cyan
Поділитися:
Приклад кольору CSS3

<style>
  div {
    color: #00ffff;
    color: rgb(0, 255, 255);
    color: hsl(180, 100%, 50%);
  }
</style>
Найтемніший і світліший стилі

<style>
  .darken {
    color: rgb(0, 230, 230);
  }
  .lighten {
    color: rgb(25, 255, 255);
  }
</style>

Отримати кольори з зображення

get pixel color from pic

Виберіть колір і створіть палітру

select color and create palette

Що таке HTML код кольору?

HTML коди кольорів - це спосіб вказати кольори в веб-дизайні. Ці коди використовуються в HTML і CSS для визначення кольорів елементів, таких як текст, фони, рамки і багато іншого. Розуміння HTML кодів кольорів є важливим для створення візуально привабливих і послідовних веб-сторінок.

Наприклад, червоний колір можна ідентифікувати за допомогою наступних форматів:

Типи HTML кодів кольорів


Шістнадцяткові коди кольорів:
  • Найбільш поширений спосіб вказати кольори в HTML і CSS - це використання шістнадцяткових (hex) кодів кольорів. Шістнадцятковий код кольору - це шестизначна комбінація чисел і літер, визначена змішуванням червоного, зеленого і синього (RGB) компонентів.
  • Формат: #RRGGBB
  • Приклад: #FF5733 представляє відтінок помаранчевого.
  • Кожна пара цифр відповідає інтенсивності червоного, зеленого і синього відповідно за шкалою від 00 (немає інтенсивності) до FF (повна інтенсивність).
RGB коди кольорів:
  • Коди кольорів RGB визначають кольори на основі їх компонентів червоного, зеленого і синього.
  • Формат: rgb(червоний, зелений, синій)
  • Приклад: rgb(255, 87, 51) - це RGB еквівалент #FF5733.
  • Кожен компонент (червоний, зелений і синій) вказується як число між 0 і 255
RGBA коди кольорів:
  • Подібно до RGB, але включає альфа-компонент для непрозорості.
  • Формат: rgba(червоний, зелений, синій, альфа)
  • Приклад: rgba(255, 87, 51, 0.5) вказує на той самий колір з 50% непрозорістю.
HSL коди кольорів:
  • HSL означає Відтінок (Hue), Насиченість (Saturation) і Світлість (Lightness).
  • Формат: hsl(відтінок, насиченість%, світлість%)
  • Приклад: hsl(9, 100%, 60%) - це ще один спосіб представити колір #FF5733
  • Відтінок - це градус на кольоровому колі (від 0 до 360), насиченість - це відсоток (0% - це градації сірого, 100% - це повний колір), а світлість також є відсотком (0% - це чорний, 100% - це білий).
HSLA коди кольорів:
  • Подібно до HSL, але включає альфа-компонент для непрозорості.
  • Формат: hsla(відтінок, насиченість%, світлість%, альфа)
  • Приклад: hsla(9, 100%, 60%, 0.5) вказує на той самий колір з 50% непрозорістю.
Використання HTML кодів кольорів:

HTML коди кольорів можна використовувати в різних властивостях CSS для стилізації веб-елементів. Наприклад:

<style>
    .text-color {
        color: #FF5733;
    }
    .background-color {
        background-color: rgb(255, 87, 51);
    }
    .border-color {
        border: 2px solid hsl(9, 100%, 60%);
    }
</style>
<p class="text-color">This text is orange.</p>
<div class="background-color">This background is orange.</div>
<div class="border-color">This border is orange.</div>

У цьому прикладі текст, фон і рамка стилізовані з використанням різних типів HTML кодів кольорів, які всі представляють один і той самий відтінок помаранчевого.

HTML коди кольорів є фундаментальним аспектом веб-дизайну, що дозволяє розробникам точно визначати і маніпулювати кольорами. Розуміючи hex, RGB, RGBA, HSL і HSLA коди кольорів, ви можете створювати візуально узгоджені та привабливі веб-сторінки, що покращують досвід користувача.