CSS 컬러

색상은 미리 정의 된 색상 이름 또는 RGB, HEX, HSL, RGBA, HSLA 값을 사용하여 지정됩니다.

미리 정의된 색상들

HTML에서는 색상 이름을 사용하여 색상을 지정할 수 있습니다.

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

<!DOCTYPE html>
<html>
<body>
    <h1 style="background-color:Tomato;">Tomato</h1>
    <h1 style="background-color:Orange;">Orange</h1>
    <h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
    <h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
    <h1 style="background-color:Gray;">Gray</h1>
    <h1 style="background-color:SlateBlue;">SlateBlue</h1>
    <h1 style="background-color:Violet;">Violet</h1>
    <h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13

HTML 은 140개의 표준 색상 이름을 가집니다.
브라우저에서 지원되는 CSS 컬러 이름 종류

전체 소스로 실습하기

배경색상(Background Color)

HTML 요소의 배경색상을 지정할 수 있습니다.

Hello World1

Hello World2

<div style="background-color: DodgerBlue">Hello World1</div>
<div style="background-color: Tomato">Hello World2</div>

1
2

전체 소스로 실습하기

텍스트색상(Text Color)

HTML 요소안에 있는 글자의 색상을 지정할 수 있습니다.

Hello World1

Hello World2

Hello World3

<h1 style="color:Tomato;">Hello World1</h1>
<p style="color:DodgerBlue;">Hello World2</p>
<p style="color:MediumSeaGreen;">Hello World3</p>

1
2
3

전체 소스로 실습하기

테두리색상(Border Color)

HTML 요소의 테두리 색상을 지정할 수 있습니다.

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>

1
2
3

전체 소스로 실습하기

색상의 여러가지 표현방법

HTML에서 RGB, HEX, HSL, RGBA, HSLA 을 사용하여 색상을 지정할 수도 있습니다.
Tomato 색상은 다음과 같이 표현 될 수 있습니다.

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

alpha 값이 포함된 색상을 사용하면 토마토 색상에 50% 투명도를 주어줄 수도 있습니다.

rgba(255, 99, 71, 0.5)

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

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

<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

1
2
3
4
5
6

전체 소스로 실습하기

RGB 값

RGB 값은 rgb(red, green, blue) 의 형태로 사용되는 방식이다.
각 red, green, blue 값은 0~255 사이의 값으로 주어진다.

rgb(255, 106, 71)

RED: 255

GREEN: 106

BLUE: 71

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

<div style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</div>
<div style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</div>
<div style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</div>
<div style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</div>
<div style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</div>
<div style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</div>

1
2
3
4
5
6

전체 소스로 실습하기

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

rgb(180, 180, 180)

rgb(240, 240, 240)

rgb(255, 255, 255)

<div style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</div>
<div style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</div>
<div style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</div>
<div style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</div>
<div style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</div>
<div style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</div>

1
2
3
4
5
6

전체 소스로 실습하기

HEX 값

HTML에서는 다음과 같은 형식의 16 진수 값을 사용하여 색상을 지정할 수 있습니다.
#rrggbb
여기서 rr(빨강), gg(녹색), bb(파랑)는 00에서 ff 사이의 16 진수 값입니다 (십진수 0-255와 동일).
예를 들어, 빨간색은 가장 높은 값 (ff)으로 설정되고 다른 값은 가장 낮은 값 (00)으로 설정되므로 #ff0000은 빨간색으로 표시됩니다.

#ff0000

#ff00ff

#3cb371

#ee82ee

#ffa500

#6a5acd

<div style="background-color:#ff0000;">#ff0000</div>
<div style="background-color:#ff00ff;">#ff00ff</div>
<div style="background-color:#3cb371;">#3cb371</div>
<div style="background-color:#ee82ee;">#ee82ee</div>
<div style="background-color:#ffa500;">#ffa500</div>
<div style="background-color:#6a5acd;">#6a5acd</div>

1
2
3
4
5
6

전체 소스로 실습하기

회색 음영은 종종 모든 3 개의 광원에 대해 동일한 값을 사용하여 정의됩니다.

#000000

#3c3c3c

#787878

#b4b4b4

#f0f0f0

#ffffff

<div style="background-color:#000000;">#000000</div>
<div style="background-color:#3c3c3c;">#3c3c3c</div>
<div style="background-color:#787878;">#787878</div>
<div style="background-color:#b4b4b4;">#b4b4b4</div>
<div style="background-color:#f0f0f0;">#f0f0f0</div>
<div style="background-color:#ffffff;">#ffffff</div>

