Hex, RGB, HSL: 우리를 위한 빠른 가이드
그냥 적당한 파란색이 필요한 개발자와 비디자이너를 위한 색상 코드 해독.
디자이너가 색상을 보내줘: #3B82F6. 어떤 라이브러리엔 RGB로 필요해. 아니면 약간 어두운 버전이 필요해. 또는 모니터에서 왜 다르게 보이는지 알아내려고 해.
색상 시스템은 복잡하지 않은데, 아무도 잘 설명 안 해. 실제로 알아야 할 것만 알려줄게.
HEX: 웹 표준
#3B82F6는 이렇게 분해돼:
3B= 빨강 (십진수 59)82= 초록 (십진수 130)F6= 파랑 (십진수 246)
각 쌍은 00에서 FF까지의 16진수 (십진수로 0-255). 많을수록 = 밝아. #000000은 검정. #FFFFFF는 흰색.
축약형이 있어: #FFF = #FFFFFF, #09C = #0099CC. 세 글자는 각각 두 배로 확장돼 여섯 글자가 돼.
RGB: 명확한 것
rgb(59, 130, 246)은 같은 색인데 다르게 쓴 거야. 빨강 59, 초록 130, 파랑 246.
어떤 포맷은 퍼센트를 원해: rgb(23%, 51%, 96%). 같은 거, 다른 표기법.
RGBA는 투명도를 추가해: rgba(59, 130, 246, 0.5)는 그 파란색을 50% 불투명도로.
HSL: 실제로 유용한 것
hsl(217, 91%, 60%)는 색상을 다르게 설명해:
- 색조 (217): 색상환의 위치. 0=빨강, 120=초록, 240=파랑.
- 채도 (91%): 강도. 0%=회색, 100%=선명.
- 명도 (60%): 밝기. 0%=검정, 50%=순수, 100%=흰색.
HSL이 중요한 이유: 색상 조정이 직관적이야.
더 어두운 버전 원해? 명도 낮춰. 덜 선명한 버전 원해? 채도 낮춰. 같은 "느낌"의 완전히 다른 색 원해? 색조 바꾸고, 채도랑 명도는 유지.
HEX나 RGB에선 이런 조정이 계산이나 추측이 필요해. HSL에선 단일 숫자 변경이야.
그 사이 변환
숫자들은 같은 색을 다르게 나타내. #3B82F6 = rgb(59, 130, 246) = hsl(217, 91%, 60%).
특정 포맷이 필요할 때 변환기 써. 대부분의 디자인 도구는 셋 다 보여줘. CSS는 셋 다 받아.
흔한 상황
"이 색 더 어둡게" HSL로 변환, 명도 10-20% 감소, 다시 변환.
"호버 상태 변형이 필요해" HSL로 변환. 버튼: 60% 명도. 호버: 55%. 활성: 50%.
"이 색 희미해 보여" 채도가 너무 낮을 수 있어. HSL에서 증가시켜봐.
"브랜드 색과 정확히 일치" 브랜드 가이드라인에서 hex 코드 받아. 눈대중 하지 마.
"색이 다른 화면에서 다르게 보여" 색상 보정 지옥에 온 걸 환영해. 같은 hex 코드 써; 모니터가 다양하다는 걸 받아들여.
접근성 노트
색상 대비가 중요해. 밝은 배경에 밝은 텍스트 = 많은 사람들한테 읽을 수 없어.
비율이 있어: 일반 텍스트는 4.5:1, 큰 텍스트는 3:1. 이걸 확인하는 도구가 있어. 확실하지 않으면 대비가 높은 게 나아.
그 #3B82F6 파란색에 흰 텍스트? 대비 비율이 약 4.6:1—간신히 통과. 본문 텍스트엔 더 어두운 파란색이 안전할 거야.
디자이너일 필요 없어. 그냥 포맷 간 변환할 수 있고 HSL이 조정을 쉽게 만든다는 걸 알면 돼. 나머지는 세부사항이야.