웹 개발을 하다 보면 자주 쓰는 색상들이 있습니다. 이 색상들의 HEX, RGB 값을 외워두면 작업 속도가 빨라집니다. 자주 사용하는 색상 코드와 활용 팁을 정리했습니다.
자주 쓰는 기본 색상
검정(#000000), 흰색(#FFFFFF), 회색(#808080, #CCCCCC, #333333), 빨강(#FF0000), 파랑(#0000FF). 회색은 R=G=B일 때 나오며, 숫자가 클수록 밝습니다.
부트스트랩 기본 색상
Primary(#007BFF), Success(#28A745), Danger(#DC3545), Warning(#FFC107), Info(#17A2B8). 이 색상들은 사용자에게 익숙해서 일관된 UX를 제공합니다. 색상 변환기로 이 값들을 RGB나 HSL로 변환해두면 편리합니다.
투명도 적용하기
rgba(0, 0, 0, 0.5)처럼 알파값을 추가하면 반투명 효과를 낼 수 있습니다. 0은 완전 투명, 1은 완전 불투명입니다. 오버레이나 그림자에 자주 사용됩니다.
색상 종류별 실제 값
검정 계열: #000000, #111111, #222222, #333333. 흰색 계열: #FFFFFF, #FAFAFA, #F5F5F5, #EEEEEE. 회색 계열: #9E9E9E, #757575, #616161. 이런 기본 색상들을 외워두면 빠른 프로토타이핑에 유용합니다. 색상 변환기에서 RGB, HSL 값도 함께 확인해두세요.
Material Design 색상
Google의 Material Design 색상 시스템도 참고할 만합니다. 각 색상이 50부터 900까지 체계적으로 정의되어 있어서 일관된 UI를 만들기 좋습니다. 공식 가이드에서 HEX 값을 확인할 수 있습니다.
CSS 변수와 함께 사용
자주 쓰는 색상을 CSS 변수로 정의해두면 한 곳만 수정해도 전체에 반영됩니다. :root { --color-primary: #3B82F6; } 형태로 정의하고 var(--color-primary)로 참조하세요.
마무리 체크
색상 작업이 끝나면 다양한 환경에서 테스트하세요. 다른 모니터, 다른 브라우저, 모바일 기기에서 확인합니다. 색상 변환기에서 기준 색상을 저장해두면 나중에 참고할 수 있습니다.