CSS 색상 코드 #FFFFFF가 대체 무슨 뜻? HEX·RGB 10분 만에 읽는 법

Claude Code에 “파란 버튼 하나 만들어줘”라고 하면, 코드 파일 안에 background-color: #3498db; 같은 암호가 생겨요. 코딩을 모르는 눈에는 그냥 외계어처럼 보이죠. 그런데 결론부터 말하면, CSS 색상 코드는 빨강·초록·파랑 빛을 얼마나 섞을지 숫자로 적어둔 약속일 뿐이라 구조만 알면 10분 안에 읽을 수 있어요. 심지어 코드를 못 읽어도 프롬프트로 “하늘색으로 바꿔줘”라고 말하면 색은 바뀌고요. 이 두 가지, 그러니까 말로 색을 바꾸는 요령과 코드를 읽는 눈을 같이 정리해볼게요.

• CSS 색상 코드, 정체는 빛의 레시피예요
• HEX 코드 읽는 법, # 뒤 여섯 글자의 비밀
• RGB와 RGBA, 255가 계속 나오는 이유
• HSL까지 알면 ‘조금만 연하게’를 숫자로 말해요
• 복사해서 바로 쓰는 색상 코드 표
• 원하는 색을 찾아주는 무료 도구 4가지
• Claude Code에는 이렇게 말하면 돼요
• 이럴 땐 어떻게? 상황별 Q&A

CSS 색상 코드, 정체는 빛의 레시피예요

모니터 화면의 점(픽셀) 하나하나는 빨강, 초록, 파랑 세 가지 빛으로 색을 만들어요. 세 빛을 각각 얼마나 켤지 0부터 255까지 숫자로 정하면 하나의 색이 완성되죠. 256 × 256 × 256, 그러니까 약 1,677만 가지 조합이 가능해요.

CSS 색상 코드는 그 레시피를 적는 방법이에요. #3498db 같은 HEX 코드, rgb(52, 152, 219) 같은 RGB 표기 모두 결국 같은 정보를 다른 형식으로 쓴 것뿐이에요. 요리로 치면 같은 레시피를 그램 단위로 쓰느냐, 컵 단위로 쓰느냐 차이죠.

그럼 굳이 읽을 줄 알아야 할까요? Claude Code 같은 AI 도구를 쓰면 몰라도 색은 바꿀 수 있어요. 다만 읽을 줄 알면 “왜 이 색이 나왔는지”가 보이고, “조금만 더 연하게”를 숫자로 정확히 말할 수 있어서 AI와 주고받는 횟수가 확 줄어요. 그 차이가 생각보다 커요.

HEX 코드 읽는 법, # 뒤 여섯 글자의 비밀

가장 자주 보게 되는 형태가 #으로 시작하는 HEX 코드예요. # 뒤 여섯 글자를 두 글자씩 끊으면 빨강, 초록, 파랑 순서가 돼요. #3498db라면 34가 빨강, 98이 초록, db가 파랑의 양이에요.

숫자에 a, b 같은 알파벳이 섞이는 이유는 16진수를 쓰기 때문이에요. 한 자리에 0~9 다음으로 a~f까지 넣어 16가지를 표현하고, 두 자리를 붙이면 16 × 16 = 256가지가 되죠. 그래서 00이 0, ff가 255예요. 대소문자는 구분하지 않아서 #FF0000과 #ff0000은 같은 색이에요.

이 구조만 알면 감으로 읽는 게 가능해져요. #ff0000은 빨강만 최대치니까 순수한 빨강이고, #87ceeb는 파랑 자리(eb=235)가 가장 크고 전체적으로 값이 높으니 밝은 하늘색이겠구나 하고 짐작할 수 있어요. 여섯 자리가 모두 같으면(#777777처럼) 회색 계열이고요.

초보자가 자주 헷갈리는 #fff는 #ffffff의 축약형이에요. 여섯 자리가 aabbcc처럼 두 자리씩 쌍을 이루면 각 쌍을 한 글자로 줄일 수 있어요. #fab은 #ffaabb와 같은 색이죠. 반대로 #3498db처럼 쌍이 안 맞으면 줄일 수 없어요. 요즘은 #87ceeb80처럼 8자리도 쓰는데, 마지막 두 자리는 투명도예요. 80이면 대략 50% 투명이 돼요.

RGB와 RGBA, 255가 계속 나오는 이유

rgb(135, 206, 235)처럼 괄호 안에 숫자 세 개를 쓰는 방식도 있어요. 이건 #87ceeb와 완전히 같은 색이에요. 16진수 87을 10진수로 바꾸면 135, ce는 206, eb는 235거든요. 색상표마다 255라는 숫자가 계속 나오는 이유도 여기 있어요. 두 자리 16진수의 최대값 ff가 곧 255니까요.

