CSS 색상 활용법

CSS 색상 코드의 기초

CSS에서 색상을 지정하는 방법은 크게 네 가지가 있습니다: 키워드, RGB, RGBA, HEX, HSL, HSLA입니다. 각각의 방법을 사용하여 원하는 색상을 정확하게 표현할 수 있습니다.

1. 키워드(Keywords)
가장 간단하고 직관적인 방법은 색상의 이름을 직접 사용하는 것입니다. 예를 들어, red, blue, green과 같이 일반적인 색상 이름을 사용할 수 있습니다.

body {
    color: blue;
    background-color: lightgray;
}

 

 

2. HEX 코드
HEX 색상 코드는 # 다음에 6자리 또는 3자리의 16진수 값을 사용합니다. 이 방식은 웹 디자인에서 가장 널리 사용되며, 색상을 정확하게 지정할 수 있습니다.

h1 {
    color: #FF5733;  /* 밝은 주황색 */
}

3자리 HEX 코드는 각 색상 구성 요소를 하나의 16진수로 표현합니다. 예를 들어, #F06는 #FF0066의 단축형입니다.

 

 

3. RGB와 RGBA
RGB는 빨강(Red), 녹색(Green), 파랑(Blue)의 색상 값을 0에서 255 사이의 숫자로 표현합니다. RGBA는 RGB에 알파(Alpha) 채널을 추가하여 투명도를 조절할 수 있습니다. 알파 값은 0(완전 투명)에서 1(완전 불투명) 사이입니다.

p {
    color: rgb(255, 99, 71);  /* 토마토 색 */
    background-color: rgba(255, 99, 71, 0.5);  /* 토마토 색의 50% 투명도 */
}

 

 

4. HSL과 HSLA
HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)로 색상을 표현합니다. HSLA는 HSL에 알파 채널을 추가한 것입니다. 이 방식은 색상을 조절할 때 더 직관적일 수 있습니다.

div {
    color: hsl(120, 100%, 50%); /* 순수한 녹색 */
    background-color: hsla(120, 100%, 50%, 0.3); /* 30% 투명도의 녹색 */
}

 

 

CSS에서 색상을 효과적으로 사용하는 팁

1. 대비와 가독성: 텍스트와 배경 간에 충분한 대비를 확보하세요. 접근성을 고려하여 낮은 대비는 피하는 것이 좋습니다.
2. 브랜드 색상: 웹사이트의 브랜드 정체성을 강화하기 위해 일관된 색상 팔레트를 사용하세요.
3. 감정과 연관성: 색상은 감정을 전달할 수 있습니다. 예를 들어, 파란색은 신뢰와 안정감을, 빨간색은 에너지와 열정을 나타낼 수 있습니다. 
4. 스타일 가이드: 프로젝트 전체에 걸쳐 일관된 스타일을 유지하기 위해 스타일 가이드나 디자인 시스템을 개발하세요.

 

색상 팔레트는 생성해주는 웹사이트는 매우 많습니다!

적절한 대비와 눈이 편안한 색을 찾고 싶다면 아래 글을 참고해주세요.

https://vision-coding.tistory.com/19

색 조합 웹사이트 추천 (무료 웹사이트)