1
2
3
4
5
6

전체 소스로 실습하기

HSL 값

HTML에서는 색조, 채도, 명도 (HSL)를 사용하여 다음과 같은 형식으로 색상을 지정할 수 있습니다.
hsl(hue[색조], saturation[채도], lightness[명도])
색조는 0에서 360까지의 색상환에 대한 정도입니다.
0은 빨간색이고 120은 녹색이며 240은 파란색입니다.
채도는 백분율 값이고, 0%는 회색 음영을 나타내며 100%는 전체 색상입니다.
밝기도 백분율 0%는 검은 색, 50%는 밝거나 어두움, 100%는 흰색입니다.

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

<div style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</div>
<div style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</div>
<div style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</div>
<div style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</div>
<div style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</div>
<div style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</div>

1
2
3
4
5
6

전체 소스로 실습하기

채도(Saturation)

채도는 색상의 강도로 설명 할 수 있습니다.
100% - 순수한 색상, 음영이 없습니다.
50% - 50% 회색빛이지만 여전히 색상을 볼 수 있습니다.
0% - 완전히 회색이며 더 이상 색상을 볼 수 없습니다.

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

<div style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</div>
<div style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</div>
<div style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</div>
<div style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</div>
<div style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</div>
<div style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</div>

1
2
3
4
5
6

전체 소스로 실습하기

밝기(Lightness)

밝기는 색상을 지정하려는 빛의 양으로 표시 할 수 있습니다.
0%는 빛이 없음을 의미하고 50%는 50%의 빛을 의미합니다(중간정도의 밝기).
100%는 완전한 밝음(흰색)을 의미합니다.

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

<div style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</div>
<div style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</div>
<div style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</div>
<div style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</div>
<div style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</div>
<div style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</div>

1
2
3
4
5
6

전체 소스로 실습하기

회색 음영은 종종 색조 및 채도를 0으로 설정하고 밝기를 0%에서 100%까지 조정하여 더 어둡거나 밝은 색조를 얻도록 정의됩니다.

hsl(0, 0%, 0%)

hsl(0, 0%, 24%)

hsl(0, 0%, 47%)

hsl(0, 0%, 71%)

hsl(0, 0%, 94%)

hsl(0, 100%, 100%)

<div style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</div>
<div style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</div>
<div style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</div>
<div style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</div>
<div style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</div>
<div style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</div>

1
2
3
4
5
6

전체 소스로 실습하기

RGBA 값

RGBA값은 색상의 불투명도를 지정하는 알파 채널이있는 RGB값의 확장입니다.
rgba(red[빨강], green[녹색], blue[파랑], alpha[투명도])
알파 변수는 0.0(완전히 투명)과 1.0(전혀 투명하지 않음) 사이의 숫자입니다.

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

<div style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</div>
<div style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</div>
<div style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</div>
<div style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</div>
<div style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</div>
<div style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</div>

1
2
3
4
5
6

전체 소스로 실습하기

HSLA 값

HSLA값은 색상의 불투명도를 지정하는 알파 채널이있는 HSL값의 확장입니다.
hsla(hue[색조], saturation[채도], lightness[명도], alpha[투명도])
알파 변수는 0.0(완전히 투명)과 1.0(전혀 투명하지 않음) 사이의 숫자입니다.

hsla(9, 100%, 64%, 0)

hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)

<div style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</div>
<div style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</div>
<div style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</div>
<div style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</div>
<div style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</div>
<div style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</div>

1
2
3
4
5
6

전체 소스로 실습하기

← CSS 사용법 CSS 컬러 이름종류 →

# CSS 컬러

# 미리 정의된 색상들

# 배경색상(Background Color)

# 텍스트색상(Text Color)

Hello World1

# 테두리색상(Border Color)

# 색상의 여러가지 표현방법

# RGB 값

# HEX 값

# HSL 값

# 채도(Saturation)

# 밝기(Lightness)

# RGBA 값

# HSLA 값

CSS 컬러

미리 정의된 색상들

배경색상(Background Color)

텍스트색상(Text Color)

테두리색상(Border Color)

색상의 여러가지 표현방법

RGB 값

HEX 값

HSL 값

채도(Saturation)

밝기(Lightness)

RGBA 값

HSLA 값