css 컬러 조정하기 (css color)

.red {color:red;}
.red {color:rgba(255, 0, 0, 1);}
.red {color:#ff0000;}
.red {hsl(0, 100%, 50%)}

 

▲ 위는 모두 동일한 red, 빨간색 컬러입니다.

 

css 코드나 html에서 내부 스타일 코드를 지정할 때 컬러 값을 입력하게 될 때가 있는데, 이때, 표현되는 컬러 값은 동일하지만 적용하는 수치는 사용자의 편의에 따라 여러 가지로 분류하고 있습니다. 그중 대표되는 3가지를 알아보도록 할게요 ​ 

1. 고유의 색이름을 지정하거나 
2. rgba로 이루어진 색상, 알파값을 입력하거나 
3. 16진수로 이루어진 hex 값을 입력하거나 
4. 색상, 명조, 채도로 이루어진 HSL 값을 입력하는 것

그중 가장 많이 사용하는 방법은 2,3번으로 rgba로 색상을 표기하는 방법인데, 퍼블리싱과 웹디자인을 한꺼번에 처리하는 프런트 디자이너들은 스위칭의 성격상 빠른 업무처리를 할 수 있도록 16진수 (#000000)의 방법을 주로 이용하긴 합니다만, 회사의 성격에 따라 rgba로 퍼블리싱 하기도 합니다. ​ 

 

대표적으로 명시된 2,3번을 먼저 살펴보고 1번을 추가로 알아보기로 하겠습니다. 잘 쓰지 않고 표현하기 어려운 hsl 사용법은 제외하도록 합니다.

반응형

---

 

2. RGBA 값으로 css 값 조정하기 

{background-color: rgba(255, 255, 255, 0.5);}

 

{background-color: rgba(255, 255, 255, 0.5);}

 

CMYK 컬러를 사용하는 오프라인(편집 디자이너)를 제외한 모든 웹디자이너들에게 친숙한 RGBA 값은 

R=red , G=green, B=blue, A=alpha 값으로 이루어진 웹상의 컬러입니다. 

 

더하면 더할수록 흰색에 가까워지는 가산 혼합을 띄고 있는 대표적 컬러로 빛의 3원색으로 불리고 있습니다만, 하나 더 생긴 알파값(A)으로 디테일한 컬러 조정을 할 수 있습니다. ​ 0부터 255까지 이루어진 수는 0에 가까워질수록 검은색을 나타내고  255에 가까울수록 흰색을 나타냅니다. 

 

즉 0,0,0을 표시하면 검정(black)을 255,255,255를 표기하면 흰색(white)를 표기해 줍니다. (사이 점은 콤마 표시입니다)

컬러에 따른 표기 방법
rgb(255, 255, 255)	rgb(255, 0, 0)
rgb(0.255.0)	rgb(0, 0, 255)
rgb(238,130, 238)	rgb(255,165, 0)
rgb(106, 90, 205)	rgb(0, 0, 0)

 

rgb로 명도 표현하기
rgb(0, 0, 0)	rgb(55, 55, 55)
rgb(150, 150, 150)	rgb(255, 255, 255)

※ 컬러칩이 많이 없어 정확한 컬러 표는 아닙니다 대략적 이런 표기로 이루어진다는 것을 참고해주세요 :)

 

위와 같은 표기에서 알 수 있듯 각 수치 값이 높을수록 해당 컬러가 섞이거나 표현이 되는 것을 알 수 있고, 각 수치를 동일하게 놓는 0.0.0 / 50.50.50 / 100.100.100 등으로 이루어지면 검정 -> 흰색에 따른 명도 값을 표현할 수 있습니다

 

---

 

A (alpha) 값 표현하기 

rgb 값을 정한 후 알파값을 정할 수 있는데, 알파값은 0에서 1까지의 표현식을 붙여 포토샵의 투명도 조절을 웹상에서 표현할 수 있고, (포토샵의 opasity, 불 투명도의 개념) 소수점으로 수치를 입력해 주시면 됩니다. 

 

rgba(255, 0, 0, 0.5) rgb는 콤마 / a 값은 소수점 

 

background(배경)가 하얀색(white)인 기준하에 

rgba(255, 0, 0, 0.7)는 빨간색에서 알파값이 1에 가까운 0.7이기 때문에 약간 연한 빨간색 

rgba(255, 0, 0, 0.5)는 빨간색에서 알파값을 조정해서 옅은 주황색으로 보이고 

rgba(255, 0, 0, 0)는 아예 색이 사라져 보이지 않겠죠

 

---

반응형

 

3. 16진수 HEX 값으로 컬러 조정하기 

{background-color: #000000;}

 

{background-color: #000000;}

 

웹디자이너에게 친숙한 16진수 값은 0,1,2,3,4,5,6,7,8,9, a, b, c, d, e, f로 이루어져 컬러 값을 이루는 수로 red = 00 / green = 00 / blue = 00으로 할당된 숫자를 나열해 컬러를 나타내는 방법이며, 

표기는 #이 앞에 붙고 RRGGBB로 나타냅니다. 

그러므로 좀 더 디테일한 컬러 표기를 쉽게 표현 가능한데, 최솟값은 0 최댓값은 f로 표기합니다. 

적색을 표현할 때는 red = #ff0000으로  표현하게 되겠죠.

컬러에 따른 16진수 컬러 표기 방법
#ffffff	#ff0000
#3cb371	#0000ff
#ee82ee	#ffa500
#6a5acd	#000000

 

16진수로 명도 표현하기
#000000	#3c3c3c
#b4b4b4	#ffffff

※ 컬러칩이 많이 없어 정확한 컬러 표는 아닙니다 대략적 이런 표기로 이루어진다는 것을 참고해주세요 :)

 

---

 

1. 고유 색이름으로 컬러 표기하기 

{background-color: red;}

 

{background-color: red;}

 

대표적인 색상을 지정할 때 쓰이며, 직접 컬러 명칭을 입력하면 컬러가 표현됩니다. 디테일한 컬러보다는 기본적 컬러 색상을 표현할 때, 샘플링, 예시 등에 주로 사용되고, 최신 브라우저를 기준으로 html은 140개의 컬러 단어를 지원합니다.

고유 컬러 이름과 HEX 값 기준으로 입력하면 적용되는 컬러 값 보러 가기

HTML Color Names

 

고유 색상 명칭에 따른 표기 방법
white	red
green	blue
pink	yellow
violet	black

웹 컬러는 브라우저와 디바이스의 발달로 별도의 컬러칩을 알아보고 입력하는 것이 아닌 많은 사이트나 홈페이지에서 색상 조합을 지원해 주고 있습니다.

 

본문 출처: https://www.w3schools.com

이해하기 쉽게, 본문 자료를 해석해 이야기 형식으로 기록한 포스팅입니다. 스크랩이나 공유 버튼을 통한 개인적인 공부 목적으로만 사용 부탁 드리고, 도움이 되셨다면 공감 부탁드립니다 :-)