변환을 직접 계산할 필요는 전혀 없어요. 구글에 rgb 색상 코드 변환이라고 검색하면 나오는 변환기나 컬러 피커가 HEX와 RGB를 동시에 보여줘요. 두 표기는 정보가 같으니 어느 쪽을 써도 되고, 실무에서는 짧은 HEX를 더 많이 쓰는 편이에요.

RGB가 진짜 힘을 발휘하는 건 투명도가 필요할 때예요. rgba(0, 0, 0, 0.5)처럼 네 번째 값을 추가하면 되는데, 0이 완전 투명, 1이 완전 불투명이에요. 사진 위에 반투명 검정을 깔아 글자를 또렷하게 만드는 오버레이가 대표적인 활용처죠.

HSL까지 알면 ‘조금만 연하게’를 숫자로 말해요

HEX와 RGB는 기계 친화적인 표기라서, 사람이 “조금 더 연한 파랑”을 만들려면 세 숫자를 어떻게 바꿔야 할지 감이 안 와요. 그래서 나온 게 hsl() 표기예요. hsl(색상, 채도, 밝기) 순서로, 사람이 색을 떠올리는 방식 그대로 적어요.

색상은 색상환의 각도라 0이 빨강, 120이 초록, 240이 파랑이고 하늘색 계열은 200 근처예요. 채도는 0%면 회색, 100%면 쨍한 원색이고, 밝기는 0%가 검정, 100%가 흰색이에요. 예를 들어 hsl(200, 70%, 50%)이 선명한 하늘색이라면, 밝기만 올린 hsl(200, 70%, 85%)는 같은 계열의 파스텔 톤이 돼요.

이게 실전에서 유용한 이유가 있어요. 버튼의 기본 색과 마우스를 올렸을 때 색을 만들 때, 색상과 채도는 고정하고 밝기만 10%p 정도 조절하면 자연스러운 한 쌍이 나와요. 파스텔 색상코드를 찾아 헤맬 필요 없이, 원하는 색상 각도에 밝기 80~90%를 주면 직접 만들 수도 있고요.

복사해서 바로 쓰는 색상 코드 표

자주 찾게 되는 색들을 HEX와 RGB로 함께 정리했어요. 코드 부분만 복사해서 Claude Code 프롬프트나 CSS에 그대로 붙여 쓰면 돼요.

숫자 대신 영어 이름을 그대로 쓰는 HTML 컬러 네임도 있어요. background-color: skyblue;처럼 skyblue, tomato, gold 같은 이름 약 140개가 코드 없이 동작해요. 이름 전체 목록은 MDN 문서에서 확인할 수 있어요. 그 밖에 transparent는 완전 투명, currentColor는 그 요소의 글자색을 그대로 따라가는 특수 키워드라는 것도 알아두면 코드 읽을 때 당황하지 않아요.

원하는 색을 찾아주는 무료 도구 4가지

머릿속의 색을 코드로 바꿔주는 도구는 이미 충분히 많아요. 전부 무료고, 설치도 필요 없어요.

첫째, 구글 검색창에 color picker라고 치면 검색 결과 맨 위에 컬러 피커가 바로 떠요. 슬라이더로 색을 고르면 HEX, RGB, HSL 값을 동시에 보여주고 변환기 역할까지 해줘요. 가장 빠른 방법이라 이것부터 손에 익히는 걸 권해요.

둘째, 크롬 개발자 도구의 스포이드예요. 마음에 드는 사이트에서 F12를 누르고 요소를 선택한 뒤, 스타일 창의 색상 네모를 클릭하면 컬러 피커와 스포이드가 열려요. 화면 위 아무 지점이나 찍으면 그 색의 HEX 값을 알려주죠. 다른 사이트의 배색을 참고할 때 자주 쓰는 방법이에요.

셋째, 사진 속 색이 필요할 때는 Adobe Color의 테마 추출 기능이 편해요. 이미지를 올리면 사진에서 어울리는 색 다섯 개를 뽑아 코드로 보여줘요. 넷째, 조합 자체가 고민이라면 Color Hunt나 Coolers 같은 팔레트 사이트에서 이미 검증된 4색 조합을 통째로 가져오는 게 실패 확률이 낮아요.

특히 대비는 놓치기 쉬운 부분이에요. 흰 배경에 연회색 글자는 화면에서는 세련돼 보여도 실제로는 읽기 힘들어서, 접근성 검사에서 가장 자주 걸리는 조합이에요. 구글에 contrast checker를 검색하면 두 색의 대비 비율을 바로 확인할 수 있어요.

Claude Code에는 이렇게 말하면 돼요

