CSS 색상 지정 방법 Color Name, HEX, RGB의 차이점과 투명도(RGBA vs Opacity) 비교

이번에는 CSS에서 색상을 지정하는 방법을 정리하겠다.

CSS에서 색상을 지정하는 방법은 크게 3가지가 있으며, 각각의 상황에 따라 선호되는 이유가 다르다.

이번에도 생활코딩의 CSS 수업 영상과 함께 알아보자.

이전 포스트

CSS 폰트 사이즈 px, em, rem 완벽 가이드, rem 권장 이유와 px을 rem으로 환산하는 방법

CSS 폰트 사이즈, 왜 rem이 정석일까? 절대 단위 px와 상대 단위 em, rem의 차이점, 웹 접근성과 유지보수 면에서 rem이 좋은 이유를 정리했습니다. 1rem(16px)을 기준으로 원하는 픽셀을 rem으로 정확하게 환산하는 계산 공식까지 확인해 보세요.

생활코딩 CSS 수업 영상: 타이포그래피 color

방식	예시 코드	장점	단점
Color Name	color: red;	읽기 쉽고 매우 빠름	섬세한 색 조절 불가능
HEX	color: #ff0000;	가장 표준적, 정밀함	직관적으로 색 유추 힘듦
RGB	color: rgb(255,0,0);	투명도 조절 가능	코드가 다소 길어짐

위의 생활코딩 수업 영상에서 소개한 색상을 지정하는 방법을 표로 정리했다.

그런데 RGB에 대해서는 영상에서는 나오지 않은 내용(투명도 조절)까지 아래에서 조금 더 자세히 설명해 보겠다.

CSS에서 색상을 지정하는 3가지 방법과 특징

1. 색상 이름 (Color Names)

pink, Aqua, Amber처럼 미리 정의된 단어를 사용하는 방식이다.

• 특징: 코드만 보고도 어떤 색인지 즉시 알 수 있어 매우 직관적이다.
• 용도: 연습용 코드를 짜거나, 아주 기본적인 색상을 빠르게 적용할 때 사용한다.
• 한계: 현대 웹에서 표현 가능한 색상은 수천만 가지인데, 이름으로 정의된 색은 약 140개 정도로 선택의 폭이 매우 좁다.

2. 16진수 코드 (HEX Code)

# 뒤에 6자리(또는 3자리) 숫자를 붙이는 방식이다. (예: #FF0000)

• 특징: 웹 디자인에서 가장 많이 쓰이는 표준 방식이다. 00부터 FF까지의 16진수 조합으로 색을 표현한다.
• 구조: #RR GG BB (빨강, 초록, 파랑의 강도)
• 용도: 포토샵이나 피그마 같은 디자인 툴에서 추출한 정밀한 색상을 그대로 옮겨올 때 필수적이다.
• 장점: 코드가 짧고 간결하여 복사해서 쓰기 편하다.

3. RGB / RGBA 값

rgb(255, 0, 0)처럼 각 빛의 3원색 수치를 0~255 사이로 입력하는 방식이다.

• 특징: 숫자로 색의 강도를 조절하며, 현대 CSS에서는 투명도^Alpha를 조절할 때 진가를 발휘한다.
• RGBA: rgba(255, 0, 0, 0.5)처럼 마지막에 0~1 사이의 숫자를 넣어 투명한 배경색을 만들 수 있다.
• 용도: 배경색 뒤로 내용이 비쳐 보여야 하는 유리 효과^{Glassmorphism}나 레이어 디자인에 주로 쓰인다.

W3.CSS Colors

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

CSS RGB and RGBA Colors

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

color에 사용할 수 있는 수많은 색상 이름들과 RGBA에 대해서는 위의 링크들을 확인해 보자.

RGBA와 opacity 속성의 차이점

생활코딩 CSS 수업 영상에서는 아직 나오지 않았지만, CSS에는 opacity라는 별도의 투명도 조절 속성이 존재한다.

두 방식은 효과가 비슷해 보이지만, 스타일이 적용되는 범위가 완전히 다르다.

가장 큰 차이점은 자식 요소까지 투명하게 만드냐이다.

1. opacity (불투명도)

• 특징: 요소 전체에 유리를 씌우는 것과 같다.
• 문제점: 배경뿐만 아니라 그 안에 있는 글자, 이미지, 버튼 등 모든 자식 요소까지 한꺼번에 투명해진다.
• 비유: 종이 전체를 반투명한 비닐봉지에 넣는 것과 같다. 안의 내용물도 흐릿해진다.

2. rgba( ) (색상 투명도)

• 특징: 특정 색상에만 투명도를 준다.
• 장점: 배경색만 투명하게 만들고, 그 위의 글자는 선명하게 유지할 수 있다.
• 비유: 투명한 유리판 위에 진한 잉크로 글씨를 쓰는 것과 같다. 판은 투명해도 글씨는 또렷하다.

/* 1. opacity 사용 (비추천 상황) */
.box1 {
    background-color: red;
    opacity: 0.5; /* 박스도, 그 안의 글자도 모두 흐릿해짐 */
}

/* 2. rgba() 사용 (추천 상황) */
.box2 {
    background-color: rgba(255, 0, 0, 0.5); /* 배경만 반투명, 글자는 선명 */
}

실제 코드로 비교하자면 이렇다.

배경은 투명한데 글자는 잘 보여야 하는 경우에는 rgba()를 사용하고, 마우스를 올리면 요소 전체가 살짝 흐려지는 효과를 줄 때는 opacity를 쓴다.

생활코딩 CSS 수업 영상: 타이포그래피 text-align

이 영상은 글을 정렬하는 CSS 속성에 관한 영상이다.

영상의 길이도 짧고 딱히 어려운 내용도 없기 때문에 글로 정리하지는 않고 넘어가겠다.

오늘의 포스트는 여기까지다.

다음 포스트

CSS 폰트 속성, font-family, weight, line-height와 단축 속성 사용법

글꼴, 두께, 줄 간격 조절까지 CSS 폰트 제어의 모든 것을 정리했습니다. 폰트 부재를 대비하는 font-family의 폴백 시스템과 가독성을 결정하는 line-height 설정법, 복잡한 속성을 한 줄로 합쳐 쓰는 font 단축 속성의 순서 규칙까지 확인해 보세요.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.