·2분 읽기
웹 디자인 색상 코드 변환 가이드 - HEX, RGB, HSL 한번에 이해하기
디자이너가 준 색상 코드가 HEX인데 CSS에서 RGB가 필요할 때, 헷갈리지 않게 변환하는 방법을 정리했어요.
🎨
색상 변환기 바로 사용하기
HEX, RGB, HSL 색상 코드를 실시간 변환
→
색상 코드가 왜 이렇게 여러 개일까?
웹 개발하다 보면 같은 빨간색인데 표현 방식이 다 달라서 헷갈리죠?
- HEX: #FF0000
- RGB: rgb(255, 0, 0)
- HSL: hsl(0, 100%, 50%)
전부 같은 빨간색이에요. 그런데 왜 이렇게 여러 가지가 있을까요?
HEX는 디자인 툴에서 주로 쓰이고, RGB는 CSS와 프로그래밍에서, HSL은 색상 조절이 직관적이라 UI 작업에서 많이 써요. 상황에 따라 필요한 형식이 다르거든요.
HEX, RGB, HSL 쉽게 이해하기
각 색상 체계를 쉽게 설명해드릴게요:
HEX (16진수): #RRGGBB 형태예요. R(빨강), G(초록), B(파랑) 값을 16진수로 표현한 거예요. 00이 가장 어둡고 FF가 가장 밝아요.
RGB (빨강-초록-파랑): rgb(0~255, 0~255, 0~255) 형태예요. 세 가지 빛을 섞어서 색을 만드는 방식이에요. 모니터가 빛을 쏘는 원리와 같아요.
HSL (색상-채도-명도): hsl(0~360, 0~100%, 0~100%) 형태예요. 색상환에서 각도를 골라서 색을 정해요. 사람의 직관과 가장 가까워요.
저는 개인적으로 HSL을 좋아해요. '이 색을 좀 더 밝게' 하려면 명도 값만 올리면 되거든요.
Toolkio 색상 변환기로 바로 변환하기
Toolkio 색상 변환기는 하나만 입력하면 나머지를 전부 보여줘요:
1. toolkio.com에서 색상 변환기 선택
2. HEX, RGB, HSL 중 아무거나 입력
3. 나머지 형식이 자동으로 변환돼요
4. 색상 미리보기도 바로 확인
디자이너한테 #3B82F6 받았는데 CSS에서 투명도가 필요하면? RGB로 변환해서 rgba(59, 130, 246, 0.5) 이렇게 쓰면 돼요.
매번 구글에 'HEX to RGB' 검색할 필요 없이 Toolkio 즐겨찾기 해두세요.
실무에서 바로 쓰는 색상 팁
웹 디자인에서 색상 다룰 때 알아두면 좋은 팁이에요:
- 투명도가 필요하면 RGBA 사용: rgba(255, 0, 0, 0.5)로 반투명 처리
- 색상 톤 조절은 HSL이 편해요: 명도(L)만 바꾸면 같은 계열의 밝은/어두운 색을 만들 수 있어요
- CSS 변수에 HSL 저장하면 테마 변경이 쉬워요
- 접근성 체크: 배경과 글자 색상의 대비 비율이 4.5:1 이상인지 확인하세요
지금 작업 중인 프로젝트의 주요 색상 코드를 Toolkio에서 변환해보세요. HEX, RGB, HSL을 한눈에 정리할 수 있어요.