---
title: HTML Өнгүүд
description: "> HTML өнгүүд нь урьдчилан тодорхойлсон өнгөний нэрээр эсвэл RGB, HEX, HSL, RGBA эсвэл HSLA утгуудаар тодорхойлно. ## Өнгнүүдийн нэршил HTML-д өнгөний нэрээрэй ашиглагддаг. # Tomato # Orange # DodgerBlue # MediumSeaGreen # Gray # SlateBlue # Violet # LightGray…"
url: "https://apprentice.mn/docs/html-colors/"
updated: "2021-07-06"
category: HTML
---

# HTML Өнгүүд

> HTML өнгүүд нь урьдчилан тодорхойлсон өнгөний нэрээр эсвэл RGB, HEX, HSL, RGBA эсвэл HSLA утгуудаар тодорхойлно.

## Өнгнүүдийн нэршил

HTML-д өнгөний нэрээрэй ашиглагддаг.

# Tomato

# Orange

# DodgerBlue

# MediumSeaGreen

# Gray

# SlateBlue

# Violet

# LightGray

## Дэвсгэр өнгө

HTML-д та дэвсгэр өнгийг сольж болдог.

     Сайн байна уу  

Юу байна

      `<h1 style="background-color:DodgerBlue;">Сайн байна уу</h1>
<p style="background-color:Tomato;">Юу байна</p>`

## Текстийн өнгө

Та текстийнхээ өнгийг сольж болно.

### Сайн байна уу

Apprentice.mn HTML

Apprentice.mn HTML

     `<h1 style="color:Tomato;">Сайн байна уу</h1>
<p style="color:DodgerBlue;">Apprentice.mn free coding</p>
<p style="color:MediumSeaGreen;">Apprentice.mn free coding</p>`

## Хүрээний өнгө сонгох

Та хүрээнийхээ өнгийг сольж болдог:

# Hello World

# Hello World

# Hello World

     `<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>`

## Color Values

HTML дээр өнгийг RGB утга, HEX утга, HSL утга, RGBA утга, HSLA утгыг ашиглан тодорхойлж болно.

Дараах гурван <div> элементийн дэвсгэр өнгө нь RGB, HEX, HSL гэсэн утгатай байна:

# rgb(255, 99, 71)

# #ff6347

# hsl(9, 100%, 64%)

Дараахь хоёр элемент нь RGBA ба HSLA утгуудаар дэвсгэрийн өнгийг тохируулсан бөгөөд энэ нь Alpha сувгийг өнгө дээр нэмж өгдөг (энд бид 50% ил тод байдалтай байна):

# rgba(255, 99, 71, 0.5)

# hsla(9, 100%, 64%, 0.5)

      `<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>`               [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-colors%2F&linkname=HTML%20%D3%A8%D0%BD%D0%B3%D2%AF%D2%AF%D0%B4](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-colors%2F&linkname=HTML%20%D3%A8%D0%BD%D0%B3%D2%AF%D2%AF%D0%B4)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-colors%2F&linkname=HTML%20%D3%A8%D0%BD%D0%B3%D2%AF%D2%AF%D0%B4](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-colors%2F&linkname=HTML%20%D3%A8%D0%BD%D0%B3%D2%AF%D2%AF%D0%B4)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-colors%2F&linkname=HTML%20%D3%A8%D0%BD%D0%B3%D2%AF%D2%AF%D0%B4](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-colors%2F&linkname=HTML%20%D3%A8%D0%BD%D0%B3%D2%AF%D2%AF%D0%B4)[https://www.addtoany.com/share](https://www.addtoany.com/share)