이제 실전이에요. 색상 코드를 하나도 몰라도 되는 방법부터, 코드를 아는 사람이 쓰는 방법까지 단계별로 정리하면 이래요.

이 과정에서 가장 자주 막히는 지점은 색 이름의 해석 차이예요. 같은 하늘색이라도 skyblue(#87ceeb)를 고를 수도, 더 연한 lightblue를 고를 수도 있거든요. 두세 번 왕복해도 원하는 톤이 안 나오면, 도구로 정확한 코드를 찾아 3단계 방식으로 지정하는 게 결국 가장 빨라요. 반대로 “대충 밝고 산뜻하게” 정도의 요구라면 1~2단계만으로 충분하고요.

이럴 땐 어떻게? 상황별 Q&A

Claude Code가 바꿔준 색이 미묘하게 마음에 안 들어요. 뭐라고 다시 말하죠?

색 이름 대신 방향을 말하는 게 답이에요. “더 연하게 / 더 진하게 / 채도를 낮춰 차분하게 / 노란 기를 빼줘”처럼 조정 방향을 주면 원하는 톤에 빠르게 수렴해요. 두세 번 안에 안 잡히면 컬러 피커에서 정확한 HEX 값을 찾아 코드로 지정하세요.

사진 속 배경색이 마음에 드는데 코드를 어떻게 알아내죠?

Adobe Color에 이미지를 올리거나 크롬 개발자 도구의 스포이드를 쓰면 돼요. 웹에 떠 있는 이미지라면 F12로 스포이드를 열어 그 지점을 클릭하는 쪽이 빠르고, 내 컴퓨터에 있는 사진이라면 Adobe Color의 테마 추출이 색 조합까지 함께 뽑아줘서 편해요.

어떤 코드는 #fff고 어떤 코드는 #ffffff예요. 뭐가 맞는 건가요?

둘 다 맞고, 완전히 같은 색이에요. 여섯 자리가 두 자리씩 쌍을 이루면 세 자리로 줄여 쓸 수 있다는 축약 규칙일 뿐이에요. Claude Code가 만든 코드에 두 형태가 섞여 있어도 오류가 아니니 그대로 둬도 되고, 통일하고 싶으면 “색상 코드를 여섯 자리로 통일해줘”라고 요청하면 돼요.

배경을 반투명하게 했더니 글자까지 같이 흐려져요.

opacity 속성이 적용된 상황이라 그래요. opacity는 요소 안의 글자와 이미지까지 통째로 투명하게 만들거든요. 배경만 비치게 하려면 background-color를 rgba(255, 255, 255, 0.7)처럼 rgba 값으로 바꿔달라고 요청하세요. 글자는 선명하게 남고 배경만 투명해져요.

RGB 값을 받았는데 HEX로 바꿔야 하는 상황이에요.

변환기에 맡기면 3초면 끝나요. 구글에서 color picker를 열어 RGB 숫자를 입력하면 HEX 값이 같이 표시돼요. CSS 입장에서는 두 표기 모두 유효하니 급하면 rgb() 형태 그대로 붙여넣어도 정상 동작한다는 점도 기억해두세요.

참고자료

• MDN Web Docs – CSS color 값 : 색상 표기법 전체와 컬러 네임 목록을 정리한 공식 문서예요.
• W3C CSS Color Module Level 4 : CSS 색상 표준을 정의하는 W3C 공식 명세예요.
• Adobe Color : 이미지에서 색을 추출하고 색상환 기반 조합을 만들 수 있는 공식 무료 도구예요.
• W3C 웹 접근성 이니셔티브(WAI) : 색 대비 기준을 포함한 웹 접근성 지침을 제공하는 공식 페이지예요.

코드 파일 속 #3498db가 외계어로 보이던 순간의 답답함, 이제는 꽤 풀렸을 거예요. 색상 코드는 빨강·초록·파랑의 양을 적은 숫자일 뿐이고, HEX·RGB·HSL은 같은 정보를 다르게 쓰는 방식이라는 것만 잡아두면 나머지는 도구가 다 해줘요. 정리하면 이 순서를 권해요. 처음엔 프롬프트로 말해서 바꾸고, 마음에 드는 색이 나오면 스포이드로 코드를 확인해두고, 다음부터는 그 코드로 정확히 지정하기. 이 루틴만 몸에 붙으면 색 때문에 막히는 일은 거의 없어질 거예요.

함께 보면 좋은 글

• 클로드 코드 오류 로그, 알고 보니 가장 정확한 힌트였어요 (실제 해결 5가지)
• 랜딩페이지 제작, 이게 정말 될까? 코딩 모르는 제가 AI로 3일 만에 만든 기록