CSS 색 Colors

미리 정의된 색상 이름을 사용하여 색을 지정하거나 RGB, HEX, HSL, RGBA, HSLA 값을 사용하여 지정한다.

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

Tomato, Orange, DodgerBlue, MediumSeaGreen, Gray, SlateBlue, Violet, LightGray

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

배경색

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

글자색

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</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>

색값

RGB, HEX, HSL, RGBA, HSLA값을 쓸 수 있다.

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

투명도 조절도 가능하다.

rgba(255, 99, 71, 0.5)

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

회색의 음영은 RGB 값을 모두 동일하게 해서 나타낸다.

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

rgb(180, 180, 180)

rgb(240, 240, 240)

rgb(255, 255, 255)

16진수 값

#rrggbb

00에서 ff까지의 16진수 값으로 색을 표현한다.

#ff0000은 red값만 최대고 나머지는 0이라 빨강이다.

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd

#000000

#3c3c3c

#787878

#b4b4b4

#f0f0f0

#ffffff

HSL 값

색조, 채도, 밝기를 지정하기 위해 사용한다.

색조 : 0부터 360까지의 색상환에 대한 정도. 0은 빨강, 120은 초록, 240은 파랑

채도 : 값의 퍼센테이지, 0%는 회색 음영, 100%는 풀 컬러.

밝기 : 0%는 검정, 50%는 밝지도 어둡지도 않음, 100%는 흰색

채도

채도는 색의 강도로 묘사될 수 있다. 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%)

밝기

색의 밝기는 얼마나 많은 빛을 색깔에 주고 싶은가로 묘사할 수 있다. 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%)

회색 음영은 종종 색조와 채도가 0으로 설정되어 정의된다. 그리고 밝기를 조절하여 어둡거나 밝은 음영을 줄 수 있다.

hsl(0, 0%, 0%)

hsl(0, 0%, 24%)

hsl(0, 0%, 47%)

hsl(0, 0%, 71%)

hsl(0, 0%, 94%)

hsl(0, 0%, 100%)

RGBA 값

색의 투명도를 특정하는 알파 채널이 있는 RGB 색 값의 확장이다.

알파 매개변수는 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)

HSLA 값

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)

https://www.w3schools.com/css/css_colors.asp